Develop Overview

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, 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 project to use App Designer, you can use its GUI layout editor 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*, Ionic* 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 convert the project to use the App Designer and its layout GUI editor by using the Projects tab button to the right of UI Framework to convert the UI framework to App Framework, a 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.

Run My App runs your app on USB-connected Android* 4+ or Apple iOS* 6.1+ mobile device(s) or on virtual devices in the Intel XDK device emulator. Changes appear after you save project files and reload/restart your app.
Live Layout Editing lets you view your app on WiFi-connected Android and/or iOS device(s) or (for Standard HTML5 projects) in a browser window. Changes appear immediately after you make edits using the built-in Intel XDK code editor, or after you save project files using an external editor.
Connected Devices shows the local devices connected by USB cable or WiFi to your development system.
For information about using Live Development, see Using Live Development in the Intel XDK.

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:

Resizing and Minimizing Panes in the Develop Tab

You 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.

Resources


For more complete information about compiler optimizations, see our Optimization Notice.