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
  Adding and Managing Bower Library Packages
  Updating Cordova App Settings (plugins, build settings, launch icons and splash screens)
  Upgrade a Standard HTML5 Project to HTML5+Cordova
  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 active 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. You can also add and manage Bower* libraries for this project.

Below Bower Managed Libraries, the build settings and graphical image settings appear. These depend upon the project type of this project.

For information about creating a new project, see Create, Import, and Manage Intel XDK Projects.

Viewing Project Information

To display project information about the active project:

  1. Click the word PROJECTS next to the project name in the upper-left.
  2. View the Project Info section on the right.

Project information 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 it back 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.
  • For a game project (not shown above), change the location of your project's asset directory within the project directory by clicking to the right of Game Asset Directory.
  • For App Designer projects, you can request that the Intel XDK attempt to convert from the current UI framework to a different one by clicking to the right of UI Framework. The UI frameworks include App Framework, Bootstrap*, Ionic* and Framework7*.

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
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 Android* with Crosswalk* WebView, Android, Apple iOS*, Microsoft Windows 10 Universal*, Windows Phone* 8.1, 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.
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 with Crosswalk* WebView, Android, iOS and Microsoft Windows 10 Universal, Windows Phone 8.1, Windows 8 devices, or as a packaged web app.
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 WEB AND PACKAGED APP TARGETS.
  • To build a packaged app for Android with Crosswalk WebView, Android, iOS, Windows 10 Universal, Windows Phone 8.1, 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 Tab

The default platform target settings that are enabled or disabled depend on the project type. To enable or disable a target in the Projects tab, click its button.

  • For a Standard HTML5 project type:

    • All platform targets under CORDOVA HYBRID MOBILE APP SETTINGS are enabled by default. However, this combination of project type and Build target 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.

    • All platform targets under WEB AND PACKAGED APP TARGETS are enabled by default.

  • For an HTML5+Cordova project type:

    • All platform targets under CORDOVA HYBRID MOBILE APP SETTINGS are enabled by default.

    • All platform targets under WEB AND PACKAGED APP TARGETS 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.

NOTE: To give your app the permissions necessary to access external web services you must configure your app's Domain Whitelist in the Build Settings section of the Projects tab. Please see Cordova Whitelisting with Intel® XDK for AJAX and Launching External Apps and Using Apache* Cordova* Whitelist Rules with the Intel XDK for details.

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 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. By default, 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.

For example, when a project is created or imported, the Intel XDK creates the special <project-name>.xdk and .xdke files, saves them in the project's root directory, and uses the project-name as the base file name for these special files. These <project-name>.xdk and the companion .xdke files are used by the Intel XDK to manage your project; it does not contain any application code and is not needed by your application to execute on a real device. If you delete, relocate or corrupt the project files you can recover by importing your project files into the Intel XDK; it will create new .xdk and .xdke files (you will have to reconfigure your build settings and plugin selections in the Projects tab if this happens).

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.

Occasionally, updates to the Intel XDK will update the format and information that is stored inside the <project-name>.xdk and .xdke files. When such upgrades happen, your project can no longer be opened by previous versions of the Intel XDK. In the case of such an upgrade, a backup copy of the .xdk and .xdke files are made and stored in the root of your project folder so that you can "go back" to an older version of the Intel XDK if necessary.

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.

Installing and Maintaining Bower Library Packages

You can find, fetch, install, and maintain Bower* packages for your Intel XDK project. You can view details about selected packages, including relevant documentation, available versions, and package dependencies. Bower resolves the dependencies of a selected installed package and automatically installs those packages that a selected installed package depends on.

For more information, see Installing and Maintaining Bower Packages.

Updating Cordova App Settings (plugins, build settings, launch icons and splash screens)

The Cordova 3.6 release changed the specifications followed for a valid App ID, which you specify in the Build Settings section of the Projects tab. These new Cordova project rules may impact some existing projects, especially if you already have an app in the store that uses an App ID that does not comply with these new rules. Starting with Cordova framework 3.6 your App ID may not include numbers in the first section and at least two ID elements must be provided (more elements are allowed). For example, xy123.abc is an invalid App ID because it includes numbers in the first element of the App ID.

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, build settings, launch icons and splash screens.

To specify app settings in the Projects tab for a Cordova* build platform:

  1. Open the project in the Projects tab either by clicking the project name listed below Your Intel® XDK Projects or 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 app, which uses the HTML5+Cordova project type:

    • Under CORDOVA HYBRID MOBILE APP SETTINGS, you can expand the Plugin Management, 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 Plugin Management (shown below), Build Settings, and Launch Icons and Splash Screens.
    Projects tab - plugin management GUI

You also specify app settings for a Web App for Chrome* OS within the Projects tab.

Adding and Managing Plugins

As shown above, the Plugin Management category contains the Add Plugins to this Project line as well as a list of previously selected Cordova plugins. This interface lets you:

  • Explore and add new plugins.
  • View the name, plugin ID, version, documentation, dependencies, and other details about a previously selected plugin.
  • Maintain your previously selected plugins, such as modifying the version and variables.
  • Remove plugins.

Using the Plugin Management GUI interface is described in Adding and Managing Plugins. This topic also describes the plugins directory that stores project plugins, modifying plugin sources, and interoperability with the Cordova CLI.

For an overview of how the Intel XDK stores plugins within the Intel XDK, on test mobile devices, and uploads them to the Intel XDK build system, see the Debug Tab.

To understand Cordova build files using within the Intel XDK, see Understanding the Intel XDK Cordova Build Option Files.

Choosing Build Settings

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 Android) and specify the Build Settings for each platform. The Build Settings include the App ID, App name and description, author, app version, domain list, Optimize with Crosswalk (for Android), Cordova CLI version, and Crosswalk version to be used on the build server, whether to use full screen mode, orientation, other items, and platform-specific items. Use the common Windows tab to specify settings for both Windows Phone 8 and Windows 8 devices.

Specifying Launch Icons and Splash Screens

Beginning with Cordova CLI 5, splash screen and icon images must be provided in PNG format - other image formats will result in build errors.

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.

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.

Resources


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