There is currently no workflow within Flash Builder (or FDT) to convert an existing application to a mobile Android application. Depending upon the complexity of the application being converted and the version of Flex, it may be undergoing conversion from this task can range from the very simple to one that is inordinately complex. In this recipe, we will demonstrate a simpler example using basic Flex structures.
Create a new mobile project and copy all of the necessary files into it, retaining those portions of code which are used for mobile projects and modifying any unsupported components.
For this example, we'll use a simple Flex project targeting AIR for desktop consisting of nothing but a button component at this stage:
<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:Button x="10" y="10" width="300" height="200" label="Button"/> </s:WindowedApplication>
To convert this to a new Flex Mobile project, take the following steps:
1. Go to the menu and choose File | New | Flex Mobile Project.
2. Provide the project setup dialog with information about the new mobile project.
3. Copy all of your files from the project folder in your original project into this new mobile project excluding your project descriptor file
({myApp }.xml)andDefault Applicationfiles.4. Now, copy everything within your old
Default Applicationfile and paste it into theDefault Applicationfile that was created along with your mobile project. Once everything has been copied over, right-click on the main application file and choose Set as Default Application.5. Change all instances of
<s:WindowedApplication>to<s:ViewNavigatorApplication>(alternatively,<s:TabbedViewNavigatorApplication>).6. Look within your Problems panel to see whether or not any further modifications need to be made.
7. If you are not using any of the old Halo components (mx namespace) it is a good idea to remove the namespace declaration for your opening
<s:ViewNavigatorApplication>tag.8. Add a
firstViewattribute to the<s:ViewNavigatorApplication>tag. This should point to theViewautomatically created when you set up the mobile project.9. Since visual UI elements cannot reside directly within a <s:ViewNavigatorApplication /> node, we must wrap the <s:Button /> instance within a <fx:Declarations> </fx:Declarations> tag set, or move it to a specific View.
Note
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Your Default Application file should now read as follows:
<?xml version="1.0" encoding="utf-8"?> <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.MobileFlexProjectHomeView"> <fx:Declarations> <s:Button x="10" y="10" width="447" height="106" label="Button"/> </fx:Declarations> </s:ViewNavigatorApplication>
Additionally, a view for this application could appear as such:
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="MobileFlexProjectHomeView "> </s:View>
For more information about how Flex Mobile projects are structured, have a look at the following resource: http://opensource.adobe.com/wiki/display/flexsdk/Developer+Documentation.
When using Flex, the root tag of your application determines largely what APIs and structures are available to you throughout the project. Making sure that we choose the correct root tag is very important in regard to the target platform and capabilities of our project. For AIR on Android, we will want to use either ViewNavigatorApplication or TabbedViewNavigatorApplication. Desktop applications would use the Application or WindowedApplication tags. Chances are, if you are building Flash content with Flex that is to be deployed to Flash Player in the browser, on both mobile and desktop you will use a straight Application tag for your project.
If you don't want to deal with a lot of conversion, and are just starting out with a new project that will share the same codebase across desktop and mobile, you might consider using a Flex Library project to allow different projects to share the same underlying codebase.
Read the documentation on Flex 4 Library usage at: http://help.adobe.com/en_US/flashbuilder/using/WS6f97d7caa66ef6eb1e63e3d11b6c4d0d21-7fe6.html.