ActionScript 3.0 Design Patterns

ActionScript 3.0 Design Patterns in Mobile Apps

The very first mobile app I want to build is one that I can give away to promote my company or my clients’ companies. Yes, I’d like to make lots of money with a mobile action game like Angry Birds, but in order to get started, I want something that I can easily update and change. It seems like every time I check my phone apps, I’ve got updates. What is one of the main features of Design Patterns? Easy updates! So, if you want to create mobile applications in ActionScirpt 3.0 that are easy to update, you’ll find design patterns your BFF!

This first one is built with Flash CS5.5. If you do not have Flash CS5.5; download the 30-day trial version. If you’re using Flash Builder, use FB 4.5.1. or download the trial version. (I hope to have a FB tutorial using this same example later in the week. In the meantime, take a look at Christian Peters’ mobile example for building an app using design patterns with Flash Builder.)

This first example uses a Strategy pattern with algorithms for loading external images (or .SWF files) and text. That is exactly what I need for a mobile app promoting my company. With the image loading capability, I can load my logo and any images that show off products and services. The concrete text strategy loads up data from external text files. So this ought to be the easiest app to update imaginable!

Easy Android

I was going to start off with an iOS example, but I realized that most of you probably didn’t want to shell out the $99 developer fee required by Apple for iOS development. So, instead I decided to use an Android example that you could test using an Android emulator. To get started, go ahead and download the source code and see what the app displays:

All of the Downloads have been moved to the University of Hartford’s Multimedia Web Design and Development Program page. The last entry under “ActionScript 3.0/ Flash” should have what you want. (I’m still working on it to include a short description of each entry–it’s in the database; just not on the screen).

When you run it, you will quickly see that a logo and block of text pops up. That’s it. Swap out your own logo and texts, and you’re in business. You can change any of the parameters in the BringText concrete strategy class to alter the text appearance, it’s placement and other features to suite your own tastes or business brand.

Starting from Scratch

Since this is a first time experience for beginners and mobile (which may include experienced ActionScript 3.0 programmers), we’ll step through the set-up beginning with the FLA file. So read on through the following steps:

First, download and install the Android SDK. If your system is not automatically selected, choose the correct OS. Install the SDK.

Second, install the Adobe AIR 3 beta and Adobe Flash Player 11 beta, both at Adobe Labs.

Third, download and install Flash CS5.5 trial if you don’t have it. (If you have Flash CS5 and have installed all of the updates, you ought to be ok.)

Fourth, in your root directory, create a folder named “Developer.” For example, on a Mac, you’d open up your Macintosh HD and add the Developer folder.( A hammer icon may automatically appear on the folder.)

Fifth, open Flash CS5.5 and select AIR for Android. Configure the screen for 320 x 470. (If you have an Android phone with a different screen size, configure it for your phone size.) Create a folder named MobileApp inside of the Developer folder, and save the file as AndroidStrategy.fla.

Sixth, with the stage selected, open the Properties panel. In the text window labeled “Class” enter the Class name “Client.”

Seventh, in the Properties panel in the Publish grouping, you should see AIR for Android next to “Player.” You will see a wrench icon to the right. Click the icon to open the AIR for Android Settings window. Figure 1 shows what you should see. If anything looks different, check to make sure you followed the previous steps.

Figure 1:General AIR for Android Settings

Eighth, in the AIR for Android window, click the Deployment tab (near the top of the window next to the General tab.) Figure 2 shows the Deployment selections. You will need to create a Certificate and Password. Click the Create button to create a certificate. You can use any names you want; something simple works fine. You can use the same certificate for other projects. I had placed the Android SDK in the Development folder and once I created the certificate, the full URL is:

/Developer/android-sdk-mac_x86/platform-tools/adb.p12.

If you do not see a “platform-tools” folder in your SDK folder, you’ll need to update your Android SDK by downloading the most recent release. (The earlier ones had the needed files in a different folder.)

Figure 2: Deployment Tab in AIR for Android Settings Window

Be sure to remember your password, and it helps to click the Remember password for this session so you don’t have to keep re-entering it. Set the Android deployment to Emulator release and don’t select any of the After publishing checkboxes. When you’re all finished click OK. You’re all set for a mobile app using design patterns!

Adding the Design Pattern

This final section uses a simple Strategy design pattern. (If you’re not familiar with the Strategy pattern, we have a saturated series on it as well as a simple introduction.) As noted at the outset, this implementation of the Strategy pattern pulls in graphics and text through Client requests. However, because of the pattern design, there’s minimal object binding, and any updates or changes will not unravel the whole program. Also, because it’s simple, it’s a good pattern to use to understand the basics of the Strategy pattern.

The Client

Without a UI, the pattern is quite easy. The Client simply requests what it wants using literal names for graphic images and the text in an external text file. The following shows the Client code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package
{
	import flash.display.Sprite;
	public class Client extends Sprite
	{
		protected var context:Context=new Context(new BringGraphic());
		protected var contextTxt:Context=new Context(new BringText());
		protected var mobileSprite:Sprite=new Sprite();
		protected var textSprite:Sprite=new Sprite();
 
		public function Client()
		{
			setLogo();
			setText();
		}
 
		protected function setLogo():void
		{
			mobileSprite.addChild(context.bringLoad("mobilelogo.png"));
			mobileSprite.x = 5,mobileSprite.y = 10;
			addChild(mobileSprite);
		}
 
		protected function setText():void
		{
			textSprite.addChild(contextTxt.bringLoad("mobile.txt"));
			textSprite.x = 5,textSprite.y = 150;
			addChild(textSprite);
		}
	}
}

The protected accessors have been employed so that when the app is developed in Flash Builder in the Flex element, it’ll feel right at home. However, in this Client, private access would have worked fine. This particular implementation of the Strategy returns Sprite objects containing both Text and Graphics, including other Sprite objects. As a result, even the text is added to the stage inside a Sprite. Notice that all requests go through the Context class.

The Context Class and Strategy Interface

Even though the pattern diagrams for the State and Strategy patterns are identical, the intent is quite different. Most important is the Context class in the Strategy design. It does not keep track of a current state as does the State pattern.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//Context Participant
package
{
	import flash.display.Sprite;
 
	public class Context extends Sprite
	{
		private var bring:IStrategy;
		private var bringObj:Sprite=new Sprite();
 
		public function Context(bring:IStrategy)
		{
			this.bring = bring;
		}
 
		public function bringLoad(url:String):Sprite
		{
			bringObj.addChild(bring.contentLoader(url));
			return bringObj;
		}
	}
}

In some respects the Context class in the Strategy resembles a factory because the request for strategies is made through the Context, but it does not really instantiate a concrete strategy as a factory would. The Sprite instantiated in the Context (bringObj) acts as a carrying container to return the requested strategy to the requesting class (Client in this case.) However, no concrete strategies are created.

The IStrategy interface has a single method to be implemented. The method is used to pass requests back to the requesting class.

1
2
3
4
5
6
7
8
9

package
{
	import flash.display.Sprite;
	public interface IStrategy
	{
		function contentLoader(url:String):Sprite;
	}
 
}

The IStrategy interface leaves a lot of flexibility for adding more concrete strategies for returning Sprite (or Sprite encased) materials to the client.

Concrete Strategies

Finally, the two concrete strategies both load external content. The first is an image/SWF loader and the latter is a text/xml file loader. It is simple and flexible:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//Graphic and SWF Loader
package
{
	import flash.net.URLRequest;
	import flash.display.Loader;
	import flash.display.Sprite;
 
	class BringGraphic implements IStrategy
	{
		private var urlReq:URLRequest;
		private var loader:Loader;
		private var objNow:Sprite=new Sprite();
 
		public function contentLoader(url:String):Sprite
		{
			urlReq = new URLRequest(url);
			loader=new Loader();
			loader.load(urlReq);
			objNow.addChild(loader);
			return objNow;
		}
	}
}

The BringText class required an event handler function for insuring that the text was completely loaded. The event handler method is a convenient place to put the TextFormat object and properties. Once the text is pulled out of the text or xml file and placed into the formatted text field, it was packed up and put into a Sprite object ready to return to the Client.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

//Text and XML Loader
package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.Event;
 
	public class BringText implements IStrategy
	{
		private var textContainer:Sprite=new Sprite();
		private var urlNow:URLRequest;
		private var txtLoader:URLLoader=new URLLoader();
		private var txtFld:TextField=new TextField();
		private var txtFormat:TextFormat=new TextFormat();
		private var uLoader:URLLoader;
 
		public function contentLoader(url:String):Sprite
		{
			urlNow=new URLRequest(url);
			txtLoader.addEventListener(Event.COMPLETE, addTxtFld);
			txtLoader.load(urlNow);
			return textContainer;
		}
 
		private function addTxtFld(e:Event):void
		{
			uLoader=URLLoader(e.target);
			txtFormat=new  TextFormat();
			txtFormat.font="Verdana";
			txtFormat.size=24;
			txtFormat.color=0x000000;
			txtFld.defaultTextFormat=txtFormat;
			txtFld.multiline=true;
			txtFld.width=300;
			txtFld.height=250;
			txtFld.wordWrap=true;
			txtFld.x=10,txtFld.y=90;
			txtFld.text=uLoader.data;
			textContainer.addChild(txtFld);
		}
	}
}

As noted, this pattern is simple, but very handy. The classes are reusable and simple to update and change. Further, adding more classes is just as easy, and that means updating the mobile application is simple.

On to Flex and Flash Builder

The next step is to take the ActionScript 3.0 in this mobile application and do the same thing in Flash Builder. The Client class will have to reside in an MXML file instead of an AS file. Next up, we’ll see how to take this app and bundle it up using Flash builder. I’d also like to see other simple Flex/Flash Builder mobile design pattern examples that might help our readers—even implementations of this code in the Flash Builder IDE.

Related posts:

1. PureMVC Goes Mobile 1: MVC-driven & ready-to-compile Mobile Application with the Flex Framework! by Christian Peters
2. We Need to Talk: Should We Take AS3 DP Mobile?
3. PureMVC Goes Mobile 2: MVC-driven & ready-to-compile Mobile Application with the Flex Framework! by Christian Peters