Category Archives: Flex

Flex & Ant top tips

After a couple of days creating an ant build script for a Flex app previously only ever built from within Eclipse I thought I’d share my pain.

Asset references

To avoid compilation errors when the mxmlc task can’t find your assets refer to images, fonts, etc with an absolute path (relative to the flex src directory), e.g…

<mx:Image
source="@Embed(source='/../assets/an_icon_with_a_sensible_absolute_path.png')"/>

This also has the happy side effect of making the paths of these assets more sensible than the alternative crazy relative path approach, e.g. the above line replaced a line similar to the following…

<mx:Image
source="@Embed(source='../../../../../../../assets/an_icon_with_a_crazy_relative_path.png')"/>

Eclipse environment variables

Increase the Java Heap space if you get an OutOfMemory exception during the mxmlc task when running the ant build from within Eclipse.
Select the JRE used in your Eclipse project and add this to the command line… -Xmx512m
See http://www.themorphicgroup.com/blog/2009/07/10/compiling-using-ant-in-flex-builder-error-java-heap-space/ for more details.

Command line environment variables

export ANT_OPTS=-Xmx512m
export ANT_HOME=<ant 1.7 installation dir>
export PATH=$ANT_HOME/bin:$PATH
export JAVA_HOME=<jdk 1.6 installation dir>
export JAVACMD=${JAVA_HOME}/bin/java

Flex Builder Pro license

If using Data Visualization Components (charts, etc) then to avoid the trial watermark provide the mxmlc task with the Flex Builder Pro license number, e.g. ..

<license product="flexbuilder3" serial-number="000000000000000000000000"/>

Note the lowercase product name and the format of the serial-number.

If running the ant build on a machine with Flex Builder Pro installed be aware that the Flex Builder Pro license can be picked up from a variety of locations, see http://livedocs.adobe.com/flex/3/html/help.html?content=configuring_environment_2.html#212596 for details.

Embed fonts with url not local

To increase the portability of your Flex app embed Fonts using urls (preferably part of your version controlled Flex assets), e.g…

@font-face {
 src: url("/../assets/fonts/FancyFont.ttf");
 fontFamily: myFancyFont;
}

See https://gerrymclarnon.wordpress.com/2010/05/25/flex-on-a-mac-and-gcgetglyphdevicemetrics for more details.

Roll your own index.html

The html-wrapper task doesn’t handle a fancy dan index.template.html very well, so you can roll your own task, e.g…

<target name="fancy.dan.html-wrapper">
  <copy file="${basedir}/html-template/AC_OETags.js"
        tofile="${STAGING_LOCATION}/AC_OETags.js" />
  <copy file="${basedir}/html-template/playerProductInstall.swf"
        tofile="${STAGING_LOCATION}/playerProductInstall.swf" />
  <copy file="${basedir}/html-template/swfMouseWheel.js"
        tofile="${STAGING_LOCATION}/swfMouseWheel.js" />
  <copy file="${basedir}/html-template/index.template.html"
        tofile="${STAGING_LOCATION}/index.html" />
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${swf}" value="${APP_NAME}"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${application}" value="${APP_NAME}"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${width}" value="100%"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${height}" value="100%"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${bgcolor}" value="#000000"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${version_major}" value="9"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${version_minor}" value="0"/>
    <replace file="${STAGING_LOCATION}/index.html"
          token="$${version_revision}" value="28"/>
</target>

Don’t rely on Eclipse

Just to state the obvious it’s best not to rely on any Eclipse generated class files, relocated properties files, etc. If you do rely on Eclipse then this will only lead to confusion when someone, who hasn’t first of all built the app from within Eclipse, runs your ant file from the command line and gets different results to you!

Advertisement

Flex on a Mac & GCGetGlyphDeviceMetrics

For a while I’d been wondering what the GCGetGlyphDeviceMetrics failed error  meant when I was compiling my Flex app using ant on a Mac. Well it seems to be the way I was using embedded fonts!

The following caused this seemingly benign error message…

@font-face {
 src: local("Verdana");
 fontFamily: myVerdanaFont;
}

But the following,  more portable method,  won’t…

@font-face {
 src: url("/../assets/fonts/Verdana.ttf");
 fontFamily: myVerdanaFont;
}

I hope that helps someone.

Interesting HTTPService Feature!

Several hours later I have finally discovered why my RESTful HTTPService call via BlazeDS was never returning a response*. Well it turns out that it actually was…

Thanks to the Firebug plug-in for Firefox I could see that the HTTP GET request had nonsense  e4x style xml attributes in its <amfx> content. I discovered that these xml attributes were actually the name-value pairs of the request property from the previous service call. A response, of sorts, was being returned but (unfortunately for me) not even a sniff of a FaultEvent was being generated even though the <amfx> response’s body was null! It turns out that the HTTPService send method helpfully(?) sets the parameters of the service call to the name-value pairs generated from the request property if the parameters object of the send method call is null! No really here it is…

public function send(parameters:Object = null):AsyncToken
{
 if (parameters == null)
   parameters = request;
...
}

I now reset my request object before any GET calls are issued…

this.request = {};

I hope this helps someone to avoid wasting as much time as I did on something so trivial.

*I would like to publicly apologise to the Java Web Service that I was blaming for the non-appearance of a response from the HTTPService call.

Can you tell your ACE from your ACP?

Hurrah! I passed the Adobe Flex certification exam and can now call myself an Adobe Certified Professional Adobe Flex Developer (AFAIK that is the full title). Now its a small point but during the 5 days & nights (well one or two) studying for the exam I was under the impression that if successful I would be an Adobe Certified Expert (ACE). Imagine my surprise when on downloading the logo, this one…

ACP Logo

I discover that I’m not an expert at all but a professional, an Adobe Certified Professional (ACP)! I can’t help feeling a slight tinge of disappoint. However, that and the scary Glasgow close (communal entrance) that the test centre was located up were the only downsides to taking the exam.

The exam was, as has been commented on elsewhere, quite wide ranging. Taking in J2EE & OO concepts, Design Patterns, UML and other stuff that you might not expect in a Flex Developer’s exam, although its all the better for it. Apart from refreshing my memory on a few things the most I got out of it was working with LCDS, the J2EE server app previously known as FDS. I had used Red5 in the past and intend to use BlazeDS soon so rather than just reading the docs and watching the Lynda.com videos, another top tip from the blogosphere, I thought I’d write a few example apps. I would definitely recommend this approach for this section of the exam. Thanks to Duane’s World for tips on how to install LCDS in Mac OS X.

Overall the biggest thanks goes to Jun who has a very handy detailed Flex Exam Specification on offer. This is a very good summary of the ins and outs of the exam. Something that is strangely missing, at least I couldn’t find it, from the official Adobe blurb.

As seems traditional in this type of blog entry I should tell you what my score was … well if I hadn’t done OK then I probably wouldn’t be telling you but 85% isn’t too bad is it?