|
|
« Предыдущая тема | Следующая тема » |
Опции темы | Опции просмотра |
|
|
|||||
Tree - графическое отображение веток
Привет, пардон за название, не знаю как спросить.
Мне надо отображать пунктирные линии как на рисунке. 1 идея - рисовать в итем рендерерах, каким-то образом отслеживая глубину вложенности и то, что элемент последний в ветке (чтобы не свисала пунктирная линия). Но она слишком громоздкая, и напрягает последний элемент именно. 2-идея - рисовать под рендерами, она как-то мне больше нравится, но может есть готовые решения?
__________________
Чтобы доказать, что вы не робот, причините вред другому человеку. |
|
|||||
Регистрация: Mar 2011
Сообщений: 28
|
думаю это то что вам нужно
<?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> |
|
|||||
Регистрация: Jul 2008
Сообщений: 107
|
|
|
|||||
Регистрация: May 2011
Сообщений: 2
|
А как сделать так, чтобы осталось только дерево с заданными настройками(плюсики, папки,), а окна настройки не было?
Я никогда не сталкивался с программированием, но по работе вынужден сделать 2 менюшки - первую с кнопками, вторую с деревом. С кнопками вроде сам разобрался по примерам, дерево на порядок сложнее((( |
Часовой пояс GMT +4, время: 15:25. |
|
« Предыдущая тема | Следующая тема » |
|
|