The Space For App Developers

I wanted to share a video recording with an un-framework overview. This simple library has evolved a little bit from my previous post but I expect it will stay in this form for good I don’t think it can evolve to anything more sophisticated but I hope that it will serve as an inspiration to others when building their own sets of helpers. I plan to use it solely as a substitue for my favorite DI frameworks when doing mobile Flex development.

Those who know me or at least subscribe to my blog know that I’m a big fan of Flex/AS3 frameworks. At this year’s Adobe MAX conference I even had my own session where I covered five major DI frameworks. Usually these frameworks provide a lot of productivity features and helpers like: IoC/DI, Event/Messaging bus, implementation of some architectural or design patterns (MVC, Command…), and many others. But what happens if we can’t or don’t want to use any of these frameworks?

Read the rest of this entry »

Recently I was looking for an easy way to extend my existing model objects with additional properties. The problem I had was that there was no option to mark these model classes as dynamic. What I came up with was a solution that uses the ObjectProxy class that comes with Flex. ObjectProxy essentially is a class that allows you to track property changes of its wrapped object. So what I also got with this approach was an ability to register a PropertyChangeEvent handler with my model objects.

The snippet below shows how I extend my User class object with an additional selected property. This is a view specific property so it wouldn’t really be a good practice to do it directly in the model.

	// Wrapping each user into ObjectProxy with selected additional property selected 
	var userProxy:ObjectProxy = new ObjectProxy({user:user, selected:false});
	// Registering event PROPERTY_CHANGE handle
	userProxy.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, 
		userProxy_propertyChangeHandler);

Below is a reason why I needed all that and how it works in practice; you can right-click the example to view the source code. BTW: If you are looking for a simple and quick way to have a dynamic Checkbox List this a way to go.

Another thing that the ObjectProxy class can resolve is a very common warning that occurs when you try to bind to not bindable properties: warning: unable to bind to property 'foo' on class 'Object' (class is not an IEventDispatcher).

Adobe MAX 2010 is over and I’m heading back to Poland. Before I get on the plane I wanted to post my presentation deck and the source code of a demo app that I used to cover the DI frameworks. I also hope to post the session recording as soon as it gets to Adobe TV. BTW this years MAX was really awesome!

As you may know the Swiz team has released RC2 of the upcoming 1.0 version. Among many improvements and bugfixes there is one new feature that brings a built-in command pattern to Swiz. As part of my prep work for Adobe MAX where I will be speaking about AS3/Flex Frameworks I wanted to investigate it in more depth. As you can read in the Swiz docs, this implementation borrows heavily from the RobotLegs framework, which I will be also covering together with Parsley. This approach is really clean and simple but to be honest I kinda hope that it will evolve in future releases to be more metadata-driven, which is actually what Swiz is all about

In the example below you can see it in action (right-click to view the full source code).

So how do we get started?

If, when you read this post, Swiz is still in RC2, then you will need to grab the latest source code from github and build it yourself, the released RC2 has some quirks in regards to its command pattern implementation.

The first thing you do is create a SaveUserCommand class that implements the IEventAwareCommand interface and has one execute function. Obviously this is the function that will implement the command logic. It doesn’t accept any parameters, so if you need any you should provide them by injection. UPDATE 23.09.2010: Triggering event is available through event setter function when you implement IEventAwareCommand instead of ICommand.

package com.riaspace.max.swiz.commands
{
	import com.riaspace.max.swiz.events.UserEvent;
 
	import flash.events.Event;
 
	import mx.controls.Alert;
 
	import org.swizframework.utils.commands.IEventAwareCommand;
 
	public class SaveUserCommand implements IEventAwareCommand
	{
 
		private var _event:UserEvent;
 
		public function set event(value:Event):void
		{
			_event = value as UserEvent;
		}
 
		public function execute():void
		{
			Alert.show("SaveUserCommand executed, userName: " + _event.userName);
		}
	}
}

Next you can map/configure our command using a MyCommands class that extends the Swiz specific CommandMap. Just a hint here for the Swiz team that it would be cool to have the ability to configure commands directly in BeanProvider in future releases

package com.riaspace.swiz.configs
{
	import com.riaspace.swiz.commands.SaveUserCommand;
	import com.riaspace.swiz.events.UserEvent;
 
	import org.swizframework.utils.commands.CommandMap;
 
	public class MyCommands extends CommandMap
	{
		override protected function mapCommands():void
		{
			// Mapping UserEvent.SAVE to SaveUserCommand class
			mapCommand(UserEvent.SAVE, SaveUserCommand, UserEvent, false);
		}
	}
}

Now you can instantiate the MyCommands class in the BeanProvider like any other bean:

<?xml version="1.0" encoding="utf-8"?>
<swiz:BeanProvider
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:swiz="http://swiz.swizframework.org" xmlns:commands="org.swizframework.utils.commands.*" xmlns:configs="com.riaspace.swiz.configs.*">
	<fx:Script>
		<![CDATA[
			import com.riaspace.swiz.models.presentation.MainPM;
		]]>
	</fx:Script>
 
	<fx:Declarations>
 
		<configs:MyCommands />
 
		<swiz:Prototype type="{MainPM}" />
 
	</fx:Declarations>
 
</swiz:BeanProvider>

At last you can dispatch the UserEvent.SAVE event in your PM class and the SaveUserCommand.execute will be called.

package com.riaspace.swiz.models.presentation
{
	import com.riaspace.swiz.events.UserEvent;
 
	import flash.events.IEventDispatcher;
 
	public class MainPM
	{
		[Dispatcher]
		public var dispatcher:IEventDispatcher;
 
		public function btnExecuteCommand_clickHandler():void
		{
			dispatcher.dispatchEvent(new UserEvent(UserEvent.SAVE, "John"));
		}
	}
}

As you probably know, Adobe MAX conference is approaching really fast. Of course I will be there and I will have my own session. Guess what the BIGGEST FRAMEWORKS LOVER (watch the teaser below) can be talking about, of course: “Flex/ActionScript 3.0 Architecture and Dependency Injection Frameworks Overview”. I will also cover closely related stuff, such as design patterns including MVC, MVP or PM. So if you are at MAX this year come to my session; it’s on Wednesday 3:30pm – 4:30pm.

You can also meet me during a few other sessions where I will be serving as a Teaching Assistant.

• 25.10 2:45pm – 4:15pm AIR for Android: Discovering the Magic
• 25.10 5:00pm – 6:30pm Building Your First AIR for Android Data-Driven Application
• 26.10 1:00pm – 2:30pm Building Your First AIR for Android Data-Driven Application
• 26.10 3:30pm – 5:00pm Flex Test-Drive: Building an application in 90 minutes
• 27.10 8:30am – 10:00am AIR for Android: Discovering the Magic

I’m very pleased to announce the release of as3term 2.0.0. For those who don’t know it, as3term is a terminal-like application that lets you compile and execute simple snippets of AS3 code. It was built with Flex/AIR 2.0 and it uses the NativeProcess API to launch the fcsh compiler, which is part of the Flex SDK. You can check out one of my previous post with the screen cast showing it in action.

This release includes several important changes and improvements:

• AS3 syntax coloring based on AS3TextArea (another open source project that I released recently)
• Using the fcsh.jar compiler from the Flex SDK instead of mxmlc, which provides an enormous improvement in compilation time.
• Added window resize gripper
• Window centering
• Updated Swiz to version 1.0 RC2

You can download as3term from here. If you have it already installed you just need to run it and it should update itself using the NativeApplicationUpdater.

I wasn’t really happy with the performance of my AS3 syntax coloring component AS3TextArea. That is why I took some time to investigate TLF (Text Layout Framework) further and I managed to gain some serious improvements. From over 1000 ms to do the text coloring it was reduced to around 490 ms (as a test case I used AS3TextArea component source code which is 334 lines long). I know its not perfect yet especially with single-threaded Flash Player but it is actually usable now with larger AS3 files

The whole secret is that I’m no longer reimporting the whole TextFlow over and over again. Now I’m only reformatting it on every change. Another important factor here is that the reformatting is performed in a batch using the ApplyFormatOperation and CompositeOperation classes. Checkout the snippet below, which does the magic. You can also play with improved AS3TextArea here:

	// Creating new CompositeOperation
	var compositeOperation:CompositeOperation = new CompositeOperation();
 
	// Reseting whole text to the default TextLayoutFormat
	var operationState:SelectionState = new SelectionState(textFlow, 0, text.length);
	var formatOperation:ApplyFormatOperation =
		new ApplyFormatOperation(operationState, formats.text, null);
	compositeOperation.addOperation(formatOperation);
 
	// Executing RegExp for the first token
	var token:* = syntax.exec(this.text);
	while(token)
	{
		// Getting token value
		var tokenValue:String = token[0];
		// Detecting token type
		var tokenType:String = getTokenType(tokenValue);
		// Getting TextLayoutFormat for current token type
		var format:TextLayoutFormat = formats[tokenType]; 
 
		// Creating new SelectionState for at the location of current token
		operationState = new SelectionState(textFlow,
			token.index, token.index + tokenValue.length);
 
		// Creating new ApplyFormatOperation for current token
		formatOperation = new ApplyFormatOperation(operationState,
			format, null);
 
		// Adding ApplyFormatOperation to CompositeOperation
		compositeOperation.addOperation(formatOperation);
 
		// Incrementing RegExp syntax lastIndex after the current token
		syntax.lastIndex = token.index + tokenValue.length;
 
		// Executing RegExp for the next token
		token = syntax.exec(this.text);
	}
 
	// Executing batch of ApplyFormatOperation's
	compositeOperation.doOperation();

So if you need to format particular portions of your TLF-based text I believe this is the best way to go.

With this post I wanted to do a preview of a new AIR application that I was involved building. It is called Tetrapod and its main purpose is assisting in PDF/Flash forms submission and response management. When building it some inspirations were taken from e-Deklaracje application that was released by Polish Ministry of Finance back in 2009. I think this is really cool demo app itself and also a cool demo of its powering technologies, which include Adobe AIR/Flex, Adobe LiveCycle Content Services and Adobe LiveCycle Process Management.

Go ahead and checkout the video below demonstrating Tetrapod in action. Also you can find more information about it here & here.

The part that you can’t see well in the video above is the logic on the server side. First of all documents that are displayed in the “Forms directory” are downloaded from LiveCycle Content Services when the application starts. This ensures that the user always has the latest version of the forms.

Next when the form is submitted, it is processed by the LiveCycle Process Management component. Of course in the video above processing is done automatically, but in a real-world scenario this could require human interaction and use of LiveCycle Workspace, for example.
Here is a video with a simple animation that demonstrates the server side processes a bit better:

UPDATE 28.09.2010 Below I included a video recorded by Tadeusz Chełkowski with more detailed Tetrapod overview:

Last week I released the as3term project, which is a simple AS3 Terminal application. This week as part of my work on as3term 2.0 I’m publishing this simple AS3 syntax coloring Flex/Spark component. Actually I was inspired by my colleague Anirudh Sasikumar and his powerful as3syntaxhighlight library. My initial thought was to use the library, but for as3term I needed something really simple, so I thought that I would write it myself using a few RegExp statements ;)

This component can be used to colorize source code of other programing languages. I defined multiple types of language keywords that should be recognized and styled. For each type you can specify your own styling as well.

• .default styles all keywords that don’t have style specified
• .text styles non-keyword text
• .var exceptional var styling
• .function exceptional function styling
• .strings exceptional string styling
• .asDocComment multiline comments /** comment **/
• .comment single and multiline comments: /* comment */ and // comment
• .accessModifiers styles: public, private, protected, internal
• .classMethodVariableModifiers styles: class, const, extends, final, function, get, dynamic, implements, interface, native, new, set, static
• .flowControl styles: break, case, continue, default, do, else, for, for\ each, if, is, label, typeof, return, switch, while, in
• .errorHandling styles: catch, finally, throw, try
• .packageControl styles: import, package
• .variableKeywords styles: super, this, var
• .returnTypeKeyword styles: void
• .namespaces styles: default xml namespace, namespace, use namespace
• .literals styles: null, true, false
• .primitives styles: Boolean, int, Number, String, uint

Below is a demo application that actually colors the syntax of its own logic. You can also checkout the source code over here.

UPDATE 09.09.2010 – I submitted the source code to the github.

You can paste or type in your own AS3 code into it and it will do coloring as you type.

And this is how as3term will look very soon: