Using the Develop Tab

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 either App Starter or App Designer, you can access these GUI layout editors in the Design view. To switch between these views when editing an HTML file, use the [ CODE | DESIGN ] buttons.

The Brackets code editor and App Designer (and App Starter) 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" 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 Starter or App Designer (e.g., using the “(+) Start a New Project” button at the bottom of the Projects tab), you can use these GUI layout editors on the Develop tab's Design view.

• 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).
• With App Designer you can build a UI based on a responsive grid system and one of several UI widget libraries, including the App Framework UI library.

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 Documentation and Tutorial page.

When you open an HTML file in the Develop tab, if that project was created using either App Designer or App Starter, use the [ CODE | DESIGN ] buttons above the file project tree to switch between the Code and the Design (GUI) views.

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 Editor in the Intel® XDK Develop Tab.

NOTE: The built-in Brackets editor includes a curated list of Brackets extensions. From the code editor menu, 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 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.

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 and Documentation Page
• For information about using Live Development capabilities, see Using Live Development in the Intel XDK.
• For information about using the built-in editor, see Using the 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.