MXMLtips

Flex 2 Beta 2 is now available on Adobe Labs. A complete list of changes from beta 1 is available here.

Adobe released a Flex / AJAX Bridge. From Ely Greenfield's blog:

The Flex AJAX Bridge is a small, unobtrusive library of code that you can insert into a flex application, a flex component, a flash movie, or even an empty SWF file to expose it to scripting via the browser. Once you’ve inserted the bridge, pretty much anything you can do from Actionscript, you can do from Javascript.

A lot of what you can do in Flex is becoming possible in JavaScript, but that doesn't mean JavaScript is a better way to do it.

One reason is that the user experience with Flash is more consistent across browsers. AJAX behaves differently on different browsers - your app may work, but exactly how it behaves is somewhat browser-defined. With Flex, any browser that can host the Flash player (which is pretty much all of them, btw) will host your application exactly the same as every other.

Not only does this mean a consistent user experience, but it means you don't have to test your application with every browser known to man. How many times have you seen a shiny new AJAX application that "doesn't work on Firefox but we're working on it"? Or doesn't work on Opera, or doesn't work on Safari, or Camino, or ... The only disclaimer you're likely to have to use with your Flex app is that it doesn't work on Lynx.

I'm createing a Flex interface for the Ottawa Events website, a site that I run, and I thought I'd post some updates here as I go.  I'm not a Flex or MXML expert, so this is a learning process for me.

I'm going to post updates as I reach milestones in the project.  Here's the first one:  Ottawa Events, Flex Edition, V1.

It's primitive, but it's also very simple.  That's the cool part.  Here's what I had to do to go from the existing site to this new Flex prototype:

1. Create a method of getting the site data as XML.
2. Create the new Flex page.
3. Add a DataGrid, TextArea, Label.
4. Add an HTTPService to request the site data.
5. Bind these together.
6. Add a crossdomain.xml file to make the XML data accessible to the Flex code.

Being able to access your site's data as XML is the most important part.  If you've already got an API then this part is done, but if not, you need to choose whether you're making a general purpose API for your site (which isn't a bad idea) or just doing what you need to do to support your Flex page. 

I'm using ASP.NET for the back end, and I already have a mechanism for getting a snippet of data from the site suitable for posting on other sites, so I just extended that to add XML as an output option.  The resulting data looks like this:

<events>
  <event>
    <id>669</id>
    <title>Ottawa Golf and Travel Show</title>
    <description>More than 150 exhibitors, including retailers, local golf clubs, resorts, equipment manufacturers and golf pros, will be on hand to talk with golf junkies. Ottawa Athletic Club, March 3 to 5. $10.</description>
    <dateadded>2006-03-02T07:19:50.687-05:00</dateadded>
    <eventurl />
    <startdate>2006-03-03T00:00:00-05:00</startdate>
    <enddate>2006-03-05T00:00:00-05:00</enddate>
    <humandate>March 03 - 05, 2006</humandate>
  </event>
  <event ... >
</events>

Creating the new Flex page is simple enough:  Fire up Flex Builder, File / New / Flex Project.  I called it Events.  This generates an Events.mxml file that you can start with.

Click the Run button in Eclipse () and make sure a browser pops up with your new empty file in it.  If it does, you're ready to start adding content. 

Assuming everything worked, the next thing I did is drag a Label, a DataGrid, and a TextArea onto the canvas.  Drag them around so it looks right. 

Hooking up the XML data source to the DataGrid can be done with no code at all.  This is the part of Flex that I love.  Unfortunately with the current Flex Builder, it does require that you edit the XML by hand.  You need to add an HTTPService object, which looks like this:

    <mx:HTTPService id="eventData" 
        url="http://www.ottawaevents.org/EventBar.aspx?format=xml&amp;numevents=100"/>

This creates an object named eventData which fetches this URL.  I wanted to fetch the data as soon as the page loads.  You can do this in the XML source, or you can do it through Flex Builder's UI.  To do it through the UI, in the Outline view, select the Application node:

Then over on the right, in the Flex Properties view, find the initialize event, and add 'eventData.send();' as the code for it:

If you look at the MXML source, you'll see you just added the code as an 'initialize' attribute to the mx:Application object.  This is a good way to learn MXML - make your change in the GUI, but then go find it in the MXML source.  Eventually I can see doing most of the editing right in the source.

<mx:Application 
	xmlns:mx="http://www.macromedia.com/2005/mxml" 
	xmlns="*" 
	layout="absolute" 
	initialize="eventData.send();" 
	height="100%" 
	width="100%">

Notice the width and height at 100%.  Doing this, and anchoring controls to the edges, lets your Flex application scale to the size of the browser window.

So now you've got data coming in when the page is loaded, but not going anywhere.  The next step is to wire things together so that when the data arrives, it shows up in the DataGrid, and also wire the TextArea to the selected item in the DataGrid.

This is easier than it sounds, once you understand the basics of binding in MXML.  Basically where you need to specify a data source, you can use curly braces { } to listen to another object.  To hook up the results of the HTTPService to the DataGrid, all you need to do is set the dataProvider attribute on the DataGrid:

<mx:DataGrid x="10" y="53" 
	width="715" height="233" 
	id="eventGrid" 
	dataProvider="{eventData.result.events.event}">

This not only sets the DataGrid to update when eventData's result arrives, but using this convenient syntax for digging into an XML result, you can bind the DataGrid directly to the event nodes in the XML result.

Similarly, to having the TextArea update when the selected row in the grid changes is done by listening to the selected item in the DataGrid:

<mx:TextArea x="10" width="715" 
	id="textArea" 
	text="{eventGrid.selectedItem.description}">

In most languages, you'd have to add an event to the DataGrid that would fire when it's selected row changed, and in the handler for that event, update the TextArea.  MXML uses a different perspective, of listening to changes in another object, so the 'handler' is written in the object that's interested in the event, not the object that fires it. 

The last thing I had to do to get this working is create a crossdomain.xml file.  When the Flex framework needs to request data from a server, it first checks with that server to see if it explicitly allows Flex to do so, by looking for a file, in the root of the server, called crossdomain.xml.  If this file doesn't exist, then the HTTPService will fail the request.  If it does exist, then it checks to see if the domain hosting the SWF (the compiled Flex file) is on the allowed list. 

For example if I didn't want anyone but myself writing code that used the XML interface to my site, then I could only add stevex.org to the domains list in the crossdomain.xml file on ottawaevents.org.

You don't need a crossdomain.xml file at all if your Flex code is hosted on the same server as your XML service, but if you develop on a server other than your deployment server, and you want to test on live data, you'll need this.

Here's what mine looks like:

<cross-domain-policy>
<allow-access-from domain="*" /> 
</cross-domain-policy>

And that's it!  Hopefully this will be the first of a short series on making a useful interface to an existing site.  The MXML source for the current version of this app is here.

 

This is a tip that will seem obvious to anyone who has done any Flex development, but it's something that took me a little while to figure out and I still need to remind myself of it every now and then.

In a procedural language like C#, Java, or JavaScript/ActionScript, when you want to do something, you need to figure out what class to use or what static method to call.

In MXML, there's a third place to look for functionality you need - tags.

You can declare class in your MXML by inserting and defining a tag that creates the object you're going to work with, and then use it in your procedural code. For example, if you need to print a Number formatted as a currency, you could add a CurrencyFormatter to your code:

<!-- Declare a CurrencyFormatter and define parameters.-->
   <mx:CurrencyFormatter id="Price" precision="2"
   rounding="none"
   decimalSeparatorTo="."
   thousandsSeparatorTo=","
   useThousandsSeparator="true"
   useNegativeSign="true"
   currencySymbol="$"
   alignSymbol="left"/>

This does the procedural equivalent of constructing an object named 'Price' whose class is CurrencyFormatter, with the parameters specified. You can then use this object in your ActionScript code simply by calling Price.format(myNumber) to get the value formatted as a string.

Coming from a procedural background, this can take a bit of getting used to.

This is old news, of course, but this is a new site so I'm a bit behind. But if you've somehow found this site and were not already aware, Flex 2 Beta 1 is now available at Adobe Labs (formerly Macromedia Labs).

This includes a beta of Enterprise Services as well, new to Beta 2.