Archive for September, 2006

AS3 DisplayObjectContainerManager

Friday, September 29th, 2006

A co-worker of mine ran into a problem the other day in which he needed to remove a component from it’s parent container and relocate the component to a new container. This type of functionality is pretty common in flex applications so I decided to write a simple utility class to handle relocating display objects from one container to another.

The DisplayObjectContainerManager is a singleton pattern implementation in which there is a single instance created which handles display object relocation from within the display list. DisplayObjectContainerManager allows a component to easily be removed from it’s parent container and relocated to a seperate container while retaining it’s current state.

You can view a basic usage example here or view the ASDoc for the DisplayObjectContainerManager here.

AS3 WSDLURIProxy Class

Saturday, September 23rd, 2006

Many times when you are developing Flex 2.0 Applications utilizing Flex 2 Data Services you will most likely be consuming a web service in various components through out your application.

For instance: Imagine an application in which there are three different view states in the application and you have implemented a ViewStack to handle the different states. Within the ViewStack there are 3 seperate custom components. Each custom component contains a datagrid which displays data retrieved from a Web Service via a mx:WebService tag. In the Web Service tag you set the wsdl property to a specific Endpoint URI.

The only problem is that if you are working in a development enviroment and your application moves to production you will most likely need to change the wsdl destination in all of your components. This approach is fine and is also very common in simple Flex Applications which consume a webservice as a data source. A more efficient way of setting the Endpoint URI is by adding channels and destinations to the services-config.xml file located in WEB-INF\flex that the Web Service tags can point to. The WSDLProxy class adds the same functionality but in ActionScript, therefore there is no need to modify the services-config.xml.

How the WSDLURIProxy works is very simple. You set a static constant of type String to the URI of the Web Service endpoint. Next all you need to do is import the WSDLURIProxy in all of your components and set the ‘wsdl’ property in all tags to: wsdl=”{WSDLURIProxy.getEndpointURI()}”. and that’s it.

Now once your application is pushed form development to production if the Endpoint URI needs to change you can simply change the URI in the WSDLURIProxy and all of your Web Service tags will reflect the changes. Very Simple. If your working on a simple application and not using Cairngorm then this is a very useful utility.
Below I have provided links to the source code as well as complete WSDLURIProxy ASDocs.

WSDLURIProxy.as

ASDOC

AS3 Singleton Pattern Implementation

Saturday, September 16th, 2006

Many times when developing you will find that your application calls for a single instance of a class to handle multiple views and / or models across the system. For example, let’s say that your application needs to have one single instance of a class that manages all events within the system. Or another scenario could be where the application calls for a single instance of a class to manage all WSDL calls across the system. In order to support the required functionality for the application you would need to create a class that implements what is known as the Singleton design pattern.

The Singleton pattern is implemented by creating a class that has a public method which instantiates a new instance of the object if one does not exist. If an instance already exists, it simply returns a reference to that object which is a static property of the class, typically named ‘instance’. A best practice naming convention for this method is ‘getInstance();’. To make sure that the object cannot be instantiated in any other way, the constructor is made either private or protected. A Singleton is also considered to be an anti-pattern to some extent as it can be used as a euphemism for a global variable. However, in Object Oriented Programming it is an extreamly useful tool when used correctly.

As I mentioned earlier, the constructor for a Singleton is made either private or protected to restrict it’s access from being instantiated. Since constructors can only be declared as public in ActionScript 3 this is not allowed. A common solution to this is to simply add a private class within the same file as the class definition and pass an instance of the private class as an argument to the constructor. This way only the getInstance(); method has access to the private class. The only problem with this approach is that the constructor can be called from anywhere within the application with a null value passed in as the argument to the constructor. My solution to this is simple, check that the parameter passed to the constructor is not null. This is how a true Singleton implementation is achieved. The only time that this will not work is if the singleton class is a sub class and the constructor needs to make a call to super. The reason that this will not work is that a call to a super classes constructor must be executed in the very first line of code, therfore a parameter value can not be validated.

AS3 Custom Tween API

Monday, September 4th, 2006

A few months ago I was experimenting with the new Tween classes available in ActionScript 3.0. After importing the Tween class from the new package I received the following error when I attempting to instantiate a Tween instance
ReferenceError: Error #1069: Property onTweenEnd not found on mx.controls.DataGrid

I found that this error would occur no matter what type of component I attempted to call a Tween on. This error I assume was being called on or during an interval call as it was firing constantly.

So after spending a decent amount of time going back and forth trying different things I simply decided it would be easier to write my own Tween API for AS3. My intentions were to simply provide a basic Tween API for an application that I was developing at work. all I wanted to do was have the ability to easily apply Tweens to a component in Flex 2. I wanted the tween to be simular to that which was available in ActionScript 2 under the mx.transitions packages.

The custom Tween API is easy to use and also very useful so I have decided to distribute it as an .swc file for other Flex Developers to use in their Flex 2.0 Projects.

The Tween API consists of 3 destinct classes:

  1. Tween - Public class which provides all Tween functionality
  2. TweenType - Static class which provides a simple set of public constants for providing Tween types
  3. TweenEffect - Internal Static class which provides all Tweening methods which are from Robert Penner’s Tweening equations

Usage is pretty straight forward. All you have to do is import the Tween and TweenType classes and instantiate an instance of the Tween class. The Tween class constructor excepts 6 parameters which are as follows:

  1. tweenTarget:DisplayObjectContainer,
  2. propertyToTween:String,
  3. tweenType:String,
  4. tweenStartPosition:Number,
  5. tweenStopPosition:Number,
  6. tweenDuration:Number

The second parameter, propertyToTween can be set by using a constant from the TweenType class. This class is useful and enables you to easily see what type of tweens are available via the list of public constants.

Future revisions will include a callback event handler which will fire once the Tween is completed. I will continue to post updates once they are completed.

You can download the Tween API (version 0.1.9) for AS3 by clicking here.