Alain Hufkens | Rich Interactive Applications Developer

21Feb/100

Playing with Maven & NativeProcess API in AIR 2.0

I have been playing with Adobe AIR 2.0 beta 2 for a couple of weeks now. And because we use Maven for our bigger development projects at Nascom, I decided to create a small proof of concept app to wrap the most used Maven commands. Off course Maven is a very powerful asset when building big Java based applications, but for a some of my colleague Flex developers it can be a frustrating experience. Working with the command line is not the preferred thing to do for a developer that is working most of the time on building user interfaces.

So to avoid these frustrations and to experiment with Adobe AIR 2.0 beta 2, I created this small app that calls some of our most used maven commands:

mvn flexmojos:flexbuilder (generates the Flex Builder project settings)
mvn jetty:run (starts the Jetty webserver)
mvn jetty:stop (you will need to and an extra setting in the project's pom.xml file)
...

So what's this post all about?

First it's about the code that uses the new NativeProcess API available in Adobe AIR 2.0 to call Maven commands and process (display) the output of these commands. On the other hand I have built a small tool that could be useful for all you frustrated Flex developers that have to know commands to start and stop servers, and all that magic mojo stuff (Flexmojos). The current example only has a very limited list of commands (see above). But it could be a start for another great productivity app, because with the NativeProcess API you can now take advantage of almost everything on your OS. Only be aware that when doing this you are mostly writing OS specific code.

How does it work?

Start the application in Flash Builder and drag and drop the pom.xml (this is a Maven project file) file from the root of the project to the app, and then the xml file will be parsed. There are normally al least two modules: a server (war) module and a flex (swf) module. And they each support different commands.

There are however still a couple of issues. So if anybody can help me out here, that would be very appreciated.

Because the NativeProcess can't call .bat files directly, you need to use a workaround calling cmd.exe and passing the mvn.bat file as a parameter. It works great while running from Flash Builder. But in the installed app it shows the cmd.exe window. Read more about this issue here. So if anybody has a solution, that would be appreciated.
At the moment there is only support for windows. Of I figure out how to run the Maven process from a Mac I will add Mac support. More about issue that here.
If you run the server and close the app, then the server (java.exe) still keeps running in the background.
And it lacks a lot of features, so feedback is welcome.

If you are interested, check out the code on Google Code: it's called The Ma(ven)trix.

Filed under: air, flex, other No Comments

9Feb/100

Model-View-ViewModel in Silverlight and Flex

Last year I have been working a lot on Flex applications, and because of this I usually take my experience from Flex development and apply it to Silverlight. One example is the PureMVC framework that we use at Nascom for most RIA applications we build. The framework also has ports towards other technologies and one of these is the C# Silverlight port. I recently checked it out but they seem to have trouble keeping up with the speed of Microsoft's Silverlight releases.

So let's see if I can bring some of the patterns I learned while developing Silverlight into the world of Flex. One specific pattern that I want to talk about is the Model-View-ViewModel pattern. It's a specialization of the PresentationModel design pattern introduced by Martin Fowler specific for the Windows Presentation Foundation (WPF). Yeah, but what about the MVC pattern? Doesn't that already cover all our problems? In the MVC pattern, the model is the data, the view is the user interface, and the controller is the programmatic interface between the view, the model, and the user input. This pattern, however, does not seem to work well in declarative user interfaces like Windows Presentation Foundation (WPF) or Silverlight because the XAML that these technologies use can define some of the interface between the input and the view (because data binding, triggers, and states can be declared in XAML). And for the same reason it also applies to Flex, and even more to Flex4 because MXML will become more declarative in the future.

So what is the Model-View-ViewModel? The pattern is an adaptation of the MVC pattern in which the view model provides a data model and behavior to the view but allows the view to declaratively bind to the view model. The view becomes a mix of XAML and C#, the model represents the data available to the application, and the view model prepares the model in order to bind it to the view.

Probably most Silverlight developers out there are already familiar with this pattern, but I created two small sample applications (one in Silverlight 3 and one in Flex4 beta 2) to compare both technologies and give you an idea how it works. Both applications do exactly the same thing. They load an XML file with data (Phones) and display this data using data binding. You can change the amount so that you can see the total price changing. Yeah, this is definitely no rocket-science (doh, should have used rockets!) , but it works. The Silverlight client loads the XML file using LINQ. LINQ is pretty cool and powerful, but it still takes more code to parse an XML file in Silverlight than it does in Flex using e4x.

You can download the source files for the Silverlight 3 and Flex4 demos here.

Model-View-ViewModel in Silverlight 3

Model-View-ViewModel in Flex 4 (right click to view source)

What do you think? I find this pattern easy to use in applications that depend heavily on data binding like Silverlight and maybe also Flex. But I think I will still be using PureMVC for my next big Flex Project.

Filed under: flex, silverlight No Comments

9Jan/100

Awesome iPhone app: Hipstamatic

I wanted to share my experience with a must have iPhone app, Hipstamatic.

The Hipstamatic for iPhone is an application that brings back the look, feel, unpredictable beauty, and fun of plastic toy cameras from the past.

Hipstamatic was a short-run plastic camera developed in the 1980's by two art school dropouts in Wisconsin, USA. It was never mass produced because the makers died in a tragic accident. You can read more about this in the Wikipedia Article and the Great Hipstamatic 100 Tribute page.

It is definitely one of the best designed applications in the AppStore. It actually feels like you are using a real analog camera. This app also has a very good implementation of the In App Purchase. The camera comes equipped with a couple of lenses, films and one flash. But you can buy other available lenses, films and flashes to create your unique photographs. At the time of writing the app is only 1,59 €, so that's a no-brainer. Buy this app and and get amazed with the user experience and the awesome photographs.

I have been playing around with the application and you can find my pictures on Flickr. There is already a great community growing on Flickr. Check out all the pictures tagged with Hipstamatic.

Checkout how it works in this video:

Filed under: iphone No Comments

27Dec/090

The cyclist iPhone app: PedalBrain

I haven't been riding my bike a lot lately. Mainly because it's winter now, but also because of the fact that I want to spend as much time as possible with my son. But maybe this can get me back on my bike in the spring time.

I have tried several GPS tracking devices when riding my bike: GPSKit, Trails, GPSies and RunKeeper. Especially the last one is a great app, but they are still initially created for runners or hikers.

Today however I discovered the existence of the PedalBrain iPhone app. It looks very nice, has integration with ANT+ enabled devices and I immediately fell for the Carbon Fiber mount that can be mounted on the steerer tube. An yeah, it's still a prototype but I would definitively buy it. Off course it also has a website where you can analyze your workouts. This is how they describe the product:

Pedal Brain can be thought of as three integrated products. First, it's an iPod and iPhone ANT+ accessory. Second, it's a complete training log. Third, it's a coaching platform.

If you want to find out more about this promising looking app check out their website.

Filed under: iphone No Comments

18Nov/090

Silverlight 4 beta announced

Microsoft_Silverlight_4_RIA_1252651275_0 Today at the Microsoft Professional Developer conference, Scott Guthrie announced the availability of Silverlight 4 Beta. Yes it's still a beta but the feature list is quite impressive:

Webcam and Microphone access.
Mousewheel and Right-click support.
HTML Hosting in WebBrowser (not really sure if this is good or bad, cause it brings an embedded IE into every browser)
Elevated thrust, Local File access, COM interoperability, Notifications "Toast" API.
Network authentication, basically support for basic authentication, ...
Right-to-left and bi-directional text
Enhanced data-binding features.
Official Google Chrome support.
For more details and an extensive list of the new features check Tim Heuer's blog or the Silverlight.net site.

Some of the features were just missing and have been available in the Flash platform for a long time, but I am impressed by the speed that those features get implemented by the Silverlight development team. They have also added a lot of offline features that moves Silverlight even more towards Adobe AIR. One advantage I see here is that, once a user has installed the Silverlight plug-in he/she doesn't need an extra installation for running offline applications with access to the file system and elevated access.

I haven't seen the file size of the Silverlight 4 beta plug-in, but I am definitely curious to see how they can squeeze in all those features and still keep the download small enough.

If you want to try this out you will need at least the following tools:

Filed under: silverlight No Comments

13Oct/090

My favourite iPhone apps

app_store It's been almost a year since I wrote my first blog post about my favourite applications on the iPhone. During that time I have installed and uninstalled lots of applications. I'd like to share again a short list of the apps I use the most.

Camera Tools:

ToyCamera: this application changes your iPhone into a toy camera. The app is loaded with cool effects and after buying this app I almost never use the normal camera again. Check out some of the pictures I took with ToyCamera here.
TiltShift Generator: this application was created by the same developer that built ToyCamera. It allows you to create miniature retro pictures. There is also a free Adobe AIR application available if you want to run it on the desktop.
Camera Genius: this app adds useful functionality like a big button, zoom, ... A good addition to the standard Camera functionality.
Comic Touch: this is the iPhone version of the Comic Life desktop application. With Comic Touch you can add those funny text balloons to your photo's.

Social Networking:

Tweetie 2: I have been using Tweetie since it was released on the iPhone, and Tweetie 2 is even better. I also tested Twitterific and TweetDeck, both free Twitter clients. But Tweetie is stil worth the price.
Flickr: finally Flickr has come to the iPhone. Now I can upload my photo's taken with ToyCamera directly to my Flickr account. I have used some other tools before but Flickr for iPhone has a slick design and is has all the features that you would expect.

Tools:

Dropbox: if you are a DropBox user then this is a must have app. You can view all documents, photo's and files that are in your DropBox account. I use DropBox to sync files between my Mac and PC and it works like perfect.
Analytics: with this app you can view your Google Analytics charts directly on your iPhone. It's a nice add-on for keeping up to date with your stats, but it doesn't beat the real thing.
Wordpress: useful app for Wordpress users especially for approving comments.
Convertbot: I like this app especially for the nice touch interface. But more importantly it's a useful tool for converting units, bytes, currencies, ...
GPSies: free GPS tracking tool with an online community. Useful for tracking your runs, hikes and bike trips. And it is free!

Games:

Flight Control: this is one of the applications that uses Touch at it's best. It is a very addictive game and I also like the general look and feel of the app. Definitely a must have game.
Ancient Frog: very beautiful application where you need to manipulate a frog and lead it to the fly. The physics of the frog are very nice, but it is a difficult game.
Balloonimals: If you have kids this app is very funny. It uses the iPhone to the max. You need to blow up the balloons, shake the phone and touch the animals until they finally blow up. Very funny indeed.

That's my shortlist, I hope you like it. Also check out my previous posts about the iPhone here:

Filed under: iphone No Comments

7Oct/092

Slider, a mobile version of the Flex framework

Another interesting announcement was made yesterday at MAX 2009. Next to the fact that you can develop iPhone apps with Flash Pro CS5, it is not recommended to use the Flex framework for building these applications. The official statement says:

While it is possible to create iPhone content using the desktop Flex Framework, we do not recommend it. The Flex framework is currently optimized for execution in a desktop environment. The performance, UI, and interaction models have not been optimized for mobile devices.

Adobe is working on a mobile Flex Framework, which should be better suited for iPhone development.

The framework is called Slider and it sounds very interesting, because if you have the standard controls and theming at you disposal for building for example an iPhone app, it's going to make your life a lot easier when building an app.

Some facts about Slider:

Slider is a mobile-optimized version of the Flex framework that will make it easy for developers to build Flex applications that run across mobile devices.
It is based on the Flex 4 codebase, so it's not a step back.
An early mobile branch of the Flex framework is expected to be available in 2010.
The first version will be optimized to run on high-end smartphones, and will initially target standalone application environments such as Adobe AIR. Does this also mean the iPhone apps? Let's hope so.
You will be able to use Flash Builder to create Slider apps.
The difference with Flash Lite is that Flash Lite is a smaller, lighter-weight runtime created to run on low-end phones, and Slider is a mobile version of the Flex framework designed for building applications.
For a complete overview of the Slider framework check out this whitepaper.

Also check out this video about Flex for Mobile Devices by Ely Greenfield and Greg Burch:

Exciting times

Filed under: flex, iphone 2 Comments

6Oct/090

Building iPhone apps with Flash Pro CS5

Yesterday in the MAX 2009 Keynote Adobe did not announce a Flash Player for iPhone, but there was some surprising news. They made it possible to build applications for iPhone using the Flash Platform and Tools. More concrete: with Flash Professional CS5 you can export/publish your swf file to a native iPhone application.

It is definitely good news because for a production company, this makes it a lot easier to offer a unified solution. We can now reuse code and assets to build applications for the web and different mobile devices. Cool thing is that also AIR 2.0 features are available for the iPhone. This means you can use multi-touch, file api, sockets network and all the other existing AIR features. But you can't use PixelBender, remote SWF files. And yes no AS2 anymore, so that's a good thing.

I am very eager start playing with it, and after seeing this video it all looks very interesting indeed. Now let's hope that Apple doesn't close the door on this.

If you want to know how it works check out this recorded session from Adobe MAX 2009:

Everything you need to know can be found on http://adobe.com/go/iphone

Filed under: iphone No Comments

10Sep/094

The F*Team @ Nascom

After a very relaxing holiday under the Tuscan sun in la Bella Italia, I just finished my first working day at Nascom with some bug-fixing, refactoring and implementing an error handling mechanism in an AIR application. But none of this boring stuff for this post. This post is about something completely different, my colleagues that I work with every day.

Here's a picture of my team: from left to right David (aka. Der Schmale), Rien (flying in the AIR), Sakri, Geert, Wouter (kicking some ass), Ricardo, Ilse and myself (with the Lancer Assault Rifle from my favorite game Gears of War, hell yeah). All credits go to David for creating this piece of art.

Before looking at the picture check out the following video. We flash/front-end developers are the ones that can create the explosions and stuff you see in those fancy sites, but remember: cool guys don't look at explosions.

And that's what we are

Filed under: other 4 Comments

30Jul/098

Testing PureMVC code with FlexUnit

The PureMVC FlexUnit Testing project is already quite old (last update was June 2008), but I just discovered it because I am currently working on a big Adobe AIR project that currently does not have a User Interface yet. We use the PureMVC framework for most of our bigger applications, and because it depends on Notifications it's not that easy to Unit Test. Proxies don't return results synchronously, but send notifications with the result in the body.

Well this small library helps connecting your PureMVC implementation code to the FlexUnit framework. The following example code shows the code for a Test Class for a DataProxy that has a method getSomeData(). As you can see, you need to write some code to access the facade, proxy, ... but it's all pretty straight forward.

package unitTests
{
import net.hufkens.example.ApplicationFacade;
import net.hufkens.example.config.ApplicationNotifications;
import net.hufkens.example.model.DataProxy;

import com.andculture.puremvcflexunittesting.*;

import org.puremvc.as3.core.View;
import org.puremvc.as3.interfaces.IView;

public class DataProxyTest extends PureMVCTestCase
{
private var timeout:int = 0;

public function DataProxyTest(methodName:String=null)
{
super(methodName);
}

protected function get facade():ApplicationFacade
{
return ApplicationFacade.getInstance();
}

public override function setUp():void
{
facade.registerProxy(new DataProxy());
}

protected function get proxy():DataProxy
{
var proxy:DataProxy =
DataProxy(facade.retrieveProxy(DataProxy.NAME));
return proxy;
}

protected function get view():IView
{
return View.getInstance() as IView;
}

public function testGetSomeData():void
{
registerObserver(view, proxy,
ApplicationNotifications.GET_SOME_DATA_DONE,
response, timeout);

proxy.getSomeData();
}

private function response(e:PureMVCNotificationEvent):void
{
assertTrue("data is not available",
e.notification.getBody().data.length>0);
}
}
}

It worked great for this project. I hope it will still be supported for Flex 4 so we can use the built-in unit testing features of Flash Builder.

Make sure you checkout the latest version from Google Code, because the swc file has an issue with multicore namespaces. The latest version in svn works fine.