Code Editor and UI Designer
This tab provides a full view of the files in your project directory. 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 read Using the Editor in the Intel® XDK Develop Tab for a tutorial introduction to the built-in editor.
NOTE: the built-in Brackets editor includes a curated list of Brackets extensions. From the 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.
A Note about App Designer and App Starter
If you create 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 will also have access to these GUI layout editors on the Develop tab (via the “[ CODE | DESIGN ]” buttons).
- 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 UltrabookTM 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, the “[ CODE | DESIGN ]” buttons appear above the file project tree, allowing you to switch between the Editor and the Design (GUI) views. Use the CODE and DESIGN buttons to switch between these two views of your project (while selecting the index.html file in your project).
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.
Live Development
The Live Development Manager panel, on the right side of the Develop tab, is designed to make the process of previewing your code in a browser or on a device more efficient. This feature is currently in a preview state, so many features are still in development and subject to change.
There are two parts to Live Development: "Live Preview" - which displays your edits in a separate browser window, and "Preview on Devices" for previewing your app on a real device.
- Live Preview offers the ability to see your edits simultaneously rendered in a Chrome browser window as you edit your app in the built-in Brackets editor.
- Preview on Devices gives you a way to quickly review changes in your layout code on a connected device that is running App Preview.
Live Preview
Live Preview is based directly on the Brackets Live Preview feature. It works best as a means to test static HTML and CSS pages (CSS and HTML layout code). It does not work well with JavaScript libraries or frameworks that actively modify the DOM (see this Brackets blog for a quick intro). Thus, it has not been enabled for use with the Intel XDK UI design tools (App Designer and App Starter). Live Preview requires the Chrome (not Chromium) browser be installed on your development system in order to function. When activated it will automatically start a Chrome browser instance for immediate preview of your application.
Some Live Preview limitations include:
- The Chrome browser does not support device APIs (such as Cordova and Intel XDK).
- Only HTML and CSS that affect layout and appearance should be tested, JavaScript that modifies the DOM will not work well.
- Device scaling and layout (such as portrait and landscape) are not directly supported (you can use the Chrome "Emulation" tab in the "Console Drawer" to affect preview layout and the size of the viewport, if desired).
Preview on Devices
Preview on Devices lets you quickly modify your project and test your app on real devices, with all file types. It requires a real device running App Preview. As you make changes to the files in your project your changed files are automatically pushed to your device so you can see how your app runs on a real device. At this time, this feature only works with Android* devices connected to your development system via a USB cable (see the Debug tab for more information about connecting via USB). App Preview is a free download for Android, iOS* and Windows* 8 devices and is available from their respective app stores.
Some Preview on Device limitations include:
- Changed files are only transmitted to the preview device when files are saved.
- This feature currently requires an Android 4.x device connected via USB.
- Android App Preview Crosswalk must be installed on your Android 4.x device (see the Debug tab for more information about connecting via USB).
- Your code runs within the Crosswalk for Android container, not the standard Intel XDK container, so the behavior and appearance may be different when compared to running your application within App Preview via the Test tab.
Note that the limitations above, are limitations to the preview editions of these features in the current version of the Intel XDK. Future releases of the Intel XDK will address these limitations; in addition, new features may be added and existing features may be removed.