Event-based architectures for Adobe Flex

I had a number of interesting conversations in the last few weeks with developers who were experiencing life-cycle issues in their Flex applications, especially when their apps were run on slower machines…or even smart phones. They eventually had figured out that there were certain places in their apps where they had hardcoded properties into Classes. And, when those properties weren’t initialized in the right order…the code block which requested those properties failed with null exception errors.

Since Flex doesn’t have threads we are dependant on the linear execution of the code, which just so happens to include MXML, ActionScript and occasionally JavaScript. That means, for the most part, that your code is executed one line at a time, in the order in which it was written. 

To give you an example of how this can go wrong: if you are expecting an MXML custom component to be initialized with all its properties populated, you’ll get null value exceptions if this hasn’t occurred when you try and display that custom component. And, when you look at in the debugger you’ll be astonished to see all your properties are null or uninitialized in some way.

The bottom-line is if you don’t understand the life-cycle of your app you could end up severely beating your head against a wall for hours (or days) trying to figure out what’s going wrong. I don’t know why, but Adobe doesn’t talk much about life-cycle. To me, it’s mission critical to understand it. If you want to build anything more than very simple applications, I gaurantee you’ll eventually have to deal with it. Now fortunately there are some excellent articles out there. I highly recommend this excellent PDF by DevelopmentArc. Read it!

I also recommend making your architectures more loosely coupled, and event-based, rather than expecting immediate results. It may seem counter-intuitive at first. What it means is you can tie your code together based on something that happens in the future. And, your app will wait until that event occurs, then it will proceed as directed and not a moment sooner. 

So what am I talking about? For example, if you make a request to a REST Web Service, you can assign an event dispatcher to fire off when the response payload has been received and an event listener somewhere else in your app will wait for that event to occur. Sometimes servers take a while to respond, or maybe the internet was slow, or maybe the smartphone temporarily had a bad cell connection. When that happens, it will delay when your app recieves the payload. Or if you don’t receive a payload back after a certain period of time, you can throw an error event. All these types of scenarios can be gracefully handled with built-in ActionScript events as well as custom events that you build.

What’s the alternative? If your application immediately asks for a result and the response payload got delayed, guess what? You’re app will fail or throw an error.

I also want to throw one more bone of caution your way. Events themselves are subject to what’s called propogation. You may not want to, but you really do need to read as much about propogation as you can! Once you have a basic understanding of both application life-cycle and propogation you will be able to build much more robust applications. And in the long run that translates to more time you can dedicate to watching basketball, football, or whatever else you want to do with your new found “free” time.

So, my suggestion is make judicious use of custom events. Here’s a short article from Adobe on how to do it.

References:

DevelopmentArc – Understanding the Adobe Flex® 3 Component and Framework Lifecycle

Adobe – Dispatching Custom Events

Adobe – Event Propogation

Using FlashBuilder and Ant to Build SWCs with ASDoc Comments (on Windows 7)

It’s always an adventure when you try to use Ant to include your ASDoc comments into an Adobe Flex SWC library. I am completely baffled that Adobe can’t make this an automated step in Flash Builder, because it typically takes a alot of time to make things work correctly the “manual” way. So, I’m adding this blog post to the many already out there in hopes that my work can also help someone else.

I started off with a script that used to work on my old 32-bit laptop, but my new laptop is 64-bit. I kept getting Java Heap errors and I tried everything under the sun including changing FlashBuilder.ini and jvm.config to bump up the max heap size (-Xmx1024m). Nothing would work. What finally fixed this was adding the following line in my compc and asdoc sections of my build.xml file. If I made my settings any larger Flash Builder would throw an error. At some point I want to know why that is:

<jvmarg value="-Xmx1024m"/>

Here’s a few other tips-n-tricks:

  1. A lot of the blog posts I read were written for Mac’s…which I don’t have, so all the directory slashes were going the wrong direction.
  2. You need to install the Ant tools into FlashBuilder first. To do that go to Help > Install New Software and use this link: https://download.eclipse.org/releases/galileo
  3. When that loads its packages, look under Programming Languages for the option called Eclipse Development Tools and install that.
  4. Create a new Flex Library Project and drop in the actionscript class you want to convert.
  5. Create a file called build.xml and place it in the root directory of your project.
  6. Right click on the build.xml file and choose Run As > Ant Build.
  7. If you have errors, use echo statements to try and find out what’s going on.
  8. You absolutely must have a <taskdef> reference that points to flexTasks.jar.
  9. I also needed to include another class library into the build. You can see how I did that under the asdoc section using this pattern:
<compiler.source-path path-element="${basedir}\src"/>
<arg value="-external-library-path=${basedir}\bin\agslib-2.2-2010-12-08.swc"/>

References:

Adobe – Use the ASDoc Tool
Gaurev’s Blog – Creating Swc Files with ASDoc Comments


<?xml version="1.0"?>
<project name="mapsaverlib-1.0" default="main" basedir=".">

	<property name="FLEX_HOME" value="C:\Program Files (x86)\Adobe\Adobe Flash Builder 4\sdks\4.0.0"/>
	<taskdef resource="flexTasks.tasks"
		classpath="C:\Program Files (x86)\Adobe\Adobe Flash Builder 4\sdks\4.0.0\ant\lib\flexTasks.jar" />

	<echo message="Flex Home ${FLEX_HOME} "/>

	<!--<target name="main" depends="clean, compile, doc" description="Clean build of <filename>.swc">-->
	<target name="main" depends="compile, doc" description="Clean build of mapserverlib-1.0.swc" />

	<echo message="clean"/>

	<target name="clean" depends="clean-temp-docs">
		<delete failonerror="false">
			<fileset dir="${basedir}\bin">
				<include name="${ant.project.name}.swc"/>
			</fileset>
		</delete>
	</target>

	<target name="compile" depends="" description="Compile SWC">

		<echo message="Compiling ${ant.project.name}.swc"/>

		<compc fork="true" output="${basedir}\bin\${ant.project.name}.swc">
		    <source-path path-element="${basedir}\src"/>
		    <include-sources dir="${basedir}\src" includes="**\*.as **\*.mxml"/>
			<compiler.include-libraries dir="${basedir}\bin\" append="true">
				<include name="agslib-2.2-2010-12-08.swc" />
			</compiler.include-libraries>
			<jvmarg value="-Xmx1024m"/>
		</compc>

	</target>

	<target name="doc" depends="clean-temp-docs, compile"
		description="Updates SWC with ASDoc XML">
		<echo message="Compiling ASDoc for ${ant.project.name}.swc"/>

		<!-- Call asdoc to generate dita xml files -->
		<asdoc output="${basedir}\tempDoc" lenient="true"
			failonerror="true" keep-xml="true" skip-xsl="true" fork="true">
		    <compiler.source-path path-element="${basedir}\src"/>
			<arg value="-external-library-path=${basedir}\bin\agslib-2.2-2010-12-08.swc"/>
			<doc-sources path-element="${basedir}\src"/>
			<jvmarg value="-Xmx1024m"/>
		</asdoc>

		<!-- updates swc with asdoc xml -->
		<zip destfile="${basedir}\bin\${ant.project.name}.swc" update="true">
		    <zipfileset dir="${basedir}\tempDoc\tempdita" prefix="docs">
			    <include name="*.*"/>
				<exclude name="ASDoc_Config.xml"/>
				<exclude name="overviews.xml"/>
		    </zipfileset>
		</zip>
	</target>

	<target name="clean-temp-docs">
		<delete dir="${basedir}\tempDoc" failonerror="false" includeEmptyDirs="true"/>
	</target>

</project>

Creating a Copy of a Default Spark Skin Class

Here’s five easy steps for creating a copy of a default Adobe Spark skin class in Flash Builder 4. There may be documentation on how to do this on the Adobe site, but I can never find it when the need arises. So, here goes:

Step 1:  In Flash Builder, make sure you are in the Flash perspective (upper right hand corner), and right click on any folder in your project. Choose New > MXML Skins

Step 2.  In the New MXML Skin window, fill in the package and name fields.

Step 3. Select “Browse” to choose your Host Component. Start typing the name of the component and choose the one that you need. Click Ok.

Step 4.  Check “Create as copy of”, and then use the drop down list to choose the skin you want. Click Finish.

 Step 5. Make sure you see the Adobe copyright in the skin’s MXML file. And that’s it, you are good to go!