Quantcast
Channel: HTML5
Viewing all articles
Browse latest Browse all 663

Using the Projects Tab in the Intel® XDK

$
0
0
Projects Tab Overview
Contents:
  Legal Information
  Choose the Active Project
  Start a New Project
  Project Types and the Intel XDK IoT Edition
  Project Types for Games
  Open an Intel XDK Project Not Listed in the Projects Tab
  Import an Existing 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 local file 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

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

To the right of Projects, click the down arrow and choose New Project to create a new project:

The following screen appears:
  • Choose how to start your new project by selecting an option below START A NEW PROJECT:
    • Under App Developer Projects you can start using a template for different types of apps (as shown above), a demo app with a complete sample, import an existing HTML5 project, or start using the App Designer (AD) UI design layout tool.
    • 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 complete sample template or blank template, or import an existing project. Multiple Internet of Things (IoT) with Node.js Projects samples are provided.
  • Click one of the items, such as Start with a Template. To limit the items displayed, click the drop-down list to the right of Filter by keyword:
  • Scroll to view the available template or demo choices. Click an icon for a template or demo app to view its brief description, a screen cap of the mobile app, and buttons to either use this template or demo, or get the sources from GitHub*.
  • After you select a project type by clicking Use This Demo or Use This Template, either choose a project root directory by clicking the BROWSE button or accept the displayed default project directory location.
  • Type a project name.
  • Click the CREATE button. The specified project name becomes the directory name used to contain the project files, including its .XDK project file.
This new project becomes your active project for use by other tabs. The Develop tab appears.

Project Types and the Intel XDK IoT Edition

When using the Intel XDK IoT Edition, in addition to the project type options screen shown above, the Internet of Things (IoT) with Node.js Projects project types appear. For example, a list of available Internet of Things (IoT) with Node.js Projects samples and templates appear if you choose Start with a Sample or Template:

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.

Project Types for Games

The Intel XDK provides an initial release of the 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:
    1. Under App Developer Projects, click Start with a Template.
    2. Click the drop-down list to the right of Filter by keyword: and select Game.
    3. Choose the game engine you want to use for your game.
    4. Confirm the project root directory and specify the project name - see Start a New Project above.
  • Use a demo sample:
    1. Under App Developer Projects, click Work with a Demo.
    2. Click the drop-down list to the right of Filter by keyword: and select Game.
    3. Choose the game engine you want to use for your game.
    4. Confirm the project root directory and specify the project name - see Start a New Project above.
  • Import an HTML5 game project:
    1. Under App Developer Projects, click Import an Existing HTML5 Project.
    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 an Existing HTML5 Project.
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 (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 an Existing Project

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

  • Depending on the project code used, either choose Import an Existing HTML5 Project under App Developer Projects, or choose Import an Existing Project under Internet 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.
  • Click the BROWSE button and navigate to the project root directory.
  • If the Intel XDK detects that the sources being imported use a game engine, the detected game engine appears. Please confirm or specify which game engine is used.
  • Type a project name for the Intel XDK project you are creating.
  • Click the CREATE button. The specified project name becomes the directory name used to contain the project.
  • 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. If the imported project is a Game Project and you want to develop your game app using the Intel XDK, check Yes. Typing Yes will allow you to view your imported project's game assets using the Game Asset Manager.
  • If you used a game engine to create this HTML5 game app and Yes was checked above:
    • Type the game engine name. If you omit the game engine name, you can use the Game Asset Manager but you cannot generate code snippets, which are specific to each game engine and 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.
  • Click Continue to create the project. Once created, the DEVELOP tab appears.

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

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

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

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 and is 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 the location of your application source files.

Resources



Viewing all articles
Browse latest Browse all 663


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>