actionscript layout framework demo

July 2nd, 2010

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:

guibuilder-2

//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.


4 Comments »




Using Hudson CI server to build multiple projects with FlexUnit4 tests on a windows box in parallel

June 29th, 2010

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.

Make Hudson Port Allocator convey a free port to the build script

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:

hudson-allocating
hudson-allocating-2


No Comments »




googlecode: converting svn to mercurial

June 20th, 2010

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
 

No Comments »




deepsplink 0.8.0 released

December 14th, 2009

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


No Comments »




Updates

October 15th, 2009

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.


No Comments »




Hello world!

May 24th, 2008

Yes, i am a bit late, but finally I did it. After so many years of pondering whether to start a blog and 'go public' or not, I decided to just do it. So here it is: my brand new blog. Hope you will enjoy it.


No Comments »




Powered by WordPress