Category: Flex

I’m not a big fan of doing ActionScript inline within tags and/or within attributes. However, it does make data binding to properties extremely simple. Example, if you want to show a city & state based on a result from a webservice that takes a zipcode, you can do:

<mx:Label id="cityState_lbl" text="{ws.result}" />

Extremely simple binding. I’d personally rather do this in code because I’m an MXML purist, but you cannot deny the power of it.

What I just learned today was that sometimes naturally your data binding results from web services can be long making your MXML unreadable since you have a long object property name list in your MXML attribute tag.

I’ve always wondered why the dataProvider tag starts with a lowercase “d”, for example like the ComboBox:

<mx:ComboBox id="SoftwareSelection">
 <mx:dataProvider>

      <mx:Array>

         <mx:String>Macromedia Flex</mx:String>

         <mx:String>Macromedia Dreamweaver</mx:String>

         <mx:String>Macromedia ColdFusion</mx:String>

         <mx:String>Macromedia Flash</mx:String>

      </mx:Array>

   </mx:dataProvider>
</mx:ComboBox></pre>

That always threw me off, but today I learned why.

You can nest ANY attribute of a Component/Class/Tag in Flex. So, for the above, if your webservice result is obnoxiously long, you can instead nest it for readability:

<mx:Label id="cityState_lbl">

   <mx:text>

      {yourLongWebServiceName.result.nestedPropName}

   </mx:text>

</mx:Label>

Wow… that’s awesome! Thanks David George for that pimp technique.

I did this to help illustrate to a homey on the Flexcoders list how you update the screen during intense operations. As was suggested by multiple Macromedians, you should have a counter keep track of where you are in the data processing, and only process a set chunk amount, update the screen, and continue processing.

You can accomplish this through a series of doLaters. They are not perfect because they don’t ensure the same method isn’t called more than once per frame unecessarely, but trying to explain to a Java developer what:

functon onEnterFrame()
{
callMethod();
delete onEnterFrame;
}

…does really isn’t worth it.

Anyway, here’s a good example any Flexer or Flasher can use to see how to update your GUI with a ProgressBar for example when you have a very processor intensive loop going on in the background.

Update GUI While Processing

I didn’t think to make an entire website in Flex. There are only a very few genres of websites that can pull off an entire site done in Flash and not have it adversly affect the user. For such sites, Flash is appropriate.

Typically, a hybrid approach seems to work well, whether for rich advertising, or for useful widgets like in-page video players, real-time voting polls, or rss readers.

So, to see an entire website built in Flex… well, my reflection on it is, the JSP guys I guess found their replacement for Spring, or whatever it was they were using.

Although a few things were different, my initial reaction is it works and feels like a real website; real being I knew it was Flex because they told me it was before I saw it. I view Flex as an web application creation product, not a webpage/website creation product. I think it’s really nice.

…then I seeked my budding Information Architect wife on it, who does usability and web design in her day to day job. Feedback like this only helps to improve Flex. Her comments with mine mixed in below:

• inital loading time exceeds the 10 second rule. Subsequent loading times to do not. Perhaps Flex’ deferred instantiation could help this by loading in content as dynamic vs. embedded?
• no cookie trail, or highlighted selection on navigation to let you know where you are once you navigate somewhere. Perhaps the link control can be upgraded/extended to a more web-esque, obeying how HTML links work with color & underline, highlight, and a change in color for visited.
• boxes on the right do not indicate what they do; this is site specific, but because it uses SWF, there is a lot of flexbility & creativity one can implement here.
• back and next buttons work; rock on. An enhancement would have them not have the same name in the history, but rather, have section specific names.
• navigation disappears when you click it… why not keep where you are there and highlighted?
• bookmarking a certain section does not take you to that section when you return to the bookmark; perhaps capture this via FlashVars to let your app know which section to initialize too?
• the search field does not show the text cursor when you roll over it; set it manually via the CursorManager.
• middle mouse does not scroll text boxes, nor does the cursor indicate it’s text, even though you can select it. Perhaps the app is stealing focus?

Over all, awesome example of how Flex can be used as a front-end to backend services for use in creating a website. Curious how much is dynamic content, how much is static, and what were the reasons to use Flex instead of JSP and/or HTML alertnatives?

Pillar Data Systems via James Ward.