Peter Keating, Blog

Peter Keating

Compressing Files in AIR

April 10, 2012

I was doing some re-engineering on a client project the other day and thought the implementation was worthy of sharing and hopefully could benefit others. The client project is a desktop application that uses the AIR runtime. Part of the application involves archiving a collection of files into a zip file. When initially developing the project we used a well put together AS3 Zip Library by David Chung (nochump). Unfortunately the AS3 Zip Library caused problems due to its synchronous approach to zipping files. The application would hang when zipping large files, potentially crash due to running out of memory and it was also slow.

Solution

The solution would be to change the synchronous compression process into an asynchronous approach thus preventing the AIR application to not respond. Unfortunately I was unable to find an AS3 library that fits the asynchronous compression requirement so it was time to use the NativeProcess classes that were introduced in the AIR 2.0 SDK. The NativeProcess class allows calls to be made to the command line to execute native apps, in this case an archiving tool.

7zip

The archiving tool I chose to use was 7zip. 7zip fit the bill perfectly, it’s free, offers a command line version, available across a magnitude of operating systems and its quick. Although in this example I have chosen to use 7zip, you could easily adapt the code to use a different native executable, it would just be a case of changing the native executable path and the arguments that are passed in. The command line version for Windows was easy to find on the downloads page of the official website. The client application is also available on Mac, so an unix executable was also needed. It took some searching but I was able to find a download for a version for mac that acted exactly the same as the official command line version.

Start with a Test

In order to prove the implementation I have created an AIR project that uses FlexUnit test runner. The test runner runs a test suite that performs an integration test to prove that the zip file is present. Probably could make this test a bit tighter by checking that the zip file created contains the expected archived files, but for this example checking that the zip file exists is sufficient for my liking. The test (code shown below) is an asynchronous test, due to the asynchronous nature of the implementation. I have used Robert Penner’s excellent as3-signals library as an alternative to events to notify listeners when the compression has completed. I used eidiot’s useful as3-signals-utilities-async library in order to asynchronously test the code that uses signals. The library provides the handleSignal method that waits for a signal dispatch and then passes useful variables to a specified method when the signal is dispatched, otherwise the test will fail when the timeout limit is reached.

/**
 * Tests that when the zip has finished, the completeSignal is
 * dispatched to a method that will assert that the zip file
 * is present as expected.
 */
[Test(async)]
public function zip_filesAreArchivedInZipFile(): void
{
var fileCompression: FileCompression = new FileCompression();

handleSignal(this, fileCompression.completeSignal, assertZipFileExists, TIMEOUT);

fileCompression.zip(dummyFiles(), zipFile);
}

/**
 * Proves that the code works by asserting that
 * the zip file exists.
 */
private function assertZipFileExists(e: SignalAsyncEvent, data: Object): void
{
assertThat(zipFile.exists, isTrue());
}
view raw gistfile1.txt This Gist brought to you by GitHub.

Implementation

Now time to make the test above past by implementing the zip method. The NativeProcess class in AIR is simple to use, all it requires is an instance of NativeProcessStartupInfo that contains the path to the native executable and the arguments it requires. 7zip has plenty of command line options, for our requirement the a option, that stands for archive and allows us to add files to an archive. The next option that is added to a vector of arguments is -tzip (others also shown at previous anchor tag) that specifies 7zip to create a .zip file. An obvious argument required is the name of the zip file to create, then any arguments specified after that are files to be included in the archive. In the example code I have only added an event listener to the native process for the process exit, aka when the task has completed. It would be better practice to handle errors and possibly provide feedback that is given by the native process, but for this example it isn’t really necessary. Once all the arguments and event listeners have been added it is simply a case of telling the native process to start.

/**
 * Creates the arguments for the native exectuable.
 */
private function createArgs(files: Vector.<File>, zipFile: File): Vector.<String>
{
var args: Vector.<String> = new Vector.<String>();

// flag tells 7zip to archive
args.push("a");

// defines to create a .zip acrhive
args.push("-tzip");

// path to save the zip file to
args.push(zipFile.nativePath);

// path of all the files to include in the archive
for each(var file: File in files)
{
args.push(file.nativePath);
}

return args;
}

/**
 * Handles the competition of the native process by disposing
 * of the NativeProcess instance created, and then dispatched
 * the complete signal.
 */
private function onExit(e: NativeProcessExitEvent): void
{
(e.target as NativeProcess).closeInput();
(e.target as NativeProcess).exit(true);

complete();
}

/**
 * Creates a zip file.
 *
 * @filesToArchive Collection of files to include in the archive.
 * @zipFile .zip file that will be created.
 */
public function zip(filesToArchive: Vector.<File>, zipFile: File): void
{
var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
nativeProcessStartupInfo.executable = File.applicationDirectory.resolvePath(EXE);;

nativeProcessStartupInfo.arguments = createArgs(filesToArchive, zipFile);

var nativeProcess: NativeProcess = new NativeProcess();
nativeProcess.addEventListener(NativeProcessExitEvent.EXIT, onExit);
nativeProcess.start(nativeProcessStartupInfo);
}
view raw gistfile1.txt This Gist brought to you by GitHub.

Little Trip Ups

There are always little trip ups that halt your development, even in the smallest examples. Where this was the first AIR project I have started from scratch for a while I got caught by an error thrown when using the NativeProcess class. This error was thrown because the application was not configured to use extended desktop privileges. In order to give the application extended desktop privileges, the application config should have the supportedProfiles as shown below.

<!-- We recommend omitting the supportedProfiles element, -->
<!-- which in turn permits your application to be deployed to all -->
<!-- devices supported by AIR. If you wish to restrict deployment -->
<!-- (i.e., to only mobile devices) then add this element and list -->
<!-- only the profiles which your application does support. -->
<supportedProfiles>extendedDesktop desktop</supportedProfiles>
view raw gistfile1.txt This Gist brought to you by GitHub.

The other snag that got me with the client application was getting it to function on mac. The problem was being caused due to the unix executable not having execute permissions, which was causing the native process to throw an error to say that the unix executable could not be found. In order to change the permissions of a unix executable simply use the command below in terminal.

chmod +x 7za
view raw gistfile1.txt This Gist brought to you by GitHub.

Wrap Up

This was quite a simple re-engineer but the benefits to the client application are clearly noticeable, with a quicker and more reliable compression that doesn’t cause the application to not respond. All the code for my this example application is hosted on github and feel free to use it.

Happy Easter Folks!

Introducing .NET MVC Boilerplate

April 4, 2012

.NET MVC Boilerplate, great place to start.

At Moov2, my place of work, we have been hard at work on a project that I am going to introduce to you right now! .NET MVC Boilerplate!

This project came about because there was a need for having an extendable base for which to begin new projects from. We found when starting a new project we kept repeating the same tasks & writing the same code, a process we called, create walking skeleton. The idea of a walking skeleton is a concept I first came across when reading Growing Object-Orientated Software, Guided by Tests. The walking skeleton can take time to get into place due to big infrastructure decisions need to be made, once completing the skeleton you should be in a position to start implementing features (by writing tests ofcourse). That is exactly what .NET MVC Boilerplate does, puts you straight into a position to start implementing features.

The project is currently still in its early stages, but it is pack full of features & tools to allow you to develop a project using the popular ASP.NET MVC framework. The project is open source and hosted on Github where there are instructions on how to get started and a little bit of documentation. Currently we are aiming to add more documentation about the ins & outs of the project and the features it offers.

If you want to get involved then please do! That would be amazing! Fork the project and contribute, or add some issues / queries that you have about the project. If you have any questions please feel free to email myself at peter@moov2.com or Dan (boss). We are really happy with how well it integrates with out development process so we are hoping it can also be of use to others.

Never Satisfied!

March 19, 2012

Great win for Jenson Button at Melbourne for the start of the F1 2012 season.

So turns out I have some designer blood in my developer veins! Merely a week after finally uploading my WordPress theme, I have decided to give it a bit of a makeover. I decided to get up to watch the start of the Formula 1 2012 season in Melbourne, and while watching I got my hands dirty in CSS (well lesscss to be more precise) to give my blog a bit more colour. The reason for the lick of paint was I just thought the old design was a bit bland and dull, so I thought some new colours and layout tweaks will make more of a statement.

The code for the old version is still available on Github tagged under v1 if you fancy having a look. So, I present to you version v1.1! Mainly aesthetics but does include a tiny feature change. I have placed a screenshot.png into the root of the created theme directory so the word press dashboard shows a screenshot of the theme. I am hoping to add some more content, features and jazz up the theme with some JavaScript over the coming months.

The Melbourne grand prix was a great way to start of what could potentially be the best season ever. Big well done the McLaren & Jenson Button for a great start to the season, I am sure Redbull will be looking for a big response in this weekends grand prix in Malaysia. After that is the Chinese grand prix, which will be doubly interesting as it will be the first grand prix that both Sky & BBC will show the full race live. Personally I will be sticking with BBC when they are showing the live race, I think their coverage is second to none!

Creating My Own WordPress Theme

March 11, 2012

So after delaying it for a while here is my own WordPress theme! It is very basic but that’s all it needs to be for my blog. Hopefully i’ll add some more bells and whistles later on but for now I have all I need to put some blog posts out on the world wide web and also some useful links to various social websites in case you want more of me. Creating a WordPress theme wasn’t all that difficult with so many helpful resources available, it makes getting something simple up & running a doddle.

On reflection, I decided to jot down a list of all the resources, tools and frameworks that come together to create my WordPress theme. Not all of them are necessities, in fact none of them are, but when developing at work I find these weapons offer immense benefit when developing for the web.

ThemeShaper

There are hundreds of articles & blog posts on creating WordPress themes available on the web, but the best I came across was the blog series provided by ThemeShaper titled How To Create A WordPress Theme: The Ultimate WordPress Theme Tutorial. ThemeShaper the theme team for Automattic, who are the creators of WordPress, so they know what their talking about when it comes to WordPress themes. The tutorial has 12 parts and goes through everything from the tools you require, to the files needed to get the bare bones running then onto the different templates required for showing everything that would typically be found in a WordPress website. The posts provide excellent resources and code examples so you really can’t go wrong, a must read for creating your first WordPress theme or feeling a bit rusty.

Theme Unit Test

If like me, you take testing seriously then WordPress provides a useful file that contains sample theme data that you can import into your development WordPress theme to validate your theme. The sample data covers everything that a WordPress blog could throw at you, so it really puts your theme through its paces to ensure that you are catered for every scenario. I would definitely recommend doing this at the beginning of your theme development as the sample data really does prevent wasting time entering data to cover everything that WordPress has to offer.

Git

This one definitely isn’t required, but I am sure if you have fallen in love with Git as much as I have then you can understand why I choose to use it. Git is a version control tool, and in my opinion the best there is. At work we started out using SVN, however we adopted the change to use Git throughout all our projects and we are reaping the benefits. Git takes a more command line approach, and although daunting at first I find it rather satisfying and get a lot of enjoyment out of using it. If you are currently using SVN, then I couldn’t recommend Git anymore to you, once you have given it a go I promise you won’t look back. If you aren’t using any version control tool then definitely give Git a try, but if it is a bit too daunting then SVN might be the answer as it does provide an easier learning curve. If you are going to give Git a go, then well done you! I recommend checking out this online book that will take you through everything you need to know about Git.

Github

All the code for my theme is available to see, and there is no better place on the web to do that than Github. Github is the place to host your open source projects that are using Git. Github does provide the ability to have private repository, if you are shy and don’t want people to see your code, but that does come at a price, I would recommend using Bitbucket for any private remotes.

LESS

CSS is great, and I feel comfortable with it, however as a programmer it is glaringly obvious that the language breaks the Dont Repeat Yourself (DRY) principle, which really can be a pain sometimes. There are now frameworks available that help cater for this, the two main ones are Lesscss and Sass. Both are extensions of CSS that can be compiled client-side or server-side into your traditional CSS file. These frameworks provide a wealth of features to speed up the development process. I will admit, Sass is on my to-do list, but I am a fully fledged supporter of lesscss. So how does it speed up development? It provides the ability to define functions, variables, mixins & nested rules to give the developer more power when creating stylesheets. So instead of writing the same properties to add rounded corners to a div, catering for all the different browsers with vendor prefixes, you can define a mixin (basically a method) that will apply all the properties specified, this mixin can even take parameters. That is just one of the many handy features which I couldn’t recommend highly enough, I really suggest you take a look, especially if your someone who spends along time copying and pasting while doing CSS.

Lesselements

I just gave you an example of a useful mixin that I always use, lesselements is a collection of handy mixins created by Dmitry Fadeyev. The file is open source hosted on Github and can easily be imported into any less file to provide an excellent selection of mixins, such as gradient, rounded corners, rotation, drop shadows & many more. I have actually made my own fork which I hope to add some more handy mixins too, so check that out if you please.

Lessc

Lessc is an open source project that can compile .less files into .css files on Windows. Created by Duncan Smart and available on Github it provides a simple way of getting from .less to .css on Windows.

Ant

Every project I do nowadays relies on a build script, mainly because most of the projects are hooked up with a continuous integration process that requires a build script for automation. However, since changing development from RIAs using Flex & AIR to building websites geared towards HTML5, I find myself using a build script all the time for tasks like compiling the .less files into .css files, minification of the CSS & JavaScript & also concatenating all CSS & JavaScript files into a single file for improved loading times. Obviously you wouldn’t do these tasks manually, it would take you ages! Automating it with a build script is a good way to achieve organisation of assets to improve performance of your project. Ant is a great tool for automation, it is well documented and can do most things required for automation in projects.

H5BP

When starting any project it can sometimes take a while to get a skeleton in place for developing on. HTML5 Boilerplate (H5BP) gives everything needed to create a custom skeleton packed full of goodies. I am a big fan of this project, it is open source, hosted on Github and is a great resources for information regarding developing performant cross browser websites with the latest technologies. Another thing I love about the project is all the documentation and discussion from lots of great developers going in depth about the decisions made for the project with healthy debate throughout.

normalize.css

Created by Nicolas Gallagher and integrated in H5BP, normalize.css is an open source project that forces elements in your HTML to render consistently across all the major browsers.

JQuery

My theme doesn’t feature too much JavaScript at the moment, but when developing with JavaScript I always use the well known JQuery. JQuery is a powerful JavaScript framework with excellent documentation that simplifies interaction with the DOM, with AJAX requests and a whole lot more.

Font Squirrel

Font Squirrel is a service that provides free fonts for commercial use. However, other than providing a great collection of free fonts it also provides a superb web font generator. The web font generator takes a font that you upload and returns a downloadable zip containing your font in various formats for different browsers including .ttf, .eof, .woff & .svg. Also included is css that can be placed into a stylesheet to make the fonts appear on a website.

Google Web Fonts

The header of my theme currently uses a crazy font called Boogaloo, which I have retrieved using Google Web Fonts. Google web fonts is an excellent service providing free to use fonts for any purpose. Getting as many fonts as needed onto your website is so easy with a well documented API instructing to include a style sheet at the top of a web page. What I really like about the service is that it shows a useful speedometer showing how quickly the chosen fonts will take to load on a page request.

YUICompressor

YUICompressor is part of the build script and helps to compress all the JavaScript & CSS files for improved performance. There are examples of how to integrate it with a build script on the H5BP build script or my own build script for this theme.

Modernizr

Saving one of the best till last is definitely the case with this tool, Modernizr is an open source project hosted on Github that aids in providing a consistent user experience across all browsers, new and old, with the cutting edge HTML5 and CSS3 features. Constantly updated, this tool is a JavaScript file that is included at the top of your web page and will tell you which features are available with the browser the user is viewing your website in. There is so many more features baked into this wonderful framework that are covered by the well written documentation, so head over there to find out more about this exciting tool.

So this is it! I am hoping to add more features and improve the blog over time, and also start writing some more blog posts to show y’all what I am working on and hopefully imprint some wisdom. All the code written for my theme is available for viewing on Github, and feel free to use any of it for your own theme or web related project.