Как переопределить дочерние элементы управления в элементе управления Flex Tree - PullRequest
Новая
       26

Как переопределить дочерние элементы управления в элементе управления Flex Tree

0 голосов
/ 21 августа 2010

В настоящее время я разрабатываю динамическую LineChart в FLEX 4. Я реализую элемент управления Tree рядом с моей LineChart, которая будет фильтровать поставщик данных LineChart и серию строк.Элемент управления дерева имеет несколько ветвей и, в конечном счете, 5 дочерних (конечных узлов) в нижней части последней ветви.

Мне нужно, чтобы конечные узлы / дочерние элементы отображались в виде флажков внутри элемента управления деревом.Как я понимаю, для этого потребуются переопределения в классе TreeItemRenderer.Здесь я немного запутался в том, как это реализовать.

В настоящее время я могу различать лист и ветви, используя этот код, в моем основном компоненте MXML.Я добавил это, потому что это может быть полезно для некоторых начинающих разработчиков FLEX, таких как я, которые не могут легко найти эту документированную функциональность: 

            private function treeClick(e:ListEvent):void {

            _selectedItem = Tree(e.currentTarget).selectedItem;

            if(mainTree.dataDescriptor.isBranch(_selectedItem)) {
                Alert.show('branch click');
            }
            else {
                Alert.show('leaf node click');
            }

        }

Я смотрю на класс переопределения TreeItemRenderer из следующего пример здесь :

В этом примере они переопределяют суперфункцию createChildden, чтобы добавить флажки в элемент управления дерева.

Мой вопрос: Могу ли я переопределить функцию createChildren непосредственно в моем компоненте MXML, и не нужно ли использовать весь файл класса для переопределения этой функции?Должен ли я заново изобрести колесо, чтобы сделать это?

Кроме того, как я могу отличить, что мой treeItem является листовым узлом, а не родительским, в функции переопределения? Iтолько хочу добавить флажки к листовым узлам, как я могу дифференцировать?В следующем примере добавляются флажки для всех ветвей и конечных узлов, но я хочу добавить флажки только для конечных узлов / потомков.Как бы вы подошли к этому? 

        override protected function createChildren( ): void
        {
            super.createChildren( );
            if( !_checkbox )
            {
                _checkbox = new CheckBoxExtended( );
                _checkbox.allow3StateForUser = false;
                _checkbox.addEventListener( MouseEvent.CLICK, onCheckboxClick );
                addChild( _checkbox );
            }
        }

Вот XML, с которым я работаю: 

    <mx:XMLList id="treeData">
    <node label="DAIX">
        <node label="Account 1">
            <node label="Premise 1">
                <node label="Device 1" oid="31" isChecked="false">
                </node>
                <node label="Device 2" oid="32" isChecked="false">
                </node>
            </node>
            <node label="Premise 2">
                <node label="Device 1" oid="41" isChecked="false">
                </node>
                <node label="Device 2" oid="42" isChecked="false">
                </node>                 
            </node>
        </node>
        <node label="Account 2">
            <node label="Premise 1">
                <node label="Device 1" oid="31" isChecked="false">
                </node>
                <node label="Device 2" oid="32" isChecked="false">
                </node>             
            </node>
            <node label="Premise 2">
                <node label="Device 1" oid="31" isChecked="false">
                </node>
                <node label="Device 2" oid="32" isChecked="false">
                </node>                 
            </node>
        </node>
    </node>    
</mx:XMLList>

Вот мой тег дерева: 

<mx:Tree id="mainTree" dataProvider="{treeData}" itemRenderer="TreeCheckBoxItemRenderer" labelField="@label" showRoot="false" width="100%" height="100%" itemClick="treeClick(event)" />

1 Ответ

1 голос
/ 21 августа 2010

Вот что я хотел бы сделать: создать средство визуализации элементов, созданное на основе TreeItemRender, в качестве компонента MXML и включить ваш флажок в MXML, а затем переопределить установщик для listData. В вашем переопределенном методе сделайте что-то вроде этого:

РЕДАКТИРОВАТЬ: Добавлен окружающий MXML (обратите внимание, что MXML - это почти то же самое, что FB 4 генерирует по умолчанию при создании нового средства визуализации элементов дерева, и что я не проверял это в дереве.)

EDIT2: добавлен код для перемещения проверенного состояния назад и вперед между компонентом и данными. 

<fx:Script>
    <![CDATA[
        import mx.controls.treeClasses.TreeListData;

        override public function set listData(value:BaseListData):void
        {
            super.listData = value
            this.myCheckbox.visible = !(value as TreeListData).hasChildren;
            this.myCheckbox.includeInLayout = !(value as TreeListData).hasChildren;
        }

        override public function set data(value:Object):void {
            super.data = value;

            this.myCheckbox.selected = this.data.isChecked;
        }

        private function onCheckboxChange(e:Event):void {
            this.data.isChecked = this.myCheckbox.selected;
        }
    ]]>
</fx:Script>
<s:states>
    <s:State name="normal" />      
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
    <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:CheckBox id="myCheckbox" change="onCheckboxChange(event)"/>
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup>

...