Repository: flex-asjs Updated Branches: refs/heads/develop 3f4d5edce -> 0b0ec4488
Updated ComboBox by separating its model/view/controller more cleanly on the JS side. Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/33fd39ec Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/33fd39ec Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/33fd39ec Branch: refs/heads/develop Commit: 33fd39ec7a3f462a577c5414c938c27a1e85ea54 Parents: 751aa39 Author: Peter Ent <[email protected]> Authored: Tue Nov 29 15:27:14 2016 -0500 Committer: Peter Ent <[email protected]> Committed: Tue Nov 29 15:27:14 2016 -0500 ---------------------------------------------------------------------- .../projects/HTML/src/main/flex/HTMLClasses.as | 4 +- .../main/flex/org/apache/flex/html/ComboBox.as | 147 ---------- .../org/apache/flex/html/beads/ComboBoxView.as | 279 +++++++++++++++++-- .../org/apache/flex/html/beads/IComboBoxView.as | 12 +- .../beads/controllers/ComboBoxController.as | 83 ++++++ .../HTML/src/main/resources/defaults.css | 4 +- 6 files changed, 349 insertions(+), 180 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33fd39ec/frameworks/projects/HTML/src/main/flex/HTMLClasses.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/HTMLClasses.as b/frameworks/projects/HTML/src/main/flex/HTMLClasses.as index cf8e2d2..7332cda 100644 --- a/frameworks/projects/HTML/src/main/flex/HTMLClasses.as +++ b/frameworks/projects/HTML/src/main/flex/HTMLClasses.as @@ -41,8 +41,8 @@ internal class HTMLClasses COMPILE::SWF { import org.apache.flex.html.beads.CheckBoxView; CheckBoxView; - import org.apache.flex.html.beads.ComboBoxView; ComboBoxView; } + import org.apache.flex.html.beads.ComboBoxView; ComboBoxView; import org.apache.flex.html.beads.ContainerView; ContainerView; COMPILE::SWF { @@ -117,10 +117,10 @@ internal class HTMLClasses COMPILE::SWF { import org.apache.flex.html.beads.controllers.AlertController; AlertController; - import org.apache.flex.html.beads.controllers.ComboBoxController; ComboBoxController; import org.apache.flex.html.beads.controllers.DropDownListController; DropDownListController; import org.apache.flex.html.beads.controllers.EditableTextKeyboardController; EditableTextKeyboardController; } + import org.apache.flex.html.beads.controllers.ComboBoxController; ComboBoxController; import org.apache.flex.html.beads.controllers.AccordionItemRendererMouseController; AccordionItemRendererMouseController; import org.apache.flex.html.beads.controllers.ItemRendererMouseController; ItemRendererMouseController; import org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController; ListSingleSelectionMouseController; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33fd39ec/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/ComboBox.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/ComboBox.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/ComboBox.as index 6932972..628154b 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/ComboBox.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/ComboBox.as @@ -117,11 +117,6 @@ package org.apache.flex.html IComboBoxModel(model).selectedItem = value; } - COMPILE::JS { - private var input: WrappedHTMLElement; - private var button: WrappedHTMLElement; - } - /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement */ @@ -130,152 +125,10 @@ package org.apache.flex.html { element = document.createElement('div') as WrappedHTMLElement; - input = document.createElement('input') as WrappedHTMLElement; - input.style.position = 'absolute'; - input.style.width = '80px'; - element.appendChild(input); - - button = document.createElement('div') as WrappedHTMLElement; - button.style.position = 'absolute'; - button.style.top = '0px'; - button.style.right = '0px'; - button.style.background = '#bbb'; - button.style.width = '16px'; - button.style.height = '20px'; - button.style.margin = '0'; - button.style.border = 'solid #609 1px'; - goog.events.listen(button, 'click', buttonClicked); - element.appendChild(button); - positioner = element; positioner.style.position = 'relative'; - // add a click handler so that a click outside of the combo box can - // dismiss the pop-up should it be visible. - goog.events.listen(document, 'click', - dismissPopup); - - input.flexjs_wrapper = this; - return element; - } - - COMPILE::JS - private var popup:HTMLElement; - - /** - * @param event The event. - * @flexjsignorecoercion HTMLSelectElement - * @flexjsignorecoercion HTMLInputElement - */ - COMPILE::JS - private function selectChanged(event:Event):void - { - var select:HTMLSelectElement; - - select = event.currentTarget as HTMLSelectElement; - - selectedItem = select.options[select.selectedIndex].value; - (input as HTMLInputElement).value = selectedItem.toString(); - - popup.parentNode.removeChild(popup); - popup = null; - - dispatchEvent(event); } - - - /** - * @param event The event. - */ - COMPILE::JS - private function dismissPopup(event:Event):void - { - // remove the popup if it already exists - if (popup) { - popup.parentNode.removeChild(popup); - popup = null; - } - } - - - /** - * @export - * @param {Object} event The event. - * @flexjsignorecoercion HTMLInputElement - * @flexjsignorecoercion HTMLElement - * @flexjsignorecoercion HTMLSelectElement - * @flexjsignorecoercion HTMLOptionElement - * @flexjsignorecoercion Array - */ - COMPILE::JS - private function buttonClicked(event:Event):void - { - var dp:Array; - var i:int; - var input:HTMLInputElement; - var left:Number; - var n:int; - var opt:HTMLOptionElement; - var pn:HTMLElement; - var popup:HTMLElement; - var select:HTMLSelectElement; - var si:int; - var top:Number; - var width:Number; - - event.stopPropagation(); - - if (popup) { - dismissPopup(null); - - return; - } - - input = element.childNodes.item(0) as HTMLInputElement; - - pn = element; - top = pn.offsetTop + input.offsetHeight; - left = pn.offsetLeft; - width = pn.offsetWidth; - - popup = document.createElement('div') as HTMLElement; - popup.className = 'popup'; - popup.id = 'test'; - popup.style.position = 'absolute'; - popup.style.top = top.toString() + 'px'; - popup.style.left = left.toString() + 'px'; - popup.style.width = width.toString() + 'px'; - popup.style.margin = '0px auto'; - popup.style.padding = '0px'; - popup.style.zIndex = '10000'; - - select = document.createElement('select') as HTMLSelectElement; - select.style.width = width.toString() + 'px'; - goog.events.listen(select, 'change', selectChanged); - - dp = dataProvider as Array; - n = dp.length; - for (i = 0; i < n; i++) { - opt = document.createElement('option') as HTMLOptionElement; - opt.text = dp[i]; - select.add(opt, null); - } - - select.size = n; - - si = selectedIndex; - if (si < 0) { - select.value = null; - } else { - select.value = dp[si]; - } - - this.popup = popup; - - popup.appendChild(select); - document.body.appendChild(popup); - } - } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33fd39ec/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as index 1bb67e1..a3b70be 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as @@ -18,9 +18,11 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.html.beads { - import flash.display.DisplayObject; - import flash.display.DisplayObjectContainer; - import flash.display.Sprite; + COMPILE::SWF { + import flash.display.DisplayObject; + import flash.display.DisplayObjectContainer; + import flash.display.Sprite; + } import org.apache.flex.core.BeadViewBase; import org.apache.flex.core.ElementWrapper; @@ -38,6 +40,13 @@ package org.apache.flex.html.beads import org.apache.flex.html.Button; import org.apache.flex.html.TextInput; import org.apache.flex.utils.UIUtils; + import org.apache.flex.core.IComboBoxModel; + + COMPILE::JS + { + import goog.events; + import org.apache.flex.core.WrappedHTMLElement; + } /** * The ComboBoxView class creates the visual elements of the org.apache.flex.html.ComboBox @@ -49,26 +58,68 @@ package org.apache.flex.html.beads * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ + COMPILE::JS public class ComboBoxView extends BeadViewBase implements IBeadView, IComboBoxView { + public function ComboBoxView() + { + + } + + private var input: WrappedHTMLElement; + private var button: WrappedHTMLElement; + private var _popup:HTMLElement; + + public function get strand():IStrand + { + return _strand; + } + /** - * constructor. + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + override public function set strand(value:IStrand):void + { + super.strand = value; + + var element:WrappedHTMLElement = (_strand as UIBase).element; + + input = document.createElement('input') as WrappedHTMLElement; + input.style.position = 'absolute'; + input.style.width = '80px'; + element.appendChild(input); + + button = document.createElement('div') as WrappedHTMLElement; + button.style.position = 'absolute'; + button.style.top = '0px'; + button.style.right = '0px'; + button.style.background = '#bbb'; + button.style.width = '16px'; + button.style.height = '20px'; + button.style.margin = '0'; + button.style.border = 'solid #609 1px'; + element.appendChild(button); + + input.flexjs_wrapper = this; + } + + /** + * The TextInput component of the ComboBox. + * + * @copy org.apache.flex.html.beads.IComboBoxView#text * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public function ComboBoxView() + public function get textInputField():Object { + return input; } - private var textInput:TextInput; - private var button:Button; - private var selectionModel:IComboBoxModel; - /** - * The value of the TextInput component of the ComboBox. + * The Button component of the ComboBox. * * @copy org.apache.flex.html.beads.IComboBoxView#text * @@ -77,35 +128,189 @@ package org.apache.flex.html.beads * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public function get text():String + public function get popupButton():Object { - return textInput.text; + return button; } - public function set text(value:String):void + + /** + * The pop-up list component of the ComboBox. + * + * @copy org.apache.flex.html.beads.IComboBoxView#text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get popUp():Object { - textInput.text = value; + return _popup; } /** - * The HTML value of the TextInput component of the ComboBox. + * Returns whether or not the pop-up is visible. * - * @copy org.apache.flex.html.beads.IComboBoxView#html + * @copy org.apache.flex.html.beads.IComboBoxView#text * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public function get html():String + public function get popUpVisible():Boolean + { + return _popup != null; + } + public function set popUpVisible(value:Boolean):void + { + if (value && _popup == null) { + showPopup(); + } + else { + dismissPopup(); + } + } + + /** + * @param event The event. + * @flexjsignorecoercion HTMLSelectElement + * @flexjsignorecoercion HTMLInputElement + */ + private function selectChanged(event:Event):void { - return textInput.html; + var select:HTMLSelectElement; + + select = event.currentTarget as HTMLSelectElement; + + var model:IComboBoxModel = (_strand as UIBase).model as IComboBoxModel; + model.selectedItem = select.options[select.selectedIndex].value; + (input as HTMLInputElement).value = model.selectedItem.toString(); + + _popup.parentNode.removeChild(_popup); + _popup = null; + + dispatchEvent(event); } - public function set html(value:String):void + + /** + */ + private function dismissPopup():void { - textInput.html = value; + // remove the popup if it already exists + if (_popup) { + _popup.parentNode.removeChild(_popup); + _popup = null; + } } /** + * @export + * @param {Object} event The event. + * @flexjsignorecoercion HTMLInputElement + * @flexjsignorecoercion HTMLElement + * @flexjsignorecoercion HTMLSelectElement + * @flexjsignorecoercion HTMLOptionElement + * @flexjsignorecoercion Array + */ + private function showPopup():void + { + var dp:Array; + var i:int; + var input:HTMLInputElement; + var left:Number; + var n:int; + var opt:HTMLOptionElement; + var pn:HTMLElement; + var select:HTMLSelectElement; + var si:int; + var top:Number; + var width:Number; + + if (_popup) { + dismissPopup(); + + return; + } + + var element:WrappedHTMLElement = (_strand as UIBase).element; + + input = element.childNodes.item(0) as HTMLInputElement; + + pn = element; + top = pn.offsetTop + input.offsetHeight; + left = pn.offsetLeft; + width = pn.offsetWidth; + + _popup = document.createElement('div') as HTMLElement; + _popup.className = 'popup'; + _popup.id = 'test'; + _popup.style.position = 'absolute'; + _popup.style.top = top.toString() + 'px'; + _popup.style.left = left.toString() + 'px'; + _popup.style.width = width.toString() + 'px'; + _popup.style.margin = '0px auto'; + _popup.style.padding = '0px'; + _popup.style.zIndex = '10000'; + + select = document.createElement('select') as HTMLSelectElement; + select.style.width = width.toString() + 'px'; + goog.events.listen(select, 'change', selectChanged); + + var model:IComboBoxModel = (_strand as UIBase).model as IComboBoxModel; + + dp = model.dataProvider as Array; + n = dp.length; + for (i = 0; i < n; i++) { + opt = document.createElement('option') as HTMLOptionElement; + opt.text = dp[i]; + select.add(opt, null); + } + + select.size = n; + + si = model.selectedIndex; + if (si < 0) { + select.value = null; + } else { + select.value = dp[si]; + } + + _popup.appendChild(select); + document.body.appendChild(_popup); + } + } + + /** + * The ComboBoxView class creates the visual elements of the org.apache.flex.html.ComboBox + * component. The job of the view bead is to put together the parts of the ComboBox such as the TextInput + * control and org.apache.flex.html.Button to trigger the pop-up. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + COMPILE::SWF + public class ComboBoxView extends BeadViewBase implements IBeadView, IComboBoxView + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function ComboBoxView() + { + } + + private var textInput:TextInput; + private var button:Button; + private var selectionModel:IComboBoxModel; + + /** * @copy org.apache.flex.core.IBead#strand * * @langversion 3.0 @@ -176,6 +381,36 @@ package org.apache.flex.html.beads sprite.graphics.lineTo(4,4); sprite.graphics.endFill(); } + + /** + * The TextInput component of the ComboBox. + * + * @copy org.apache.flex.html.beads.IComboBoxView#text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get textInputField():Object + { + return textInput; + } + + /** + * The Button component of the ComboBox. + * + * @copy org.apache.flex.html.beads.IComboBoxView#text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get popupButton():Object + { + return button; + } private var _popUp:IStrand; @@ -187,7 +422,7 @@ package org.apache.flex.html.beads * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public function get popUp():IStrand + public function get popUp():Object { if (!_popUp) { @@ -240,7 +475,7 @@ package org.apache.flex.html.beads */ private function selectionChangeHandler(event:Event):void { - text = selectionModel.selectedItem.toString(); + textInput.text = selectionModel.selectedItem.toString(); } /** http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33fd39ec/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/IComboBoxView.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/IComboBoxView.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/IComboBoxView.as index 650d300..e58d868 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/IComboBoxView.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/IComboBoxView.as @@ -33,26 +33,24 @@ package org.apache.flex.html.beads public interface IComboBoxView extends IBeadView { /** - * The string appearing in the input area for the ComboBox. + * The sub-component used for the input area of the ComboBox. * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - function get text():String; - function set text(value:String):void; + function get textInputField():Object; /** - * The HTML string appearing in the input area for the ComboBox. + * The sub-component used for the button to activate the pop-up. * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - function get html():String; - function set html(value:String):void; + function get popupButton():Object; /** * The component housing the selection list. @@ -62,7 +60,7 @@ package org.apache.flex.html.beads * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - function get popUp():IStrand; + function get popUp():Object; /** * Determines whether or not the pop-up with the selection list is visible or not. http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33fd39ec/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as index 9e91772..c9a9f1c 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as @@ -18,7 +18,9 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.html.beads.controllers { + COMPILE::SWF { import flash.display.DisplayObject; + } import org.apache.flex.core.IBeadController; import org.apache.flex.core.ISelectionModel; @@ -28,6 +30,86 @@ package org.apache.flex.html.beads.controllers import org.apache.flex.events.IEventDispatcher; import org.apache.flex.events.MouseEvent; import org.apache.flex.html.beads.IComboBoxView; + + COMPILE::JS { + import goog.events; + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The ComboBoxController class bead handles mouse events on the elements of + * the org.apache.flex.html.ComboBox. This includes selecting the + * button to display the selection list pop-up as well as selecting an item from the + * pop-up list. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + COMPILE::JS + public class ComboBoxController implements IBeadController + { + private var _strand:IStrand; + + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function set strand(value:IStrand):void + { + _strand = value; + + var viewBead:IComboBoxView = _strand.getBeadByType(IComboBoxView) as IComboBoxView; + if (viewBead) { + finishSetup(null); + } else { + IEventDispatcher(_strand).addEventListener("viewChanged", finishSetup); + } + } + + /** + * @private + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + private function finishSetup(event:Event):void + { + var viewBead:IComboBoxView = _strand.getBeadByType(IComboBoxView) as IComboBoxView; + var button:WrappedHTMLElement = viewBead.popupButton as WrappedHTMLElement; + goog.events.listen(button, 'click', showPopup); + + // add a click handler so that a click outside of the combo box can + // dismiss the pop-up should it be visible. + goog.events.listen(document, 'click', + dismissPopup); + } + + /** + * @private + */ + private function dismissPopup(event:Event):void + { + var host:IUIBase = IUIBase(_strand); + var viewBead:IComboBoxView = _strand.getBeadByType(IComboBoxView) as IComboBoxView; + viewBead.popUpVisible = false; + } + + /** + * @private + */ + private function showPopup(event:Event):void + { + event.stopPropagation(); + + var host:IUIBase = IUIBase(_strand); + var viewBead:IComboBoxView = _strand.getBeadByType(IComboBoxView) as IComboBoxView; + viewBead.popUpVisible = true; + } + } /** * The ComboBoxController class bead handles mouse events on the elements of @@ -40,6 +122,7 @@ package org.apache.flex.html.beads.controllers * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ + COMPILE::SWF public class ComboBoxController implements IBeadController { /** http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/33fd39ec/frameworks/projects/HTML/src/main/resources/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/resources/defaults.css b/frameworks/projects/HTML/src/main/resources/defaults.css index 29e75cc..02d2cda 100644 --- a/frameworks/projects/HTML/src/main/resources/defaults.css +++ b/frameworks/projects/HTML/src/main/resources/defaults.css @@ -86,6 +86,8 @@ ButtonBarButtonItemRenderer ComboBox { IBeadModel: ClassReference("org.apache.flex.html.beads.models.ComboBoxModel"); + IBeadView: ClassReference("org.apache.flex.html.beads.ComboBoxView"); + IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ComboBoxController"); } Container @@ -479,8 +481,6 @@ CloseButton ComboBox { - IBeadView: ClassReference("org.apache.flex.html.beads.ComboBoxView"); - IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ComboBoxController"); IPopUp: ClassReference("org.apache.flex.html.supportClasses.DropDownListList"); IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData"); IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
