The Develop tab provides a full view of the files in your project directory. You can edit project files with the built-in code editor or with your favorite code editor, alongside the Intel® XDK. You can also use this tab to initiate live development preview activities, explore web services, and view game assets (for game projects). The Intel XDK tools automatically detect when project files are changed (as the result of a save when using your external editor) and will prompt you if additional actions are required due to changes to project files.
Code Editor and GUI Designer Tools
The Develop tab provides two views: a Code editor view and a GUI Design view. The Code view shows the files in your project directory, available web services, the code editor window, and a Live Development pane. If you created your app using App Designer (or App Starter), you can access its GUI layout editor in the Design view.
To switch between the GUI Design view and Code view in the Develop tab when editing an HTML file, use the CODE and DESIGN buttons in the upper-left above the file tree. The screen below shows these buttons and the Design view for App Designer:
The Brackets code editor and GUI design tools are all optional tools. You are NOT required to use them to build an Intel XDK hybrid HTML5 mobile web app. You are welcome to use your favorite code editor and/or favorite user interface layout tools. You can also implement your app's UI layout manually. The Live Layout Editing feature does require the use of the Brackets editor, but no other features of the Intel XDK are directly dependent on these tools. Thus, if you have an existing web app that you are translating into a hybrid mobile web app, you can simply import that layout and code into a project and continue to work directly on the source, you do not need to "shoehorn" an existing app into App Designer.
A Note about App Designer and App Starter
If you created your app using either App Designer or App Starter (using the “(+) New Project” button in the Projects tab), you can use these GUI layout editors with the Develop tab's Design view.
- For existing or new projects, you can use App Designer to build a UI layout based on a responsive grid system and one of several UI widget library frameworks: App Framework, Bootstrap 3*, jQuery Mobile*, or Topcoat*. App Designer utilizes a media query grid system for creating responsive web UI layouts. This media query grid system enables your app to resize and adapt to portrait and landscape views on phones, tablets and even UltrabookTM devices. To get started, see the App Designer Videos page.
- For projects previously created using App Starter, you can either convert the project to use the App Designer and its layout GUI editor, or continue to use the App Starter GUI layout editor. The creation of new projects using App Starter is no longer supported. For existing projects, you can use App Starter to build a UI using the App Framework mobile-optimized UI library.
Don’t forget to check out the App Framework UI Components documentation page and the App Framework CSS Style Builder for more information about the App Framework UI library, which has been optimized for use with HTML5 hybrid mobile apps.
Code Editor Capabilities
You can edit project files with the built-in Brackets* code editor or with your favorite code editor, alongside the Intel® XDK. The Intel XDK tools automatically detect when project files are changed (as the result of a save when using your external editor) and will prompt you if additional actions are required due to changes to project files.
To get familiar with the capabilities of the Brackets HTML5 code editor built into the Develop tab, read Using the Code Editor.
NOTE: The built-in Brackets code editor includes a curated list of Brackets extensions. From the Code view, choose File > Extension Manager… to see the list of editor extensions that are available. There is no mechanism available to include your own custom Brackets extensions.
Web Service Capabilities
In the Code view below the file tree, the Intel XDK lets you explore a collection of third-party web service APIs (cloud services). In addition to the built-in third-party web services, the Develop tab helps you integrate other existing web services for use within the Intel XDK, such as those developed specifically for your app. For more information, see Exploring and Integrating Web Services in the Intel XDK.
Live Development Capabilities
The Live Development Tasks pane appears on the right side of the Code view in the Develop tab. This pane makes the process of previewing your project's code in a browser or device quick and efficient. The following Live Development Tasks pane shows expanded Run My App, Live Layout Editing, and Connected Device areas.
Managing Game Assets
For certain projects created or imported to use certain HTML5 game engines, a Game Asset Manager pane appears on the left. This pane displays the asset files associated with the active project in a file tree. You can also display a gallery view of game assets, where you can render and inspect selected assets. For information about:
- HTML5 game development in the Intel XDK, see Getting Started with HTML5 Game Development Using the Intel XDK.
- Using the Game Asset Manager, see the page and video at Using the Game Asset Manager.
Resizing and Minimizing Panes in the Develop TabYou can resize or minimize panes to make more room for the parts of the Develop tab you want to use:
- In the Design view, to hide the vertical pane on the left that contains the file tree and Web Services, click the button in the upper-left area. To show this hidden pane, click the button.
- In either view's left vertical pane, you can enlarge the room for the file tree or Web Services by either dragging the border between these two areas (above Web Services), or by clicking the minus or plus sign to the right of Web Services.
- In the Code view, to make the left vertical pane wider or narrower, drag the boundary between it and the code editor to the right or left.
- In the Code view, to hide the Live Development Tasks pane on the right, click the button to the right of Live Development Tasks. To show this hidden pane, click the button.
- In the Code view, to hide the Game Asset Manager pane on the left, click the button to the right of Game Asset Manager. To show this hidden pane, click the button.
- For an overview of the Intel XDK and its related software, access the Intel® Developer Zone at: http://xdk.intel.com
- For a quick summary of the Intel XDK product features, see the Intel XDK Overview
- For information about using Live Development capabilities, see Using Live Development in the Intel XDK.
- For an overview of Intel XDK debugging and testing options, see Debug and Test Overview.
- For information about using the built-in code editor and the file tree, see Using the Code Editor in the Develop Tab.
- For information about exploring and integrating web services, see Exploring and Integrating Web Services in the Intel XDK.
- For information about developing HTML5 games in the Intel XDK, see Getting Started with HTML5 Game Development Using the Intel® XDK.
- For a short tutorial about using the Intel XDK development environment, see the Tutorial: Get Started with the Intel XDK.