Splink

My as3 open source frameworks in action

A few weeks ago I read an article about inventing secure passwords in the well known c't magazine. That was when the revolutionary idea to build a password manager sprang to my mind. Well, the revolutionary thing about my password manager, so I thought, was that is was an online password manager. After some google-fu I discoverd that I was not the first with that "revolutionary" idea. Nevertheless, I had some time and felt like spending the weekend writing my own password manager. The main reason to just do it against better judgement was that I wanted to test-drive my amf module for the ingenious playframework and improve my flash UI component framework uitoolkit.

After the weekend I had my first version complete, but then new ideas for features occured to me and as my current project's next iteration still is in a waiting loop I carried on with my password manager... Now, a few weeks later I finally declare the first version complete and ready for your consideration: 

https://pwdsafe.com

* icon source: iconic and logo font source: exljbris font foundry.

Overall I'm quite happy with the result and glad that I finally managed to complete one of my spare-time projects so far that I can release it into the wild. Most fun projects just end up dead in my eclipse workspace (I'm sure you know what I mean...).

But the real cause why I'm blogging this, is that I believe it might be interesting for you to see my open source frameworks in action. I programmed the backend as I previously mentioned using the playframework in conjunction with my amf module which in fact just glues the playframework and the amf framework cinnamon. 

The frontend is obviously done entirely in flash. I built the core structure of the application with the aid of deepsplink, because I wanted to organize the site into pages and enjoy out of the box deeplink support: each page can be bookmarked and integrates with the browser back button. The most interesting page in regard to deepsplink features is the RetrievePage, which uses PageParameters. The RetrievePage contains a data grid whose contents can be filtered and a paginator (if there is enough data). PageParameters are used to add the page and current filter String to the url. Thus it is for instance possible, to use the filter, leave the page, return to the page via back button and still see the previously filtered data. 

I also used deepsplink's protected pages feature. If the user requests one of the protected pages he is redirected to the login page unless the user is authenticated. Look at the deepsplink configuration file which I think depicts the application structure quite well:

 <config>
 <page id="root" clazz="pages.RootPage" title="Root">
 <page id="home" clazz="pages.home.HomePage" title="Home" />
 <page id="create" clazz="pages.CreatePage" title="Create" />
 <page id="retrieve" clazz="pages.retrieve.RetrievePage" title="Retrieve" />
 <page id="settings" clazz="pages.settings.SettingsPage" title="Settings" />
 <page id="signup" clazz="pages.SignupPage" title="Signup" />
 <page id="login" clazz="pages.LoginPage" title="Login" />
 <page id="logout" clazz="pages.LogoutPage" title="Logout" />
 <page id="faq" clazz="pages.FAQPage" title="FAQ" />
 <page id="terms" clazz="pages.overlay.TermsPage" title="Terms and Conditions" group="footer" />
 <page id="privacy" clazz="pages.overlay.TermsPage" title="Privacy" group="footer" />
 <page id="imprint" clazz="pages.overlay.TermsPage" title="Imprint" group="footer" />
 </page>
 <home id="home" />
 <notfound redirect="home" />
 <protect redirect="login" >
 <page id="create" />
 <page id="retrieve" />
 <page id="settings" />
 </protect>
 <overlay>
 <page id="terms" />
 <page id="privacy" />
 <page id="imprint" />
 </overlay>
</config> 

For resource management and internationalization I employed my splinkresource framework. It is embedded in a preloader swf and loads the application's assets, fonts, the UI skin and the main application. Take a look at the configuration file:

 <resourcebundles defaultLocale="en_EN">
 <resourcebundle locale="en_EN">
 <locales>
 <locale value="de_DE" />
 </locales>
 <assets path="assets/">
 <asset id="assets" src="assets.swf" filesize="24823" />
 </assets>
 <fonts path="fonts/">
 <font id="Delicious" type="text" src="delicious.swf" sizeOffset="5" filesize="92263" />
 </fonts>
 </resourcebundle>
 <libraries path="">
 <library filesize="21016" src="assets/skin-darkgrey.swf" id="skin" />
 <library filesize="128203" src="pwdsafe.swf" id="main" />
 </libraries>
</resourcebundles> 

The filesize attributes are automatically populated by an ant task when I publish the application. This saves the trouble to determine the filesizes of the referenced files manually. The filesizeinjector task is included in splinkresource. As my application currently supports only two languages (english and german) and both actually use the same fonts and assets, I could use the locales node shortcut instead of having to define another resourcebundle for the de_DE locale. If, sometime I add for instance a russian version, I would need to define another resourcebundle, because russian requires other (cyrillic) fonts. Speaking of fonts; by adjusting the sizeOffset attribute of a font I am able to quickly change the application's overall fontsize which I find quite handy. Within the application code the ResourceProvider provides access to the contents of the currently loaded resourcebundle: getAssetForId, getFontDataByType and getLibraryForId are the most used methods. The splinkresource wiki describes the details.

You might have noticed that a "skin-darkgrey.swf" is mentioned in the splinkresource configuration. This is the skin for the components I use on the site. Currently the site contains no switch to change the skin at runtime, but it's planned for the future. Beforehand I need to photoshop some skins :) I use several components, all of them can be quickly skinned with bitmaps, but I also put in some effort to decouple view and logic for each component. That's why it is also possible to write a new set of views, which doesn't use bitmap skins and is (for instance) completely vector drawn. The components are part of my youngest open source actionscript project called uitoolkit which is still subject to a lot of changes and far away from beeing as mature as the other frameworks. During my work on the password manager I noticed this, because I regualary improved uitoolkit while the other frameworks stayed untouched (they just worked). However, the most exiting part of uitoolkit is the layout package. I believe that there are very few open source layout managers in the pure (non flex) actionscript world and the last time I looked, none of them could satisfy my demands. So as I was tired of writing stuff like 

 btn.x = lastbtn.x + lastbtn.width + xspacing; 

all the time, I developed my own layout system which is showcased here. The layout package contains the relevant classes and there are no dependencies to the rest of uitoolkit, so if you need a layout manager but don't want any of the other stuff, you can simply use the layout package. I can't live without it anymore and the complete pwdsafe site heavily employs the layout package.

The footing of the mentioned three frameworks is splinklibrary. It contains a lot of useful stuff, and I use it on a daily basis. I think the most notable is the queue package. It makes the handeling of asyncronous processes a breeze. Just put some async tasks into the queue, start the queue and get notified when the tasks are done. But there are other handy tools, like a lightweight tween package, logging, etc.

So I hope I didn't bore you too much with my frameworks, but I thought it was a good idea to present them in light of a concrete project.

An amf module for the amazing playframework

Ever since I discoverd the amazing playframework I waited for someone to come up with a module to let the playframework talk to actionscript via amf. 

But as noone came up with something until now, I took the time to investigate the matter myself. The closest solution I found before I started was a blogpost by Xavier Hanin.

I asked Xavier whether he could publish the code, but unfortunately he didn't publish it yet (he said that he had to check with his boss first). But as described in his interesting post it's not that hard to make it happen, because the probaby most difficult part is already at hand: the amf related code.

Because I know Jens and value his work, I always used his amf framework cinnamon to connect java with flash, so cinnamon was my first choice for this job, too. 

I found that the cinnamon codebase is very clean and well written, so it was pretty easy to eleminate the servlet dependencies and integrate cinnamon into play. Well actually I just had to write a simple Controller class. 

Putting the code in a playframework module was pretty easy too and so I had a working amf module in about a day.

You can find the complete module code at bitbucket. The code isn't tested very deeply yet and there are still some things to do, but it seems to work great so far.

 

actionscript layout framework demo

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

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

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:

${port}

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:

googlecode: converting svn to mercurial

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

updates

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.

deepsplink 0.8.0 released

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 released

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

splinklibrary feature demo

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();
 }
 }
 }
 

splinklibrary 0.2.0 and QLog 1.1 releases

I just relased a new version of splinklibrary. There are a few bugfixes, some performance improvements and several new features: - the logging framework is now prepared to address the new QLog features "tabbed logging" and "navigatable tree tabs"; If you use QLog you can send the current flash displaylist or the structure of any object to QLog which opens a new tab containing a navigatable tree of the displaylist or the object. - the tween engine is now more than twice as fast, flexible and extendable - there is a new "tree" package which makes working with tree structures quite convenient. For instance it is used internally to serialize the flash displaylist or any object into xml which can be sent via QLogOutput to QLog. For more details see the splinklibrary svn changelog To download the splinklibrary-0.2.0 release directly, click here or you can get it from the google code svn QLog now supports a new kind of tab, the "tree tab" which is capable of displaying any xml structure sent by a client as a navigatable tree. Note that you need splinklibrary-0.2.0 in order to use the "tree" feature. You can grab the QLog 1.1. release here