NOTE: Using Flash Builder Burrito and Flex Hero 4.5 — haven’t tested to see if this was the previous issue or not but I wanted to make note of it.

This seems to make embedded fonts play nice in both MX and Spark components in almost every situation. The one I couldn’t seem to get around was mx:Legend.

When I embedded a font and used this compiler setting, I would randomly see only a couple of my legend labels show up. However, by using just a small piece of my old workaround I was soon back in business.

NOTE: There is one rather large drawback to this though…you have to embed your font twice — once for Spark and once for MX.

Your css should look something like this:

/********************************************************
/ Fonts
/*******************************************************/
@font-face
{
	src: url("/resources/font/MyriadPro-Regular.otf");
	font-family: SparkEmbeddedFont;
	font-weight: normal;
	embed-as-cff: true;
}

@font-face
{
	src: url("/resources/font/MyriadPro-Bold.otf");
	font-family: SparkEmbeddedFont;
	font-weight: bold;
	embed-as-cff: true;
}

/********************************************************
/ NOTE: Due to an issue with the legend and embedded
/ fonts we need to embed the font as non cff too.
/*******************************************************/
@font-face
{
	src: url("/resources/font/MyriadPro-Regular.otf");
	font-family: MXEmbeddedFont;
	font-weight: normal;
	embed-as-cff: false;
}

@font-face
{
	src: url("/resources/font/MyriadPro-Bold.otf");
	font-family: MXEmbeddedFont;
	font-weight: bold;
	embed-as-cff: false;
}

/************************************************************
/ Flex Class-Level Styles
/************************************************************/
s|Application
{
	font-family: SparkEmbeddedFont;
	color: #000000;
}

mx|LegendItem, mx|PieSeries
{
	font-family: MXEmbeddedFont;
	font-size: 12;
	textFieldClass: ClassReference("mx.core.UITextField");
}

Tweet This Post

Set memory usage to 1024M minimum.
export MAVEN_OPTS=-Xmx1024m

Set the path to the appropriate SDK for Flash Builder
FLASH4_SDK=’/Applications/Adobe Flash Builder 4 Plug-in/sdks/3.5.0′

Set the path for ADL if building AIR applications
ADL_PATH=${FLASH4_SDK}/bin

Set the path to the Flash Player for launching FlexUnit tests
FLASH_PLAYER_PATH=’/Applications/Adobe Flash Builder 4 Plug-in/Player/mac/Flash Player.app/Contents/MacOS’

Append these to the current path
export PATH=${PATH}:${ADL_PATH}
export PATH=${PATH}:${FLASH_PLAYER_PATH}

Tweet This Post

One of the things you have to keep in mind though is that since the class is dynamic, the compiler can’t provide the linkage for you to do something like:

var someValue:SomeClass = someObject as SomeDynamicClass;

The compiler won’t complain, but, you will as you scratch your head trying to understand why someValue == null all the time. The lack of information at compile time is the obvious culprit.

But, I have found a decent workaround. Provide a constructor for the dynamic class that takes and Object as an optional parameter. If you pass in a parameter, call the helper function to populate the object. Here I’m using a form of reflection to do this dynamically so I don’t have to hand write all the properties.

dynamic public class SomeDynamicClass

public function SomeDynamicClass(obj:Object=null)
{
if ( obj )
this.populateMe(obj);
}

private function populateMe(source:Object):void
{

var destinationList:XML = describeType(this);

for each ( var propName:XML in destinationList..variable )
{
if ( source.hasOwnProperty( propName.@name ) )
{
var cls:Class = getDefinitionByName(propName.@type) as Class;
this[propName.@name] = source[propName.@name] as cls;
}
}
}

Later on, when you get some generic Object, like from ArrayCollection.getItem, you don’t do the normal cast but instead create a new instance passing in the Object.

var someValue:SomeClass = new SomeDynamicClass(someObject);

Hope that helps.

Tweet This Post

Wondering where your Flex Chart labels are? Well, you’re not alone. Turns out it may be related to your use of Embedded Fonts and Modules.

Surfacing a charting component in a Module works just fine when not making use of Embedded Fonts. Embed fonts in your main application or the Module itself and Presto! Your labels will disappear.

A number of bug tickets have been opened and closed with Adobe, i.e. http://bugs.adobe.com/jira/browse/FLEXDMV-1883, indicating that the issue was resolved with DMV 3.3.0. Currently using DMV 3.4.0.9271, however, and the problem seems to have re-emerged.

Opening another bug ticket with Adobe and in the meantime commenting out the use of Embedded Fonts.

More to follow…

Tweet This Post

First, some stuff I’ll assume you already have and know how to work with:

• EC2 machine running in the Amazon cloud. We’re using one of the Ubuntu disty’s. I’m going to assume you have all the necessary ports open for things like email and such.
• Hudson. We’re using version 1.326. We’ve used other CI tools but find Hudson to be very user friendly. You’ll need to have a servlet container ie Tomcat and you just pop hudson.war in and you’re ready to rock.
• Remote SVN. You can be using a local one, but. We’re using Assembla since it’s got all the stuff we need to do business in one place and it’s simple to use. Time is money.
• Java installed on your server. We’re using version 1.6.0_07

Stuff you’ll end up downloading/installing/configuring:

• Flex SDK
• Flex Dataviz components
• SVN client
• Ant
• Flex Ant
• Email

Step 1, Flex

We’re currently building with the latest stable build of Flex 3.4. Get yourself all logged into your EC2 account and let’s roll. I create a flex/3.4 directory and cd to that directory and then get the latest Flex rev. This is the latest URL:

wget http://download.macromedia.com/pub/flex/sdk/flex_sdk_3.4.zip

Let’s get the dataviz components as well since they’re a separate install

wget http://download.macromedia.com/pub/flex/sdk/datavisualization_sdk_3.4.zip

Oh yeah, and if you’re going to be doing unit testing, might as well get that sucker as well

wget http://download.macromedia.com/pub/flex/sdk/automation_sdk_3.4.zip

Great, so we have all the pieces we need so far. You’ll want to unzip and cp these to wherever you keep your software installs on the server. I’m no unix guru, but, near as I could find out, the common location is /opt.

So, create a /opt/flex directory and unzip the flex_sdk_3.4.zip files there. Then, copy the dataviz zip there and unzip it.

cp datavisualization_sdk3.4.zip /opt/flex

cd /opt/flex

unzip datavisualization_sdk3.4.zip

This will extract the following into the SDK 3 installation

1. datavisualization.swc into the frameworkslibs folder
2. datavisualization__3.0.9147.swz and datavisualization__3.0.9147.swf into the frameworksrsls folder
3. datavisualization_rb.swc into the appropriate frameworkslocale<locale> folder

Let’s make sure we put the Flex compiler on the class path. On our server, the default shell is bash. You’re setup may be different, but essentially, you want to find the properties file for you shell (I’m using /root/.bashrc) and add the following line to the bottom of it:

export PATH=/opt/flex/bin:$PATH

Now let’s test it. You may need to log out and then back into your shell. At the command prompt, enter mxmlc and hit return. You should see something like

Loading configuration file /opt/flex/frameworks/flex-config.xml

Error: a target file must be specified

That’s a good error. It means that the Flex compiler is now accessible on your system. If nothing comes back, you’re just at the command prompt, you may not be using the right shell properties file.

In order to build projects that use the dataviz components without having the watermark on your charts and graphs, you’ll need to apply a Flex license to the installation. You do this in the flex-config.xml file located in /opt/flex/frameworks. Towards the bottom of the file you’ll see some commented out xml for doing so:

<licenses>
<license>
<product>string</product>
<serial-number>number</serial-number>
</license>
</licenses>

Step 2, SVN

We are accessing an SVN repo on our Assembla account. The easiest way to make this happen from the EC2 is to just install SVN. So, from the command prompt:

apt-get install subversion

If you run into any errors, I always find it helpful to refresh the list:

apt-get update

If all went well, you should be able to log into your remote repo:

svn –username <your_username> –password <your_password> –no-auth-cache checkout <some_project_name>

If successful, you’re going to have a checked out version of some_project_name in your current directory.

Step 3, Ant

We’re going to be using Ant as our build process. It will called via a Hudson job. Let’s get and install Ant.

apt-get install ant

Once that completes, you should be able to type ant at a command prompt. If it installed successfully, you should see something similar to (unless there happens to be a build.xml file in your current directory):

Buildfile: build.xml

BUILD FAILED

This is good. We now have Ant installed. The only other Ant specific thing we’ll need to do is copy the FlexTasks.jar from your Flex SDK into your new Ant install.

Let’s find where Ant was installed. At a command prompt:

which ant

(which will most likely return)

/usr/bin/ant

Now, navigate to your Flex SDK Ant lib directory. The Flex SDK now contains the flexTasks.jar we need.

cd /opt/flex/an/lib

Now just copy this to the location of your Ant install’s lib directory (typical):

cp flexTasks.jar /usr/share/ant/lib

If you do not copy this file to the lib directory, you must specify it by using Ant’s -lib

option on the command line when you make a project.

Step 4, Setup Hudson Job

Plugins

I’m assuming you have a working familiarity with Hudson. If not, there’s a ton of info via your install directly and on the web. We have a few extra plugins installed. The Violations plugin is useful for code analysis via PMD files if you structure your ant files to use it. The Email Extension gives you a bit more flexibility than the basic email tool.

Configuration

Here’s a look at few items we needed in the Hudon configuration page to get things to work smoothly

Specify the Ant location on your server.

For the Extended E-mail Notification plugin. We’ve defined an email account on our system called hudson. We also use gmail for our corporate email. We’re essentially relaying to gmail which requires SMTP auth and SSL (note: we haven’t entered anything in the default Hudson E-mail section):

Job Setup

Go the usual steps of creating a new job. Here are the pertinent parts.

In Source Code Management, we’ll need to point to our remote SVN. When you click on the “?” next to the Repository URL, you will see the grey box and be able to provide login credentials to your SVN repo and test the connection:

We’re not going to specify any build triggers. The reason is that Assembla gives the ability to access the post-commit hook in SVN via their “Webhook” plugin. In that tool, all we have to do is specify the Hudson job URL and with each check in of code, the project is checked out, built, and success/failure notification sent to our dev group. This is the key to the ‘continuous integration’ aspect of this whole setup.

We do need to tell Hudson to use Ant to do the builds. We have a target in the build.xml file (that is in the root of our Flex project) called main.hudson. To be on the safe side, I’ve specified the full path to the build file. We specify the ant install we configured in the Hudson configuration page earlier. It would probably be helpful to give it more meaningful name like ‘ant_version_x’.

FlexPMD is another great tool we use that profiles your code based upon a bunch of best practices defined by the Flex group at Adobe. You can also specify your own criteria to use in the analysis. It’s worth checking out. Note the format of the XML filename pattern used. It took a while to figure that part out!

We configure the Editable Email Notification accordingly:

And that’s pretty much it. I’ll be pushing up a blog shortly that will walk through the whole ant build used for this project. It uses modules, all sorts of RSLs, FTP, and so on.

Happy Flexing.

Tweet This Post

• Mac
• AIR 1.5.1
• Flex Builder 3.0.2.214193
• Flex SDK 3.3

You won’t be able to Run or Debug from Flex Builder and you won’t really get an error explainging why…here’s a list of instructions from the logged bug on Adobe’s Flex Bug and Issue Management System: http://bugs.adobe.com/jira/browse/SDK-19707

NOTE: If you just go to run the AIR app with this setup it’ll silently fail…if you try to debug it you’ll get the following: “DEBUG: error dialog with text: “Process terminated without establishing connection to debugger. If the program is already running, close it before attempting to debug.

To fix it, follow these steps:

1. Download the attached change.sh.
2. Copy the change.sh into the root directory of the SDK, at the same level of the ant, asdoc, bin, frameworks, lib, etc. folders. This probably looks something like: “/Applications/Adobe Flex Builder 3.0.2 Plugin-in/Adobe Flex Builder 3 Plug-in/sdks/3.3″ or wherever you keep your Flex SDKs…
3. Change the script to executable (chmod 755 change.sh) — open up terminal and cd to the directory where you just put the change.sh file and run the command in bold: chmod 755 change.sh
4. Run the script (./change.sh) run the bold command in terminal to execute the script: ./change.sh
5. Open up FB and create a HelloWorld AIR app and make sure the SDK for Flex 3.3 is selected for this project.
6. Run the AIR app and make sure it opens.

Big thanks to Joann Chuang Anderson for this fix, as it was driving me nuts!

Tweet This Post

Modify the Project Property Files

Since we started our Flex project as a non-server based project, we’ll need to make some modifications to our .project, .actionScriptProperties, and .flexProperties files in order to convert the project to a server-based application. These files all exist under the root of the Flex Project’s directory — if you can’t see them, make sure you’re in either the Flex or Flex Debugging Perspective.

As a side note, under the covers we’re modifying the Flex Project’s Properties as if we right-clicked on the project and selected Properties.

NOTE: The following examples use a @@key@@ to indicate where you should substitute your own project, workspace, and server settings.

NOTE: This also assumes that you’re building your flex project to a directory in your Java project called flex — you don’t need to create it in WebContent on the Java side, as it’s generated by Flex Builder when you do a build or clean.

.actionScriptProperties

Open up .actionScriptProperties and locate the <compiler> node and add or change the following attributes to look like this:

• outputFolderLocation=”DOCUMENTS/@@JavaProjectName@@/WebContent/flex”
• rootURL=”http://@@Host@@:@@Port@@/@@JavaAppContext@@/flex”

Your .actionScriptProperties should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<actionScriptProperties
	mainApplicationPath="@@MyFlexApp@@.mxml"
	version="3">

<compiler
	additionalCompilerArguments="-locale en_US
	-use-network=false"
	copyDependentFiles="true"
	enableModuleDebug="true"
	generateAccessible="false"
	htmlExpressInstall="true"
	htmlGenerate="true"
	htmlHistoryManagement="true"
	htmlPlayerVersion="9.0.124"
	htmlPlayerVersionCheck="true"
	outputFolderLocation=
		"DOCUMENTS/@@JavaProjectName@@/WebContent/flex"
	outputFolderPath="bin-debug"
	rootURL="http://@@Host@@:@@Port@@/@@JavaAppContext@@/flex"
	sourceFolderPath="src"
	strict="true"
	useApolloConfig="false"
	verifyDigests="true"
	warn="true">

<compilerSourcePath/>
<libraryPath defaultLinkType="1">
<libraryPathEntry kind="4" path=""/>
<libraryPathEntry kind="1" linkType="1" path="libs"/>
</libraryPath>
<sourceAttachmentPath/>
</compiler>
<applications>
<application path="@@MyFlexApp@@.mxml"/>
</applications>
<modules/>
<buildCSSFiles/>
</actionScriptProperties>

.flexProperties

Open up .flexProperties and locate the <flexProperties> node and add or change the following attributes to look like this:

• flexServerType=”2″
• serverContextRoot=”/@@JavaAppContext@@”
• serverRoot=”${DOCUMENTS}/@@JavaProjectName@@/WebContent”
• serverRootURL=”http://@@Host@@:@@Port@@/@@JavaAppContext@@/”

Your .flexProperties should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<flexProperties
	flexServerType="2"
	serverContextRoot="/@@JavaAppContext@@"
	serverRoot="${DOCUMENTS}/@@JavaProjectName@@/WebContent"
	serverRootURL="http://@@Host@@:@@Port@@/@@JavaAppContext@@/"
	toolCompile="true"
	useServerFlexSDK="false"
	version="1"/>

.project

Open up .project and locate the <projectDescription> node and add the node <linkedResources> after the <natures> node inside <projectDescription> — simply copy and paste the <linkedResources> node from my code snippet below; your .project file should look like this:

NOTE: You need to put the full, absolute path on your machine to your Java Web Project in place of the @@FULL_PATH@@ key I subsituted down below for the path on my machine.

<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
	<name>EmployeeManagementConsole4</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
		<buildCommand>
			<name>com.adobe.flexbuilder.project.flexbuilder</name>
			<arguments>
			</arguments>
		</buildCommand>
	</buildSpec>
	<natures>
		<nature>com.adobe.flexbuilder.project.flexnature</nature>
		<nature>com.adobe.flexbuilder.project.actionscriptnature</nature>
	</natures>
	<linkedResources>
		<link>
			<name>bin-debug</name>
			<type>2</type>
			<location>
		@@FULL_PATH@@/@@JavaProjectName@@/WebContent/flex
			</location>
		</link>
	</linkedResources>
</projectDescription>

Check Flex Project Properties

Just to make sure we did everything correctly, let’s check the project properties by right-click on our Flex Project and selecting Properties -> Flex Build Path. It should look like this:

NOTE: The screen shots have my actual project, workspace, and server settings — these should help solidify the entire tutorial. They are from Part 4 of my Stack Tutorial Series.

• Main source folder: src
• Output folder: ${DOCUMENTS}/@@JavaProjectName@@/WebContent/flex
• Output folder URL: http://@@Host@@:@@Port@@/@@JavaAppContext@@/flex

Build Path Properties

Next let’s check the Flex Server Settings: Project Properties -> Flex Server:

• Root folder: ${DOCUMENTS}/@@JavaProjectName@@/WebContent
• Root URL: http://@@Host@@:@@Port@@/@@JavaAppContext@@/
• Context root: /@@JavaAppContext@@

Server Properties

Finished!

Tweet This Post

1. Download both the Flex 3.3 SDK and the Flex 3.3 Data Visualizations Components (”DVC”).
2. Unzip them both somewhere on your local hard drive — I have all my SDKs for Flex in ~/dev/flex/sdks/<versionNumber>.
3. Navigate into the DVC folder you just expanded and find the following files:
   • ../frameworks/libs/datavisualization.swc
   • ../frameworks/locale/en_US/datavisualization_rb.swc
   • ../frameworks/locale/ja_JP/datavisualization_rb.swc
   • ../frameworks/rsls/datavisualization_3.3.0.4852.swf
   • ../frameworks/rsls/datavisualization_3.3.0.4852.swz
   • ../libs/DMV-source.jar
4. Now that you know where they are what you need from the DVC SDK, copy each one into the corresponding folders for the actual Flex 3.3 framework that you expanded earlier. So on my machine, I’d copy the datavisualization.swc from the DVC SDK to the Flex SDK like so:
   • ~/dev/flex/sdks/3.3/flex_sdk_3/frameworks/libs/datavisualization.swc

   to

   • ~/dev/flex/sdks/datavisualization_sdk3.3/frameworks/libs/datavisualization.swc
5. To use the new 3.3 SDK for a particular project, open up Flex Builder and click Project -> Properties -> Flex Compiler and click on the link on the right to “Configure Flex SDKs…”

   • 

     Flex Compiler -> SDK Config

6. Browse to the Flex 3.3 SDK you just finished unpacking and adding the DVC files to and click OK.
7. You can select this new SDK as your default here or just select this as the SDK for this project.
8. Done.

Tweet This Post

-resource-bundle-list=resources.txt

bundles = containers core effects skins styles

mxmlc -locale=fr_FR,en_US -source-path=locale/{locale} -include-resource-bundles=containers,core,effects,skins,styles,charts,datamanagement -output fr_FR_ResourcMod.swf

Tweet This Post