Currently I am in the process of starting another actionscript open source project. The plan is to create some sort of UI library/framework which makes the everyday UI programming tasks a more pleasant experience. The main goal is to encourage clean concise and flexible client code which can be easily maintained and changed.

One part of the project is a layout framework. I created a little demo app to test it's current capabilities. Click the image to launch to demo:

//EDIT:
A friend of mine read this post and complained that it lacks a clear explanation what the demo is about.

Well, the demo's purpose is to test and showcase the current state of a layout framework which I am currently working on.

The 'GuiBuilder' demo enables you to create layouts visually and save/restore them to/from XML. If you start the demo it automatically loads a "default" layout. To explore this layout you can select any cell or container on the stage and change it's values by either dragging it's right and bottom border or by changing it's values in the form on the left side.

You can select any cell or container by either clicking on it, or selecting it with the dropdown box on the right side. The difference between a cell and a container is that a container can contain any number of cells or containers, whereas a cell can't contain anything else. (Composite pattern)

You can remove any selected cell or container exept for the "Container stage" (Some root must remain). If you remove a container, all cells and containers it contains are also removed. If you select a container you can also add cells or containers to it. If you select a cell you can only change the cell's settings, but not add anything to it.

As containers can hold other containers and cells, containers allow a lot more settings then cells. Select a container and look at it's settings in the left side form. These are the actual features of the layout framework. Any value you change affects the content of the selected container. So you could for instance change the amount of columns, the alignment, and so on. But to see any change, the container needs content. As long as the container doesn't contain cells or containers, nothing happens. But as soon as you start adding cells or containers to the container you will see the settings take effect, because the container's settings are applied to it's content.

If you are finally happy with your result you can click the "Save to clipboard" button and store the resulting XML on your clipboard. The next time you open the 'GuiBuilder' demo just paste the XML into the TextArea on the right side and click restore and your layout will be restored.

Recently I setup the Hudson CI server for my splink projects. As Hudson is very well documented and super-easy to use, I had it up and running within less than 5 minutes.

1. Download the latest Hudson.war
2. Run Hudson "java -jar hudson.jar"
3. Install Hudson as a windows service

My next step was to add build jobs for the splink projects. For each project (splinklibrary, splinkresource and deepsplink I did

1. Add a "Free Style" job
2. Configure the source code repository (firstly I had to install the Hudson Mercurial plugin, but for instance SVN is supported out of the box.
3. Define when to run the job (i.e. every hour, after a commit, after another build, ...)
4. Add ANT scripts and define which tasks are to be run. (i.e. compile, run-tests, package, release, ...)
5. Define what to do after the ANT scripts have been successfully run. (i.e. publish documentation, publish test results, archive releases, ...)
6. Save the job

Now I could click the 'build button' and Hudson successfully built my project. Great!

But wait,..

Next I configured the three jobs to run every hour. But almost always one of the jobs failed. After looking at the console output of the failed builds I discovered the problem:

The FlexUnit tasks communicate with the swf which runs the FlexUnit tests over a socket on port 1024. So if two jobs run at a time, they interfere with each other because both jobs try to use port 1024 when they run the FlexUnit tests.

So I needed to assign unique TCP ports to avoid these port collisions and the Hudson Port Allocator Plug-in seems the best tool for the job. Just install it here
With the port allocator in place I could allocate one or more ports for a job. My first solution was to just define port 1024 for each job and be done. Port Allocator then queues all the jobs which use port 1024 instead of running them in parallel. On the upside: No more failed builds. But on the downside the builds take longer, as they can't execute in parallel anymore.
The answer to this was to make the Hudson Port Allocator Plug-in pick a free random port and convey the port to the build script. Because if each job is assigned with it's own port for the FlexUnit socket communication, jobs can't jam each other anymore.

Now I could grab the PORT enviroment variable in my build file and use it to configure the Hudson ANT task.

 
<property environment="env"/>
<condition property="PORT" value="${env.PORT}" else="1024">
	<isset property="env.PORT" />
</condition>
 
<flexunit
	swf="${tests}/TestRunner.swf"
	toDir="${report}"
	haltonfailure="false"
	headless="false"
	verbose="true"
	port="${PORT}"
	localTrusted="true">
</flexunit>
 

But as the FlexUnit CIListener class also needs to know the port, I employed ANT's echo task to write the port number into a file:

 
<echo file="${tests}/port">${port}</echo>
 

 
core = new FlexUnitCore();
core.addListener(new CIListener(port));
 

And to get the port inside my TestRunner class I had to just load the "port" file:

 
public function TestRunner() {
	var loader : QUrlLoader = new QUrlLoader(new URLRequest("port"));
	loader.register(QEvent.COMPLETE, function(e : QEvent):void {
		start(loader.getContent());
	});
	loader.register(QEvent.ERROR, function(e : QEvent):void {
		start();
	});
	loader.start();
}
 
private function start(port : uint = 1024) : void {
	core = new FlexUnitCore();
	core.addListener(new TraceListener());
	core.addListener(new CIListener(port));
	core.run(IntegrationSuite);
}
 

* QUrlLoader is part of the splinklibrary project.

By checking the console output after running a build job I was able to verify that Hudson Port Allocator indeed picked different ports for each job:

Just converted the splink googlecode repositories from svn to mercurial dvcs. (including the complete commit history) It worked like a charm once I figured that I had to use TortoiseHg's hg.exe to perform the conversion on my windows machine. TortoiseHg includes all neccessary extensions (python+svn bindings) and works out of the box.

1. Convert the library:

 
mkdir mylibrary
hg.exe convert http://mylibrary.googlecode.com/svn mylibrary
cd mylibrary
hg.exe push https://mylibrary.googlecode.com/hg
 

2. Convert the wiki:

 
mkdir mylibrary-wiki
hg.exe convert http://mylibrary.googlecode.com/svn/wiki mylibrary-wiki
cd mylibrary-wiki
hg.exe push https://wiki.mylibrary.googlecode.com/hg
 

1. deepsplink 0.9.0

there are various new IRequestBuilder implementations to provide different page transition orders. Here is a quick configuration excerpt:

 
<pages request="hide-initshow-finalize">
<page id="home" clazz="Test" />
<page id="p1" clazz="Test" />
<page id="p2" clazz="Test" />
<page id="p3" clazz="Test" request="init-show-hide-finalize">
<page id="p4" clazz="Test" />
<page id="p5" clazz="Test" />
</page>
</pages>
 

All pages beneath a page whose request attribute has been set are processed by the configured request until a page has configured a different IRequestBuilder which then is used to process the pages beneath that page. This mechnism is very flexible and should enable to cover a lot of requirements. However, you can always add your own custom IRequestBuilder implementations if the default ones don't suffice.

The deepsplink configuration data classes now have a 'toXML' method which spits out the configuration xml recursively.

The boot package now provides two default bootstrappers (ExternalConfigBootstrapper, XmlConfigBootstrapper) which should cover most usecases. For special requirements it is quick and easy to write a custom bootstrapper.

 
new ExternalConfigBootstrapper("config.xml", new BootStrategy(this)).start()
 

Finally the framework and sample codebase has been updated to use the latest splinklibrary and splinkresource releases (both 1.1.0)

2. splinkresource 1.1.0

The configuration data beans now have a 'toXML' method which spits out the configuration xml recursively just like the deepsplink configuration does.
Finally the time had come to change all the explicit to implicit getters because implicit getters are more concise, hide more information from the client (is it a var or a method) and thus allow more changes without affecting client code because of public API changes ;)

3. splinklibrary 1.1.0

As deepsplink makes heavy use of splinklibrarys tree package some things needed improvement:
The TreeUtils class has been removed and it's static methods were shifted to the Tree class which seemed much more compact and suitable. While at it I also added a static convenience methods

 
visit(node : INode, fnc : Function) : void
clone(node : INode) : INode
 

Finally, to gain more flexibility for a low level component like a Node I decided to introduce the INode interface and use implicit getters.

Over the last weeks I put some more work into my actionscript 3 deeplink framework deepsplink.

In particular I

- simplified the public API
- refactored a lot of the internals
- enhanced comments
- updated the sample application
- wrote a getting started tutorial based on the sample application

If you want to find out how easy it is to create a flash application with full deeplink support, asynchronous page transitions and a modular and loosely coupled application design, then check out the getting started tutorial

deepsplink 0.7.0 released

i published updates for my libraries:

deepsplink 0.6.0

- several enhancements including better page stacking, page parameters and performance

splinklibrary 1.0.2

- fixed memory leak in QTween

splinkresource 1.0.1

- fixed bug which prevented the ResourceProcessor to ever complete processing, but the bug only occurred when loading assets

- added convenience method getAssetById(id : String) : DisplayObject, which directly instantiates the requested asset instead of just returning it's class like getAssetClassById does.

I'm proud to anounce the release of deepsplink, an actionscript 3 deeplinking framework. deepsplink provides a clear, flexible and easy to use api to build a scalable actionscript 3 application very quickly.
The source code, the api documentation and a simple demo application which showcases the main features can be found at googlecode

I just released new versions of splinklibrary and splinkresource. The version number is now 1.0.0 as both projects are pretty stable and have been used in a number of projects. The splinklibrary classes are now covered by unit tests.

I also improved the public api's of the queue (which is now even more powerful and easy to use), the tween engine (which runs a bit faster and is now much more convenient to use) and the shape package.

Because of the changes to the public api, splinklibrary is not backward compatible as previous versions were, which is the main reason for the splinkresource update (no new features there).

You can access the new versions here:

splinklibrary
splinkresource

here is a quick demo class showcasing a few splinklibrary features. Please note that this example focuses on showing some splinklibrary features and it is not considered to be a best practice approach for loading and tweening an image. Also note that the demo is just a teaser, splinklibrary has a lot more useful concepts to offer. I recommend you to checkout the source and see for yourself.

 
package
{
import org.splink.library.loading.QLoader;
import org.splink.library.loading.QUrlLoader;
import org.splink.library.logging.ILogger;
import org.splink.library.logging.ILoggerFactory;
import org.splink.library.logging.LogLevel;
import org.splink.library.logging.LogRange;
import org.splink.library.logging.LoggerFactory;
import org.splink.library.logging.LoggerProvider;
import org.splink.library.logging.logoutput.DefaultOutputFormatter;
import org.splink.library.logging.logoutput.FirebugOutput;
import org.splink.library.logging.logoutput.QLogOutput;
import org.splink.library.queue.Queue;
import org.splink.library.queue.QueueEvent;
import org.splink.library.queue.QueueResultProvider;
import org.splink.library.queue.ResultQueue;
import org.splink.library.tween.TweenAction;
import org.splink.library.tween.TweenPool;
import org.splink.library.tween.sprop.FilterProp;
 
import mx.effects.easing.Sine;
 
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.filters.BlurFilter;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;
/**
 * This class demos the usage of some of the splinklibrary classes.
 *
 * @author Max Kugland
 */
public class Demo extends Sprite
{
private var _logger:ILogger;
 
/**
 * Configure the logger once for the project
 */
private function configureLogger():void
{
	// we need an ILoggerFactory, which will create our ILogger instances
	var factory:ILoggerFactory = new LoggerFactory();
	// set a factory id
	factory.setId("demo");
	// set the range of LogLevels which will be logged
	factory.setRange(new LogRange(LogLevel.TRACE, LogLevel.FATAL));
	// set an IOutputFormatter to format our logmessages
	factory.setOuputFormatter(new DefaultOutputFormatter("demo-app"));
	// add ILogOuputs which will send the logs to their destination,
	// in this case we let the logs appear in QLog and in Firebug
	factory.addLogOutput(new QLogOutput());
	factory.addLogOutput(new FirebugOutput());
	// add the factory to the LoggerProvider
	LoggerProvider.addLoggerFactory(factory);
 
	// get an ILogger from the LoggerProvider using the ILoggerFactory
	// with the id "demo"
	_logger = LoggerProvider.getLogger("demo", Demo);
}
 
public function Demo()
{
	configureLogger();
 
	// log a message with the LogLevel INFO, as INFO is within the
	// specified LogRange, the message will get logged
	_logger.log(LogLevel.INFO, "starting Demo");
 
	// Create a ResultQueue and register listeners for error and
	// completion events as ResultQueue is capable of distributing
	// events because it extends Distributor
	var queue:ResultQueue = new ResultQueue;
	queue.register(QueueEvent.ON_COMPLETE, onComplete);
	queue.register(QueueEvent.ON_ERROR, onError);
 
	// add a loader to the queue which loads xml and assign it an id
	//(feedResult)
	queue.add(new QUrlLoader(
	new URLRequest("http://splink.org/?feed=rss2"),
	URLLoaderDataFormat.TEXT, "feedResult"));
 
	// add a loader to the queue which loads an image and register a
	// listener for its completion event, also pass the queue instance
	// (q) to enable it's usage within the method which is called on
	// it's completion, (QLoader also extends Distributor and therefore
	// can fire events)
	queue.add(new QLoader(
	new URLRequest(
	"http://splink.org/wp-content/themes/splink/img/header.jpg"))).
	register(QueueEvent.ON_COMPLETE, onImage, queue);
 
	// start the queue
	queue.start();
}
 
/**
 * Called when the image loader completes
 *
 * @param e the event sent by the image loader
 * @param q an optional object, in this case the queue
 */
private function onImage(e:QueueEvent, q:Queue):void
{
	// unregister from the event source (the image loader)
	e.getSource().unregister(QueueEvent.ON_COMPLETE, onImage);
 
	// cast the event source (IDistributor) to QLoader
	var loader:QLoader = (e.getSource() as QLoader);
 
	// add the loaded image data to the stage, and set it's alpha
	// value to 0
	var bmp:DisplayObject = loader.getContent();
	addChild(bmp).alpha = 0;
 
	_logger.log(LogLevel.TRACE, "image present: " + bmp);
 
	// create a bitmapfilter which is used for tweening
	var fprop:ISpecialProp = new FilterProp(new BlurFilter(0, 0, 1));
 
	// create a TweenPool and add some TweenActions targeting the
	// loaded image (bmp). tween the alpha from it's current value
	// (0) to 1 and tween the blurX  and blurY properties of the image
	// from 100 to 0
	var t:TweenPool = new TweenPool;
	t.add(new TweenAction(bmp, Sine.easeOut, 500,
	TweenAction.ALPHA, bmp.alpha, 1));
	t.add(new TweenAction(bmp, Sine.easeOut, 500,
	TweenAction.BLUR_X, 100, 0, 0, fprop));
	t.add(new TweenAction(bmp, Sine.easeOut, 500,
	TweenAction.BLUR_Y, 100, 0, 0, fprop));
	// add the TweenPool to the end of the queue
	q.add(t);
}
 
/**
 * If one of the queued operations fails, we get notified here
 */
private function onError(e:QueueEvent):void
{
	_logger.log(LogLevel.ERROR, "Demo error " + e.getErrorMessage());
}
 
/**
 * As the queue continues even if a queued operation fails onComplete
 * gets called in any case.
 */
private function onComplete(e:QueueEvent):void
{
	// as we used a ResultQueue we can retrieve a QueueResultProvider
	// which carries the results of the IResultQueueable items within
	// the ResultQueue. Note that the TweenPool is not an
	// IResultQueueable but an IQueueable, as it doesn't compute any
	// results, so the QueueResultProvider only holds the  results of
	// both loaders (the image loader and the xml loader)
	var p:QueueResultProvider =
	(e.getSource() as ResultQueue).getResultProvider();
 
	// here we retrieve the result with the id "feedResult" from the
	// QueueResultProvider and as we know its content is xml we cast
	// it to xml
	var xml:XML = XML(p.getResultById("feedResult").getResult());
 
	// we log the title of the loaded xml document which is a rss feed
	// at the TRACE LogLevel and ouput that the demo is complete at
	//INFO level
	_logger.log(LogLevel.TRACE, "xml feed title: "+xml["channel"].title);
	_logger.log(LogLevel.INFO, "Demo complete.");
 
	// Eventually we invoke finalize on the event source which results
	// in removement of all the registred listeners
	e.getSource().finalize();
}
}
}