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:
* 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.
