Site of the Day 7/29/2010

I’m going to explain how to send data from main Flex mxml file to a custom component. 

[UPDATE]

I’ll add some code to change components in the parent application from the custom component.

[CC]

ex.)

parentApplication.idhdivbox1.getDividerAt(0).visible = true;

or

parentApplication.[ID].[property or methods] = [value];

Lessons Learned : Try to keep the code inside the custom component small and send data (property) to the CC from the main mxml. Only if one can’t perform outside the custom component should you add ActionScript inside it. 

1.) Main mxml 

A.) Refer to custom component.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;

xmlns:flexiframe=”com.google.code.flexiframe.*” 

xmlns:cpanel=”usa_components.*” 

horizontalAlign=”center” verticalAlign=”middle” 

left=”0″ top=”0″ 

applicationComplete=”onApplicationComplete(‘1’); ” 

viewSourceURL=”srcview/index.html” > 

B.) Setup bindable xml to custom component property. 

[Bindable] 

public var b_treexml:XMLListCollection = new XMLListCollection; 

C.) Put results from server into data provider of Tree component which is in the custom component. The first statement loads the results into the data provider. The second statement loads the results into a bindable var inside the custom components, so I can ‘EXPAND’ the tree at a 

public function set_tree1(e:ResultEvent):void {  

idCpanel.idtree.dataProvider = e.result; 

idCpanel.treeData2 = e.result as XML; 

} // end of set tree…. 

2.) Using custom component on main mxml 

<cpanel:cPanel prop1=”1″ prop2=”{b_treexml}” /> 

3.) Custom component 

A.) Setup bindable variables. 

// bindable variables

[Bindable

public var prop1:String; 

[Bindable

public var prop2:XMLListCollection; 

[Bindable

public var treeData2:XML; 

B.) I have a ‘EXPAND ALL’ button to expand the tree.

// open all nodes – tree2private function openAllNodes2():void {

 idtree.openItems = treeData2..*;

} // end of open all nodes….

<mx:Button label=”Expand ALL” click=”openAllNodes2();”

useHandCursor=”true” buttonMode=”true” mouseChildren=”false” />

C.) Here is the code for the Tree component inside the CC. Notice the ID.

<mx:Tree width=”100%” height=”100%”

dataProvider=”{prop2}”

labelField=”@label”

showRoot=”false”

change=”iFrame.source = (Tree(event.target).selectedItem.attribute(‘path’).toString());”

itemClick=”tree_itemClick(event);” />

Site of the Day 6/21/2010

Here is a great site from Adobe about learning about their products.

http://tv.adobe.com/