cestum.org

Adobe’s new Flash Builder version Burrito and Flex SDK Hero previews are out for a while now. While we got awestruck on the mobile version, its limitation of platform support saddens us. Burrito supports only Google Android mobile version.

So we decided to give a try of using Flex SDK Hero to build an iPhone app taking advantage of new Hero features.

This example will walk you through the development of multiscreen iPhone app using Flex SDK Hero. The whole application was tried out in Windows and not on Mac. I don’t see any difference other than the compilation script changes.

Outline

• Install necessary tools
• Create Flex Mobile Project, custom compile and pfi
• Deploying it on iPhone

Things you need

• Flash Builder Burrito and Flex SDK Hero (not necessary – comes with Flash Builder Burrito)
• Packager for iPhone
• iPhone!

Setup

Download and install Flash Builder Burrito. Burrito comes with Flex SDK Hero and needs no seperate installation.

Download and unzip the Packager for iPhone.

Develop

Open Flash Builder Burrito, and create a new Flex Mobile Project. Give it a name, say MultiScreenApp. Everything else, leave it as default. Currently Flash Builder supports only Google Android Mobile platform. It doesn’t bother us for now!

Now the project is created, we got to see the main application, which is MultiScreenApp.mxml a spark MobileApplication. This spark MobileApplication has a spark.component.ViewNavigator which has a stack of spark.component.View(s).

spark.component.ViewNavigator is a container for storing, displaying and removing views. Listed below are some of the features of ViewNavigator,

• Define view/action bar transition animation
• Persist Navigation stack and restore it back
• Listen to View change events and many more!
• Define properties like title, titleContent, titleLayout which can also be defined in each View.

Now Views can be added to View navigator and can be navigated to any point of time. A View has a View navigator associated with it, and so from one View, navigation to any other View is possible by using functions like navigation.pushView, navigation.popView, etc.

spark.component.View class provides basic features like,

• Activating a view
• Manipulating Actionbar (which is displayed at the top of the view) and NavigationContent
• Defining layouts for Actionbar and Navigation Content
• Defining title and data
• Persist the view as such.

The first/default view of the MobileApplication is set through firstView property and its data through firstViewData. The created project looks like this, with a default application and a default view.

Lets try creating a simple Hello World app, of course much more can be created than this, but the idea is to create an iPhone app out of it. Lets do that.

Create another view that display the  <to be entered name>, lets call it – SayHelloView. In order to pass data to this view, override the data function of spark.component.View.

Similarly, prepare the Home View.

Everything above are straight forward.

Test and Packaging it!

Now to run the application, we got to add the iPhone device (This is not mandatory, but you can get the feel of iPhone while testing it.)   Here is how I have added it.

Once this is done, right click on the project and run as Mobile Application. For the first time you’ll be asked to choose the method of testing (on Desktop/on Device) for now select the on Device and select the added iPhone device. Run it!

Packaging for iphone

We cant be using the generated swf as it is meant for a different Platform, so we need a simplified project compilation and for that lets use command line based mxmlc rather than going via Burrito’s way!

Here is the command to compile the project for iPhone packaging,

Step 1 – Compiling

“<Burrito’s Path>\sdks\4.5.0\bin\mxmlc”-load-config “<Burrito’s Path>\sdks\4.5.0\frameworks\airmobile-config.xml”-sp src -o bin-debug\MultiScreenApp.swf src\MultiScreenApp.mxml

This command would produce an swf for our packaging.

Step 2 – Configuring for iPhone

Packaging for iPhone needs special configuration and below is the sample configuration for MultiScreenApp Project. More on iPhone configuration is found on dev guide. Save this file as MultiScreenApp-ios.xml under src directory.

<?xml version=”1.0″ encoding=”utf-8″ standalone=”no”?>
<application xmlns=”http://ns.adobe.com/air/application/2.0″>

<id>MultiScreenApp</id>
<filename>MultiScreenApp</filename>
<name>MultiScreenApp</name>
<version>0.0.1</version>

<!– Description, displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. –>
<!– <description></description> –>
<!– Copyright information. Optional –>
<!– <copyright></copyright> –>
<!– Publisher ID. Used if you’re updating an application created prior to 1.5.3 –>
<!– <publisherID></publisherID> –>
<!– Settings for the application’s initial window. Required. –>

<initialWindow>

<content>MultiScreenApp.swf</content>
<renderMode>cpu</renderMode>
<fullScreen>true</fullScreen>
<aspectRatio>portrait</aspectRatio>
<autoOrients>true</autoOrients>

</initialWindow>

<supportedProfiles>mobileDevice</supportedProfiles>

<icon>

<image29x29>assets/icons/Icon29.png</image29x29>
<image57x57>assets/icons/Icon57.png</image57x57>
<image512x512>assets/icons/Icon512.png</image512x512>

</icon>

<iPhone>

<InfoAdditions><![CDATA[
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleBlackOpaque</string>
<key>UIRequiresPersistentWiFi</key>
<string>NO</string>
]]></InfoAdditions>

</iPhone>

</application>

Step 3 – Packaging for iPhone

Now that iPhone configuration is ready lets do the packaging. We’ll use the latest Packager for iPhone, as of this writing the latest version is Oct.11.2010.

If you have already used Packaging for iPhone, you might very well be familiar with the tags used above. If not, get your hands on packager for iPhone dev guide.

Here is the command for packaging the application.

<Packager4iPhone path>\bin\pfi -package -target ipa-test
-provisioning-profile <my.mobileprovision> -storetype pkcs12 -keystore <my.p12> -storepass <pass>
MultiScreenApp.ipa bin-debug\MultiScreenApp-ios.xml -C bin-debug MultiScreenApp.swf assets\icons

You may need a developer certificate or can get a fake one (for testing), if you are using jailbroken iPhone. The assets\icons folder has the necessary icons for the application.

The command takes some time to execute. This command will result in a MultiScreenApp.ipa.

Deploy the iPhone app using iTunes or any other method you are familiar with.

What is the point?!!

Well the point is “is it worth it?”. Considering the performance, UI Response and native iPhone feel, the answer is no. But remember everything above we have used is still in beta and that means a lot. But we have a beginning here and that make us experienced when the product is ready!!!