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 5/22/2010

Here is an article in creating an ActionScript debugger.

http://labs.flexperiments.nl/asdebugger/

Site of the Day 5/19/2010

This is a great site using CSS for Adobe Flex. The guy is correct that CSS is implemented terribly in Flex. Didn’t they think about how CSS works in a web page and just copy that idea???

http://fcss.flashartofwar.com/

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/

Common Flex libraries

I’m going to add some Adobe Flex ActionScript libraries.

Open Source AS3 APIs

Flex : How to use the source path

I’ve wanted to use some of my ActionScript packages in a shared folder for multiple projects. The current default of the namespace is relative to the “SRC” folder. This isn’t a solution since I will have a “COM” folder under every “SRC” folder.

e.g. for src folder )
FOLDER ==> src –> com –> x –> y
NAMESPACE ==> xmls:example=”com.x.y.*”

 <example:wrap  x=”10″ y=”10″ id=”idtest” styleName=”style1″ themColor=”#77CCE1″ >
….
</example>

If you want to use a shared folder for some common code (AS packages), then you must first add a namespace and a source path to the package. I’ve tweaked my package location and import statement which Flex Builder nicely helps me greatly …:)
NAMESPACE ==> xmlns:exanple=”x.y.*”
SOURCE PATH ==> j:/shared_folder/flex_as/com (You will notice it is using a mapped drive to a shared folder for my flex actionscript code )

ACTUAL CODE ==>

<example:wrap x=”10″ y=”10″ id=”idtest1″ styleName=”style1″ themeColor=”#77CC1E” >
….
</example>