Uncategorized

Invoking the Flex Compiler from Adobe AIR… with Merapi and the Flex Compiler API

As the first step in a larger effort trying to automate my Flex Application development, I have been creating a simple Adobe AIR application that through the AIR bridge from the Merapi Project invoke the Flex compiler.
The implementation is only intended as the first experiment, so currently the use case for the App is a bit farfetched… however, the offspring of this experiment and the potential implications are very strong in terms of workflow optimizations.

Anyways, lets get on with it…
I have to warn you in advance, this is not the simplest possible implementation, but originally it was not my intention to post about it. A better sample would have excluded all the didn’t relate to the central elements which in this case is the Flex Compiler API and getting in touch with it through Merapi. Anyways… after this disclaimer… let’s get on with it…

There are a number of prerequisites in order to get started.

First you need to download and familiarize yourself with the Merapi Project.

Then you need to get the Flex Compiler. The easiest way is to grab it from the Flex SDK which was installed alongside Flex Builder / Flash Builder.

You can find the JAR file in following location:
{Flash Builder Installation Directory}/sdks/{SDK Version}/lib/flex-compiler-oem.jar

On my machine the location looks like this:
Applications/Flash Builder Plugin 4 Beta 1/sdks/4.0.0/lib/flex-compiler-oem.jar

Setting up the appropriate Java project is an exercise I will leave for you to accomplish on your own as out of scope of this post to go through that.

After setting up the project, the first we need to create the Java application which will be running in the background and listening for messages from Adobe AIR.
This application will instantiate the Merapi AIR bridge and through this listen for commands in the form of Compile message types.

It could look something like this…

import java.io.File;
import merapi.Bridge;
import flex2.tools.oem.Application;

public class FxsdkJavAirApplication
{
	public static void main(String[] args)
	{
        Bridge.open();
        new CompileHandler();
	}

	protected static void compile(CompileMessage message)
	{
		try
		{
			String inputFile = message.inputFile;
			String outputFile = message.outputFile;

			Application application = new Application(new File(inputFile));

			application.setOutput(new File(outputFile));
			application.setProgressMeter(new FxsdkJavAirProgressMeter(message));

			long result = application.build(true);
			if (result > 0)
			{
				System.out.println("COMPILE OK");
			}
			else
			{
				System.out.println("COMPILE FAILED");
			}
		}
		catch (Exception ex)
		{
			ex.printStackTrace();
		}
	}
}

The message which will be using to pass through the bridge is called CompileMessage and inherits from Merapi’s message class and we are using the Application class from the Compiler API to actually do the building of the SWF from the MXML file.

import merapi.messages.Message;

public class CompileMessage extends Message
{
	public static final String COMPILE = "compile";

	public String inputFile = null;
	public String outputFile = null;
	public int progress;

	public CompileMessage()
	{
		super();
	}
}

Seeing that I copied most of the Java code from the HelloWorld sample of the Merapi project, the calling back to the Adobe AIR application is implemented in the ProgressMeter seeing that this was a very easy and convenient way of getting the callback to function. It should not be regarded as a recommended way of doing it, this is merely an experiment and should not be taken on account for recommended ways of implementing callbacks.

import merapi.messages.IMessage;
import flex2.tools.oem.ProgressMeter;

public class FxsdkJavAirProgressMeter implements ProgressMeter
{
	private CompileMessage message;
	private long before, after;

	FxsdkJavAirProgressMeter(IMessage message)
	{
		super();
		this.message = (CompileMessage)message;
	}

	public void start()
	{
		before = System.currentTimeMillis();

		System.out.print("begin...");
	}

	public void end()
	{
		after = System.currentTimeMillis();

		System.out.println("done");
		System.out.println("Elapsed Time: " + (after - before) + "ms");

		this.message.send();
	}

	public void percentDone(int n)
	{
		System.out.print(n + "...");

		this.message.progress = n;
		this.message.send();
	}
}

One of the key elements in the establishing the bridge between Adobe AIR and Java is the message handler invoked by the Java application.
This eventually registers a message type and will assume the role of the observer in the messaging flow.

import merapi.handlers.MessageHandler;
import merapi.messages.IMessage;

public class CompileHandler extends MessageHandler
{
    public CompileHandler()
    {
        super( CompileMessage.COMPILE );
    }

    public void handleMessage( IMessage message )
    {
    	if( message instanceof CompileMessage )
    	{
    		CompileMessage compileMessage = (CompileMessage)message;
    		FxsdkJavAirApplication.compile(compileMessage);
    	}
    }
}

These 4 classes are all the constitute the Java application based on the existing Flex Compiler API and the classes from the Merapi Project.
Now in the same order, I will go through the Flex part of the application.

First we have the application itself, in this case it is the container of the form and the Mate EventMap and to spice thinks up, a PreferenceMap which wraps the logic relating to managing user preferences.


<s>

	

	
		
		
	

</s>

The message which corresponds to the message in the Java application looks something like this.

package org.hello.fxsdkjavair.simplecompile
{
	import merapi.messages.Message;

	[Bindable]
	[RemoteClass(alias="CompileMessage")]
	public class CompileMessage extends Message
	{
		public static const COMPILE:String = "compile";

		public var inputFile:String = null;
		public var outputFile:String = null;
		public var progress:int;

		public function CompileMessage()
		{
			super( COMPILE );
		}
	}
}

Then we have the form which contains the code allowing us to manage the inputfile and the outputfile paths.


<s>

	
		
	

	<s>
		<s />
	</s>

	
		
		
	

	<s>
		<s>
			<s>
			</s>
		</s>
		<s />
		<s />
		<s />
		
	</s>

	

	<s>
		
		
	</s>

</s>

For your reference, I will just be adding the EventMap and the PreferenceMap as well…

First we have the EventMap which is a core element of Mate based applications, again… this as well is outside the scope of this post to discuss further.




	
		
	

	

		
			
		

		
			
		

		
			
		

	


This is the preferencemap, again it might be total overkill to put in a sample such as this… but seeing that it is a basic part of any application I do these days, I saw no reason to exempt it. Remembering the user’s preferences is paramount when creating user experiences which seeks to satisfy the increasingly high expectations of users today.




	
		
	

	

		
			
		

	


This is far from a complete or perhaps even suitable sample to illustrate the interoperation with both Merapi and the Flex Compiler API, but I decided to put it out here as part of a collaborative effort of getting my hands dirty with extending Flash Builder and Flash Catalyst.
If you have any questions regarding this sample, please don’t hesitate to contact me or comment on the post.

I will soon make the source code available under the “unsponsored” framework.

Uncategorized

Quirk with the Merapi Hello World project…

When running the Merapi project for the first time within Flash Builder, the obvious choice is to look for the Hello World project. However, when you first try to run this project the compiler will complaint with the following error:

Actual Results:
Process terminated without establishing connection to debugger.

Command:
“/Applications/Adobe Gumbo MAX Preview/sdks/4.0.0/bin/adl” -runtime “/Applications/Adobe Gumbo MAX Preview/sdks/4.0.0/runtimes/air/mac” “/Users/mac/Documents/Flex Builder 3/myair/bin-debug/myair-app.xml” “/Users/mac/Documents/Flex Builder 3/myair/bin-debug”

Output from command:
error while loading initial content

The solution is to update the application configuration file to use the 1.5 namespace instead of the preconfigured one which is set to 1.1.
You can read more about the solution in the Adobe JIRA here: http://bugs.adobe.com/jira/browse/FB-15687

ActionScript 3.0, Tools

Flash Catalyst / Flash Builder Workflow Optimizer

Workflow Optimizer is a small and lightweight tool which helps Flash Designers and Flash Developers to work around some of the temporary limitations with Flash Catalyst.

WorkflowOptimizer

The application allows you to automatically extract the contents of FXP / FXPL files and put them into a configurable directory and can hence replace some of the tedious export / import actions from Flash Catalyst to Flash Builder.

The application is written in Flash Builder 4 with Flex 4 and AIR, it uses the as3preferenceslib for persisting the directory and file information and it uses Mate Flex Framework as the application controller.

Next step is to add support for running as a service by adding some Merapi classes and examine even better ways to help optimize the FC / FB workflow.

You can download and install the latest version from the Adobe AIR Marketplace here…
http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringid=13424

Sources are available at Google Code…
http://code.google.com/p/workflowoptimizer/

You can download the binary from here…
http://petermolgaard.com/projects/workflowoptimizer/WorkflowOptimizer.air.zip

Sources will soon follow…

Uncategorized

The Tesla Model S – Touch-Screen User Experience is Powered by Roundarch’s Merapi Project

These are truly exciting times for the Air and Flash platforms… soon we even have AIR applications running as user interfaces onboard vehicles…

Thanks to Merapi, the Tesla Model S show car offers users the ability to interact with vehicle hardware systems by engaging with the car’s cockpit control center, including a touch screen consisting of HD radio integration, quick GPS navigation, streaming audio and other Internet and cloud-based data and information.

Check it out in this crude YouTube video of a testride from Menlo Park…

…or read more about it here, it’s a truly interesting application of Adobe AIR and Merapi…
http://impost.roundarch.com/2009/04/29/the-tesla-model-s-touch-screen-user-experience-is-powered-by-roundarchs-merapi-project/

Uncategorized

Merapi… reintroduction

Merapi is a bridge between applications written in Java and those running in and created for Adobe AIR™.

Merapi has been designed to run on a user’s machine, along with an Adobe AIR™ application and provide a direct bridge between the Adobe AIR™ framework and Java, exposing the power and overall capabilities of the user’s operating system, including 3rd party hardware devices. With a light weight and straightforward API, developers can leverage the OS by writing Java companion applications for their AIR™ applications. Java programs treat Merapi as a bridge to the running Adobe AIR™ application and vice-versa. Developers can build their Flex, Flash and AJAX applications for Adobe AIR™, and use Merapi to make them do things that AIR just can’t do by itself.

Check it out…
http://merapiproject.net/

On a side note… a couple of days ago an initial private Alpha was released to members of the community. If you have not already signed up, then you can do it here… check it out, its good stuff…
http://merapiproject.net/index.php?option=com_comprofiler&task=registers