Flex 4: mx | tree - how can I turn off the selection of elements?

Question

I want to create a tree in which the child nodes contain specific flex components that I created. To do this, I override the default ItemRenderer.

In my ItemRenderer, I have:

• two states: itemand root_item.

• the function that is executed after the creation completes that using the data checks the correct state in which this component should be in and changes currentStateto the required state.

My problem is that as soon as the user clicks on any of the elements, he automatically goes into the first state, which will ruin things.

How can I turn off the selection of items? Of course, I want the user to be able to drill and collapse trees, but not select items.

thank!

Update

An element changes state to a hover effect, so either I turn off the selection of elements or somehow I prevent a change in the effect of a hover state.

another update

this is my code:

main treeTest.xml file:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" autoLayout="false" minHeight="600">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    <fx:XML id="treeData">
        <node label="notifications">
        <node label="Winnings" is_root="yes">
            <node label="winner"/>
        </node>
        <node label="Challenges" is_root="yes">
        </node>
        <node label="Achievements" is_root="yes">
        </node>
        <node label="Lucky charms" is_root="yes">
        </node>
        <node label="Friend requests" is_root="yes">
        </node>
        </node>
    </fx:XML>  
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.controls.listClasses.ListBase;
        import mx.events.ListEvent;
        protected function tree_itemClickHandler(event:ListEvent):void
        {
            tree.selectedItem = null;
            event.preventDefault();
        }

        protected function tree_itemRollOverHandler(event:ListEvent):void {
            event.preventDefault();
        }
    ]]>
</fx:Script>

<mx:Tree id="tree" itemRollOver="tree_itemRollOverHandler(event)" itemClick="tree_itemClickHandler(event)" dataProvider="{treeData}"  folderOpenIcon="{null}" folderClosedIcon="{null}" defaultLeafIcon="{null}" width="1024" height="768" labelField="@label" itemRenderer="TreeItemRenderer" showRoot="false"  allowMultipleSelection="false" allowDragSelection="false"/>

</s:Application>

as you can see here, I tried to prevent both itemRollover and itemClick, but this did not help solve my problem.

this is TreeItemRenderer.xml:

<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">

<s:states>
    <s:State name="root_item" />            
    <s:State name="item" />
</s:states>
<fx:Script>
    <![CDATA[
        import com.flexer.Debug;

        import mx.binding.utils.ChangeWatcher;
        import mx.controls.Alert;
        import mx.events.StateChangeEvent;

        private function _stateChangeEventHandler(e:StateChangeEvent):void {
            Alert.show("state changed to " + e.target.currentState);
        }


        private function init():void {
            var theXML:XMLList = XMLList(this.data);
            var theState:String =( theXML.attribute("is_root") == "yes"  ? "root_item" : "item");
            this.currentState=theState;
            this.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE,this._stateChangeEventHandler);
//          Alert.show(theXML.attribute("is_root"));
//          Alert.show(theXML.attribute("label") + (theXML.attribute("is_root") == "yes" ? "true" : "false"));
        }

    ]]>
</fx:Script>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle" includeIn="root_item">
    <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    <s:Group id="disclosureGroup">
        <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
    </s:Group>
    <s:BitmapImage source="{treeListData.icon}" />
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup>
</s:MXTreeItemRenderer>

Answer 1

You can add an event handler to the tree for the itemClick event

itemClick="tree_itemClickHandler(event)"

Then in the event handler you can cancel the itemClick event

protected function tree_itemClickHandler(event:ListEvent):void
{
    tree.selectedItem = null;
    event.preventDefault();
}

Update:

3 : , . basedOn , . , , init(). basedOn :

<s:states>
    <s:State name="normal" basedOn="{data.@state}"/>
    <s:State name="hovered" basedOn="{data.@state}"/>
    <s:State name="selected" basedOn="{data.@state}"/>
    <s:State name="root_item" />            
    <s:State name="item" />
</s:states>

, , , , .