source: ComponentRegistry/branches/ComponentRegistry-1.12.0/ComponentBrowserGui/src/main/flex/clarin/cmdi/componentregistry/editor/ComponentEdit.as @ 2109

Last change on this file since 2109 was 2109, checked in by twagoo, 12 years ago

Made components in component editor collapsable
File size: 10.9 KB
Line 
1package clarin.cmdi.componentregistry.editor {
2        import clarin.cmdi.componentregistry.common.ItemDescription;
3        import clarin.cmdi.componentregistry.common.LabelConstants;
4        import clarin.cmdi.componentregistry.common.StyleConstants;
5        import clarin.cmdi.componentregistry.common.components.AddComponentLabelButton;
6        import clarin.cmdi.componentregistry.common.components.AddElementLabelButton;
7        import clarin.cmdi.componentregistry.common.components.DownIconButton;
8        import clarin.cmdi.componentregistry.common.components.ExpandingComponentLabel;
9        import clarin.cmdi.componentregistry.common.components.RemoveLabelButton;
10        import clarin.cmdi.componentregistry.common.components.UpIconButton;
11        import clarin.cmdi.componentregistry.editor.model.CMDComponent;
12        import clarin.cmdi.componentregistry.editor.model.CMDComponentElement;
13       
14        import flash.display.DisplayObject;
15        import flash.events.Event;
16        import flash.events.MouseEvent;
17       
18        import mx.collections.ArrayCollection;
19        import mx.containers.Form;
20        import mx.containers.FormItem;
21        import mx.containers.HBox;
22        import mx.controls.Button;
23        import mx.controls.HRule;
24        import mx.controls.Label;
25        import mx.core.Container;
26        import mx.core.UIComponent;
27        import mx.events.DragEvent;
28        import mx.managers.DragManager;
29       
30        [Event(name="removeComponent", type="flash.events.Event")]
31        public class ComponentEdit extends Form {
32                public static const REMOVE_COMPONENT_EVENT:String = "removeComponent";
33                private static const DRAG_ITEMS:String = "items";
34               
35                private var _parent:UIComponent;
36                private var _component:CMDComponent;
37                private var _parentComponent:CMDComponent;
38                private var addComponentLabel:Label
39                private var addElementLabel:Label
40               
41                private var showToggleBox:ShowToggleBox;
42                private var hideableForm:Form;
43               
44                public function ComponentEdit(component:CMDComponent, parent:UIComponent, parentComponent:CMDComponent) {
45                        super();
46                        _component = component;
47                        _parentComponent = parentComponent;
48                        _parent = parent;
49                        styleName = StyleConstants.XMLBROWSER;
50                        if (!component.componentId) { // new empty component, otherwise it would be an already existed component which cannot be edited.
51                                addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
52                                addEventListener(DragEvent.DRAG_OVER, dragOverHandler);
53                                addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
54                        }
55                }
56               
57                public function get component():CMDComponent {
58                        return _component;
59                }
60               
61                public function get parentComponent():CMDComponent {
62                        return _parentComponent;
63                }
64               
65                private function dragEnterHandler(event:DragEvent):void {
66                        DragManager.acceptDragDrop(event.currentTarget as UIComponent);
67                        UIComponent(event.currentTarget).drawFocus(true);
68                }
69               
70               
71                private function dragOverHandler(event:DragEvent):void {
72                        if (event.dragSource.hasFormat(DRAG_ITEMS)) {
73                                DragManager.showFeedback(DragManager.COPY);
74                        } else {
75                                DragManager.showFeedback(DragManager.NONE);
76                        }
77                }
78               
79                private function dragDropHandler(event:DragEvent):void {
80                        if (event.dragSource.hasFormat(DRAG_ITEMS)) {
81                                var items:Array = event.dragSource.dataForFormat(DRAG_ITEMS) as Array;
82                                for each (var item:ItemDescription in items) {
83                                        var comp:CMDComponent = new CMDComponent();
84                                        comp.componentId = item.id;
85                                        _component.cmdComponents.addItem(comp);
86                                        addComponent(comp);
87                                }
88                        }
89                }
90               
91                private function fireRemoveComponent(mouseEvent:MouseEvent):void {
92                        drawFocus(false);
93                        var event:Event = new Event(REMOVE_COMPONENT_EVENT);
94                        dispatchEvent(event);
95                }
96               
97                protected override function createChildren():void {
98                        super.createChildren();
99                        addRuler();
100                        createComponentEditBar();
101                       
102                        hideableForm = createHidableForm();                     
103                        showToggleBox.visibleContainer = hideableForm;
104                       
105                        addChild(hideableForm);                 
106                       
107                        var summary:ComponentSummary = new ComponentSummary();
108                        summary.component = _component;
109                        summary.visible = false;
110                        showToggleBox.invisibleContainer = summary;
111                       
112                        addChild(summary);
113                       
114                        var componentLink:FormItem = createComponentLink(_component);
115                        if (componentLink != null) {
116                                addCardinalityInput();
117                                hideableForm.addChild(componentLink);
118                        } else {
119                                addNameInput();
120                                addConceptLink();
121                                addCardinalityInput();
122                                handleCMDAttributeList();
123                                handleElements(_component.cmdElements);
124                                addElementAddButton();
125                                handleComponents(_component.cmdComponents); //recursion
126                                addComponentAddButton();
127                        }
128                }
129               
130                private function addComponentAddButton():void {
131                        addComponentLabel = new AddComponentLabelButton();
132                        addComponentLabel.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {
133                                var comp:CMDComponent = CMDComponent.createEmptyComponent();
134                                _component.cmdComponents.addItem(comp);
135                                addComponent(comp);
136                        });
137                        addComponentLabel.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void {
138                                drawFocus(true);
139                        });
140                        addComponentLabel.addEventListener(MouseEvent.MOUSE_OUT, function(event:MouseEvent):void {
141                                drawFocus(false);
142                        });
143                        hideableForm.addChild(addComponentLabel);
144                }
145               
146                private function addElementAddButton():void {
147                        addElementLabel = new AddElementLabelButton();
148                        addElementLabel.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {
149                                var element:CMDComponentElement = CMDComponentElement.createEmptyElement();
150                                _component.cmdElements.addItem(element);
151                                addElement(element);
152                               
153                        });
154                        addElementLabel.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void {
155                                drawFocus(true);
156                        });
157                        addElementLabel.addEventListener(MouseEvent.MOUSE_OUT, function(event:MouseEvent):void {
158                                drawFocus(false);
159                        });
160                        hideableForm.addChild(addElementLabel);
161                }
162               
163                private function addConceptLink():void {
164                        hideableForm.addChild(new ConceptLinkInput(LabelConstants.CONCEPTLINK, _component.conceptLink, function(val:String):void {
165                                _component.conceptLink = val;
166                        }));
167                }
168               
169                private function addRuler():void {
170                        var ruler:HRule = new HRule();
171                        ruler.percentWidth = 80;
172                        addChild(ruler);
173                }
174               
175                private function addNameInput():void {
176                        var nameInput:FormItemInputLine = new NameInputLine(_component.name, function(val:String):void {
177                                _component.name = val; 
178                        }, new ChildNameValidator(_parentComponent, component));
179                        hideableForm.addChild(nameInput);
180                }
181               
182                private function addCardinalityInput():void {
183                        hideableForm.addChild(new CardinalityInput(LabelConstants.CARDINALITY_MIN, _component.cardinalityMin, CardinalityInput.BOUNDED, function(val:String):void {
184                                _component.cardinalityMin = val;
185                        }));
186                        hideableForm.addChild(new CardinalityInput(LabelConstants.CARDINALITY_MAX, _component.cardinalityMax, CardinalityInput.UNBOUNDED,function(val:String):void {
187                                _component.cardinalityMax = val;
188                        }));
189                }
190               
191                private function createHidableForm():Form {
192                        var form:Form = new Form();
193                        form.styleName = StyleConstants.XMLBROWSER;
194                        form.setStyle("paddingTop","0");
195                        form.setStyle("paddingBottom","0");
196                        form.verticalScrollPolicy = "off";
197                        form.horizontalScrollPolicy = "off";
198                        return form;
199                }
200               
201                private function createComponentEditBar():void {
202                        var editBar:HBox = new HBox();
203                       
204                        showToggleBox = new ShowToggleBox();
205                        showToggleBox.visibleState = true;
206                        editBar.addChild(showToggleBox);
207                       
208                        editBar.addChild(createHeading());
209                        var removeButton:Label = new RemoveLabelButton();
210                        addFocusListeners(removeButton).addEventListener(MouseEvent.CLICK, fireRemoveComponent);
211                        editBar.addChild(removeButton);
212                       
213                        var downButton:Button = new DownIconButton();
214                        addFocusListeners(downButton).addEventListener(MouseEvent.CLICK, moveDownComponent);
215                        editBar.addChild(downButton);
216                       
217                        var upButton:Button = new UpIconButton();
218                        addFocusListeners(upButton).addEventListener(MouseEvent.CLICK, moveUpComponent);
219                        editBar.addChild(upButton);
220                        addChild(editBar);
221                }
222               
223                private function moveDownComponent(event:Event):void {
224                        var comp:CMDComponent = component;
225                        if (parentComponent.moveDownComponent(comp)) {
226                                var index:int = _parent.getChildIndex(this);
227                                if (index != _parent.numChildren - 1) {
228                                        _parent.removeChild(this);
229                                        _parent.addChildAt(this, index + 1);
230                                }
231                        }
232                }
233               
234                private function moveUpComponent(event:Event):void {
235                        var comp:CMDComponent = component;
236                        if (parentComponent.moveUpComponent(comp)) {
237                                var index:int = _parent.getChildIndex(this);
238                                if (index != 0) {
239                                        _parent.removeChild(this);
240                                        _parent.addChildAt(this, index - 1);
241                                }
242                        }
243                }
244               
245                private function addFocusListeners(comp:UIComponent):UIComponent {
246                        comp.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void {
247                                drawFocus(true);
248                        });
249                        comp.addEventListener(MouseEvent.MOUSE_OUT, function(event:MouseEvent):void {
250                                drawFocus(false);
251                        });
252                        return comp;
253                }
254               
255                private function createComponentLink(component:CMDComponent):FormItem {
256                        if (component.componentId != "" && component.componentId != null) {
257                                var result:FormItem = new FormItem();
258                                result.styleName = StyleConstants.XMLBROWSER_FIELD;
259                                result.label = LabelConstants.COMPONENT_ID;
260                                result.addChild(new ExpandingComponentLabel(component.componentId, false));
261                                return result;
262                        }
263                        return null;
264                }
265               
266                private function handleCMDAttributeList():void {
267                        hideableForm.addChild(new AttributeListEdit(_component, this));
268                }
269               
270                private function handleComponents(components:ArrayCollection):void {
271                        for each (var component:CMDComponent in components) {
272                                addComponent(component);
273                        }
274                }
275               
276                public function addComponent(component:CMDComponent):void {
277                        var comp:Container = new ComponentEdit(component, this, _component);
278                        comp.addEventListener(ComponentEdit.REMOVE_COMPONENT_EVENT, removeComponent);
279                        comp.setStyle("paddingLeft", "50");
280                        if (!addComponentLabel) {
281                                hideableForm.addChild(comp);
282                        } else {
283                                hideableForm.addChildAt(comp, hideableForm.getChildIndex(addComponentLabel));
284                        }
285                }
286               
287                private function removeComponent(event:Event):void {
288                        var comp:CMDComponent = ComponentEdit(event.currentTarget).component;
289                        _component.removeComponent(comp);
290                        hideableForm.removeChild(event.currentTarget as DisplayObject);
291                }
292               
293                private function handleElements(elements:ArrayCollection):void {
294                        for each (var element:CMDComponentElement in elements) {
295                                addElement(element);
296                        }
297                }
298               
299                public function addElement(element:CMDComponentElement):void {
300                        var elem:Container = new ElementEdit(element, this, _component);
301                        elem.setStyle("paddingLeft", "50");
302                        elem.addEventListener(ElementEdit.REMOVE_ELEMENT_EVENT, removeElement);
303                        if (!addElementLabel) {
304                                hideableForm.addChild(elem);
305                        } else {
306                                hideableForm.addChildAt(elem, hideableForm.getChildIndex(addElementLabel));
307                        }
308                }
309               
310                private function removeElement(event:Event):void {
311                        var elem:CMDComponentElement = ElementEdit(event.currentTarget).element;
312                        _component.removeElement(elem);
313                        hideableForm.removeChild(event.currentTarget as DisplayObject);
314                }
315               
316                private function createHeading():FormItem {
317                        var heading:FormItem = new FormItem();
318                        heading.label = LabelConstants.COMPONENT;
319                        heading.styleName = StyleConstants.XMLBROWSER_HEADER;
320                        return heading;
321                }
322        }
323}
Note: See TracBrowser for help on using the repository browser.