Tree - графическое отображение веток

[GBee]

Привет, пардон за название, не знаю как спросить.



Мне надо отображать пунктирные линии как на рисунке.

1 идея - рисовать в итем рендерерах, каким-то образом отслеживая глубину вложенности и то, что элемент последний в ветке (чтобы не свисала пунктирная линия). Но она слишком громоздкая, и напрягает последний элемент именно.

2-идея - рисовать под рендерами, она как-то мне больше нравится, но может есть готовые решения?

[Sergii]

думаю это то что вам нужно

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html" 
    width="570" height="270" creationComplete="created(event)"
    backgroundGradientColors="[0x000000,0x323232]" backgroundColor="#323232">
    
    <mx:Style>
        
        Tree {
            /* these three styles are inherited by the itemRenderer */
            line-alpha: 1;    
            line-color: #808080;
            line-style: dotted;
            line-thickness: 1;
            /* these two styles make the tree lines look better */
            padding-top: 0;        /* default is 2 */
            padding-bottom: 0;    /* default is 2 */
        }
        
    </mx:Style>
    
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            [Embed(source="/assets/plus.gif")]
            private var PLUS:Class;
            [Embed(source="/assets/minus.gif")]
            private var MINUS:Class; 
            
            private function created(event:FlexEvent):void {
                tree.expandItem(treeData, true);
            }
            
            private function changeLineStyle(event:Event):void {
                tree.setStyle("lineStyle", lineStyleCombo.selectedItem);
            }

            private function changeLineColor(event:Event):void {
                tree.setStyle("lineColor", lineColorChooser.selectedColor);
            }

            private function changeLineAlpha(event:Event):void {
                tree.setStyle("lineAlpha", lineAlphaStepper.value);
            }
            
            private function changeLineThickness(event:Event):void {
                tree.setStyle("lineThickness", lineThicknessStepper.value);
            }
            
            private function iconsChanged(event:Event):void {
                if (iconsCheckBox.selected) {
                    tree.clearStyle("folderOpenIcon");
                    tree.clearStyle("folderClosedIcon");
                    tree.clearStyle("defaultLeafIcon");
                } else {
                    tree.setStyle("folderOpenIcon", null);
                    tree.setStyle("folderClosedIcon", null);
                    tree.setStyle("defaultLeafIcon", null);
                }
            }
            
            private function plusDisclosureIconsChanged(event:Event):void {
                if (!disclosureCheckBox.selected) {
                    tree.clearStyle("disclosureClosedIcon");
                    tree.clearStyle("disclosureOpenIcon");
                } else {
                    tree.setStyle("disclosureClosedIcon", PLUS);
                    tree.setStyle("disclosureOpenIcon", MINUS);
                }
            }            
            
        ]]>
    </mx:Script>
    
    <mx:Style>
        .title {
            color: #ffffff;
            font-weight: bold;
        }
    </mx:Style>
            
    <mx:XML id="treeData">
        <node label="root">
          <node label="Mail Box">
              <node label="Inbox">
                  <node label="Marketing">
                      <node label="Advertising"/>
                  </node>
                  <node label="Personal"/>
              </node>
              <node label="Outbox">
                  <node label="Professional"/>
              </node>
              <node label="Spam"/>
              <node label="Sent"/>
              <node label="Saved"/>
              <node label="Boring"/>
          </node>
          <node label="Saved">
              <node label="Work">
                  <node label="Hardware"/>
                  <node label="Software"/>
              </node>  
              <node label="Personal">
                <node label="Home"/>
                <node label="Shopping">
                    <node label="Christmas">
                        <node label="Wrapping Paper"/>
                    </node>
                    <node label="Birthday"/>
                </node>
              </node>                   
          </node>   
        </node>
      </mx:XML>  
  
    <mx:Array id="lineStyles">
          <mx:String>dotted</mx:String>
         <mx:String>solid</mx:String>
        <mx:String>none</mx:String>
    </mx:Array>
      
    <mx:Tree x="10" y="10" width="290" height="250" id="tree" labelField="@label"
          showRoot="true" dataProvider="{treeData}" itemRenderer="TreeItemLinesRenderer"
        allowMultipleSelection="false" allowDragSelection="false"/>
    
    <mx:Panel x="308" y="10" width="250" height="250" layout="absolute" title="Line Styles" titleStyleName="title">
        <mx:Form width="100%" height="100%">
            <mx:FormItem label="Line Style">
                <mx:ComboBox id="lineStyleCombo" dataProvider="{lineStyles}" change="changeLineStyle(event)"/>
            </mx:FormItem>
            <mx:FormItem label="Line Color">
                <mx:ColorPicker id="lineColorChooser" selectedColor="0x999999" change="changeLineColor(event)"/>
            </mx:FormItem>
            <mx:FormItem label="Line Alpha">
                <mx:NumericStepper id="lineAlphaStepper" minimum="0" maximum="1" stepSize="0.1" value="1"
                    change="changeLineAlpha(event)" width="50"/>
            </mx:FormItem>
            <mx:FormItem label="Line Thickness">
                <mx:NumericStepper minimum="0" maximum="5" id="lineThicknessStepper" width="50" value="1"
                    change="changeLineThickness(event)" stepSize="1"/>
            </mx:FormItem>
            <mx:FormItem label="Folder Icons?">
                <mx:CheckBox id="iconsCheckBox" label=" " selected="true" change="iconsChanged(event)"/>
            </mx:FormItem>
            <mx:FormItem label="Plus Icon?">
                <mx:CheckBox id="disclosureCheckBox" label=" " selected="false" 
                    change="plusDisclosureIconsChanged(event)"/>
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
    
</mx:Application>

[Lou]

Привет. Сам нe пробовал, но видел в tour de flex
Ну и вообще можно поискать как "Tree Lines"

[GBee]

:о)) я как понял это из одного источника, спасибо мужики, выручили и сэкономили мне лишних часов работы.

[alkom]

А как сделать так, чтобы осталось только дерево с заданными настройками(плюсики, папки,), а окна настройки не было?
Я никогда не сталкивался с программированием, но по работе вынужден сделать 2 менюшки - первую с кнопками, вторую с деревом. С кнопками вроде сам разобрался по примерам, дерево на порядок сложнее(((