Projects Overview

Contents:
  Viewing Project Information
  Types of Projects
  Enabling or Disabling Platform Targets in the Projects and Build Tabs
  Understanding Project Files, Project Path, and Source Directory
  Choose the Active Project
  Create a New Project
  Open an Intel XDK Project Not Listed in the Projects Tab
  Import an Existing App's Code Base
  Upgrade a Standard HTML5 Project to HTML5+Cordova
  Check and Update Cordova App Settings
  Resources

The Projects tab of the Intel® XDK lists those projects the Intel XDK is aware of on your development system. A project provides a container for your project files and associated settings.

Projects tab - shows selected project and its project information

The currently active project's name appears to the right of the Projects tab. The other Intel XDK tabs perform their operations on this active (selected) project.

A list of projects known to the Intel XDK appears on the left side of the screen (below YOUR INTEL® XDK PROJECTS). Click NAME or date last OPENED to sort your project list; click NAME or OPENED again to alternate between ascending and descending order.

View information about the active project in the palette on the right, just below Project Info.

Below Project Info, the build and app settings shown depend upon the project type of this project.

Viewing Project Information

To display project information about a project, click the project's name in the project list on the left. Important information in the Project Info section of the display, on the right, includes the project type, root path, source directory (within the project's root) and the UI framework (if this is an App Designer project). The example shown above shows a Standard HTML5 project type (a web app that does not use Apache Cordova* APIs). Use the buttons above in the Project Info area to:
  • Remove a project from the Intel XDK projects list by clicking . This does NOT delete the project files or project directory from your local file system, it simply removes it from the project list. You can add back it to the Projects tab list later.
  • Upgrade (convert) a Standard HTML project type to an HTML5+Cordova project type, by clicking the button.
  • Change the location of your project's source files within the project directory by clicking to the right of Source Directory.

Types of Projects

You choose a project type when you create a project from a template, demo/sample or by importing an existing HTML5 app code base. The project types are: Standard HTML5, HTML5+Cordova and Internet of Things Embedded Applications (Intel XDK IoT Edition only).
Example Screen Showing the Projects Tab Project Type and Description
Standard HTML5 project Standard HTML5
This project type uses HTML5 (JavaScript, HTML and CSS) and is restricted to W3C standard APIs; it does not support the use of Apache* Cordova JavaScript APIs (aka Cordova plugins). Use the Projects tab (as shown) to specify build settings, launch icons and splash screens for your app.

You can build and deploy your app as a packaged hybrid mobile app (without Cordova APIs) on Android Crosswalk*, Android*, Apple iOS* and Microsoft Windows 8* devices, or as a packaged web app.
HTML5+Cordova project HTML5+Cordova
The project uses HTML5 (JavaScript, HTML and CSS) and Apache Cordova* JavaScript APIs (via Cordova plugins).To enable Cordova APIs, add Cordova plugins and configure settings in the Projects tab (as shown) and include the cordova.js script tag exactly once in your index.html file. You can build and deploy a packaged hybrid mobile app for Crosswalk Android, Android, iOS and Windows 8 devices.

Advanced users can also use this project type to build for non-Cordova platforms by using feature detection to distinguish between Cordova APIs and standard HTML5 APIs. On the WEB AND PACKAGED APP TARGETS bar at the bottom of the Projects tab, click the platform buttons you wish to enable in the Build tab.
Internet of Things Embedded Application IoT Embedded Application
An Internet of Things project type consists of JavaScript* code (no HTML or CSS) intended for execution on a Node.js runtime platform. This project type is only recognized by the Intel XDK IoT Edition.

This project type requires an IoT "maker board" and is not built like mobile web apps for phones and tablets. So you do not need to specify build settings, launch icons and splash screens.
With a Standard HTML5 project type:
  • To build a hosted web or OS-specific app, specify build and other app settings in the Build tab after you select a target platform under BUILD AS A WEB APP.
  • To build a packaged app for Android, Crosswalk Android, iOS and Windows 8 devices, specify build and other app settings under HYBRID MOBILE APP BUILD SETTINGS in the Projects tab. Select a target platform under CORDOVA HYBRID MOBILE APP SETTINGS. However, your app cannot use any Cordova plugins unless you use the button to upgrade it to an HTML5+Cordova project type.

Enabling or Disabling Platform Targets in the Projects and Build Tabs

You can use the Projects tab to enable or disable certain platform targets in the Projects and Build tabs.

For example, with a HTML5+Cordova project type, if your app requires a Crosswalk Android platform target but not an Android target, you might disable the Android platform target. To disable it, open the Projects tab and click the Android icon once next to CORDOVA HYBRID MOBILE APP SETTINGS. This action disables that target platform in the Projects tab, including the Android tab within Build Settings and Android tab within Launch Icons and Splash Screens:

When you open the Build tab, notice that the corresponding Android platform target under CORDOVA HYBRID MOBILE APP SETTINGS has been disabled and does not show a button:

The default platform target settings that are enabled or disabled depend on the project type. The default settings for a Standard HTML5 project type:

  • In the Build tab, all platform targets under CORDOVA HYBRID MOBILE APP SETTINGS are enabled. However, this combination of project type and Build category does not allow use of Cordova plugins. To allow use of Cordova plugins, consider upgrading this project's Standard HTML5 project type to an HTML5 + Cordova project.

  • In the Build tab, all platform targets under BUILD AS A WEB APP are enabled.

Default settings for an HTML5+Cordova project type:

  • In the Build tab, all platform targets under CORDOVA HYBRID MOBILE APP SETTINGS are enabled.

  • In the Build tab, all platform targets under BUILD AS A WEB APP are disabled. Advanced users can also build the same project's code base as hosted web apps after adding feature detection code to avoid using Cordova plugins in your web app deployment.

Understanding Project Files, Project Path and Source Directory

An Intel XDK project always includes <project-name>.xdk and <project-name>.xdke files in the project's main (root) directory. The Project Path on the Project tab refers to the project's root directory where the .xdk and .xdke files reside.

A project's Source Directory refers to the root location of your app source files, which must always start with an index.html file. The Source Directory and the Project Path may or may not refer to the same directory location, but the Source Directory must be within the project directory - at or below the Project Path. Typically, the Source Directory is a subdirectory named www located directly below the Project Path main directory. The Intel XDK tools (such as the Emulate, Test and Debug tabs) and the remote build server use the Source Directory location to identify where your application source files are stored.

The .xdk file defines the project and is shared by multiple project members working on the same project. The .xdke file contains developer-specific preferences for that project.

NOTE: The .xdk and .xdke project files should only be modified using the Intel XDK GUI. Do not directly (manually) edit these files, which can corrupt them. If a project file becomes corrupted, attempts to use that project with the Intel XDK may result in unexpected and unwanted consequences.

Reminder: Your project directory tree should be under source control or otherwise backed up on a frequent schedule.

Choose the Active Project

To choose the active project, click the down arrow and choose the name of the project you want to become your active project:

Or you can select a project name on the left side of the Projects tab. The new project is highlighted (see below) and its project information appears. Other Intel XDK tabs will now use this active project.

Create a New Project

Click the down arrow and choose New Project (to the right of Projects), or select Start a New Project at the bottom of the project list, to create a new project:

The following appears in the left palette,

You can:

  • Explore the available Templates.
  • Explore the functional Samples and Demos.
  • Import Your HTML5 code base files into an Intel XDK project.

Click one of the items, such as Templates. Choose a category below Template to view available templates in that category, such as Layout and User Interface category:

Within Templates, you can choose a Standard HTML5 or HTML5+Cordova project or view the available Layout and User Interface templates or Games templates.

Within Layout and User Interface templates:
  1. Click one of the Layout and User Interface templates to view its brief description:
  2. Use the drop-down list to choose a Standard HTML5 or HTML5+Cordova project type (if selectable for this sample demo).
  3. For those templates that support App Designer, enable the App Designer layout GUI editor by checking "Use App Designer."
  4. View a screen capture of the app running on a device on the right side (optional).
  5. Follow the (optional) article link to view more about the template.
  6. Locate the template's sources on github* (optional).
  7. After you select a demo/sample project for which you want to create a project, click the Continue button.
  8. If needed, change the Project Directory by clicking the button.
  9. Type a project name for the new project.
  10. Click the Create button. The specified project name becomes the directory name used to contain the project files, as well as the name of the <project-name>.xdk project file.

Within the Games templates:

  1. View the Games templates and read a brief description of each template:
  2. For the Coco2d item only, use the drop-down list in the upper-right corner to select version 2.x or 3.x.
  3. Choose the Code Base to be either a Standard HTML5 or HTML5+Cordova project type.
  4. Choose the Orientation as either Portrait or Landscape.
  5. Locate the template's sources on github* (optional).
  6. After you select a demo/sample project for which you want to create a project, click the Continue button.
  7. If needed, change the Project Directory by clicking the button.
  8. Type a project name for the new project.
  9. Click the Create button. The specified project name becomes the directory name used to contain the project files, as well as the name of the <project-name>.xdk project file.

Within Samples and Demos, in the General category:

  1. Filter the displayed apps by project type: Standard HTML5 or HTML5+Cordova:
  2. Click a sample demo app to view its brief description. Click a different item to close it.
  3. To choose a demo app that supports the App Designer GUI layout editor, select a sample that displays "App Designer" along the top of that item.
  4. Follow the (optional) article link to view more about the sample demo.
  5. Locate the sample demo's sources on github* (optional).
  6. After you select a demo/sample project for which you want to create a project, click the Continue button.
  7. If needed, change the Project Directory by clicking the button.
  8. Type a project name for the new project.
  9. Click the Create button. The specified project name becomes the directory name used to contain the project files, as well as the name of the <project-name>.xdk project file.

Within Samples and Demos, in the Games category:

  1. Click a sample demo app to view its brief description. Click a different item to close it.
  2. To choose a demo app that supports a specific game engine, select the sample for that game engine.
  3. Locate the sample demo's sources on github* (optional).
  4. After you select a demo/sample project for which you want to create a project, click the Continue button.
  5. If needed, change the Project Directory by clicking the button.
  6. Type a project name for the new project.
  7. Click the Create button. The specified project name becomes the directory name used to contain the project files, as well as the name of the <project-name>.xdk project file.
This newly created project becomes your active project for use by other tabs and the Develop tab appears.

Creating an Internet of Things Embedded Application Project

When using the Intel XDK IoT Edition, in addition to the project type options screen shown above, the Internet of Things (IoT) Embedded Application project list appears. For example, view a list of available Templates:

You can choose the various project options under HTML5 Companion Hybrid Mobile or Web App to create HTML5 mobile hybrid apps for one or more target mobile device platforms. The project options under HTML5 Companion Hybrid Mobile or Web App are also available with the classic Intel XDK (explained above) and will display all Intel XDK tabs. For example, you might want to create a companion mobile app that interacts with the IoT device or its data, or create a completely different mobile (or web) app. Because all project types and features are provided with the Intel XDK IoT Edition, there is no need to install both the Intel XDK and the Intel XDK IoT Edition on the same development system.

After you create an Internet of Things (IoT) Embedded Application project, only the Projects and Develop tabs appear - this project type does not need build settings, Cordova app settings, and so on. If you choose the option to Import Your HTML5 Code Base under Internet of Things (IoT) Embedded Projects, it must be an Internet of Things (IoT) with Node.js project (read the displayed instructions).

For more information, see the Intel XDK IoT Edition getting started guide.

Creating a Game Project

The Intel XDK provides a Game Asset Manager and related plugin/services for HTML5/JavaScript*/CSS games. To use the Game Asset Manager, choose one of these project creation options:
  • Use a template: under Start a New Project, click Templates and click Games. Use the instructions above.
  • Use a Sample or Demo: under Start a New Project, click Samples and Demos and click Games. Use the instructions above.
  • Import an HTML5 game code base:
    1. Under Start a New Project, click Import Your HTML5 Code Base.
    2. After you specify the location of your project root directory, the Intel XDK will ask you to verify the source directory and specify the 2D game engine being used before it creates a project. See Import Your HTML5 Code Base.
For information about available game engines and how to use the Game Asset Manager and other features of the Intel XDK to develop HTML5/JavaScript/CSS games, see Getting Started with HTML5 Game Development using the Intel XDK. This page also provides guidelines for importing and building games created with non-developer games tools, such as Construct 2*.

Open an Intel XDK Project Not Listed in the Projects Tab

To restore an Intel XDK project file previously removed from the project list, or add an Intel XDK project copied from another system, click at the bottom of the projects list.

Navigate to the location of the *.xdk file within the project you wish to open/restore. When you open the file, the project will be added to the projects list and become your active project.

To move an Intel XDK project to a different development system:

  1. Open the project in the Projects tab by clicking the down arrow to the right of Projects.
  2. Under Project Info, locate the project root directory after Project Path.
  3. Use your file system (File Finder) to copy the project root directory tree to the other system.
  4. Open the Intel XDK on the other system where the Intel XDK is installed.
  5. Click the Projects tab.
  6. Click Open an Intel® XDK Project near the bottom.
  7. Browse to the copied directory and select the .xdk file.
  8. Click Open.
Use the Projects tab to:

Import Your HTML5 Code Base

  1. To the right of Projects, click the down arrow and choose New Project:

  2. Depending on the project code used, either choose Import Your HTML5 Code Base under HTML5 Companion Hybrid Mobile or Web App, or choose Import Your Node.js Project under Internet of Things (IoT) with Node.js Projects (Intel XDK IoT Edition only).
  3. Read the displayed instructions to ensure the project to be imported is acceptable.
  4. To the right of Import from, click the button. Navigate to and select the project root directory. Click OK and Continue.
  5. Type a project name for the Intel XDK project you are creating.
  6. Click the Create button. The specified project name becomes the directory name used to contain the project.
  7. The project importer tries to identify the source directory, which is at or below the project root directory you just specified, such as www. Confirm the source subdirectory location.

  8. Decide whether your HTML5 code base will Use Cordova Plugins. If your imported code base contains files like a Cordova config.xml file, the default for Use Cordova Plugins? changes to Yes. This selection will become part of the Intel XDK project settings.
  9. Similarly, if the Intel XDK detects that the sources being imported use a game engine, the default for Game Project? changes to Yes. If you will develop your game app using the Intel XDK, check Yes so you can view your imported project's game assets using the Game Asset Manager.
  10. If you used a game engine to create this HTML5 game app and Yes was checked above:
    • Select the game engine name. If you choose Basic Canvas Game, you can use the Game Asset Manager but you cannot generate code snippets. If you choose a game engine, the Intel XDK will generate code snippets for the specified game engine and its version.
    • Type its version using a format n.n.n. The Intel XDK uses the specified version while generating code snippets in the Game Asset Manager for supported game engines. If you omit the version, this will not impact your ability to view the assets in the Game Asset Manager, but game engine snippets will use a default version for your game engine and may not be valid. For a list of supported game engine and their versions for this release, see the Intel XDK release notes.
  11. Click Continue to create the project. Once created, the Develop tab appears.

Upgrade a Standard HTML5 Project to HTML5+Cordova Project Type

Intel XDK provides an upgrade path for project types created as Standard HTML5 Projects to convert to using the HTML5+Cordova project type. This lets you use Apache Cordova* plug-in APIs and use the Projects tab to specify the Apache Cordova* plug-ins, build settings, launch icons and splash screens for this app.

To upgrade a Standard HTML5 project to a HTML5+Cordova project type:
  1. Make a backup copy of the Standard HTML5 project file and source files. To view its project location, view the project information.
  2. Select Standard HTML5 project to be converted as the active project.
  3. While viewing the project information, click the button.
  4. View the displayed information and click Upgrade.
  5. After conversion, the project information now shows the project type as HTML5+Cordova.

Check and Update Cordova App Settings

For the HTML5+Cordova project type, the app settings you specify under CORDOVA HYBRID MOBILE APP SETTINGS in the Projects tab are used by the Intel XDK to create platform-specific configuration files that are uploaded to the Intel XDK build system. The Intel XDK automatically generates these configuration files based on your Projects tab settings. These intelxdk.config.<platform>.xml configuration files reside in your project directory.

When you select a build platform under CORDOVA HYBRID MOBILE APP SETTINGS in the Build tab, the Intel XDK uploads the appropriate intelxdk.config.<platform>.xml file along with other project files to the build server, where they are processed by Cordova CLI and other build software (see Understanding the Intel XDK Cordova Build Option Files for more details).

   IMPORTANT:

  • Before you select a build option under CORDOVA HYBRID MOBILE APP PLATFORMS (Cordova container) in the Build tab, first check the Projects tab and specify app settings for this project, including Cordova plugins.
  • When using an HTML5+Cordova project type and the Build tab, you can choose build options under LEGACY HYBRID MOBILE APP PLATFORMS (legacy container). However, you specify app settings for a non-Cordova app within the Build tab.
To specify app settings in the Projects tab for a Cordova* build platform:
  1. Open the project in the Projects tab by clicking the down arrow to the right of Projects:
  2. Click the word Projects to view the current project's app settings, which appear below the Project Info.

    This example shows the screen for the Basic Hybrid Demo app, which uses the HTML5+Cordova project type:
    • Under CORDOVA HYBRID MOBILE APP SETTINGS, you can expand the Plugins, Build Settings and Launch Icons and Splash Screens items.
    • To the right of CORDOVA HYBRID MOBILE APP SETTINGS and similar headings, you can disable or enable icons for the supported build platforms. If you choose to disable a build platform, that platform's tab will be hidden in Build Settings and in Launch Icons and Splash Screens.
  3. To the left of each category name, click or to collapse or expand each category, such as Plugins, Build Settings, and Launch Icons and Splash Screens.
As shown above, the Plugins category contains two separate groups:
  • Included Plugins consists of Standard Cordova Plugins and Featured & Custom Cordova Plugins, which includes Intel XDK plugins. Choose the plugins to be included with your app. You can scroll to and check each item individually. Even if you click the check box next to Standard Cordova Plugins or Featured & Custom Cordova Plugins to check (select) or uncheck all items in that column, you likely need to manually uncheck multiple individual plugins. A few Featured plugins - such as the App Security API - are better integrated and tested with the Intel XDK (above the Intel XDK plugins). For documentation about a plugin's API, click the (i) icon to the right of its name.
  • Third-party Plugins allow you to specify additional custom plug-ins that are provided by third-parties (not Intel or the Intel XDK). Click the buttons to import a Local Plugin or Get a Plugin from the Web.
For more information about:

The BUILD SETTINGS let you specify the detailed build settings typically needed by the app stores, such as the App ID, App Name, app version, and so on. Click each platform tab (such as Microsoft Windows 8) and specify the Build Settings for each platform. The Build Settings include the App ID, App name and description, author, app version, domain list, Cordova CLI version or Crosswalk version to be used on the build server, whether to use full screen mode, orientation, other items, and platform-specific items.

The LAUNCH ICONS AND SPLASH SCREENS let you choose the splash screen orientation and specify various icons and splash screens. Click each platform tab (such as Apple iOS) and specify the launch icons and splash screens needed for each platform. For each icon or splash screen:

  1. View the image size and format needed.
  2. Click the button, browse to the image file on your system, and click Open to add it.
  3. Repeat for other image files.
After you specify app settings in the Projects tab, use the Build tab to build your app. After you perform a build, always view the build log to make sure you have specified the correct app settings.

Resources


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