AS3 E4X Rundown is a great introduction and reference to working with E4X in Flex. The author, Roger Braunstien is correct that 75% of E4X makes perfect sense, but it’s the remaining 25% that requires a bit of demystifying. This post covers the basics well then goes on to share some of the tips and tricks in working with E4X.
The topic around dynamically resizing Yahoo! Maps in Flex came up in the Yahoo! Flash Developer Group last week. At the same time, I had also been trying to solve this problem for a project I’m working on. At first this problem seemed quite mysterious. I could resize the map, but it was always resizing to a 3×2 aspect ratio. If I had a container was not 3×2, the map would pin itself to the top of the container and have white borders to the right and bottom. I tried all possible combinations of properties (height, width, percentHeight, percentWidth, scaleContent) with no luck.
Yahoo! provides an AS3 API for Flex 2.0 developers that includes a SWF (built in AS2.0) and a SWC. The AS3 AstraWebAPI libraries are a set of wrapper tools that facilitate access to Yahoo!’s Web APIs from Flex 2.0 and Flash. This library works quite well, but it only exposes a subset of the API calls that are allowed by the Yahoo! API’s - so as a Flex developer you only have access to the most common calls. Unfortunately the AstraWebAPI swc does not include the setMapSize method that is defined in the as2map.swf file. So how do we access this method?
A little background. as2map.swf is an ActionScript 2 swf that you load into your Flex application when you instantiate a Yahoo Map. The AstraWebAPIs.swc file then provides a set of wrapper classes that uses ExternalInterface to communicate between your Flex application and the as2map.swf. It sounds kind of ugly - and is - but until Yahoo! releases an AS3 version of their mapping tool, this method will have to do.
So how do we make API calls to methods not exposed by AstraWebAPIs.swc file? My solution is to call the ExternalInterfaceBuffer directly from within your Flex application. It’s pretty easy to do…
import com.yahoo.webapis.maps.utils.ExternalInterfaceBuffer;
private function resizeMap(someWidth:int, someHeight:int) : void {
// SWFDOMID and UNIQUEID are constants set in your existing map code
var apiCall:String = SWFDOMID + ".setMapSize" + UNIQUEID;
var EIBuffer:ExternalInterfaceBuffer = ExternalInterfaceBuffer.getInstance();
EIBuffer.addCall({method:apiCall, data:{w:someWidth, h:someHeight})
}
I have provided an example (with source available here) that you can look at.
reflexutil is an open source project that provides a Firebug like DOM inspector to your Flex apps. At any point during the execution of your Flex application, you can right mouse-click and access the ReflexUtil property inspector. With the inspector, you can look at any UI component, it’s hierarchy in your application and edit pretty much any property live! It is pretty easy to configure and use and could be a huge time saver.
David Zuckerman from Adobe’s Flex Builder team offers up a Flex Builder editor cheat sheet that is sure to make your FB coding much more productive. My favorites are:
My colleague David Meeuwis showed me a most useful and non-intuitive tip that explains a subtle difference between using the @ axis and the attribute() axis in E4X. For example, given the following XML fragment…
<names>
<name salutation="Mr">Billy Bob Thorton</name>
<name salutation="Mrs">Angelina Jollie</name>
<name>Brad Pitt</name>
<name salutation="Ms">Jennifer Aniston</name>
<name salutation="Mr">Vince Vaugn</name>
</names>
The AS3 expression below…
myXml.name.(@salutation == 'Mr')
…will find all the names that have a salutation attribute equal to ‘Mr’. However, if there is any name in the xml that doesn’t have a salutation attribute, that query will throw an exception and die. However…
myXml.name.(attribute('salutation') == 'Mr')
Will give back all names that have a salutation attribute equal to ‘Mr’ and ignore any name elements without a salutation attribute.
So unless you are absolutely positive that the attribute you are selecting always exists, you should be using the attribute() axis over the @ axis.
Here is a quick Flex example with view source enabled that you can test with.
Andrew Trice recently posted on how to Improve Flex Builder Performance. His instructions are for Windows and point in the direction editing FlexBuilder.ini. On the Mac, FlexBuilder.ini is well hidden and not easily found. To change your memory settings on OSX you need to:
I upped my -Xms and -Xmx to 1024 and have noticed a performance improvement on my compile/build time.
eokyere blog has one of the best Flex productivity tips I have seen in quite a while. I build AS3 components all day, and spend way too much time manually typing getter and setter methods. Using the Dash plugin for Eclipse and eokyere’s productivity with with dash in eclipse, you’ll never write another getter and setter again!
Dash is a plugin for Eclipse that contains Eclipse Monkey which is a dynamic scripting tool to automate of routine programming tasks. Monkey scripts are little Javascript programs using either the Eclipse APIs or custom Monkey DOMs.
Regular readers of my site have probably noticed that I have been an inactive blogger over the past couple of months. There’s a very good reason for this. Since starting my own consultancy, I have been very busy! I think I may actually be working for the first time in my life - and having a helluva time doing it. What’s been keeping me so busy? FLEX! For the past four months I have had my head down in Flex Builder creating a revolutionary RIA (beta coming next month).
It’s my year anniversary working with Flex (save a two month stint with Ruby on Rails) and in that year I’ve learned a great deal. Most of my days are spent writing ActionScript 3 components and I must admit that I think I’m getting very good at it. So to ‘prove’ it and to share with the Flex community, I am offering my first Flex component for download!
ThumbBrowser is a knock off of a new widget found in iPhoto ‘08. It is a small component that will collect all of your image thumnails into one component. When you move your mouse across the component, you get previews of all the thumbs in collection. You can view a demo here and download the source here.
Some quick notes:
I’d love to hear your feedback on the component, and please send suggestions as to how I might be able to make ThumbBrowser better!
Enjoy!
Last night I gave a presentation to a group of about 40 web developers/designers in Victoria, British Columbia. I promised you all a link dump of the sites I visited so here it is…
Samples of Rich Internet Applications developed with Flex:
Flex Resources at the Adobe website:
A good way to keep up on Flex and AIR related topics:
During the session we created a Flex application that grabbed my favorite Flickr Images, and placed them into a Display Shelf component. We published the code as a Flex application and an AIR application. You can download the source code for both projects as well as my presentation slides in this zip package. Here are a couple of links to the Flickr API you might find useful if you decide to modify my source:
I hope you enjoyed the presentation as much as I enjoyed presenting! Thanks again for showing up!
I will be in Victoria, British Columbia on Wednesday August 22nd speaking to the Better Web Posse. My presentation will be on Flex and AIR and will discuss many things including Flex’s support for open standards, myths surrounding the Flex framework, and a quick introduction to AIR and its support for AJAX development. There will also be a live coding session where I will spin up a quick Flickr mashup using Ely Greenfield’s Display Shelf component. Should be a fun night so if you’re on Vancouver Island and want to learn more about Adobe Flex here are the event details:
WED August 22 | 6:30 pm
Swans Hotel, The Collard Room (map)
Attendance is free!
