Creating an HTML5 project

You create an HTML5 app through an HTML5 project. When you create an HTML5 project, you first create a skeleton project, then look after the configuration to ensure that your HTML5 app will work correctly on your target system.

The process for creating HTML5 apps is similar to the process for creating Cordova apps. You create the project with the default folders and files, then add and modify files for your scripts, HTML5, images, etc., and modify the config.xml file to configure the app's behavior.

To create an HTML5 project, use the create command. This command creates a skeleton project and pre-populates the files required to run an HTML5 app on the platform. If you build the app without modifications, by default, the app is set up to handle the deviceready event, and displays the index.html page with the Cordova logo.

An HTML5 application created with Apache Cordova is a standalone app, which means you aren't required to point to a remote server to load a webpage. The app runs on the target and can run in a standalone fashion.

Configuring apps for QNX SDK for Apps and Media

Your HTML5 app doesn't run on a mobile device, such as a tablet or a smartphone. Instead, it runs in an HMI on your target board. Therefore, you must make the following changes to your app so that it functions correctly:

Disable pinch and zoom on the HTML5 app. This incorrect resizing can cause your app to behave incorrectly. In the index.html file (or other starting page for your app), set the height and width to match your screen dimensions, and set the user-scaleable to no as shown here:
```
<meta name="viewport" content="width=800, height=480, 
      initial-scale=1.0, user-scalable=no"/>
```
Whitelist any required URIs, such as URLs or network locations, that aren't local to the app. To whitelist a URI, use the <access> element in the config.xml file. For example:
```
<access subdomains="true" origin="www.qnx.com" >
<access subdomains="true" origin="file:///SDCard" />
```
For improved security, it's best to whitelist only the locations you require and use HTTPS for sensitive information. For more information about whitelisting, see the Whitelist Guide in the Cordova Documentation.

Running Cordova create

To run the Cordova create command, navigate to the [location you installed HTML5 SDK]/html5sdk/cordova/cordova-qnxcar/bin folder on your host computer. You run the command with the following parameters:

create project_path package_name app_ID

where:

project_path — The location of an empty directory.
package_name — (Optional) A reverse domain name, such as com.company.appname.
app_ID — (Optional) A unique name. The name should be unique on the target system.

For example:

create hello com.example.hello helloWorld

Attention: The package_name and app_ID must be alphanumeric characters and can't be more than 50 characters long.

Project folders

The create command creates the following subfolders in the folder you specified as the project_path:

www

This folder contains all your project resources, including the index.html file, which is the starting page for your app. It also contains subfolders for various resources, including CSS and JavaScript files, as well as any other resources you might add.

Note: When you start to add code and resources to your app, save any project resource files used by the app in the /www folder (or in the relevant subfolder within /www).

native

The location where plugins native to the platform exist. Each HTML5 project includes plugins required for target boards and VMware images.

lib

The Cordova Framework JavaScript libraries required to run on the target.

cordova

The tools to build and work with the project:

build: Interprets your HTML5 and JavaScript code, builds the binaries, and packages the web assets to a .bar file. For more details, see "Test and package."
clean: Removes any files, such .bar files, that the build command created.
version: Returns the version of the Cordova that's being used for your HTML5 app.
whereis.cmd: Searches the directories in your PATH environment to locate the file that you typed. This command is available only for Windows.