Using the Editor in the Intel® XDK Develop Tab

Contents:

Legal Information
Opening, Saving, and Adding a File
A Note about the App Designer and App Starter
Customizing Your Editing Environment
Standard Editing Keys for Daily Use
Sample Output from a Find Command
File/Navigation Features
Using Code Autocompletion
Using Quick Edit
Using Quick Open
Resources

The Develop tab of Intel® XDK NEW (Intel XDK) lists those files associated with the active project in the left sidebar. After you open or create a project, click the Develop tab:

 - When editing html files associated with certain projects, the toolbar displays CODE and DESIGN buttons to let you switch between the Editor view and GUI Design view. The GUI Design view appears for App Designer and App Starter projects only.

  - After you open and modify a file, a Working Files section appears above the project name. This section is equivalent to a "tab view" in other editors. To add a file immediately to the Working Files section, double-click its name in the left sidebar file tree.

  - The left sidebar below the project name shows all files associated with the project in a file tree.

  - The Editor view (shown) appears for most files. After you open html files associated with certain projects, a GUI view may appear instead - click the CODE button to switch to the Editor view (see A Note about the App Designer and App Starter).

This built-in editor in the Develop tab is tightly integrated with the Emulate tab. After you save a file in the Develop tab's built-in editor, that file can be  automatically reloaded when you click the Emulate tab. In contrast, if you save a modified file using an editor external to the Intel XDK NEW, you need to manually click the Reload button to update all files after clicking the Emulate tab. If you save a modified file using an editor external to the Intel XDK NEW, that file will be silently reloaded in the built-in editor when you open it. To control Emulator automatic reloading, use the Emulate tab settings. This Intel XDK NEW built-in editor is based on Brackets*.

Opening, Saving, and Adding a File

To open a project file for editing - such as index.html - click its name in the sidebar file tree. The selected file’s content appears.

To open and edit files not in the project's file tree, click the File > Open menu item (or keyboard short cut). Once opened, these non-project files will appear in the Working Files section.

After you modify the opened file, a Working Files section appears above the project name. To add a file immediately to the Working Files section, double-click its name.

To save a file, do one of the following:

• Click the File > Save menu item.
• On Microsoft Windows* systems, press Ctrl+S.
• On Apple Mac* systems, press Cmd+S.

To save the file with a different name or in different directory, click the File > Save As... menu item (or use the keyboard short cut Ctrl/Cmd+Shift+S).

When using File > Open or File > Save As..., you can import files or save files from other projects, such as JavaScript libraries, images, and so on.

Both the Working Files section and the file tree sidebar support context menus. To display the context menu, right click in the Working Files section and the file tree sidebar.

You can use the context menu to add a folder or file. To add a file to the project, right click in or below the file tree and select New File. To create the file in a specific directory, right click on the directory name, such as in the js directory:

A Note about the App Designer and App Starter

The Develop tab supports multiple views. If you created your app with either the App Starter or App Designer wizard, you will also have access to a GUI layout editor. If you are new to HTML5 app development, use the App Starter to quickly prototype using the App Framework mobile-optimized UI library. Otherwise, consider using App Designer if you are an experienced mobile app developer. App Designer will help you quickly build a responsive UI for your app. The App Designer layout is based on a media query driven grid system and your choice of one of several popular UI framework libraries. This gives your app the ability to resize and adapt to portrait and landscape views on different devices.

For projects created using App Designer and App Starter, when you open an HTML file in the Develop tab, the Design view appears. To switch between the Editor and the Design (GUI) views, click the CODE or DESIGN buttons.

For more information about the App Designer user interface layout tool, please see the App Designer tutorial.

Customizing Your Editing Environment

The screen above shows the file tree sidebar and line numbers. You can customize the editing window by using the View menu or its key combination shortcuts (with Microsoft Windows* systems, press Ctrl; with Apple Mac* systems, press Cmd):

To configure JSHint, create a .jshintrc file in the project root, as described at http://www.jshint.com/docs/. Unlike the standalone JSHint, only the .jshintrc file in the project root will be read for configuration settings.

Standard Editing Keys for Daily Use

The following table lists editing actions you might use every day. Most key combinations are used by other editors (with Windows systems, press Ctrl; with Mac systems, press Cmd).

In addition to the Edit menu, you can access several common functions from a context menu in the editor view. Select the line(s) of text, right click to display the context menu, and choose the menu item, such as Copy, Cut, Paste, and Select All.

Sample Output from a Find Command

This built-in editor provides many helpful visual cues. For example, press Ctrl/Cmd+F (Edit > Find) and type the search string <script. The editor highlights occurrences of <script and its scroll bar indicates where in the file the string occurs:

File/Navigation Features

You can right click in the file tree sidebar or Working Files section to display a context menu. To display the native OS file system's GUI interface (such as Microsoft Windows Explorer* or Apple Finder*), choose the Show in OS menu item. Similarly, the OS file system's GUI interface appears when you click File > Open or File > Save As... (or equivalent keyboard shortcuts).

This editor also provides advanced navigation features. The following table lists navigation or file actions (with Windows systems, press Ctrl; with Mac systems, press Cmd):

Using Code Autocompletion

This built-in editor displays options (hints) as you type HTML code, JavaScript code, or CSS code.

For code hints to appear while editing JavaScript* files, you may need to type a delimiter character and/or move the mouse pointer to a certain position for valid tag name parameter keywords, values, or files automatically appear. For example, if you only type intel.xdk no hints appear until you type the trailing period:

The provided code hints are based on the analysis of the files included in the project. Also, code hints are built-in for the JavaScript language itself, intel.xdk namespace, Apache Cordova* 2.9.0 API, jQuery library, and browser’s global objects. You can configure the JavaScript code autocompletion by placing .jscodehints file in the project root. For the format of this file, see https://github.com/adobe/brackets/wiki/JavaScript-Code-Hints#configuration.

With HTML tags you need to press Ctrl/Cmd+space or click Edit > Show Code Hint. For example:

On a new line, start typing <scr and press Ctrl/Cmd+space. The hint choice(s) appear in a context menu:
Scroll and click one of the displayed items. In this case we must choose script!
After you choose the tag name, type a space to view possible parameter keyword values:
Scroll to and click charset.
With the mouse cursor between the quotation mark characters, scroll to and click one of the displayed parameter values:
Scroll to and click utf-8 or a value needed for your app.
To enter another parameter, move the mouse cursor back to a space after the <script tag and press Ctrl/Cmd+space (Edit > Code Hint) to view the list of parameters again:
Scroll to and click type or a value needed for your app.
With the mouse cursor between the two quotation mark characters, scroll to and click a displayed parameter value, such as text/javascript.
After you have added all the parameters, close the <script tag by typing a > character.
The <script> tag is automatically terminated by an inserted </script> tag:

TIP: To enable the automatic display of parameters or parameter value hints (before you press Ctrl/Cmd+space for HTML code), you:

• Need to position the mouse cursor at the proper place so the editor knows what you want to do - especially if you edit an existing line. For example, to display a list of project images, type:
• May need to type a delimiter character to provide the proper syntax, such as a space character, quotation mark ("), period (.), or =. For example, to display image files, type <image src=" and press Ctrl/Cmd+space.

Using Quick Edit

Quick edit displays a pop-up editing window for the selected definition within the current window. It appears with a grey background and is limited to JavaScript (such as functions) and CSS code. The Quick Edit feature is available only at places where a corresponding definition is available.

For example, using the Towers of Hanoi demo app's index.html file, position the mouse pointer on the div shown below:

After you press Ctrl/Cmd+E or click Navigate > Quick Edit, the corresponding definition from the CSS file toh.css appears in a pop-up pane with a grey background, so you can view/edit that definition:

After you edit it, press Ctrl/Cmd+S to save the inlined pop-up file. To close the pop-up editor pane, press Esc or Ctrl/Cmd+E, or click Navigate > Quick Edit.

Similarly, when editing a JavaScript file, position the mouse pointer on a function reference (such as Create_Pins) and press Ctrl/Cmd+E or click Navigate > Quick Edit to display and edit the function's definition using Quick Edit. For example, when editing toh.js:

After you press Ctrl/Cmd+E or click Navigate > Quick Edit:

Using Quick Open

Use Quick Open to navigate quickly to various files, line numbers, or function definitions.

Press Ctrl/Cmd+Shift+O or click Navigate > Quick Open to display a pop-up pane in the upper right of the editing window. It initially displays a list of files:

You can type:

Resources

• For details about this Brackets-based editor, access the Brackets* editor documentation at: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets.
• For more information about the Intel® XDK NEW and its related software, access the Intel® Developer Zone at:  http://software.intel.com/html5/tools
• For a quick summary of the Intel® XDK NEW product and links to related documentation, see the Intel® XDK NEW Overview page.

329655-002US