Adobe Flex Mobile: Detecting View and Orientation Change with Event Listeners

There will be a time when you want to have more control over the transitions between Adobe Flex Views, or detecting when the device orientation changes. For example, I recently built an app that had some event listeners that stayed persistent even when the user changed views. So, I needed to listen for the change event when using tabbed view navigator <s:TabbedViewNavigatorApplication/> so I could remove those event listeners and I did it like this:

this.addEventListener(Event.REMOVED_FROM_STAGE,tabChangeHandler);

I also had a need to detect when the phone was tilted. Yeh, in a perfect world everything in the app’s user interface would automatically adjust to the new state, but that isn’t always the case especially when building more complex apps. What I did was listen for orientation changes like this:

stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE,stageOrientationChangeHandler);

Even if you are using some other Flex methodology for your mobile app, hopefully these examples will give you some ideas!

Adobe Flex Mobile Styles – Easily change the color of a Button

Have a mobile app using a default spark Button <s:Button /> and you simply want to change the background color? Wait just a second before you start creating a full-blown skin! It’s actually very simple – change the chromeColor. This info is buried way down near the bottom of the online reference doc. This also applies to ActionBar, ButtonBar, CheckBox, HSlider, and RadioButton.

Here’s one way to do it using CSS:

<fx:Style>
   @namespace s "library://ns.adobe.com/flex/spark";
   #shutdownButton
   {
      chromeColor: #FF0000;
   }
</fx:Style>

<s:Button id="shutdownButton" label="Shutdown?" click="shutdownButton_clickHandler(event)"/>	 

 Reference:

Basics of Mobile Skinning

Regular Expressions with Flex and ActionScript

Adobe has some great regex-based methods that can help you easily parse strings. If you aren’t familiar with regular expressions, they are basically very powerful, short-hand algorithms that are specifically designed to find patterns in strings. There are many people that hate regex’s but don’t let that deter you. They are very powerful and can save you a ton of time. And, even better is ActionScript lets you use either strings or regexes.

They are most commonly used to check form inputs for illegal characters, verifying correct formatting or for parsing complex strings. Here is an example usage pattern that looks for the end of a line:

var content:String = “Read this sentence.\r\n This is the second sentence.”;
var pattern:RegExp = /\r\n/;
trace(content.match(pattern));
var index:int = content.search(pattern);
trace(content.substr(index));

Here are some of the string methods you should become familiar with:

  • match() – uses either a regex or a string for the search pattern and returns an array of matching substrings.
  • replace() – does exactly what is says. It’s great for cleaning up inputs. Use cases include things such as removing inappropriate language.
  • search() – uses either a regex or a string for the search pattern and returns the first index of the substring that is located, or returns a -1. This is a great method to use for parsing strings.

Once you’ve found a match, so to speak, then you can use other string methods to parse the string:

  • slice() –  which slices out a section of the string for you given a start and ending index.
  • substr() – cuts out a substring based on a start index and length.
  • substring() – similar to substr() but the second parameter is the position of the character at the end of the substring.

A few helpful references:

URLStream, Adobe AIR and FLEX security permission issues on Windows 7

I had a particularly vexing problem that took nearly a half a day to dig to the bottom of. I was successfully able to connect to a streaming API using Adobe’s URLStream class, and I could see the passing of packets back-and-forth between the client app and the remote server using WireShark. So, there was definitely a valid connection and hand-shaking happening in the background. And, another key piece to the puzzle was the app ran just fine as a Flex app using the default bin-debug run-time settings. But, other than that running it as an AIR app or a Flex app from IIS, I simply couldn’t get any of the URLStream event listeners to acknowledge any type of connection whatsoever.

I knew this was a permissions issue, but finding documentation on AIR and Flash runtime permissions is, well, not easy. So, after quite a few searches on the internet and many dead-ends, there buried deep in some ancient scrolls of Adobe documentation were a few articles that provided the key to finally unlock the treasure chest.

You may have never heard about it before, but there is a User Flash Player Trust directory that typically contains at least one configuration file. And, in those files you can specifically grant application access to a particularly directory. In theory, there is also a Global Flash Player Trust directory. I originally thought I made the changes to that, but actually I never was able to locate it, and I ran out of time anyway. So, if someone knows where that is on Windows 7 please let me know.

Solution:

I added the pathname to the AIR executable installation directory to the air.1.0.trust.cfg file and bingo the application worked as expected.

The file typically resides in a path that looks like this: C:\Users\<username>\AppData\Roaming\Macromedia\Flash Player\#Security\FlashPlayerTrust

And, I add the following line to the file: C:\Program Files (x86)\BasicStreams.

References:

[Flash Player] Administrator Controls

[Flash Player] User Control document

Adobe Online Doc – Restricting Network APIs

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: http://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>