Using the Develop Tab in the Intel® XDK

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 initiate live development preview activities and explore web services using this tab. 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 “(+) Start a New Project” button at the bottom of 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 Ultrabook^TM 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– or, use App Starter to learn how to build App Framework applications by hand (by reviewing the code that App Starter creates).

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.

If you are unfamiliar with the Brackets HTML5 code editor built into the Develop tab, read Using the Code Editor in the Intel XDK Develop Tab.

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 either on USB-connected mobile Android* 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 Apple iOS* device(s) or 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 devices connected by USB cable or WiFi to your development system.

Resizing and Minimizing Panes in the Develop Tab

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

Resources

• 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 and links to related documentation, see the Intel XDK Overview
• For information about using Live Development capabilities, see Using Live Development in the Intel XDK.
• For information about using the built-in code editor and the file tree, see Using the Code Editor in the Intel XDK Develop Tab.
• For information about exploring and integrating web services, see Exploring and Integrating Web Services in the Intel XDK.
• For a short tutorial about using the Intel XDK development environment, see the Tutorial: Get Started with the Intel XDK.