Search Flex Components Free

Custom Search
Showing posts with label Flex Tree Examples. Show all posts
Showing posts with label Flex Tree Examples. Show all posts

March 24, 2008

Removing folder icons from the Flex Tree control





<mx:Style>

Tree {

folderClosedIcon: ClassReference(null);

folderOpenIcon: ClassReference(null);

}

</mx:Style>


The long answer?

Full code after the jump.



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:XML id="dp">

<mlb>

<league label="American League">

<division label="East">

<team label="Boston" />

<team label="New York" />

<team label="Toronto" />

<team label="Baltimore" />

<team label="Tampa Bay" />

</division>

<division label="Central">

<team label="Cleveland" />

<team label="Detroit" />

<team label="Minnesota" />

<team label="Chicago" />

<team label="Kansas City" />

</division>

<division label="West">

<team label="Los Angeles" />

<team label="Seattle" />

<team label="Oakland" />

<team label="Texas" />

</division>

</league>

</mlb>

</mx:XML>



<mx:Style>

Tree {

folderClosedIcon: ClassReference(null);

folderOpenIcon: ClassReference(null);

}

</mx:Style>



<mx:Tree id="TreeProject"

dataProvider="{dp.league}"

labelField="@label"

iconField="@icon"

showRoot="true"

width="320"

rowCount="9" />



</mx:Application>





Posted by Jon at 10:54 AM

Labels:

February 6, 2008

Toggling item roll over highlighting in the Flex Tree control




The following example shows how you can toggle item roll over highlighting in the Tree control in Flex by setting the useRollOver style.


Full code after the jump.


View MXML


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:XML id="treeDP">

<root>

<node label="i) One" />

<node label="i) Two" />

<node label="i) Three" />

<node label="i) Four">

<node label="ii) One" />

<node label="ii) Two" />

<node label="ii) Three">

<node label="iii) One" />

<node label="iii) Two" />

</node>

<node label="ii) Four" />

</node>

<node label="i) Five" />

<node label="i) Six" />

</root>

</mx:XML>



<mx:ApplicationControlBar dock="true">

<mx:CheckBox id="checkBox"

label="useRollOver:"

labelPlacement="left"

selected="true" />

</mx:ApplicationControlBar>



<mx:Tree id="tree"

dataProvider="{treeDP}"

labelField="@label"

showRoot="false"

useRollOver="{checkBox.selected}"

width="200" />



</mx:Application>

Posted by Jon at 10:29 AM

Labels: ,

Dragging and dropping items in a Flex Tree control





The following example shows you how you can reorder nodes in a Flex Tree control by setting the dragEnabled , dropEnabled , and dragMoveEnabled properties.


Full code after the jump.


View MXML


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:XML id="xmlDP">

<root>

<para label="Paragraph 1" isBranch="true">

<node label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />

<node label="Cras porttitor nunc a pede." />

<node label="Nulla ac magna non risus accumsan egestas." />

<node label="Aenean pretium porta felis." />

<node label="Sed massa." />

</para>

<para label="Paragraph 2" isBranch="true">

<node label="Pellentesque pretium eros id odio tincidunt lobortis." />

<node label="Praesent vitae dolor eget nisl adipiscing pretium." />

<node label="Fusce nonummy dignissim risus." />

<node label="Nunc sodales, lectus vitae nonummy cursus, augue lectus auctor orci, vel aliquet enim neque vel eros." />

<node label="Donec laoreet euismod libero." />

<node label="Etiam ut lectus." />

</para>

<para label="Paragraph 3" isBranch="true">

<node label="Maecenas ut nibh eu diam viverra suscipit." />

<node label="Pellentesque auctor, turpis vel lobortis suscipit, neque tortor tristique nibh, venenatis suscipit nisl nisl eget magna." />

<node label="Donec interdum." />

<node label="Praesent diam." />

</para>

<para label="Paragraph 4" isBranch="true">

<node label="Proin nulla." />

<node label="Morbi tincidunt, sapien in sollicitudin venenatis, nibh tortor pretium ante, non pharetra urna dolor et libero." />

<node label="In malesuada risus at neque." />

</para>

<para label="Paragraph 5" isBranch="true" />

</root>

</mx:XML>



<mx:Tree id="tree"

dataProvider="{xmlDP}"

labelField="@label"

showRoot="false"

verticalScrollPolicy="on"

alternatingItemColors="[#FFFFFF,#EEEEEE]"

showScrollTips="true"

dragEnabled="true"

dropEnabled="true"

dragMoveEnabled="true"

width="300"

rowCount="6" />



</mx:Application>




Posted by Jon at 10:26 AM

Labels: ,

Removing folder icons from the Flex Tree control





The following example shows how you can remove the folder icons from the Tree control in Flex so that only the disclosure (arrow) icons and leaf icons are visible.


The short answer, set the folderClosedIcon and folderOpenIcon styles to null using CSS, as shown in the following snippet:


<mx:Style>

Tree {

folderClosedIcon: ClassReference(null);

folderOpenIcon: ClassReference(null);

}

</mx:Style>

The long answer?

Full code after the jump.


View MXML


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:XML id="dp">

<mlb>

<league label="American League">

<division label="East">

<team label="Boston" />

<team label="New York" />

<team label="Toronto" />

<team label="Baltimore" />

<team label="Tampa Bay" />

</division>

<division label="Central">

<team label="Cleveland" />

<team label="Detroit" />

<team label="Minnesota" />

<team label="Chicago" />

<team label="Kansas City" />

</division>

<division label="West">

<team label="Los Angeles" />

<team label="Seattle" />

<team label="Oakland" />

<team label="Texas" />

</division>

</league>

</mlb>

</mx:XML>



<mx:Style>

Tree {

folderClosedIcon: ClassReference(null);

folderOpenIcon: ClassReference(null);

}

</mx:Style>



<mx:Tree id="TreeProject"

dataProvider="{dp.league}"

labelField="@label"

iconField="@icon"

showRoot="true"

width="320"

rowCount="9" />



</mx:Application>



Posted by Jon at 10:23 AM

Labels:

Removing leaf icons from the Flex Tree control




<mx:Style>

Tree {

defaultLeafIcon: ClassReference(null);

}

</mx:Style>


*************************************



<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:XML id="dp">

<mlb>

<league label="American League">

<division label="East">

<team label="Boston" />

<team label="New York" />

<team label="Toronto" />

<team label="Baltimore" />

<team label="Tampa Bay" />

</division>

<division label="Central">

<team label="Cleveland" />

<team label="Detroit" />

<team label="Minnesota" />

<team label="Chicago" />

<team label="Kansas City" />

</division>

<division label="West">

<team label="Los Angeles" />

<team label="Seattle" />

<team label="Oakland" />

<team label="Texas" />

</division>

</league>

</mlb>

</mx:XML>



<mx:Style>

Tree {

defaultLeafIcon: ClassReference(null);

}

</mx:Style>



<mx:Tree id="tree"

dataProvider="{dp.league}"

labelField="@label"

iconField="@icon"

showRoot="true"

width="320"

rowCount="9" />



</mx:Application>



************************************



If you want to set the defaultLeafIcon style to null in MXML, you could use the following snippet:


<mx:Tree id="tree"

dataProvider="{dp.league}"

defaultLeafIcon="{null}"

labelField="@label"

iconField="@icon"

showRoot="true"

width="320"

rowCount="9" />

Or, if you want to set the defaultLeafIcon style in ActionScript, you could use the following snippet:


<mx:Tree id="tree"

dataProvider="{dp.league}"

labelField="@label"

iconField="@icon"

showRoot="true"

width="320"

rowCount="9"

initialize="tree.setStyle('defaultLeafIcon', null);" />

Posted by Jon at 10:16 AM

Labels:

Subscribe to: Posts (Atom)

Related Flex Tutorials

Loading...