Using the Projects Tab in the Intel® XDK

Contents:
  Choose the Active Project
  Start a New Project
  Project Types and the Intel XDK IoT Edition
  Open an Intel XDK Project Not Listed in the Projects Tab
  Import a Project
  Check and Update Cordova 3.x App Settings
  Understanding Project Files, Project Path, and Source Directory
  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.

The currently active project is highlighted (as shown above) and shows information about the active project, including the creation date, date last modified, project type, and the path on your system where the project is located. The other Intel XDK tabs perform their operations on the active (selected) project.

Below YOUR INTEL® XDK PROJECTS (shown above), click NAME or date last OPENED to sort the projects in your project list. Click NAME or OPENED again to choose ascending and descending order.

You can use buttons above or in the PROJECT INFO area to:

• Email a test version of your built application to others by clicking .
• Remove a project from the Intel XDK projects list by clicking . You can add it to the Projects tab list later.
  NOTE: Deleting the project from the project list does NOT delete the project files or its root directory from your system.
• Change the location of where your current project's source files are located by clicking to the right of Source Directory.
• For certain project types, 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.

Use the Projects tab to:

• Choose the active project.
• Start a new project.
• Open an Intel XDK project not listed in the Projects tab, such as a project previously removed from the projects list or copied from another system.
• Import certain projects and convert each to an Intel XDK project.
• View and modify Apache Cordova* 3.x app project settings. These settings are associated with this project and will be used later when you build a Cordova 3.x app.

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:

The new project is highlighted (see below) and its project information appears. Other Intel XDK tabs will now use this active project.

Start a New Project

At the bottom of the projects list, click to create a new project. The following screen appears:

• Choose how to start your new project by selecting a project type option below START A NEW PROJECT. Select an option:
  • Under App Developer Projects for hybrid mobile and web apps when using the classic Intel XDK or the Intel XDK IoT Edition. You can start using a template for different types of apps (as shown above), a blank project, a demo to work with a complete sample, import an existing HTML5 project, or start using the App Designer (AD) or App Starter UI design layout tools.
  • Under Internet of Things (IoT) with Node.js Projects for Internet of Things with node.JS apps - when using the Intel XDK IoT Edition. You can start using a blank template, a complete sample, or import an existing project.
• Either choose a project root directory by clicking the BROWSE button or accept the default project directory location.
• Type the project name.
• Click the CREATE button. The specified project name becomes the directory name used to contain the project.

This new project becomes your active project.

Project Types and the Intel XDK IoT Edition

When using the Intel XDK IoT Edition, in addition to the project type options shown above, the Internet of Things (IoT) with Node.js Projects project type appears:

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

You can choose the various project type options under App Developer Projects to create HTML5 mobile hybrid apps for one or more target mobile device platforms. The project type options under App Developer Projects are also available with the classic Intel XDK, 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.

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

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 ProjectsProjects.
2. Under Project Info, locate the project root directory after Project Path.
3. Use your file system (or Apple File Finder* or Windows Explorer*) 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.

Import a Project

• Click the button at the bottom of the projects list.
• Depending on the project code used, either choose Import an Existing HTML5 Project under App Developer Projects, or choose Import an Existing ProjectInternet of Things (IoT) with Node.js Projects (Intel XDK IoT Edition only).
• Read the displayed instructions to ensure the project to be imported is acceptable. When creating an HTML5 App Developer Project, the project to be imported must contain an index.html file in the root level project directory.
• Click the BROWSE button and navigate to the directory. When importing a project from a previous version of the Intel XDK, select the 3.4.0/4.0.0 directory as your import location so that the proper directory structure exists for this version of the Intel XDK.
• Type a project name for the Intel XDK project you creating.
• Click the CREATE button. The specified project name becomes the directory name used to contain the project.

Check and Update Cordova 3.x App Settings

The app settings you specify under CORDOVA 3.X 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 using the Intel XDK IoT Edition, Cordova 3.x app settings do not appear for an Internet of Things (IoT) with Node.js Projects project type.

When you select a build platform under CORDOVA 3.X 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 Options for more details).

   IMPORTANT:

• Before you select a build option under CORDOVA 3.X HYBRID MOBILE APP SETTINGS in the Build tab, first check the Projects tab and specify app settings for this project.
• In contrast, if you select a build option under LEGACY HYBRID MOBILE APP PLATFORMS or BUILD AS A WEB APP in Build tab, you specify app settings for the non-Cordova 3.x app (including Cordova 2.9 apps) within the Build tab.

To specify app settings in the Projects tab for an Apache Cordova* 3.x 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. This type of app shows app setting categories under CORDOVA 3.X HYBRID MOBILE APP SETTINGS.
3. To the left of each category name, click the or buttons to collapse or expand each category, such as PLUGINS AND PERMISSIONS, BUILD SETTINGS, and LAUNCH ICONS AND SPLASH SCREENS.
   

As shown above, the PLUGINS and PERMISSIONS category contains three 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 listed under Featured & Custom Cordova Plugins - such as theApp 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 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.
• Permissions allow you to specify platform-specific permissions in addition to those required by the plug-ins you have selected. Click each platform tab (such as Android) and specify any additional permissions needed for each platform.

For more information about:

• Understanding Cordova plug-ins, see Understanding the Intel XDK Cordova Build Options.
• Adding Cordova third-party plug-ins in the Projects tab, seeAdding Plugins to Your Intel® XDK Cordova App.
• Adding build options by using a configuration additions file, see this article.
• Plugin and API details, see Intel XDK Name Space API Plugin Details for Cordova Build Containers.

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 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.

Understanding Project Files, Project Path, and Source Directory

A project includes the project .xdk file in its root directory. The Project Path refers to the project root directory where the project .xdk file resides.

A project's Source Directory refers to the root location of the sources, which contains the index.html file. The Source Directory and the Project Path may or may not refer to the same directory location, but the root Source Directory must be within the project root directory tree - at or below the Project Path. For example, the Source Directory root might be a subdirectory named www or app below the Project Path root.

Intel XDK tools (such as the Intel XDK device emulator and App Preview) as well as its build server use the Source Directory location.

Resources

• Intel XDK Overview.
• Using the Build tab.
• Adding Build Options to Your Intel XDK Cordova App Using intelxdk.config.additions.xml.
• Adding Plugins to Your Intel XDK Cordova App.
• Understanding the Intel XDK Cordova Build Options (includes links to platform-specific Cordova 3.X build options).
• Intel XDK Name Space API Plugin Details for Cordova Build Containers.
• For more information about the App Designer user interface layout tool, please see the App Designer tutorial.
• To get started using the Intel XDK IoT Edition, see http://software.intel.com/en-us/html5/documentation/getting-started-with-intel-xdk-iot-edition.
• For information about Internet of Things (IoT) development kits available from Intel, see http://software.intel.com/en-us/iot.
• For a short tutorial about using the Intel XDK development environment for new users, see the Tutorial: Get Started with the Intel XDK.