Separated the icon parts of CheckBox and RadioButton so they can be styled more easily.
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/b86f09bd Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/b86f09bd Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/b86f09bd Branch: refs/heads/spark Commit: b86f09bda097081226a533bb0de8a8aac49c3a72 Parents: 4af86f5 Author: Peter Ent <[email protected]> Authored: Tue Jun 14 11:19:50 2016 -0400 Committer: Peter Ent <[email protected]> Committed: Tue Jun 14 11:19:50 2016 -0400 ---------------------------------------------------------------------- .../main/flex/org/apache/flex/html/CheckBox.as | 85 +++++++------- .../flex/org/apache/flex/html/RadioButton.as | 115 ++++++++++--------- .../flex/org/apache/flex/html/TextButton.as | 44 ++++--- .../flex/html/accessories/CheckBoxIcon.as | 92 +++++++++++++++ .../flex/html/accessories/RadioButtonIcon.as | 111 ++++++++++++++++++ .../HTML/src/main/resources/basic-manifest.xml | 2 + 6 files changed, 339 insertions(+), 110 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as index bb1f6bd..d65cd5e 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as @@ -20,31 +20,32 @@ package org.apache.flex.html { COMPILE::SWF { - import flash.events.MouseEvent; + import flash.events.MouseEvent; } - + import org.apache.flex.core.IStrand; import org.apache.flex.core.IToggleButtonModel; import org.apache.flex.core.IUIBase; COMPILE::SWF { - import org.apache.flex.core.UIButtonBase; + import org.apache.flex.core.UIButtonBase; } COMPILE::JS { - import org.apache.flex.core.UIBase; - import org.apache.flex.core.WrappedHTMLElement; + import org.apache.flex.core.UIBase; + import org.apache.flex.core.WrappedHTMLElement; + import org.apache.flex.html.accessories.CheckBoxIcon; } import org.apache.flex.events.Event; import org.apache.flex.events.MouseEvent; - + //-------------------------------------- // Events //-------------------------------------- - + /** * Dispatched when the user checks or un-checks the CheckBox. - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -55,7 +56,7 @@ package org.apache.flex.html /** * The CheckBox class implements the common user interface * control. The CheckBox includes its text label. - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -66,7 +67,7 @@ package org.apache.flex.html { /** * Constructor. - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -75,13 +76,13 @@ package org.apache.flex.html public function CheckBox() { super(); - + addEventListener(org.apache.flex.events.MouseEvent.CLICK, internalMouseHandler); } - + /** * The text label for the CheckBox. - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -91,7 +92,7 @@ package org.apache.flex.html { return IToggleButtonModel(model).text; } - + /** * @private */ @@ -99,11 +100,11 @@ package org.apache.flex.html { IToggleButtonModel(model).text = value; } - + [Bindable("change")] /** * <code>true</code> if the check mark is displayed. - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -113,7 +114,7 @@ package org.apache.flex.html { return IToggleButtonModel(model).selected; } - + /** * @private */ @@ -121,61 +122,65 @@ package org.apache.flex.html { IToggleButtonModel(model).selected = value; } - + private function internalMouseHandler(event:org.apache.flex.events.MouseEvent) : void { selected = !selected; dispatchEvent(new Event("change")); } } - + COMPILE::JS public class CheckBox extends UIBase { + private var _label:WrappedHTMLElement; + private var _icon:CheckBoxIcon; + + private static var _checkNumber:Number = 0; + /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement */ override protected function createElement():WrappedHTMLElement { var cb:HTMLInputElement; - + element = document.createElement('label') as WrappedHTMLElement; - - cb = document.createElement('input') as HTMLInputElement; - cb.type = 'checkbox'; - element.appendChild(cb); + _label = element; + _icon = new CheckBoxIcon(); + element.appendChild(_icon.element); + element.appendChild(document.createTextNode('')); - - element.className = 'CheckBox'; - typeNames = 'CheckBox'; - + positioner = element; positioner.style.position = 'relative'; - (cb as WrappedHTMLElement).flexjs_wrapper = this; element.flexjs_wrapper = this; - + + className = 'CheckBox'; + typeNames = 'CheckBox, CheckBoxIcon'; + return element; - } - + } + public function get text():String { - return element.childNodes.item(1).nodeValue; + return _label.childNodes.item(1).nodeValue; } - + public function set text(value:String):void { - element.childNodes.item(1).nodeValue = value; + _label.childNodes.item(1).nodeValue = value; } - + public function get selected():Boolean { - return (element.childNodes.item(0) as HTMLInputElement).checked; + return (_icon.element as HTMLInputElement).checked; } - + public function set selected(value:Boolean):void { - (element.childNodes.item(0) as HTMLInputElement).checked = value; + (_icon.element as HTMLInputElement).checked = value; } - } + } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as index 66f4e42..fc65985 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as @@ -22,34 +22,35 @@ package org.apache.flex.html { import flash.display.DisplayObject; import flash.events.MouseEvent; - import flash.utils.Dictionary; + import flash.utils.Dictionary; } - + import org.apache.flex.core.IStrand; import org.apache.flex.core.IValueToggleButtonModel; COMPILE::SWF { - import org.apache.flex.core.UIButtonBase; + import org.apache.flex.core.UIButtonBase; } COMPILE::JS { import org.apache.flex.core.UIBase; import org.apache.flex.core.WrappedHTMLElement; + import org.apache.flex.html.accessories.RadioButtonIcon; } import org.apache.flex.events.Event; import org.apache.flex.events.MouseEvent; import org.apache.flex.core.IUIBase; - + [Event(name="change", type="org.apache.flex.events.Event")] /** * The RadioButton class is a component that displays a selectable Button. RadioButtons * are typically used in groups, identified by the groupName property. RadioButton use * the following beads: - * + * * org.apache.flex.core.IBeadModel: the data model, which includes the groupName. * org.apache.flex.core.IBeadView: the bead that constructs the visual parts of the RadioButton.. - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -69,14 +70,14 @@ package org.apache.flex.html public function RadioButton(upState:DisplayObject=null, overState:DisplayObject=null, downState:DisplayObject=null, hitTestState:DisplayObject=null) { super(upState, overState, downState, hitTestState); - + addEventListener(org.apache.flex.events.MouseEvent.CLICK, internalMouseHandler); } - + protected static var dict:Dictionary = new Dictionary(true); - + private var _groupName:String; - + /** * The name of the group. Only one RadioButton in a group is selected. * @@ -93,7 +94,7 @@ package org.apache.flex.html { IValueToggleButtonModel(model).groupName = value; } - + /** * The string used as a label for the RadioButton. * @@ -110,7 +111,7 @@ package org.apache.flex.html { IValueToggleButtonModel(model).text = value; } - + /** * Whether or not the RadioButton instance is selected. Setting this property * causes the currently selected RadioButton in the same group to lose the @@ -128,7 +129,7 @@ package org.apache.flex.html public function set selected(selValue:Boolean):void { IValueToggleButtonModel(model).selected = selValue; - + // if this button is being selected, its value should become // its group's selectedValue if( selValue ) { @@ -141,7 +142,7 @@ package org.apache.flex.html } } } - + /** * The value associated with the RadioButton. For example, RadioButtons with labels, * "Red", "Green", and "Blue" might have the values 0, 1, and 2 respectively. @@ -159,7 +160,7 @@ package org.apache.flex.html { IValueToggleButtonModel(model).value = newValue; } - + /** * The group's currently selected value. * @@ -168,17 +169,17 @@ package org.apache.flex.html * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public function get selectedValue():Object + public function get selectedValue():Object { return IValueToggleButtonModel(model).selectedValue; } - public function set selectedValue(newValue:Object):void + public function set selectedValue(newValue:Object):void { // a radio button is really selected when its value matches that of the group's value IValueToggleButtonModel(model).selected = (newValue == value); IValueToggleButtonModel(model).selectedValue = newValue; } - + /** * @private */ @@ -189,9 +190,9 @@ package org.apache.flex.html // if this instance is selected, set the local selectedValue to // this instance's value if( selected ) selectedValue = value; - + else { - + // make sure this button's selectedValue is set from its group's selectedValue // to keep it in sync with the rest of the buttons in its group. for each(var rb:RadioButton in dict) @@ -203,10 +204,10 @@ package org.apache.flex.html } } } - + dict[this] = this; } - + /** * @private */ @@ -219,15 +220,17 @@ package org.apache.flex.html } } } - + COMPILE::JS public class RadioButton extends UIBase { public static var radioCounter:int = 0; - + private var input:HTMLInputElement; private var labelFor:HTMLLabelElement; private var textNode:Text; + private var icon:RadioButtonIcon; + /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement * @flexjsignorecoercion HTMLInputElement @@ -235,47 +238,47 @@ package org.apache.flex.html * @flexjsignorecoercion Text */ override protected function createElement():WrappedHTMLElement - { - input = document.createElement('input') as HTMLInputElement; - input.type = 'radio'; - input.id = '_radio_' + RadioButton.radioCounter++; - + { + icon = new RadioButtonIcon() + icon.id = '_radio_' + RadioButton.radioCounter++; + + textNode = document.createTextNode('radio button') as Text; - + labelFor = document.createElement('label') as HTMLLabelElement; - labelFor.appendChild(input); + labelFor.appendChild(icon.element); labelFor.appendChild(textNode); - + element = labelFor as WrappedHTMLElement; - element.className = 'RadioButton'; - typeNames = 'RadioButton'; - + positioner = element; positioner.style.position = 'relative'; - - (input as WrappedHTMLElement).flexjs_wrapper = this; + (element as WrappedHTMLElement).flexjs_wrapper = this; (textNode as WrappedHTMLElement).flexjs_wrapper = this; - + + className = 'RadioButton'; + typeNames = 'RadioButton, RadioButtonIcon'; + return element; - } - - override public function set id(value:String):void + } + + override public function set id(value:String):void { super.id = value; labelFor.id = value; - input.id = value; + icon.element.id = value; } - + public function get groupName():String { - return input.name as String; + return (icon.element as HTMLInputElement).name as String; } public function set groupName(value:String):void { - input.name = value; + (icon.element as HTMLInputElement).name = value; } - + public function get text():String { return textNode.nodeValue as String; @@ -284,17 +287,17 @@ package org.apache.flex.html { textNode.nodeValue = value; } - + /** @export */ public function get selected():Boolean { - return input.checked; + return (icon.element as HTMLInputElement).checked; } public function set selected(value:Boolean):void { - input.checked = value; + (icon.element as HTMLInputElement).checked = value; } - + public function get value():Object { return input.value; @@ -303,18 +306,18 @@ package org.apache.flex.html { input.value = v as String; } - + public function get selectedValue():Object { var buttons:NodeList; var groupName:String; var i:int; var n:int; - + groupName = input.name as String; buttons = document.getElementsByName(groupName); n = buttons.length; - + for (i = 0; i < n; i++) { if (buttons[i].checked) { return buttons[i].value; @@ -322,7 +325,7 @@ package org.apache.flex.html } return null; } - + /** * @flexjsignorecoercion Array */ @@ -332,7 +335,7 @@ package org.apache.flex.html var groupName:String; var i:int; var n:int; - + groupName = input.name as String; buttons = document.getElementsByName(groupName); n = buttons.length; @@ -343,6 +346,6 @@ package org.apache.flex.html } } } - } + } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as index 7d90ed1..f8c8c8f 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as @@ -19,21 +19,25 @@ package org.apache.flex.html { import org.apache.flex.core.ITextModel; - + + COMPILE::JS { + import org.apache.flex.core.WrappedHTMLElement; + } + /** * The TextButton class implements a basic button that * displays text. - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion FlexJS 0.0 - */ + */ public class TextButton extends Button { /** * Constructor. - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -43,10 +47,10 @@ package org.apache.flex.html { super(); } - + /** * @copy org.apache.flex.html.Label#text - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -55,7 +59,7 @@ package org.apache.flex.html public function get text():String { COMPILE::SWF - { + { return ITextModel(model).text; } COMPILE::JS @@ -71,18 +75,18 @@ package org.apache.flex.html { COMPILE::SWF { - ITextModel(model).text = value; + ITextModel(model).text = value; } COMPILE::JS { this.element.innerHTML = value; - this.dispatchEvent('textChange'); + this.dispatchEvent('textChange'); } } - + /** * @copy org.apache.flex.html.Label#html - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -92,7 +96,7 @@ package org.apache.flex.html { COMPILE::SWF { - return ITextModel(model).html; + return ITextModel(model).html; } COMPILE::JS { @@ -107,14 +111,26 @@ package org.apache.flex.html { COMPILE::SWF { - ITextModel(model).html = value; + ITextModel(model).html = value; } COMPILE::JS { this.element.innerHTML = value; - this.dispatchEvent('textChange'); + this.dispatchEvent('textChange'); } } + /** + * @private + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + var element:WrappedHTMLElement = super.createElement(); + typeNames = "TextButton"; + return element; + } + } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/CheckBoxIcon.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/CheckBoxIcon.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/CheckBoxIcon.as new file mode 100644 index 0000000..627e70d --- /dev/null +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/CheckBoxIcon.as @@ -0,0 +1,92 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.html.accessories +{ + COMPILE::JS { + import org.apache.flex.core.WrappedHTMLElement; + } + + public class CheckBoxIcon + { + public function CheckBoxIcon() + { + COMPILE::JS { + createElement(); + } + + className = 'CheckBoxIcon'; + } + + COMPILE::JS { + public var element:WrappedHTMLElement; + public var positioner:WrappedHTMLElement; + } + + private var _className:String; + + public function get className():String + { + return _className; + } + public function set className(value:String):void + { + _className = value; + + COMPILE::JS { + element.className = value; + } + } + + private var _id:String; + + public function get id():String + { + return _id; + } + public function set id(value:String):void + { + _id = value; + + COMPILE::JS { + element.id = value; + } + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion HTMLInputElement + * @flexjsignorecoercion Text + */ + COMPILE::JS + protected function createElement():WrappedHTMLElement + { + var input:HTMLInputElement = document.createElement('input') as HTMLInputElement; + input.type = 'checkbox'; + + element = input as WrappedHTMLElement; + + positioner = element; + positioner.style.position = 'relative'; + + (element as WrappedHTMLElement).flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/RadioButtonIcon.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/RadioButtonIcon.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/RadioButtonIcon.as new file mode 100644 index 0000000..cbcf427 --- /dev/null +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/RadioButtonIcon.as @@ -0,0 +1,111 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.html.accessories +{ + COMPILE::JS { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The RadioButton class is a component that displays a selectable Button. RadioButtons + * are typically used in groups, identified by the groupName property. RadioButton use + * the following beads: + * + * org.apache.flex.core.IBeadModel: the data model, which includes the groupName. + * org.apache.flex.core.IBeadView: the bead that constructs the visual parts of the RadioButton.. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class RadioButtonIcon + { + public function RadioButtonIcon() + { + COMPILE::JS { + createElement(); + } + + className = 'RadioButtonIcon'; + } + + COMPILE::JS { + public var element:WrappedHTMLElement; + public var positioner:WrappedHTMLElement; + } + + private var _className:String; + + /** + * @private + */ + public function get className():String + { + return _className; + } + public function set className(value:String):void + { + _className = value; + + COMPILE::JS { + element.className = value; + } + } + + private var _id:String; + + /** + * @private + */ + public function get id():String + { + return _id; + } + public function set id(value:String):void + { + _id = value; + + COMPILE::JS { + element.id = value; + } + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion HTMLInputElement + * @flexjsignorecoercion Text + */ + COMPILE::JS + protected function createElement():WrappedHTMLElement + { + var input:HTMLInputElement = document.createElement('input') as HTMLInputElement; + input.type = 'radio'; + + element = input as WrappedHTMLElement; + + positioner = element; + positioner.style.position = 'relative'; + + (element as WrappedHTMLElement).flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/resources/basic-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/resources/basic-manifest.xml b/frameworks/projects/HTML/src/main/resources/basic-manifest.xml index 8904c6e..5fd72c0 100644 --- a/frameworks/projects/HTML/src/main/resources/basic-manifest.xml +++ b/frameworks/projects/HTML/src/main/resources/basic-manifest.xml @@ -37,7 +37,9 @@ <component id="List" class="org.apache.flex.html.List"/> <component id="SimpleList" class="org.apache.flex.html.SimpleList"/> <component id="CheckBox" class="org.apache.flex.html.CheckBox"/> + <component id="CheckBoxIcon" class="org.apache.flex.html.accessories.CheckBoxIcon" /> <component id="RadioButton" class="org.apache.flex.html.RadioButton"/> + <component id="RadioButtonIcon" class="org.apache.flex.html.accessories.RadioButtonIcon"/> <component id="ComboBox" class="org.apache.flex.html.ComboBox"/> <component id="Container" class="org.apache.flex.html.Container"/> <component id="HContainer" class="org.apache.flex.html.HContainer"/>
