Creating a cordova application

Reference no: EM132906610

Cordova Applications

This document demonstrates how to create an HTML5 project in the IDE that is packaged as a mobile application and run in a mobile device simulator. When you create an HTML5 application you have the option to create the application using an Apache Cordova site template. Apache Cordova provides a group of APIs that enable you to develop an application with HTML, CSS and JavaScript that is packaged as a native mobile application. The application runs on the mobile device and can access the native functions of the device such as the GPS or camera. By using the Cordova APIs a developer can build a mobile application without writing any native code.

This document demonstrates how to install the software that is necessary to install and develop an application with Cordova. After you install Cordova you will use the Cordova template in the New Project wizard to create a Cordova application. You will then add some code and run the application in the mobile device simulator. This tutorial will use the iOS simulator, but the steps are similar if you want to use an Android device emulator.

To watch a screencast that demonstrates deploying a Cordova application to the Android emulator, see Video of Getting Started with Cordova Development.

Creating a Cordova Application

In this exercise you will use the New Project wizard in the IDE to create a new Cordova application. You create a Cordova application by selecting the Cordova Hello World template as the site template in the New Project wizard. A Cordova application is an HTML5 application with some additional libraries and configuration files. If you have an existing HTML5 application you can use the Project Properties window in the IDE to add the Cordova sources and other files required to package the application as a Cordova application.

For this tutorial you will create a very basic HTML5 project that has an index.html file and some some JavaScript and CSS files. You will select some jQuery JavaScript libraries when you create the project in the wizard.

1. Select File > New Project (Ctrl-Shift-N; -Shift-N on Mac) in the main menu to open the New Project wizard.

2. Select the HTML5 category and then select Cordova Application. Click Next.

3. Type CordovaMapApp for the Project Name and specify the directory on your computer where you want to save the project. Click Next.

4. In Step 3. Site Template, confirm that Download Online Template is selected and that the Cordova Hello World template is selected in the list. Click Next.

5. In Step 4. JavaScript Files, select the jquery and jquery-mobile JavaScript libraries in the Available pane and click the right- arrow button ( > ) to move the selected libraries to the Selected pane of the wizard. By default the libraries are created in the js/libraries folder of the project. For this tutorial you will use the "minified" versions of the JavaScript libraries.

You can use the text field in the panel to filter the list of JavaScript libraries. For example, type jq in the field to help you find the jquery libraries. You can Ctrl-click the names of the libraries to select multiple libraries.

You can click on the library version number in the Version column to open a popup window that enables you to select older versions of the library. By default the wizard displays the most recent version.
The minimized versions of the JavaScript libraries are compressed versions and the code is not comprehensible when viewed in an editor.

6. In Step 5. Cordova Support, use the default values. Click Finish to complete the wizard.

If you expand the js/libs folder in the Projects window you can see that the JavaScript libraries that you specified in the New Project wizard were automatically added to the project. You can remove a JavaScript library from a project by right-clicking the JavaScript file and choosing

Delete in the popup menu.

To add a JavaScript library to a project, right-click the project node and choose Properties to open the Project Properties window. You can add libraries in the JavaScript Libraries panel of the Project Properties window. Alternatively, you can copy a JavaScript file that is on your local system directly into the js folder.

You can now test that your project runs and is deployed to the emulator for your target mobile device.

7. Click the browser select icon in the toolbar and confirm that your target mobile device emulator is selected in the Cordova column in the table. In the Cordova column you can select the Android Emulator or iOS Simulator (requires OS X and XCode).

Attachment:- Cordova Applications.rar

Reference no: EM132906610

Questions Cloud

Should invest in mutual fund : The fund has a beta of 1.5. The risk-free rate is 2% and the expected return on the market is 10%. Should you invest in her mutual fund?

What is the marketability premium : What is the marketability premium? Why should an issuing firm consider paying this premium?

What did like about the course set up : How has your perception of accounting? What is one or more skills you learned or some specific content knowledge that think will remember six months from now?

The recruiting value of corporate social responsibility : What do these activities communicate about the company? Would you consider working for this company?

Creating a cordova application : Creating a Cordova Application - confirm that your target mobile device emulator is selected in the Cordova column in the table. In the Cordova column

How can Andria use the EOQ model : How can Andria use the EOQ model to determine how Webster should liquidate part of its portfolio to provide cash

Evaluate ethical challenges social cause : Evaluate any ethical challenges this social cause might present to your employees.

Differences between communism-socialism and capitalism : Explain the differences between communism, socialism, and capitalism.

Which of the analysts arguments is correct : Which of the analysts' arguments is correct? Two of your analysts are arguing over whether portfolio should include shares in Intelsat, satellite manufacturer.

User Account

All Pages