My ColdFusion Resources page lists columns, articles, presentations and more. Over the years the list has grown to the point that the page requires about eight page-down scrolls to see the entire two column list. So, this page seemed like an ideal first Flex app; a tree control showing categories and listings, click to see details of each, and click the link to access the resources.
The new page (powered by Macromedia Flex) is at http://www.forta.com/cf/resources/.
And now for the code:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
width="600" height="500" initialize="resourceService.GetTreeData()">
<!-- Include query2tree() function -->
<mx:Script source="query2tree.as" />
<!-- Define the service -->
<mx:WebService id="resourceService" wsdl="http://www.forta.com/cf/resources/service.cfc?wsdl" showBusyCursor="true">
<mx:operation name="GetTreeData" />
</mx:WebService>
<!-- Define all bindings -->
<mx:Binding source="query2tree(resourceService.GetTreeData.result)" destination="resourceTree.dataProvider" />
<mx:Binding source="Object(resourceTree.selectedItem.attributes).label" destination="resTitle.text" />
<mx:Binding source="Object(resourceTree.selectedItem.attributes).url" destination="resUrl.label" />
<mx:Binding source="Object(resourceTree.selectedItem.attributes).description" destination="resDesc.text" />
<!-- Title box -->
<mx:VBox verticalGap="0" backgroundColor="#336633" borderStyle="none" widthFlex="1">
<mx:Label text="ColdFusion Resources" color="#FFFFFF" fontSize="20" fontWeight="bold" />
</mx:VBox>
<!-- Body -->
<mx:HBox>
<!--- Resource tree on the left -->
<mx:VBox>
<mx:Tree id="resourceTree"width="250" heightFlex="1" />
</mx:VBox>
<!-- Details on the right -->
<mx:VBox widthFlex="1">
<mx:VBox borderStyle="outset" widthFlex="1" heightFlex="1">
<mx:VBox verticalGap="0" borderStyle="none" widthFlex="1">
<mx:Label id="resTitle" color="#336633" width="330" fontWeight="bold" />
<mx:Link id="resUrl" color="#336633" width="330" click="getURL(resUrl.label, '_blank')" />
</mx:VBox>
<mx:TextArea id="resDesc" widthFlex="1" heightFlex="1" editable="false" wordWrap="true" borderStyle="none" />
</mx:VBox>
</mx:VBox>
</mx:HBox>
</mx:Application>
The code is actually very self-explanatory, but ...
defines the app, and specifies the app size (height and width).
The tag includes an external ActionScript file containing a function that converts returned query data into an XML format needed by the tree control below.
defines the Web Services used, this one points to a ColdFusion Component. This tag does not execute the SOAP call, that is done on startup using the initialize attribute in the tag.
Data bindings are the key to keeping data synchronized between controls. The behavior is a bit like using cell references in Microsoft Excel, once associated with each other, changes in one cell automatically propagate to other cells. The tag takes a source and destination, and ensures that the destination is updated whenever the source changes. The first binding associates the tree control with the results of the GetTreeData SOAP call. The next three bindings associate fields (used to display the title, URL, and description) with whatever is currently selected in the tree control.
The rest of the code is the display. A series of nested boxes (horizontal HBox tags and vertical VBox tags) provide containers for the display. defines the tree control. The right side of the screen contains a control to display the resource title, a control to display a linkable URL, and a control to display the description.
And that is it; 40 lines of code later I have an n-tier application that provides a much better user experience. The back end is the exact same CFC used in the original text version of the page, so no ColdFusion code changes were needed to implement this replacement interface.
I suppose it isn't it happens only with firebird, not IE ;)
seems there's a small issue with encoding. in the using xml article there's a bunch of – sprinkled throughout the text body. though nice to see its coming back as unicode!
Would it be possible to see the code behind one of those display controls like <mx:VBox>?
Jurgen, a) no price has been finalized and announced so I don't know what problems we'll run into just yet, b) I'd not install any product for just this little app, it's an example and a proof of concept, nothing more.
Bernard, thanks for pointing that out, I think you just helped me isolate a bug I have been trying to locate.
Jack, VBox is a built in control, not one of my own, I don't think you can see the MXML for it. However, you can see the ActionScript that the MXML page generates. (MXML->AS->SWF).
I noticed all your style is specified in the tags. Have you experimented with using a stylesheet yet?
seems like there is a bug pretty much at the top of your code
<mx:Script source="query2tree.as" />
should be
<mx:Script src="query2tree.as" />
Of course, a price tag that high might keep it out of the hands of the hobbyists and independent developers who often come up with the coolest and most creative uses of technology, so Macromedia faces some interesting choices in setting the sticker price. Either way, I am eager to try out replacing the front end of a Struts-based admin webapp with Flex, to see how well it fits for my company. Hopefully next beta round =)