Site of the Day 5/20/2010

Here is a good site for a Adobe Flex Tree (open-sourced).

http://labs.flexperiments.nl/flptree-2-0-better-faster-open-source/

Site of the Day 5/15/2010

Here is a good article about the detail of the Flex Tree Control.

http://vipuljhawar.wordpress.com/2008/03/28/creating-a-dynamic-tree-in-flex/

Flex Tree Control using http service

I’ve been trying to get my two tree controls to work with 2 httpservices without any success since most of the examples are hard-coding the data (XML) inside mxml. Since I’m dense or whatever, I found this link which answered my problem. If I find another way to transform dynamic data I will post it as a different example. A co-worker of mine gave me the 2nd example.

EXAMPLE #1

answer link : example1

cfm page containing the following xml data :
====================================
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<rows><node1 text=’Test last name,first middle initial’ data=’E020094 ;ZZ;ZZ;ZZ’ >
<node2 text=’tab1′ data=’E020094 ; 1;ZZ;ZZ’ >
<leaf text=’panel 1′ data=’E020094; 1;1;1′ />
</node2>
</node1>
</rows>

ActionScript code inside flex
====================================
// show errors from server
public function handleFault(event:FaultEvent,a_descr:String):void {

Alert.show(event.fault.faultString + ” ” + a_descr, “Error”);
} // end of handle fault…

flex mxml
====================================
<mx:HTTPService
id=”idloadtree2″ resultFormat=”e4x”
url=”https://server_name/flex/get_tree.cfm&#8221;
useProxy=”false” showBusyCursor=”true”
fault=”handleFault(event,’Get Tree 2′);” />

<mx:Tree id=”idtree2″ name=”Tree” height=”100%” width=”100%”
selectionColor=”#ffff33″ textSelectedColor=”#ff3333″
dataProvider=”{idloadtree2.lastResult}” labelField=”@text”
showRoot=”false” >

EXAMPLE #2

cfm page
================================================================
<cfsetting showdebugoutput=”no”>

<cfxml variable=”myxml”>
<root label=”root node”>
<branch label=”top level branch A”>
<leaf label=”leaf a” />
<leaf label=”leaf b” />
<branch label=”second level branch A-A”>
<leaf label=”leaf c” />
<leaf label=”leaf d” />
</branch>
</branch>
<branch label=”top level branch B”>
<leaf label=”leaf e” />
</branch>
</root>
</cfxml>
<cfoutput>#tostring(myxml)#</cfoutput>

 

Flex code
=================================================================
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” creationComplete=”init()”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

// second tree’s data
[Bindable] private var _myTreeCFM:XML;
// init function to get data from cfm page
private function init():void
{
getXML.send();
}
// when data comes back, it is XML, assign it to the variable
private function resultHandlerXML(e:ResultEvent):void
{
_myTreeCFM = e.result as XML;

}
// right like there will be any errors
private function faultHandler(e:FaultEvent):void
{
Alert.show(e.message.toString());
}

]]>
</mx:Script>

<mx:Label text=”CFM data” fontSize=”20″ fontWeight=”bold” color=”#FFFFFF”/>

<!– tree with cfm data –>
<mx:Tree id=”example_cfm”
labelField=”@label”
showRoot=”false”
dataProvider=”{_myTreeCFM}”
width=”400″ height=”300″ />

<!– get data from server –>
<mx:HTTPService id=”getXML”
url=”getXML.cfm”
resultFormat=”e4x”
result=”resultHandlerXML(event)”
fault=”faultHandler(event)”
showBusyCursor=”true” />
</mx:Application>

Flex Components

These links concern general Flex components from various web site.

Fx Samples
Type Ahead
How to combine the power of a Flex Tree control within a ComboBox

FX components
Tour de Flex

effectCube

Advanced Components
FX:Script blog
Flex Componentor
Some great Flex UX components

Whiteboard Component

Rotate Image Example