Flash Development for Android Cookbook
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Converting a standard Flex project to a Flex Mobile project

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.

How to do it…

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.

    Note

    The project cannot have the same name as any existing project within your environment.

  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) and Default Application files.
  4. Now, copy everything within your old Default Application file and paste it into the Default Application file 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>).

    Note

    Just as with a standard AIR <s:WindowedApplication>, only one instance of <s:ViewNavigatorApplication> or <s:TabbedViewNavigatorApplication> can exist within a project.

  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 firstView attribute to the <s:ViewNavigatorApplication> tag. This should point to the View automatically 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.

Tip

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.

How it works…

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.

There's more…

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.

上一章目录下一章