Is AIR the RIA winner ?

A few days ago, Adobe announced that AIR has been downloaded more that 25 million times since its initial version in just no more than 6 monthes !
I am quite impressed by this number. I would be interested to know the corresponding Silverlight number ! Whatever this number can be, we can say that AIR is a success and may be the RIA winner if its number continue to grow at the same pace.

Maven and Flex Builder tutorial (Part II)

In this second part (you may start with Part I if not already done), we will create a Flex Builder project and adapt it to adopt a Maven like directory layout.

Before we start, the project will be called flexandmavenapp. The modules directories will then be html-template, flexandmavenapp-config, flexandmavenapp-flex and flexandmavenapp-web.

Creating the Flex project

Launch Flex Builder, then launch the Flex Builder project wizard : File --> New --> Flex Project

On the first page of the wizard:

enter flexandmavenapp as the project name
select the 'Web application (runs in Flash player)' radio button
select J2EE as the application server type
check the 'Use remote object access service' checkbox
select the 'Livecycle Data Services' radio button
check the 'Create combined Java/Flex project using WTP'
leave 'src' as the 'Java source folder' (instead of the desired 'flexandmaven-web/src/main/java' as we need to modify it later)

Then, press the 'Next' button.

On the next page of the wizard:

select the 'Target runtime' of your choice or create it (I choose Tomcat 5.5 in this example)
Enter 'flexandmavenapp-web' as the 'Context root'
Enter 'flexandmavenapp-web' as the 'Content folder'
in the 'Flex WAR file', select the BlazeDS WAR file on your local disk (E:\TEMP\blazeds_turnkey_3-0-0-544\blazeds.war in my example)
leave 'Compile application locally in Flex Builder (recommanded)' checked
leave 'bin-debug' as the 'Output folder'

Then, press the 'Next' button.

On the next page of the wizard:

enter 'flexandmavenapp-flex/src/main/flex' as the 'Main source folder'
leave 'flexandmavenapp.mxml' as the 'Main application file' 
Leave 'http://localhost:8080/flexandmavenapp-web' as the 'Output folder URL'

Then, press the 'Finish' button.

The Flex project will be created and you should see the following layout:

Modifying the directory layout

Change the Java source folder

Under the flexandmavenapp-web directory, create a sub directory called src/main/java.

Set this directory as the Java source folder:

Right click your project and select 'Properties'
Select 'Java Build Path'
Select the 'Source' tab
Select 'flexandmavenapp/src' and click 'Remove'
Click 'Add Folder'
Select the 'flexandmavenapp/flexandmavenapp-web/src/main/java' and click 'OK'

Delete the 'src' folder (the one directly under the project).

Change the web app source directory

The Maven conventions recommend to use src/main/webapp as the source directory for the web application. The wizard did not create such a directory. So we will create it, move the web application files into it and update the project configuration:

Under flexandmavenapp-web, create a 'src/main/webapp' directory
Move the 'flexandmavenapp-web/META-INF' and 'flexandmavenapp-web/WEB-INF' directories under 'flexandmavenapp-web/src/main/webapp'

You should get the following directory layout:

Update the Java output folder

If you have Java files, they should be compiled into the WEB-INF/classes directory of your web application. This is guaranteed by Eclipse because this directory is the output folder of the Java compiler. As we change the location of the web application,we need to update this output folder:

Right click your project and select 'Properties'
Select 'Java Build Path'
Select the 'Source' tab
In the 'Default output folder', enter 'flexandmavenapp/flexandmavenapp-web/src/main/webapp/WEB-INF/classes'.

Delete the 'flexandmavenapp/flexandmavenapp-web/WEB-INF' directory as it has been created just after we moved the web application files by the Eclipse compilation and it is not used anymore.

Update the location of the Flex remoting configuration files

When the SWF file is generated, it also compiles the Flex remoting configuration files. Flex Builder does this by specifying an argument to the MXML compiler, this argument being the location of this file.

As we move the location of the web application files and because the Flex remoting configuration file is stored under the 'WEB-INF/flex' directory of the web application, we need to update the location of this file:

Right click your project and select 'Properties'
Select 'Flex Compiler'
In the 'Additional compiler arguments', after the '-services' flag, enter the new location of the Flex remoting file. Warning, this is an absolute file so if you created your project in your workspace, this location should be 'workspace_dir/flexandmavenapp/flexandmavenapp-web/src/main/webapp/WEB-INF/flex/services-config.xml'
Click 'OK'.

Update the location of the web application

Because we changed the location of the web application, there are some configuration files that needs to be updated to reflect the change. The files are the Flex project configuration file and the WTP project configuration file.

Update the Flex project configuration file

This file is located at the root of your Flex Builder project and is called '.flexProperties'. Double click it and a text editor will be opened.

This is an XML file that have a single XML element called 'flexProperties', locate the 'serverRoot' XML attribute and change the value from 'workspace_dir/flexandmavenapp/flexandmavenapp-web' to 'workspace_dir/flexandmavenapp/flexandmavenapp-web/src/main/webapp'.

Close the editor.

Update the WTP project configuration file

This file is located under the '.settings' directory of your Flex Builder project and is called 'org.eclipse.wst.common.component'. Double click it and a text editor will be opened.

This is an XML file that have a single XML element called 'project-modules'.

This XML element has several child elements 'wb-resource'. One of the them have the following definition:

<wb-resource deploy-path="/" source-path="/flexandmavenapp-web"/>

Update this definition to:

<wb-resource deploy-path="/" source-path="/flexandmavenapp-web/src/main/webapp"/>

Close the editor.

Conclusion

You've reached the point where you project as adopted a Maven directory layout and has been updated in order to be compatible with Flex Builder. We will verify that we can run and debug the project.

Prepare the tests

Before you can test this project, you must first deploy the web application to your test server.

In the 'Servers' window, right click your server and select 'Add and Remove Projects'.

You should see 'flexandmavenapp' in the list of available projects, so select it and click 'Add'.

Then click 'OK'.

Start the server now (right click the server and select 'Start').

Test the application

Locate the 'flexandmavenapp.mxml' (under the 'flexandmavenapp-flex/src/main/flex' directory).

Right click it and select 'Run as --> Flex Application'.

This will launch your web browser and you should see the Flex user interface: don't worry if you see nothing significant, the default Flex interface is an empty panel, so it this ok, you should see an empty blue panel. If something is wrong, you should see either an error page from the HTTP server (if you application has not been deployed correctly) or an empty white page (if the Flash player cannot load your SWF file).

Here is what you should see under Firefox:

So now, your application is almost ready to be 'mavenized', this is what we will see in the next part of this series.

Maven and Flex Builder tutorial (Part I)

I'm a user of both Maven and Flex Builder for several years now. Several times, I was wondering how we could use those two technologies together and in parallel. So I started to "google" and found an interesting article by Sebastien Arbogast about the subject.

But it does not entirely satisfy me because it addresses Flex and Maven together but not what I am looking for, Flex Builder and Maven. The difference is that I want to be able to design and debug my project using Flex Builder, and when I am ok with the quality, generate with Maven.

So I decided to build a sample that could be used in this tutorial. If you want to follow this series, I created also a specific tag in my blog, MavenAndFlexBuilderTutorial.

Before we go in the details, let's first examine the tricky points when considering a Flex Builder project as a Maven artifact.

Analysis

A Flex Builder project is basically an Eclipse project with two natures, one for the Flex part  and another the Web part. In terms of Maven artifacts, the first one could be seen as a SWF artifact (thanks to flex-mojos), the second as a WAR artifact with a dependency from the second to the first.

The first artifact will have a -flex suffix, the second -web suffix.

Generate SWF with Maven ?

So the first question that comes is: how come can I build a SWF artifact with Maven. Here comes flex-mojos, an open source project that provides Maven plugins for managing Flex based artifacts. You can find flex-mojos using this link.

In order to use flex-mojos, you just need to specify swf as the packaging in your pom, but because the flex-mojos are not deployed on the Maven central repository, you will need to specify the flex-mojos Maven repository (http://svn.sonatype.org/flexmojos/repository) as both standard an plugin repositories. This will be done in the master pom of our solution.

The next thing to do is to declare the flex-mojos plugin as an extension to Maven, otherwise Maven will not be able to process SWF artifacts. This will also be done in our master pom.

So, at this point, it seems quite simple: we have two pom (SWF and WAR) plus the master POM.

Handle shared use of Flex remoting configuration files

But some difficulties come: when you generate the SWF, the Flex compiler needs to have access to the Flex remoting (BlazeDS/Livecycle) configuration file (services-config.xml). This files resides in the web application. So, according to Maven rules, it is not possible for an artifact (SWF) to access a resource from an artifact (WAR) which as a dependency of this artifact (SWF).

The solution I choose is to add a new artifact (with JAR packaging and -config suffix), used only to store these configurations files.

When the SWF artifact will be build, it will first unpack the files from the -config artifact in a temporary directory and specify the file to the Flex compiler.

Handle HTML start page

In Flex Builder, when you created you project, a sub-directory called html-template is created. When you launch you project, these template files are processed and copied into the target WAR application. However, this directory cannot be renamed (I found no way to specify another directory name for the templates files as of Flex Builder 3.0.1). So we will created another artifact (with JAR packaging and -html-template suffix). When the WAR artifact will be build, it will first copy these files into a specify resource directory and process these files: the Maven filter mechanism will be used to replace some placeholders in the HTML page.

Proposed directory layout

If we call myapp our application, the directory layout will be the following:

myapp
	pom.xml
	html-template
		pom.xml
	myapp-config
		pom.xml
		src/main/resources
			Remoting config files
	myapp-flex
		pom.xml
		src/main/flex
			MXML and AS files
	myapp-web
		pom.xml
		src/main/filters
			filter.properties
		src/main/java
			Java files
		src/main/webapp
			WEB-INF/flex
			WEB-INF/lib
			web.xml

 

How this layout can be done inside Flex Builder?

By default, when Flex Builder creates a Flex application, Flex files are under the flex_src directory, Java files under the java directory and the web application under the WebContent directory.

So one way to get the previous directory layout would be to give myapp-flex/src/main/flex as the Flex sources directory, myapp-web/src/main/java as the Java directory and myapp-web/src/main/webapp as the web application directory.

Unfortunately, the Flex builder wizard does not allow extra sub directories for the Flex directory and the web application directory. So we will use a single layered directory for those parameters and will then modify the Eclipse project in order to reach the proposed directory layout.

In the next part of this series, we will describe all the steps from the wizard to the files modifications to reach the goal.

Chrome to change the RIA game ?

In my opinion, if you look at the RIA game, there are three major competitors: Adobe with the Flash/Flex/AIR combination, Microsoft with the .Net/Silverlight couple and Ajax with lots of combinations.

I am not a big fan of Ajax because this camp lacks an established suite of tools designed to provide the required productivity needed to enterprise mission critical application (compared to Eclipse / Flex Builder or Visual Studio / Expression).

But with the birth of Google Chrome, this may change the game. The performance of their Javascript engine is so good and the fact that it is more application oriented that current browsers may attract new adopters. Just compare the use of Gmail between Chrome and Firefox to see what I mean.

Joost to use RIA technology ?

According to sources found on the Web today, it seems that Joost will move from a full desktop application to a web based interface.

My guess is that they will use RIA technology in order to be better integrated with the desktop. However, I will not try to give an answer for the technology used: Flex or Silverlight ?

If you want to know more about this, here are the links to the articles:

Zdnet.com

gigaom.com

sitepoint.com