How to Make an iPhone App with Flash Builder

Source

Although Adobe Flash is not supported on iPhone and other iOS devices like the iPad or iPod Touch, it is still possible to create and deploy standalone Adobe Flash apps for iOS devices. Adobe has created a special runtime called Adobe Air which stands for Adobe Integrated Runtime. Using Adobe Air, you can create beautiful Adobe Flash or Apache Flex apps and compile them to their native counterparts so that they run as native standalone apps--this means that they do not require a browser but run natively in their own process or window like any other iOS app.

Project Sypnosis

This tutorial will walk you through the steps to create a Flex app that will use the Yahoo Finance API to query, return and display the stock quotes in near real time that will be compiled as a native iOS app using the Adobe Air technologies and show you how to package the app for deployment in the App Store. Adobe AIR is an integrated runtime that creates standalone apps for mobile devices as well as desktop and laptop computers. With the advent of Adobe AIR 3.0, this technology can convert Flash, HTML5 and Javascript to native code for iOS apps.

The running Adobe Air/Flex iPhone app
The running Adobe Air/Flex iPhone app | Source

Note that for newbies, the Apache Flex SDK used to be called Adobe Flex before it was donated to the Apache Foundation.

Requirements

To create the sample app, you will need a copy of Flash Builder that you can download as a trial. You will also need to download and install the latest version of the Apache flex SDK which is available from the Apache web site if you want to use the latest Apache Flex 4.8 SDK otherwise the Adobe Flex 4.6 SDK is more than sufficient and is bundled with Flash Builder as is Adobe AIR.

Follow the instructions provided by the respective software publishers to install the required software on your computer.

Would or will you use Adobe Flash Builder to build your next iOS app

See results without voting

Configuring the Apache Flex 4.8 SDK

Although as I have mentioned, it is not imperative to use the Apache 4.8 SDK, you still can. Since it is a separate download, I figured it would be a great idea to provide a little supplemental help to get the SDK configured properly with your copy of Flash Builder, or any other SDK version for that matter.

Instructions

  1. Once Flash Builder is installed on your computer, create a sub folder, like 4.8 under the SDKs folder in the Adobe Flash Builder installation folder.
  2. unpack the Apache Flex SDK to the newly created sub folder.
  3. From the Preferences utility in Flash Builder (Eclipse) expand the Flash Builder node and select "installed Flex SDKs".
  4. Next click on the "add" button to open the SDK Location selector. Browse to the folder where you unpacked the Apache Flex 4.8 SDK but choose the actual SDK root folder, not the one you created.
  5. Click the "open" button to select the SDK folder and close the path popover. You will be returned to the main SDK configuration page. Select the newly added SDK and click the "ok" to close the Preferences.
  6. You are now ready to develop the Adobe Flex/Air iPhone app.

Flash Builder 4.6 is the last version to have a visual designer. Version 4.7 is already out in beta (at the time of this writing) but doesn’t have a visual designer, which in opinion was the the primary reason developers bought Flash Builder.

However FB7 provides an interface to search and add ANEs (Adobe Native Extensions). These are code libraries that can interface with native features on the target device, like the camera, GPS or any other native functionality. In FB6, you have to download them and installed as external libraries.

Setup Project

Flash Builder has been truly enhanced for mobile app development starting with FB5 and onwards. Adobe has made it easy to create mobile apps using Flash Builder and Flex.

Setting up the Adobe Flex for Adobe Air (standalone versus running in a browser) is very straightforward once you have installed the software. Follow these instructions to setup the project in Adobe Flash Builder

From the File menu select New-Flex Mobile Project

  1. On the first page of the project setup utility for the setup process add the name of the project. Accept the location defaults unless you really want to place the project someplace else.
  2. The same goes for the SDK, by default it is set at 4.6, but if you installed Apache Flex 4.8 and want to use, then select “Specific SDK” and select the SDK from the drop down menu.Or if you want to install the 4.8, click on the “configure Flex SDKs link” and follow the instructions above if you haven't already added the 4.8 SDK.
  3. The next page allows you configure the mobile settings. With FB6 you to choose to create an iOS app, a BlackBerry app, an Android app or all three. For this tutorial, I am just selecting the iOS option. You can also elect to create a blank app, a View based app or a Tab based app. The Tab based app adds a Actionbar at the bottom of the app; the View based app allows you to add Views (screens) to an app and you control which view to present to the user based on an event. Orientation and screen resolution options are also available to further create a native app experience.
  4. Clicking the "Next" button allows you to change the server settings, which you can leave as is fort this app. However, it here you would configure any offsite application server or corporate server for system integration.
  5. Clicking "Next" yet again provides a screen where you can add any custom libraries, change the output paths and install ANEs.

In Flash or Flex, apps are organized in MXML (mxml) and ActionScript (as) code. The UI logic is mostly done in the MXML while the logic is done with ActionScript. On big apps, the ActionScript can be stored in ActionScript files and libraries. In smaller apps, like this example, the ActionScript can be stored directly in the MXML file. When you add elements and configuration in the Visual Designer, FB adds the corresponding MXML code in the MXML file. You can also add UI code directly through the Source View and it will be visible in the Designer View. Most developers use both.

Also you can define the UI through ActionScript and any control (with corresponding id value) is accessible to ActionScript as a new class or object.

The Flash Builder Editor in Design View
The Flash Builder Editor in Design View | Source
The Flash Builder Editor in Source View
The Flash Builder Editor in Source View | Source

Create the iOS App User Interface

Once the project is setup, you can start developing your app (this app if you are following this tutorial). If the mxml file under the views folder is not open (refer to the corresponding screenshot for the project file structure), open it now and select the design view in the Editor. The default device in the editor is the iPad, switch that setting to iPhone 4 (the field is located at the top of the visual editor below the toolbar). Layout the UI as in the following screenshot by dragging components from the palette on the left of the Editor.

  1. For the main input field (TextInput), select the component in the Designer and in the properties view, provide a name in the “id” field.
  2. Do likewise for the button.
  3. Next add an output label and add the following text in the Label property field in the properties: Stock Information on '{StockSym}'. The '{StockSym}' is a placeholder that is in the same label. The StockSym is a variable that we will define in ActionScript later. It is imperative to enclose the variable in curly braces and enclose the curly braces in single quotes in order to let the compiler know to replace the placeholder with actual text. Also provide a name for the label in the “id” field since this is how we will reference the components later in the ActionScript code.
  4. Next add three more TextInput fields and corresponding labels (Name, Ask and Last) and name each field in kind in the “id” field in the properties. Also set the Enabled property to “false” to make the fields “read-only” since they will display the information from the Yahoo Finance web service.
  5. The UI for this simple iOS app is complete. The next section will describe the steps to complete the ActionScript code that will enable you to fetch stock quotes from Yahoo Finance in near real time.

Write the ActionScript Backend

With the UI finished, switch to the Code view by clicking the “Source” button in the editor (top left corner). Adobe (Apache) Flex and Adobe Flash both share the same programming language: ActionScript, which is a close sibling of Javascript as both share the same parent, EcmaScript.

To add the necessary code, follow these instructions:

Inside the s:view mxml element and below the “fx:Declarations” mxml element, type in a new angle brace and in the code assist popover start typing the word “script” and the code assist will scroll to the script element. Select it and add a closing angle brace. You will notice that the editor adds the “CDATA” directive for you. It is within this character data directive that we will add our code.

Start by adding the following import statements, just below CDATA word:

import mx.collections.ArrayCollection;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;

The first one import, ArrayCollection, to a key/value array. The second, FaultEvent, will handle any processing error events. The next one, ResultEvent, will capture the returned xml data from the Yahoo Finance service and the before last one, HttpService, will handle the web services.The last one will provide a popover window in case of a processing error.

Next define a HttpService variable, httpServ as the following code snippet demonstrates:

private var httpServ:HTTPService;

The next variable is our StockSym placeholder which I spoke about in the UI section. This variable will contain the selected stock symbol. I am using the Bindable directive so that the variable will maintain state and keep the variable value throughout the session or until a new value is assigned to the variable. The code for this variable is provided below:

[Bindable]
private var StockSym:String="";

SearchQutoteInfo

Next we will define the first of three functions, the SearchQutoteInfo. This function will actually do all the work of building the query string and fetching the results. The first line initializes the web service object. Afterwhich the second line defines a URL string. The URL has two parameters; the first one will hold the value of the TextInput field, symbolInput and then we will concatenate the second query parameter: "snl1a". These are actual Yahoo Finance query flags. For the complete list refer to this article on Yahoo Finance. The preceding query flags mean:

  • s=symbol
  • n=name
  • l1=last trade
  • a=ask

protected function SearchQutoteInfo():void
{
	httpServ = new HTTPService();
	httpServ.url = 'http://quote.yahoo.com/d/quotes.csv?s='+this.symbolInput.text+'&f=snl1a';
				
	httpServ.method = 'GET';
				
	httpServ.addEventListener(ResultEvent.RESULT,yDataResult);
	httpServ.addEventListener(FaultEvent.FAULT,yDataFault);
	httpServ.send();
}

The Yahoo Finance uses the GET HTTP method so we will assign the HTTP method to the HTTP service, see the code snippet above. Then will define two event listeners; one for the results and the second in case of an error. The second parameter defines a callback function which I define as yDataResult and yDataFault respectfully. Finally, perform the send action by using the send method of the HTTP service.

This method will build the query and fetch the results of our query. The yDataResult will be triggered automatically when the app receives the returned results.

yDataResult Function
This function will be called automatically and handle the returned results. The thing we will do is assign the results using the result.result and cast it as a string. Then we will define an array and pass the “s” variable which contains the results from the Yahoo Finance HTTP service, which I will convert to an array using the split method. Afterwards, it is a simple process of assigning each element in the array to our pre defined variables and TextFields. Take a look the screenshot at the beginning of the tutorial for a sample output from the running app.

protected function yDataResult(result:ResultEvent):void{
	var s:String = result.result as String;
	var a:Array = s.split(",");
				
	//To add to a form or individual fields
	StockSym =  a[0].toString();
	outName.text =  a[1].toString();
	outLast.text =  a[2].toString();
	outAsk.text =  a[3].toString();
			
}

yFaultResult Function
In case of an error, the yFaultResult function will capture the returned error message that will be returned from the Yahoo service and will call a TitleWindow mxml object which uses the PopUpManager to display two buttons (Cancel and OK) and an error message.

protected function yDataFault(fault:FaultEvent):void{
	this.errMsg;
}
<s:TitleWindow id="errMsg" title="Web Service Error">
		<s:Label text="Unable to reach Yahoo service" horizontalCenter="0"/>
		<s:controlBarContent>
			<s:Button label="Cancel" width="50%" click="PopUpManager.removePopUp(errMsg)"/>
			<s:Button label="OK" emphasized="true" width="50%" click="PopUpManager.removePopUp(errMsg)"/>
		</s:controlBarContent>
</s:TitleWindow>

The last bit of business regarding the development of this app is to assign the “SearchQutoteInfo” function to the button’s click event as the following code demonstrates:

<s:Button id="btnsearch" x="228" y="91" label="Search" click="SearchQutoteInfo()"/>

The rest of the code in the mxml file was added as we built the UI in the earlier section. The next part is to package the app using Adobe Air and deploy it to the App Store. The following section provides the complete code listing of the main mxml file. However several other files are needed for the app to run properly but these are created when you define a View based iOS app.

Following the code listing, you will find the outline for the steps needed to deploy the app as an Adobe Air app and prepare the package for upload to the App Store.

Complete App Code

<?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"
    color="#1B1E5B" title="Yahoo Finance"
		>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value 
		objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
	import mx.collections.ArrayCollection;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.http.HTTPService;
			
			
	private var httpServ:HTTPService;
			
	[Bindable]
	private var StockSym:String="";
			
	protected function SearchQutoteInfo():void
	{
	  	httpServ = new HTTPService();
		httpServ.url = 'http://quote.yahoo.com/d/quotes.csv?s='+this.symbolInput.text+'&f=snl1a';
				
		httpServ.method = 'GET';
				
						  httpServ.addEventListener(ResultEvent.RESULT,yDataResult);
				httpServ.addEventListener(FaultEvent.FAULT,yDataFault);
				httpServ.send();
	}
			
			
			
	protected function yDataResult(result:ResultEvent):void{
		var s:String = result.result as String;
		var a:Array = s.split(",");
				
		//To add to a form or individual fields
		StockSym =  a[0].toString();
		outName.text =  a[1].toString();
		outLast.text =  a[2].toString();
		outAsk.text =  a[3].toString();
			
	}
	protected function yDataFault(fault:FaultEvent):void{
				
	}
	]]>
	</fx:Script>
	<s:Button id="btnsearch" x="228" y="91" label="Search" click="SearchQutoteInfo()"/>
	<s:TextInput id="symbolInput" x="10" y="51"/>
	<s:Label x="10" y="10" text="Lookup Stock Information"/>
	<s:Label x="10" y="162" width="300" text="Stock Information on '{StockSym}'"/>
	<s:Label id="outputName" x="10" y="202" text="Name"/>
	<s:Label x="10" y="242" text="Ask"/>
	<s:Label x="10" y="283" text="Last"/>
	<s:TextInput id="outName" x="57" y="201" width="253" enabled="false"/>
	<s:TextInput id="outAsk" x="57" y="242" width="253" enabled="false"/>
	<s:TextInput id="outLast" x="57" y="283" width="253" enabled="false"/>
</s:View>


At the time of this writing the price of a iOS Developer membership is $99. You will need to be a member of the Apple Developer Program in order to provision your iOS devices and to create the necessary certificates that will be used to sign your app and package it as an Adobe Air app which will be ready for upload into the AppStore once the App ID is created for your app.

Packaging and Deployment

To package and deploy your app, you will need a development and provisioning .p12 certificate from the iOS Provisioning Portal.

Follow these steps to prepare your app for deployment for testing and uploaded to the App Store.

  • Create an app id
  • Obtain an iOS Developer certificate
  • Obtain an iOS Distribution certificate
  • Obtain a mobile provisioning profile
  • Download the files
  • Create a p12 file(s)
  • Sign your app with these certificates in Flash Builder
  • Open the deployment folder and compress your app files into a zip
  • Create your app profile in iTunesConnect
  • Upload the zip archive

Create certificates

Log into the iOS Dev Center iOS Provisioning Portal web site and click on "Certificates". Create a Developer and Distribution certificat. Then click on "Provisioning" and create a Provisioning profile if you don't already have one.

Once the certificates are ready, download and import these certificates into the KeyChain utility (Mac) and then export as a p12 file for each of these certificates. For Windows developers, you will need to convert the certificates to a pem file using openssl. Here is a sample command line script to create the pem file.

openssl x509 -in iphone_developer.cer -inform DER -out iphone_developer.pem -outform PEM

openssl pkcs12 -nocerts -in myApp.p12 -out myApp.pem

openssl pkcs12 -export -inkey myApp.key -in iphone_developer.pem -out iphone_dev.p12

Sign and Package App
Once the p12 file is created, from the Flash Builder IDE, under the Project menu, select the “Export Release Build”. In the “Export Release Build” utility, select the Project and Application if they are not already selected. Perform these steps in the export utility:

  1. Select the iOS target
  2. Select the export folder
  3. Provide a name for the export file
  4. Select the “Sign packages for each target platform”
  5. Click “Next” to open the the p12 configuration page
  6. Select the p12 file
  7. Provide the required password
  8. Select the mobileprovisioning file (from iOS Provisioning Portal (WWDR)
  9. Select the package type. For development and user testing select the “ad hoc package for limited distribution”. Otherwise select the “Final release package for Apple App Store...” option.
  10. On the Digital Content tab make sure the xml and swf files are selected
  11. Click “Finish” to compile and package the app

Once you have your app package, return to the iOS Provisioning Portal and create an App ID and fill out the app profile, including the required app images, selling price, product description and material material, you will be able to upload your ZIP package to the profile and submit the iPhone app for review. The following article will guide you through the process of developing a successful iPhone app.

More by this Author


Comments 2 comments

nenytridiana profile image

nenytridiana 4 years ago from Probolinggo - Jawa Timur - Indonesia

I used Flash media sometimes, but I am still not familiar with action script command. IPhone App.. that is new for me, I think I like to learn more about this. Is those script compatible with any flash builder?

Thank you klanguedoc, I think you just made your goal.


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

You can create a Flash Professional project with Flash Builder, but you still need Flash Professional to actually develop the app. ActionScript in Flex is the same as ActionScript in Flash and Flex uses many API libraries from Flash. ActionScript is very similar to JavaScript, except ActionScript is Object-Oriented and you need to learn the API.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working