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:
...
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).
...
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 picking Run-> External Tools ->FlexJS (Cordova Run).
Running the Application
Depending 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.
...