Learnosity Tech Blog

Flex 3 to Flex 4 Migration Howto

Posted At : March 21, 2010 10:50 PM 0 Comments

I recently completed migrating an application from Flex3 to Flex4, and for my own reference, here's how I did it.

Note - this was done with flexsdk-4.0.0.13875, which was the most recent stable build at the time.

Phase 1: Get Flex3 code compiling with Flex4

Fix up stylesheets:

If you have a current Flex3 project and you are migrating to Flex4 you need to add the following lines at the top of your stylesheet.

@namespace "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";

This makes the default non-namespaced items in your stylesheet refer to the MX components. eg:

Button{fontSize:18;}

And to style up spark buttons you simply use:

s|Button{fontSize:18;}

To statically link or not?

Flex 4 defaults to dynamically linking runtime shared libraries. This produces smaller files, but if you are making desktop type applications or developing code while not connected to the internet you'll probably want to statically link the files. Add this to your compiler option:

-static-link-runtime-shared-libraries=true

You now should have a happily compiling app, however, to use all the new goodness of flex 4 there are still some more steps to be done.

Phase 2: Using all of flex 4

Update namespace to 2009

To update the namespace references for flex 4 I did the following search and replace:

Replace:
xmlns:mx="http://www.adobe.com/2006/mxml"
With:
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"

Replace mx with fx namespace

<mx:Script> and </mx:Script>
becomes:
<fx:Script> and </fx:Script>

Similarly for other tags like this:

<mx:Binding> to <fx:Binding>
<mx:Metadata> to <fx:Metadata>

Add Declarations for non visual components

Wrap tag around non visual compoents. The compiler will complain about all these errors so just follow through and wrap them in

<fx:Declarations></fx:Declarations>

tags until all the errors go away.

Migrate States

Finally, at least for the project I migrated, I needed to convert all the state tags to the new format of inline attributes.

This shows up as the following error:

Error: State overrides may no longer be explicitly declared. The legacy states syntax has been deprecated.

So if you had something like this before:

<mx:State name="loading">
<mx:AddChild relativeTo="{myBox}">
<mx:Text textAlign="center" text="Loading..." selectable="false" />
</mx:AddChild>
... snip ...
<mx:VBox id="myBox">
</mx:VBox>

It would now look something like this:

<mx:State name="loading">
... snip ...
<mx:VBox id="myBox">
<mx:Text textAlign="center" text="Loading..." selectable="false"
   visible="false" includeInLayout="false"
   visible.loading="true" includeInLayout.loading="true"
/>
</mx:VBox>

Migrate StyleManager References

Stylemanager is not called as a global class any more and you need to use fully qualified references so:

thisImage.source = StyleManager.getStyleDeclaration("Image").getStyle("brokenImageSkin");

becomes:

thisImage.source = styleManager.getStyleDeclaration("mx.controls.Image").getStyle("brokenImageSkin");

When these have all been converted, your application should compile.

Then you can start leveraging the new functionality of flex4 and begin migrating your components to spark if necessary.

proxy_http vs proxy_ajp benchmark

Posted At : March 18, 2010 1:20 AM 2 Comments

After I posted a previous blog entry about configuring railo & tomcat with apache and mod_proxy_http, Paul Kukiel and Gary Gilbert suggested that I should be using mod_proxy_ajp.

This has been something I've been looking at, but haven't found a compelling reason for one over the other.

Proxy AJP is claimed to be faster as it is a "Wire protocol" but I couldn't find any benchmarks around this.

So I decided to do a very quick and dirty benchmark to satisfy my curiosity. This is not a scientific process, I just ran a simple railo testpage on the same machine with 50 threads of jmeter requests hitting it.

First I enabled proxy_http and ran it four times, then enabled proxy_ajp and repeated. The config is below:

# Proxy HTTP config
<IfModule mod_proxy_http.c>
   <Proxy *>
   Order deny,allow
   Allow from all
   </Proxy>
   ProxyPassMatch ^/(.*\.cfm)$ http://testsite.railo:8080/$1
   ProxyPassReverse / http://testsite.railo:8080/
</IfModule>

# Proxy AJP config
<IfModule mod_proxy_ajp.c>
   <Proxy *>
   Order deny,allow
   Allow from all
   </Proxy>
   ProxyPassMatch ^/(.*\.cfm)$ ajp://testsite.railo:8009/$1
   ProxyPassReverse / ajp://testsite.railo:8009/
</IfModule>

Results:

Run	HTTP Requests/sec	AJP Requests/sec
Run 1	206.9	181.4
Run 2	203.9	143.6
Run 3	194.6	189.2
Run 4	204.6	191.4
Average	202.5	176.4

The results showed that the proxy_http module was faster - i.e. more requests per second could be pushed through.

I'm putting this down to the fact that proxy_ajp has to convert the http request into it's binary format, while proxy_http really just has to pass it along.

In different scenarios and network configurations the results may be different, but for now I'm going to stick with the http proxy.

Proxy AJP has one other benefit, in that is passes along some extra flags such as whether the request is https or not, but for our purposes we don't need this.

Cheers, Mark

FFMpeg conversion - wmv to flv HOWTO

Posted At : March 12, 2010 4:34 AM 0 Comments

More of a quick note to self about converting video formats:

To convert wmv to flash video:

ffmpeg -i input.wmv -ar 44100 -qmax 8 out.flv

This does the following:

-i input.wmv - Load input file
-ar 44100 - Resample audio to 44.1kHz.
-qmax 8 magic voodoo about quality. Gave better results than not using it.
out.flv save it as an flv.

Easy.

Railo on Tomcat revisited - mod_proxy

Posted At : March 12, 2010 12:01 AM 5 Comments

Updated: Changed the linking between railo and tomcat to use shared.loader.

I've been doing some more work on configuring railo to work flexibly in the numerous different environments we work in, and also making it simpler to set up.

To that end I investigated the use of mod_proxy for linking it to apache instead of mod_jk.

Advantages of this approach are:

Simple - communications are in plain http
Flexible - Load balancing can be easily added at the apache layer
Simple - No compiling mod_jk

Here are the basic install instructions for Railo/Tomcat/Apache on Ubuntu.

Download & Install Tomcat

Download tomcat and extract content:

tar xvzf apache-tomcat-6.0.26.tar.gz

Move Tomcat to a more appropriate place:

sudo mv apache-tomcat-6.0.26 /opt/tomcat

Download Railo

Download Railo custom version jars file

Extract and move into Tomcat lib directory:

tar zxvf railo-3.1.2.001-jars.tar.gz
sudo mv railo-3.1.2.001-jars /opt/railo

Make Tomcat load the railo jars by editing catalina.properties to change the shared loader path:

shared.loader=/opt/railo/*.jar

Make Tomcat and Railo work together by modifying the web config file:

sudo nano -w /opt/tomcat/conf/web.xml

add the following inside the <web-app> element:

<servlet>
<servlet-name>CFMLServlet</servlet-name>
<servlet-class>railo.loader.servlet.CFMLServlet</servlet-class>
<init-param>
<param-name>configuration</param-name>
<param-value>{web-root-directory}/WEB-INF/railo/</param-value>
<description>Configuraton directory</description>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>CFMLServlet</servlet-name>
<url-pattern>*.cfm</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>CFMLServlet</servlet-name>
<url-pattern>*.cfml</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>CFMLServlet</servlet-name>
<url-pattern>*.cfc</url-pattern>
</servlet-mapping>

add the following inside <welcome-file-list> element:

<welcome-file>index.cfm</welcome-file>
<welcome-file>index.cfml</welcome-file>

Start up tomcat:

/opt/tomcat/bin/startup.sh

Once this is done you should be able to access the railo admin by going to the following URL:

http://127.0.0.1:8080/railo-context/admin/server.cfm

Back to Tomcat

To test our Railo installation, let's create a test site by adding a new virtual host in both Tomcat and Apache. We do this by modifying Tomcat server.xml file (/opt/tomcat/conf/server.xml )

Linking with Apache via Mod Proxy

Ensure the modules proxy and proxy_http are enabled. On Ubuntu this is done as follows:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo /etc/init.d/apache2 restart

Create vhost

Now we need to create a virtual host entry in Apache as well:

<VirtualHost *:80>
DocumentRoot /vhosts/testsite.railo/www
ServerName testsite.railo
DirectoryIndex index.cfm
   #Proxy .cfm requests to railo
   <IfModule mod_proxy.c>
      <Proxy *>
      Order deny,allow
      Allow from all
      </Proxy>
      ProxyPassMatch ^/(.*\.cfm)$ http://testsite.railo:8080/$1
      ProxyPassReverse / http://testsite.railo:8080/
   </IfModule>

   #Deny access to admin except for local/portforwarded clients
   <Location /railo-context/>
      Order deny,allow
      Deny from all
      Allow from 127.0.0.1
   </Location>
</VirtualHost>

This tells apache to forward all requests for CFM files to the railo instance.

Finally restart apache and railo and you should be good to go.

sudo /opt/tomcat/bin/shutdown.sh
sudo /opt/tomcat/bin/startup.sh
sudo /etc/init.d/apache2 restart

Migrating CSS from Flex 3 to Flex 4

Posted At : March 8, 2010 11:34 PM 0 Comments

Having searched around for how to make CSS work when migrating to Flex 4 from Flex 3 and finding lots of incorrect namespace declarations I thought I'd blog this as a reminder to myself:

If you have a current Flex3 project and you are migrating to Flex4 you need to add the following lines at the top of your stylesheet.

@namespace "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";

This makes the default non-namespaced items in your stylesheet refer to the MX components. eg:

Button{fontSize:18;}

And to style up spark buttons you simply use:

s|Button{fontSize:18;}

Note there were lots of ones that I found that were wrong.

Do NOT use:

@namespace "library://ns.adobe.com/flex/halo";
OR
@namespace "http://ns.adobe.com/mxml/2009";

This info was sourced from the Flex SDK Wiki.

Tech Blog

Flex 3 to Flex 4 Migration Howto

Phase 1: Get Flex3 code compiling with Flex4

Fix up stylesheets:

To statically link or not?

Phase 2: Using all of flex 4

Update namespace to 2009

Replace mx with fx namespace

Add Declarations for non visual components

Migrate States

Migrate StyleManager References

proxy_http vs proxy_ajp benchmark

Results:

FFMpeg conversion - wmv to flv HOWTO

Railo on Tomcat revisited - mod_proxy

Download & Install Tomcat

Download Railo

Back to Tomcat

Linking with Apache via Mod Proxy

Create vhost

Migrating CSS from Flex 3 to Flex 4

Do NOT use:

Flex 4 RSL's and how to not use them

Archives By Subject

Archives

Tech Blog

Flex 3 to Flex 4 Migration Howto

Phase 1: Get Flex3 code compiling with Flex4

Fix up stylesheets:

To statically link or not?

Phase 2: Using all of flex 4

Update namespace to 2009

Replace mx with fx namespace

Add Declarations for non visual components

Migrate States

Migrate StyleManager References

Related Blog Entries

proxy_http vs proxy_ajp benchmark

Results:

Related Blog Entries

FFMpeg conversion - wmv to flv HOWTO

Related Blog Entries

Railo on Tomcat revisited - mod_proxy

Download & Install Tomcat

Download Railo

Back to Tomcat

Linking with Apache via Mod Proxy

Create vhost

Related Blog Entries

Migrating CSS from Flex 3 to Flex 4

Do NOT use:

Related Blog Entries

Flex 4 RSL's and how to not use them

Related Blog Entries

Archives By Subject

Archives