Page History

...

The first step is become familiar with Cordova is using a simple application which is found in the Cordova documentation, the "Hello, World" sample. Follow this link to get started.

http://cordova.apache.org/#getstarted

Create Your First Cordova App

There are two important points to take away from the Cordova example:

Installing Cordova. Once you do this, you really do not need to continue with the Cordova example as the instructions on this page supersede those. However, it is a good idea to have some familiarity with the underlying process.
Cordova is essentially a wrapper around your JavaScript code. Cordova does provide a variety of plug-ins (eg, to use the camera on a mobile device) which can be used with FlexJS, but the heart of the matter is that once you have set up the Cordova file structure, you really replace the supplied template JavaScript and HTML files with your own.

Once you've run the Cordova command to build the template application, you should take a look at what has been done. In the application's directory you will see a config.xml file and several sub-directories. The platforms directory contains the code needed to deploy your application onto a specific platform (eg, Android or iOS). The plugins directory contains the extras you are using for your application (eg, camera). Finally, the www directory is where the source code lies.

Inside the www directory is an index.html file and more sub-directories. Have a look at the index.html file, specifically the body element:

Code Block

language	xml
title	Cordova HTML Template

 <body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

The cordova.js JavaScript file is loaded along with the main code in index.js, which is here:

Code Block

language	js
title	index.js

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');
        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');
        console.log('Received Event: ' + id);
    }
};
app.initialize();

The thing to notice in this sample is the event listener for the "deviceReady" event. As your application is loaded and started on the device, the Cordova code waits until the device is capable of executing your application. When that happens, Cordova dispatches the "deviceReady" event. In the sample, this causes different CSS type selectors to come into play, changing the appearance of the UI a little.

The integration of FlexJS and Cordova hides this start-up sequence so your application can run without having to worry about it. When Cordova signals the "deviceReady", FlexJS intercepts it and dispatches its own "applicationComplete" event - which is standard for FlexJS applications to use as a trigger to begin their work in earnest.

The key then, with Cordova and FlexJS, is the www directory The key with Cordova and FlexJS is the www directory that the cordova command creates in the application folder. The The www directory directory contains the actual program that gets run on the device or browser. Since FlexJS creates HTML and JavaScript, you simply replace the contents of the the www directory directory with your FlexJS application. The sections below explain how to use your FlexJS application with Cordova.

Requirements

Install Cordova according to the instructions in the Apache Cordova web site.
Install the latest FlexJS SDK and kit
Set your path to include the ${FLEXJS_INSTALLDIR}/js/bin directory.

...

`clean`	target	Removes the `bin/js-debug` directory and `app/Demo/www` directory contents
`super-clean`	target	Removes everything except the `src` directory
`-Dplatform=<platform>`	option	Add this option to include a new Cordova-supported platform, such as iOS or browser.
`-Dappname=<other>`	option	If your main MXML file does not match the outer directory (`Demo` in the example), set this option to the name of the main MXML file. This will also create a matching Cordova application in the app directory.

Cordova Plugins

Cordova has a number of plugins you can use that do a wide variety of things. This is great when you use JavaScript to build your Cordova apps. All you need to do is go to your Cordova application directory and install the plugin, like this:

Code Block

language	actionscript3
title	Add Plugin

cordova plugin add cordoba-plugin-geolocation

But if you plan to use FlexJS and ActionScript, some additional steps need to be done. If you were to write the code to use the plugin, something like this in your ActionScript code:

Code Block

language	js
title	Use Plugin (JavaScript)

navigator.geolocation.getCurrentPosition(onSuccess, onError);

you will get an error as the compiler does not know what navigator is. In order to use Cordova plugins, you need to create ActionScript wrappers for them in the FlexJS framework projects. There is one started for the Geolocation plugin in the Mobile framework project in flex-asjs/frameworks/projects/Mobile.

If you look into the org.apache.cordova package, you will see a sub-package for the Geolocation framework (geolocation). Inside of this package is the Geolocation ActionScript class file. The class includes an ActionScript function to call the plugin:

Code Block

language	actionscript3
title	Geolocation Class

		/**
		 * Gets the device current location. If successful, the onSuccess function is
		 * called with position parameter (see Cordova documentation). If failure, the
		 * onError function is called with an error parameter (.code and .message members).
		 */
		public function getCurrentPosition(onSuccess:Function, onError:Function):void
		{
			COMPILE::JS {
				navigator["geolocation"].getCurrentPosition(onSuccess, onError);
			}
		}

Within the getCurrentPosition function is the JavaScript call positioned within a COMPILE::JS block. This code block is available to framework classes and causes the code within it to be inserted, as-is, in the cross-compiled JavaScript output.

Now your ActionScript application code can make use of it:

Code Block

language	actionscript3
firstline	Using Geolocation

import org.apache.cordova.geolocation.Geolocation;
...
    var geolocation:Geolocation = new Geolocation();
    geolocation.getCurrentPosition(onSuccess, onError);
...
private function onSuccess(position):void {
    trace("Lat = "+position["coords"]["latitude"]+"; Lng = "+position["coords"]["longitude"]);
}

If you want to use a Cordova plugin in your FlexJS application, you will need to extend the FlexJS framework. Once you have done that, you can submit your code to the Apache Flex project for inclusion.

Tips

If you need to change your FlexJS application code source (MXML or ActionScript files), simply re-run the ANT command with the cordova-build.xml file.

...

Space shortcuts

Child pages

Versions Compared

Old Version 7

New Version Current

Key

Requirements

Cordova Plugins