Preparation

On this page you will use an IDE, such as Flash Builder, to create a FlexJS application that will be deployed using Apache Cordova. There is nothing essentially different about building the application unless you are going to be using Cordova plug-ins. An application with the usual set of UI components can easily be substituted for the simple application used for this exercise.

You will need to install FlexJS SDK and integrate with Flash Builder. You will also need to install Apache Cordova.

The information presented on this page is similar to this tutorial (Netbeans Cordova Tutorial) which uses Netbeans IDE. In that tutorial you write your application entirely in JavaScript without the benefit ActionScript's syntax checking, true classes and inheritance, and other features.

Creating the Application

The first step is to open Flash Builder and create a new Flex Project. Flash Builder does not know how to make a FlexJS application, so you will need to modify the template Flash Builder created. Open the main MXML file and replace its contents with the following:

Sample FlexJS
<?xml version="1.0" encoding="utf-8"?>
<mjs:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
				 xmlns:js="library://ns.apache.org/flexjs/basic"
				 xmlns:mjs="library://ns.apache.org/flexjs/cordova"
				 applicationComplete="onDeviceReady()">
	<js:valuesImpl>
		<js:SimpleCSSValuesImpl />
	</js:valuesImpl>
	<fx:Script>
		<![CDATA[
			private function onDeviceReady():void {
				label.text = "The device and application are ready";
			}
		]]>
	</fx:Script>
	<js:initialView>
		<js:ViewBase>
			<js:Label id="label" text="Hello, World" width="200" />
		</js:ViewBase>
	</js:initialView>
</mjs:Application>

This simple application will display "Hello, World", on the screen briefly while the Cordova environment initializes. Once that is complete, the applicationComplete event is triggered which runs the ActionScript function, onDeviceReady(), which in turn, replaces the label's text with "The device and application are ready".

Using ActionScript and MXML have several advantages over JavaScript and HTML as your language for building mobile applications with Cordova. For one, ActionScript is a typed language with a more robust syntax. This ensures your code has fewer errors as the compiler will detect typos and incompatible type assignments before your code can run. This applies to MXML as well as ActionScript. In the example code, simply make a small error and Flash Builder, with its code intelligence, will detect the problem and flag it.

Using Flash Builder, or any FlexJS-compatible IDE, has a couple of other advantages as well. Most IDEs supply coding hinting a completion. For instance, when you start to type something, a hint at what you are typing will pop-up enabling you to select it without having to finishing typing. Further, the project navigator (side bar of Flash Builder) organizes your code so it is easier to find items. Finally, as you will see here, you can edit, build, and run your Cordova application from within Flash Builder using supplied "launch configurations".

Building the Application

Part of the integration of FlexJS SDK with Flash Builder involved importing "launch configurations". These are external tools that can be triggered from within Flash Builder to operate on your Flash Builder projects. One of the configurations, FlexJS (Cordova Build), is what will be used to transform your FlexJS application into one that can be run by Cordova on multiple platforms. Select the project (not a file in the project) from Flex Builder's project navigator and run the Cordova Build launch configuration: Run->External Tools->FlexJS (Cordova Build). 

The console output should look something like the following (this has been edited to remove some of the output):

Cordova Build Output
Buildfile: /Apache/FlexJS/cordova-build.xml
makedir:
    [mkdir] Created dir: /Projects/SampleJS/app
create:
     [exec] Creating a new cordova project.
     [echo] Adding in platform(s). This may take awhile.
     [exec] Adding android project...
     [exec] Creating Cordova project for the Android platform:
     [exec] 	Path: platforms/android
     [exec] 	Package: io.cordova.hellocordova
     [exec] 	Name: HelloCordova
     [exec] 	Activity: MainActivity
     [exec] 	Android target: android-22
     [exec] Copying template files...
     [exec] Android project created with cordova-android@4.1.1
     [exec] Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
     [exec] Fetching plugin "cordova-plugin-whitelist@1" via npm
     [exec] Installing "cordova-plugin-whitelist" for android
     [exec]                This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
     [exec] 
compilejs:
     [echo] Compiling FlexJS app
     [exec] Compiling file: /Projects/SampleJS/bin/js-debug/SampleJS.js
     [exec] using extern: /Projects/SampleJS/bin/js-debug/externs/svg.js
     [exec] using SWC: /usr/local/lib/node_modules/flexjs/js/libs/js.swc
     ...
     [exec] May 25, 2016 2:31:27 PM com.google.javascript.jscomp.LoggerErrorManager printSummary
     [exec] WARNING: 0 error(s), 324 warning(s), 94.6% type
     [exec] The project 'SampleJS' has been successfully compiled and optimized.
purge:
copyfiles:
     [echo] Copying files from project
     [copy] Copying 2461 files to /Projects/SampleJS/app/SampleJS/www
main:
BUILD SUCCESSFUL
Total time: 1 minute 54 seconds

When this runs successfully, you will find an additional directory, app, in your project. This is where the Cordova application exists. The image below shows the SampleJS application expanded in Flash Builder's project navigator. Notice how the files in bin/js-debug have been copied to app/SampleJS/www.

 

Running the Application

You can either launch your new Cordova app manually from the command line or let Flash Builder run it for you by picking Run-> External Tools ->FlexJS (Cordova Run). Depending on your target platform (the Cordova launch configurations are set for Android), the application will be transferred and begin to run. 

If you want to change your run platform, open the Launch Configurations editor (Run->External Tools->External Tools Configurations...) and add -Dplatform=browser to the argument list as showing in the picture below. Be sure to change the name of the configuration if you do not want replace the original Cordova Build configuration. The image below shows the change needed to the Build configuration; do the same for the Run configuration so you have both a Build and a Run for each platform.

Conclusion

Using an IDE such as Flash Builder, as well as using ActionScript, can make building your Cordova applications much faster with an improved work-flow as well as error checking during development. Using ActionScript improves the quality of your application by ensuring data types are compatible and syntax is correct. Coding hinting and completion in the IDE also reduce errors as well as typing.

With the supplied FlexJS Cordova External Tools, you can create, edit, build, and run all from within the IDE.

 

 

  • No labels