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