I've already got a few ideas and things I want to try on the Nexus One, so guess I know what I'll be doing for the next week when I get home from work.

For my example, I used the tiger SVG file that I always see in SVG posts to create some vector art in Illustrator. After opening the SVG I simply saved it as an FXG 2.0 file using the Save As menu. In the FXG options I just used the default options.

After saving the FXG file, I placed the file in my src folders in a Flex 4 project in Flash Builder 4. I made a skins package to drop the file in.

Once you drop your FXG file into your project, using the file is a breeze. Just write the tag in!

It really is as simple as that. Using this method you can use these FXG files very easily in any of your Spark skins. Here's the rendered FXG:

Once you have your fxg graphics rendering, you can manipulate the object using width, height, alpha, etc and the graphics will scale as you'd expect from vector graphics.

Download Flash Builder 4 project file here: Example Source

If you have suggestions for enhancements or more bug fixes please do report them at http://zamfbrowser.riaforge.com  If you don't want to sign up for RIAForge just send me an email to omar@almerblank.com, I'd really like to hear your suggestions and bug reports!

ex. PlaylistMediator

package com.project.view
{
	import org.puremvc.as3.patterns.mediator.Mediator;
 
	public class PlaylistMediator extends Mediator
	{
		static public const NAME:String = "PlaylistMediator";
 
		public function PlaylistMediator( viewComponent:PlaylistView )
		{
			super( NAME, viewComponent );
		}
 
		public function get playlistView():PlaylistView
		{
			return getViewComponent() as PlaylistView;
		}
	}
}

As I've worked on PureMVC projects with other developers I've had the opportunity to see different approaches at writing application code in a PureMVC setting. The view getter was a pretty common practice, but as I've seen the way its used, and abused, I started wondering to myself, why? Why is this method necessary? Well obviously, it is necessary to retrieve the view component, without having to cast the type each time its needed. The real question is, why is it public?

The purpose of the Mediator is to listen for events on the view and send notifications to the Controller, and to provide an API to manipulate the view. And to a lesser extent, to listen to notifications that should update the view. However, I am not a fan of this either, and I try to keep notification handling in Mediators to a minimum. But that is beside the point I am trying to make about the view getter. With an API to the view provided by the Mediator I feel like the view getter should actually be protected or private, instead of public.

ex. PlaylistMediator

package com.project.view
{
	import org.puremvc.as3.patterns.mediator.Mediator;
 
	public class PlaylistMediator extends Mediator
	{
		static public const NAME:String = "PlaylistMediator";
 
		public function PlaylistMediator( viewComponent:PlaylistView )
		{
			super( NAME, viewComponent );
		}
 
		protected function get playlistView():PlaylistView
		{
			return getViewComponent() as PlaylistView;
		}
	}
}

Using protected or private enforces that you should manipulate the view via the Mediator's API, and also stops promoting code like this:

ex. PlaylistLoadedCommand

package com.project.controller.command
{
	import com.project.view.PlaylistMediator;
 
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;
 
	public class PlaylistLoadedCommand extends SimpleCommand
	{
		override public function execute( notification:INotification ):void
		{
			var playlist:Array = notification.getBody() as Array;
			var playlistMediator:PlaylistMediator = facade.retrieveMediator( PlaylistMediator.NAME ) as PlaylistMediator;
 
			var playlistItemView:PlaylistItemView;
			for (var i:Number = 0; i < playlist.length; i++)
			{
				playlistItemView		= new PlaylistItemView();
				playlistItemView.data		= playlist[ i ];
				playlistItemView.x		= 0;
				playlistItemView.y		= playlistItemView.height * i;
				playlistMediator.playlistView.addChild( playlistItemView );
			}
		}
	}
}

And instead, promotes code like this:

ex. PlaylistLoadedCommand – Registered to a notification sent when a Proxy is done loading playlist data

package com.project.controller.command
{
	import com.project.view.PlaylistMediator;
 
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;
 
	public class PlaylistLoadedCommand extends SimpleCommand
	{
		override public function execute( notification:INotification ):void
		{
			var playlist:Array = notification.getBody() as Array;
			var playlistMediator:PlaylistMediator = facade.retrieveMediator( PlaylistMediator.NAME ) as PlaylistMediator;
			playlistMediator.updatePlaylist( playlist );
		}
	}
}

In this example the Command simply calls the updatePlaylist() method on the PlaylistMediator, which encapsulates the logic required to actually update the playlist. The PlaylistMediator can now also offer this functionality to another application system if it is required later in development due to another action. Perhaps when the playlist is done and a refresh call is made, or if the user manually refreshes the playlist.

ex. In PlaylistMediator…

public function updatePlaylist( playlist:Array ):void
{
	var playlistItemView:PlaylistItemView;
	for (var i:Number = 0; i < playlist.length; i++)
	{
		playlistItemView		= new PlaylistItemView();
		playlistItemView.data		= playlist[ i ];
		playlistItemView.x		= 0;
		playlistItemView.y		= playlistItemView.height * i;
 
		playlistView.addChild( playlistItemView );
	}
}

This was just a small example, where I only showed accessing one mediator. There are instances where a notification might need to update two or three views. Instead of writing 10-20 lines in a Command per Mediator that needs to have a view updated, its much neater and easier to read to simply call a method on each Mediator. This has other benefits other than short code. If you are following some code that you are trying to debug it is easier to understand what happens if a notification is handled directly by a Command, since you will be able to see all affected actors, Mediators, Proxies, in a single centralized location. Listening to the notifications within all the mediators makes it more difficult to find all of the places that a single notification effects, as the example illustrates below. The alternative would be to listen to the notifications in each mediator, and have a command that triggers the proxy method. I think its more maintainable and easier to debug if all notifications go directly to a command. It makes more commands, and its more tedious, but in the end its far more maintainable and easier to debug.

package com.project.controller.command
{
	import com.project.view.PlaylistMediator;
	import com.project.view.MenuMediator;
	import com.project.model.proxy.ApplicationDataProxy;
 
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;
 
	public class PlaylistLoadedCommand extends SimpleCommand
	{
		override public function execute( notification:INotification ):void
		{
			var playlist:Array = notification.getBody() as Array;
 
			var playlistMediator:PlaylistMediator = facade.retrieveMediator( PlaylistMediator.NAME ) as PlaylistMediator;
			playlistMediator.updatePlaylist( playlist );
 
			var menuMediator:MenuMediator = facade.retrieveMediator( MenuMediator.NAME ) as MenuMediator;
			menuMediator.resetMenu();
 
			var applicationDataProxy:ApplicationDataProxy = facade.retrieveMediator( ApplicationDataProxy.NAME ) as ApplicationDataProxy;
			applicationDataProxy.getPlaylistInfo( playlist );
		}
	}
}

I plan on adding some AS3 service class export functionality next for Flash and Flex applications. The other big feature I want to add soon is strong type support, to test and see strongly typed objects.

On my server if you directly hit the http://www.zamfbrowser.org/zamf_demo/gateway.php file, the file downloads.  I believe it has something to do with the AMF response header and the server settings.  I'm just not certain on that  yet.  The gateway does work with an AMF client though.  Also, if you have a gateway named something like this:  http://www.server.com/api/index.php, you can use http://www.server.com/api/, but if you leave out the trailing slash the browser does not load the gateway properly.  I'm trying to track that issue down.

Hopefully this is as helpful to some as it's been for me in the first couple of days! =)

package com.project.controller.notifications
{
	import com.project.controller.commands.LoginCommand;
	import com.project.controller.commands.LogoutCommand;
 
	import org.puremvc.as3.interfaces.IFacade;
 
	public class LoginNotifications
	{
		static public const LOGIN:String = "LOGIN_NOTIFICATION";
 
		static public const LOGOUT:String = "LOGOUT_NOTIFICATION";
 
		public function LoginNotifications( facade:IFacade )
		{
			facade.registerCommand( LOGIN, LoginCommand );
			facade.registerCommand( LOGOUT, LogoutCommand );
		}
	}
}

Above is an example of a notification class. The constructor requires an IFacade object that it uses in the constructor to map notifications to commands using the IFacade object that is passed into the constructor. You can see how a bigger group of commands can be nicely organized into this class. Below is an example concrete Facade.

package com.project
{
	import com.project.controller.notifications.LoginNotifications;
 
	import org.puremvc.as3.patterns.facade.Facade;
 
	public class ProjectFacade extends Facade
	{
		public function ProjectFacade()
		{
			super();
		}
 
		static public function getInstance():ProjectFacade
		{
			if (!instance) instance = new ProjectFacade();
 
			return instance;
		}
 
		override protected function initializeController():void
		{
			super.initializeController();
 
			new LoginNotifications( this );
		}
	}
}

In the example above we can see the usage example for the notifications class for the login group. In the override for the initializeController() method, after initializing the controller, a LoginNotifications object is started with a reference to the IFacade instance that is the concrete facade, or simply "this". The amount of imports is reduced in the concrete facade, and there are less lines required in the initializeController() method, creating a neater, shorter concrete facade class.

This kind of organization is almost always based on personal preference, this just happens to be mine. =)

Throwing rotation into the mix no longer guarantees that the registration point is the top left coordinate of the item being aligned, which renders the first approach incorrect.  The first part of this blog post will go into the getBounds() method, what the bug is, and how to get the accurate bounds.

This SWF above demonstrates the issues with the getBounds() method.  On the stage is a MovieClip instance with a triangle shape in it, the MovieClip's rotation is set to 0 at start up.  Pressing the "Toggle MC Border" button draws a 1 pixel red line around the border of the MovieClip that has the triangle.  Pressing the "Toggle Unrotated getBounds()" displays the rectangle returned by the getBounds() method before the MovieClip has been rotated.  Before explaining the last two buttons, lets shift focus to the Rotation input at the top.  The first two buttons show the border and the unrotated bounds border.  The Rotation input lets us modify the rotation of the MovieClip.  If the object is rotated to 45 degrees by typing in 45 and clicking the "Set Rotation" button the first two buttons still perform the same function.  Except that now that the MovieClip is rotated the unrotated bounds rectangle now longer contains the shape inside of it.  If you turn off both the MC Border and the Unrotated getBounds(), and click on "Toggle Rotated getBounds()", you will see that the red border does not accurately draw to the expected size.  The top and right borders are further away from the right edge, which should meet at the top right of the shape.  If you click on "Toggle MC Border", you can visually see why.  The getBounds() method calculates the bounds Rectangle object by using the actual borders of the MovieClip, instead of actual graphical space that the MovieClip occupies.  If you now click on the fourth button, "Toggle getAccurateBounds()", you will see the blue rectangle drawn to the expected shape.  If the MovieClip's border is still on, the blue rectangle will be the same size as the red rectangle as seen in the screenshot below.

This is because the red 1 pixel border showing the MovieClip's border is taken into account, accurately, by the getAccurateBounds() method that I wrote.  That results in the bounds rectangle to do the same thing that getBounds() does.  If you press "Toggle MC Border" and turn off the MovieClip's border, and then turn the accurate border off and back on, you will see the difference in how the new actual bounds is actually wrapping the rotated triangle accurately.

Below is the _getAccurateBounds() method that is calculating the blue rectangle we see above.  This method demonstrates the technique to find the accurate bounds, but would likely need to be slightly altered to fit within real implementations depending on the actual architecture of the application its going to be used in because of the fact that it currently requires me to remove it from the stage to draw it independently of any other display objects.  It can probably also be accomplished by looping through the children of the clip's parent to turn off any visible items and turn them back on after the drawing process, but for the sake of simplicity in this example I will simply attach it to my placeholder bounds clip and then put it back.

Anyhow, the way that I accomplished this was by isolating the MovieClip that I want an accurate bounds Rectangle object from.  In my example I place it in a Sprite called boundsClip.  Next I set up a ColorTransform object with a color of blue (0×0000FF).  This ColorTransform object is used in the next step, where I create a BitmapData object sized to the clip's parent's dimensions, in this case the SWF's stage.  I then draw the boundsClip into the BitmapData object.  That is why I place the clip into a placeholder Sprite, so it can be drawn into the BitmapData in the correct position using its x,y coordinates.  In the draw() method, I use the colorTransform object to tint the bitmap blue.  This is crucial to the last step.  Before returning the accurate bounds, I place the clip back onto the stage.  And finally, I get the accurate bounds of the clip by using the getColorBoundsRect() method on the BitmapData object.  In the example application above I use this Rectangle object to accurately draw the blue rectangle, which shows the accurate bounds.

In my next post I will go into how to use the bounds rectangle to actually move the objects to a desired position.

You can download the FLA for the example application here: getBoundsBug.fla

function _getAccurateBounds( clip:Sprite ):Rectangle
{
	// Make a placeholder clip to draw the clip isolated from anything else
        // that is on stage.
        var boundsClip:Sprite = new Sprite();
            boundsClip.addChild( clip );
 
        // Make a ColorTransform object to tint the bitmap that is going to be
        // drawn based on the clip passed into _getAccurateBounds()
	var boundsColorTint:uint = 0x0000FF;
	var colorTransform:ColorTransform = new ColorTransform();
            colorTransform.color = boundsColorTint;
 
	// Draw a BitmapData object with the clip passed into _getAccurateBounds()
        // and tint the BitmapData to a color, I use blue.
        var bitmapData:BitmapData = new BitmapData( stage.stageWidth,
                                                    stage.stageHeight,
                                                    true,
                                                    0xFF000000 );
            bitmapData.draw( boundsClip, null, colorTransform );
 
        // Place the mc back onto the stage after drawing it.
        addChild( clip );
 
        // Return the Rectangle object from the getColorBoundsRect() method on
        // the BitmapData object.  This Rectangle object will contain the
        // correct bounds of the item you want the bounds of rotated or not.
        return bitmapData.getColorBoundsRect( 0xFFFFFF, boundsColorTint, false );
}