Tuesday, May 22, 2007

Flash for Java Programmers: Lesson 1

Steps on learning to develop Flash, with a Java developer focus...

If you have seen my latest posts, you will know that my current project is going to use Flash. You will also know, that I am only starting to learn "doing it the flash way". I am used to developing user interfaces with HTML/JavaScript and using an all server-side technology stack with spring/hibernate combined with web frameworks like Tapestry and Struts.

I thought I might share my knowledge with you all, as I go along and learn stuff. After all, you all might have some useful input to me, on how to do things in flash in a better way. I would hope so.

So here it goes, ...


Lesson 1: Setting up a build

I will be using the free Flex2 environment from Adobe when developing. Adobe also has a development tool/IDE but I will not be using that. Why? Because it is Windows bound, because I like to be IDE independent and because I simply like to build on the command-line. It should build as easily on Mac and Linux as on Windows!

That said, my setup is Windows XP with Maven 2 for building.

1. Download some software
Of course, you need Java (duh!). I will be running JSE5.

You need maven too. Download from here and follow its installation instructions. There are good guides on this, and I will not go into details here.

Then, download the Flex2 SDK from Adobe. Unzip the downloaded file into a place where you want it to be. I will reference this unzipped place as FLEX2_SDK_HOME from here on.

2. Create the POM
Create a new directory, say "lesson1", and create a pom.xml file for maven which looks like this:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.blogspot.techpolesen</groupId>
<artifactId>flash-lesson1</artifactId>
<version>1.0</version>
<packaging>swf</packaging>
<name>flash-lesson1</name>
<properties>
<flex.home>C:/sandboxes/ria/flex2-lessons/flex2-sdk</flex.home>
</properties>
<build>
<defaultGoal>install</defaultGoal>
<plugins>
<plugin>
<groupId>net.israfil.mojo</groupId>
<artifactId>maven-flex2-plugin</artifactId>
<version>1.0-alpha-2</version>
<extensions>true</extensions>
<configuration>
<flexHome>${flex.home}</flexHome>
<useNetwork>true</useNetwork>
<main>Main.mxml</main>
<debug>true</debug>
</configuration>
</plugin>
</plugins>
</build>
<repositories>
<repository>
<id>ibiblio</id>
<name>ibiblio</name>
<url>http://mirrors.dotsrc.org/maven2/</url>
<layout>default</layout>
</repository>
</repositories>
<pluginRepositories>
<!-- the swf/flex2 plugin -->
<pluginRepository>
<id>sateh</id>
<name>sateh</name>
<url>http://maven.sateh.com/repository/</url>
<layout>default</layout>
</pluginRepository>
</pluginRepositories>
</project>

You need to set the "flex.home" property to where you placed FLEX2_SDK_HOME when unzipping the SDK. If you know maven, you also know that you can take this property out and put it into your global settings.xml instead, if you like.

In the "build" element I setup the maven-flex2-plugin from Israfil. It needs to know the SDK home and can then execute the compiler on the flex sources we are going to write. This plugin knows the "swf" packaging, which is the flash file format that the flex compiler outputs.

I also setup two repositories. One for the main maven repository and one for where the Flex2 plugin can be downloaded. And of course, these can also be moved into settings.xml, if you know maven well enough.

3. Create some flex2 source
Then, create the directories "src/main/flex". This is where the maven plugin which compiles Flex2 code expects to find its sources (relative to the pom.xml).

In "src/main/flex", create a file called "Main.mxml" with this content:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label text="Hello, Flash World"/>
</mx:Application>
4. Building
Okay, we are ready to compile. Standing in the directory where you put the pom.xml, you type "mvn" and hopefully, the plugin will be downloaded, the flex compiler executed against the Main.mxml and a ".swf" file should be produced in the target directory.

But, first compile will show an error like this:

[INFO] Loading configuration file C:\sandboxes\ria\flex2-lessons\flex2-sdk\frameworks\flex-config.xml
[INFO] defaults: Error: unable to open './winFonts.ser'

What you need to do is open the flex SDK configuation file from FLEX2_SDK_HOME/frameworks/flex-config.xml, search for "winFonts.ser" and ensure the "local-fonts-snapshot" element is not commented out.

Now, build again, and it should produce a "flash-lesson1-1.0.swf" file in the target dir.

If you have the standalone flash player installed (downloadable from Adobe), you can double-click the output file and see it run. If not, you can wrap it in a html file which opens in a browser. Create a file "index.html" in the target dir with this content between the body tags:
<object width="100%" height="100%">
<param name="movie" value="flash-lesson1-1.0.swf">
<embed src="flash-lesson1-1.0.swf" width="100%" height="100%" play="true">
</embed>
</object>

The "object" tag is for IE and the "embed" tag is for Firefox.

Possible issues
You will need flash player 9, as this is what flex2 compiler output require! Flash player 7 and 8 does not work.

Downloading the source
I have zipped up the project as I describe how to build above. It can be downloaded from here. Ready to be build with maven.

Hope this helps someone. Soon, I will post a new lesson on some of the stuff I am learning.

8 comments:

olecl said...

Question: Have you got any trick on how to speed up the compilation? It seems like much of the compiling time is used loading the flex-config file. Even for this tiny app israfil uses 9-10 seconds to compile.

I've also used the Flex Ant Tasks and it behaves the same way.

Ole C

Per Olesen said...

No I have no tips on that. Sorry!

But we've discussed it on my project too. Our conclusion was to see how it evolves, the hope being that it is mostly startup time and that adding a lot of extra mxml and ActionScript won't make the compile time that much larger.

But, we are hoping it is so. Time will tell.

Ole C said...

Then I have a follow up question :-)

Since you seem to be using maven, then I suppose you're also using a version control system. Our flex developers are not satisfied using maven/ant to compile their flex yet, so they stick to using the Flex Builder.

So until the ant/maven speeds up I have to come up with a terrific game plan to solve the project folder structure. How do you distribute your code? Java and Flex in the same eclipse project with src/main/java and src/main/flex? Or do you make separate projects?

Per Olesen said...

I distribute the final artifact as a war, but maybe you with "distribute" mean how i organize my project structure!? In that case, I use one single maven project with a directory for each artifact. Here's how it looks

project/domain (jar output)
|-src/main/java (JPA mapped beans)
|-src/test/java

project/services (jar output)
|-src/main/java (spring beans)
|-src/test/java

project/thinclient (pom module)
|-client (swf output)
|-server (war output)

project/thinclient/client
|-src/main/flex

project/thinclient/server
|-src/main/java
|-src/main/webapp

Where:
- services depends on domain
- thinclient-server depends on thinclient-client
- thinclient-server depends on services

Ole C said...

Smarts. It's good to see that others are doing the same as us in these flexy times :-)

Per Olesen said...

With respect to the question from "olecl" about compilation time.

Compilation is much faster with the flex compiler shell.

See my post here.

Per Olesen said...

On compilation time: One simple place to start is using the "incremental" option on the flex compiler. The israfil plugin can set that too.

You will still pay the jdk, maven and flex-compiler startup penalty though.

Kocka said...

Very good post, thank you Per!