Archive for November, 2009
FlexUnit 4 Testing Services In Flash Player Issue
We’ve created a number of FlexUnit 4 (FU4) tests for our current, large project and the suite of tests that seems to be of the most importance to both us and our client is the one that tests the services. Our client’s back-end services are simple JSPs that return XML payloads for a number of CRUD operations on various objects in the system, so we’d like to test sending good required data as well as bad required data to our delegate before hitting the service directly.
The issue we ran into was quite frustrating and it took me some time to figure it out — I actually had to explain the system of tests to my partner before it dawned on me what was going wrong. In order to actually hit the services and get data back, you need to be logged into our client’s system…except this isn’t done through a Flex login, but rather via the larger application’s HTML login in which our smaller app lives (SSO)…once you’re logged in, a cookie is sent back and forth between the client and server…such is the security design of our client’s application framework and there wasn’t any wiggle room to change this.
Change SWF to Open With Browser
Now think about FU4 and how it actually runs the tests (when using Ant and not building and running with FlexBuilder)…it simply opens up a TestRunner.swf in the Flash Player to execute it’s tests…this means no browser wrapper for our SWF and thus no access to cookies…and ultimately no working services in my tests…grrrr.
So here’s a simple solution (on Mac)…open up Finder and locate your TestRunner.swf, right-click on it and select “Get Info”. Find the section “Open with” and change the application to your browser (I use FireFox), but don’t click the button change for all, as we just want to change this for this file and this file only. Voila! Now your TestRunner.swf will run in thr browser when your Ant buld runs and you will have access t cookies (assuming you’ve already logged into the system you need access to in the same browser session).
Dude, Where’s My Chart Labels?
Posted by joes in actionscript, data visualization, flex, flex builder on November 19th, 2009
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…
Headless Flex Builds on EC2 Using Hudson Against Remote SVN Repo on Assembla with FlexPMD
Posted by admin in assembla, data visualization, ec2, flex, flex builder, flexpmd, hudson, svn, tomcat on November 16th, 2009
We’re doing a current project requiring continuous integration. We also maintain the SVN repo. There’s a lot here and you may/may not need all the pieces. We’re specifically doing headless Flex/DataViz Builds on Amazon EC2 Ubuntu with Hudson against a remote SVN repo on Assembla and have thrown in FlexPMD to see what it can add to our process.
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
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
- datavisualization.swc into the frameworkslibs folder
- datavisualization__3.0.9147.swz and datavisualization__3.0.9147.swf into the frameworksrsls folder
- 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.
RIA Unleashed Boston
If you’re going to be at the RIA Unleashed event in Boston this Friday, November 13, feel free to hit me and the WASI team up for a chat. And not that I’m not looking forward to see all you speakerz, but definitely psyched to hang with Jesse Warden and Andy Powell. See you kids there!
New Mac Magic Mouse Quick Review
Mac Magic Mouse
I had the Mac Mighty Mouse and I liked it, sans the fact that the scroll ball would get all gunked up with dust and shiz from my desk…I was forced to clean the sucker wkly at first and then daily as time went on in order to get it working and god forbid anything mess up my workflow 
So I decided to try out the new Mac Magic Mouse and after 2 wks I really, really like it:
- No moving parts = no cleaning!
- No moving parts = harder to break!
- The pointer is laser sharp and extremely accurate…sounds kind of flakey, but I honestly noticed it almost immediately.
- Clearly defined Right-Click Action — I found that the Mighty Mouse was very flakey and I had to be exact with my right-clicks. It seems to work every time with the new Magic Mouse…huge for me!
- The new scrolling action is synonymous with scrolling on the iPhone, as it’s the same technology. Simple finger swipes anywhere on the surface of the mouse now activate scrolling — both horizontal and vertical are supported.
It also does some other cool zooming stuff with finger swiping + some keys, but I don’t use it that much.
The only thing that I found a bit odd was the setup…so I connected my new mouse with bluetooth through system prefs, but the scrolling didn’t work. The key here is to run a software update after the pairing so it picks up the new Mac OS Patch to work with your new Magic Mouse…and I believe I had to reboot as well…the only reason I call it out is b/c Mac didn’t in the directions and they seem to insinuate that it’ll just pair and work.
Overall, one of the better mouses I’ve ever used.
Setting Flex Default Background Color :: Ant MXMLC + FlexBuilder + SWF MetaData :: UPDATED
I always forget this one so I decided to post it…wanna remove the default blue-gray background from your flex apps and make it the same color as your actual application?
Just put in the -default-background-color compiler switch and provide a hex color — I use white in the following example.
(Thanks for SWF MetaData reminder Ben: Return Undefined and soon migrating to Ben-Clinkenbeard-dot-com)
Ant MXMLC
<mxmlc>
...
<default-background-color>0xFFFFFF</default-background-color>
....
</mxmlc>
Flex Builder -> Project Properties -> Compiler Options -> Additional compiler arguments:
-default-background-color #FFFFFF
SWF MetaData
[SWF( backgroundColor="#FFFFFF" )]
Axiis Drill Down Example
Posted by admin in actionscript, axiis, data visualization, flex, tutorial on November 2nd, 2009
I’ve seen a number of requests for a drill down version of an Axiis chart. We have a current client that will need that functionality as well so I figured I’d give it a shot.
The approach I’m taking is pretty straight forward. Put a drill down layout on the stage and make it invisible initially. When the user clicks on an item in the primary chart that we want to drill in, capture the event, set a dataProvider specific to the portion of the data that represents the drill down, hide the primary layout and show the drill down layout.
Building off the familiar approach for the Axiis examples, add a few objects for the drill down layout to use
<mx:Object id=“dataProvider”/> <mx:String id=“verticalField”/> <mx:String id=“dataField”>date</mx:String> <mx:String id=“labelField”>date.value</mx:String> <mx:Object id=“drilldataProvider”/> <mx:String id=“drilldataField”/> <mx:String id=“drilllabelField”/>
The drill down layout can be whatever type you choose. Here I’m just going to display the data as a simple bar chart.
<axiis:HBoxLayout
id=“drillDownLayout”
x=“25”
y=“0”
showDataTips=“true”
height=“{dc.height-70}”
width=“{dc.width-25}”
visible=“false”
dataProvider=“{drilldataProvider}”
percentGap=“0”
dataField=“{drilldataField}”
labelField=“{drilllabelField}”
itemClick=“this.itemClick(event);”>
<axiis:drawingGeometries>
<degrafa:RegularRectangle
id=“drillRectangle”
x=“{drillDownLayout.currentReference.x}”
y=“{drillDownLayout.height-vScale.valueToLayout(drillDownLayout.currentValue)}”
width=“{drillDownLayout.currentReference.width}”
height=“{vScale.valueToLayout(drillDownLayout.currentValue)}”
stroke=“{colStroke}”/>
<degrafa:RasterText
text=“{drillDownLayout.currentLabel}”
fontFamily=“Arial”
align=“center”
x=“{drillDownLayout.currentReference.x}”
width=“{drillDownLayout.currentReference.width}”
y=“{drillDownLayout.height+5}”/>
</axiis:drawingGeometries>
</axiis:HBoxLayout>
The only real piece of interest in this is the addition of a handler for the itemClick event.
itemClick="this.itemClick(event)"
Here’s the code that will handle the click of an item in the layout. Note that it will check to see which layout is currently visible so we can get back to the primary chart.
public function itemClick(evt:LayoutItemEvent):void
{
// Switch back to main view
if ( this.drillDownLayout.visible )
{
this.drilldataProvider = null;
this.drillDownLayout.visible = false;
this.hLayout.visible = true;
dc.invalidateDisplayList();
}else {
var ac:ArrayCollection = evt.item.layout.dataProvider as ArrayCollection;
this.hLayout.visible = false;
this.drillDownLayout.visible = true;
this.drilldataField = &quot;value&quot;;
this.drilllabelField = &quot;value&quot;;
this.drillRectangle.fill = ( evt.item.data.type == "receivables" ) ? this.receivablesStack.fill : this.payablesStack.fill;
this.drilldataProvider = ac;
dc.invalidateDisplayList();
}
}