I want to customize the scrollbars on a mx|Tree component is Flex 4.
I would like to mimic this functionality: http://flexponential.com/2009/10/09/changing-the-position-of-the-scroll-bars-in-a-spark-list/
Any thoughts or reccomendations?
This can work, add your own error checking/styling, but you get the idea:
<s:VGroup gap="-1">
<s:Button width="100%" label="Scroll up" click="{tree.verticalScrollPosition--}" />
<mx:Tree id="tree" labelField="#label" showRoot="false" width="300" height="150"
verticalScrollPolicy="off">
<mx:dataProvider>
<fx:XML>
<root>
<node label="Parent 1">
<node label="Child 1" />
<node label="Child 2">
<node label="Grandchild 1" />
<node label="Grandchild 2" />
</node>
<node label="Child 3" />
<node label="Child 4" />
<node label="Child 5" />
<node label="Child 6" />
<node label="Child 7" />
<node label="Child 8" />
<node label="Child 9" />
</node>
</root>
</fx:XML>
</mx:dataProvider>
</mx:Tree>
<s:Button width="100%" label="Scroll Down" click="{tree.verticalScrollPosition++}"/>
</s:VGroup>
you could also try to use verticalScrollBarStyleName/horizontalScrollBarStyleName with a css style. But ofc it lacks the comfort of spark skins. ;)
Related
This is my XML data in a file named nodesAndStuff.xml.
<?xml version="1.0" encoding="utf-8"?>
<root>
<node label="One" />
<node label="Two" />
<node label="Three" />
<node label="Four" />
<node label="Five" />
<node label="Six" />
<node label="Seven" />
<node label="Eight" />
<node label="Nine" />
</root>
The component using this data source is an XMLListCollection which is bound to a spark List and the code for that is:
<s:Application name="Spark_List_dataProvider_XML_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
initialize="init();">
<fx:Script>
<![CDATA[
private function init():void {
xmlListColl.source = nodes.children();
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="nodes" source="nodesAndStuff.xml" />
</fx:Declarations>
<s:List id="lst"
labelField="#label"
horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:XMLListCollection id="xmlListColl" />
</s:dataProvider>
</s:List>
Now I have added my tree just below the list and I have saved counting from 10 to 19 in one.xml, 20 to 29 in two.xml and so on in different XML file. I have no clue how to connect the XML containing counting from 10 to 19 as the single node in tree at the selection of label one in list.
There are all sorts of ways to do what you want to do. Keeping in the spirit of your example, I have modified it to do what I think you are asking:
<fx:Script>
<![CDATA[
private function init():void {
processXML(one);
}
private function processXML(nodes:XML):void {
xmlListColl.removeAll();
xmlListColl.source = nodes.children();
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="one" source="one.xml" />
<fx:XML id="two" source="two.xml" />
</fx:Declarations>
<s:List id="lst"
labelField="#label"
horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:XMLListCollection id="xmlListColl" />
</s:dataProvider>
</s:List>
<s:Button label="Change" click="processXML(two)" />
<s:List id="lst"
labelField="#label"
change="lst_changeHandler(event)"
horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:XMLListCollection>
<fx:XMLList xmlns="">
<node label="One" />
<node label="Two" />
<node label="Three" />
<node label="Four" />
<node label="Five" />
<node label="Six" />
<node label="Seven" />
<node label="Eight" />
<node label="Nine" />
</fx:XMLList>
</s:XMLListCollection>
</s:dataProvider>
</s:List>
protected function lst_changeHandler(event:IndexChangeEvent):void
{
Alert.show(event.target.selectedItem);
}
I want to extend the list with hyperlinks. For example in every node I should have an href attribute also. Then I need to redirect users to the selected item. I know Flash has the URLRequest class.
The little problem I have now is to get the selected item. It propably is because of the dataprovider is xml and I haven't done the correct casting. Or maybe some more enlightened than me can help me.
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;
import spark.events.IndexChangeEvent;
protected function lst_changeHandler(event:IndexChangeEvent):void
{
navigateToURL(new URLRequest(lst.selectedItem.#url));
}
]]>
</fx:Script>
<s:List id="lst"
labelField="#label"
change="lst_changeHandler(event)"
horizontalCenter="0" verticalCenter="0"
>
<s:dataProvider>
<s:XMLListCollection>
<fx:XMLList xmlns="">
<node label="One" url="www.internet.com" />
<node label="Two" url="www.internet2.com" />
<node label="Three" url="www.internet3.com" />
<node label="Four" url="www.bla.com" />
</fx:XMLList>
</s:XMLListCollection>
</s:dataProvider>
</s:List>
var item:XML = event.target.selectedItem as XML;
var label:String = item.#label;
var url:String = item.#url;
if(url != null) {
var ur:URLRequest = new URLRequest(url);
navigateToURL(ur);
}
It was really real simple!
I have an xml as a string in flex in the below format.
I can have as many nested groups and test as possible.
I need a way to find which are checked, how can I iterate through this?
<node label="All" checked="0">
<node label="Group1" checked="0">
<node label="Test1" checked="0" />
<node label="Test2" checked="0" />
<node label="Group1Inner" checked="0">
<node label="Test1Inner" checked="0" />
<node label="Test2Inner" checked="0" />
</node>
<node label="Group2Inner" checked="0">
<node label="Test1Inner" checked="0" />
<node label="Test2Inner" checked="0" />
</node>
</node>
</node>
You can manage this by using E4X
var xx:XML = <node label="All" checked="0">
<node label="Group1" checked="0">
<node label="Test1" checked="0" />
<node label="Test2" checked="0" />
<node label="Group1Inner" checked="0">
<node label="Test1Inner" checked="0" />
<node label="Test2Inner" checked="0" />
</node>
<node label="Group2Inner" checked="0">
<node label="Test1Inner" checked="0" />
<node label="Test2Inner" checked="0" />
</node>
</node>
</node>;
trace(xx..node.(#checked==0))
I'd like to put a TreeGrid in my application so that the columns can be sorted. If you refer to this sample application, you'll notice that if you
Open a branch node
Sort by one of the columns
Close that branch node
then the TreeGrid starts to get out of wack and duplicate columns start appearing and other columns start disappearing. What I would like is to have the columns sorted only by the outermost nodes.
One attempt I had was to run treeGrid.closeAllItems() before the sort occurred. However, this does not work, because a Sort Column event gets dispatched while closeAllItems is running, so the list gets messed up and listOutOfBounds exceptions get thrown.
Has anyone had any success with this, or have any ideas?
Here is a piece of working code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.HierarchicalData;
]]>
</mx:Script>
<mx:XMLList id="dataProviderXMLList">
<node id="1" name="Companies" type="COMPANIES" desc="All Companies" statusIcon="statusIcon">
<node id="2" name="Adobe" type="COMPANY" desc="Adobe inc." statusIcon="statusIcon">
<node id="5" name="Adobe Consulting" type="COMPANY" desc="Adobe (formerly macromedia)" statusIcon="statusIcon" />
<node id="6" name="EDBU" type="COMPANY" desc="Database company" statusIcon="statusIcon" />
</node>
<node id="3" name="Macromedia" type="COMPANY" desc="Adobe (formerly macromedia)" statusIcon="statusIcon" />
<node id="4" name="Oracle" type="COMPANY" desc="Database company" statusIcon="statusIcon" />
</node>
</mx:XMLList>
<mx:AdvancedDataGrid width="100%" height="100%" sortExpertMode="true" id="adg1" designViewDataType="tree" dataProvider="{new HierarchicalData(dataProviderXMLList)}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Companies" dataField="#name"/>
<mx:AdvancedDataGridColumn headerText="COMPANIES" dataField="#type"/>
<mx:AdvancedDataGridColumn headerText="All Companies" dataField="#desc"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
Bu this is using AdvancedDataGrid and it works perfectly fine.
<mx:Script>
<![CDATA[
private function openAllNodes():void {
tree.openItems = dp..node;
}
private function closeAllNodes():void {
tree.openItems = [];
}
]]>
</mx:Script>
<mx:XML id="dp">
<root>
<node label="Parent 1">
<node label="Child 1" />
<node label="Child 2">
<node label="Grandchild 1" />
<node label="Grandchild 2" />
</node>
<node label="Child 3" />
<node label="Child 4" />
</node>
</root>
</mx:XML>
<mx:ApplicationControlBar dock="true">
<mx:Button label="Open all nodes" click="openAllNodes();" />
<mx:Button label="Close all nodes" click="closeAllNodes();" />
</mx:ApplicationControlBar>
<mx:Tree id="tree"
dataProvider="{dp}"
showRoot="false"
labelField="#label"
width="200" />
Unless or other wise i click my parent list, the child or the next list must be in a disabled state.
I click on Child 1, then only Child 2 Must be able to select.
Please Help Me.
It sounds like you might want to extend the tree class and override some of the methods to implement your special functionality. Look at overriding the drawItem, mouseClickHandler, and possibly the expandItem functions.