Repository: flex-asjs Updated Branches: refs/heads/develop 6983d7679 -> b82be6024
MDL Checkbox huge refactor to unify in only one class and use the model. In this way could be easy to implement SWF some day. Add some test for change event in MDLExample Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/b82be602 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/b82be602 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/b82be602 Branch: refs/heads/develop Commit: b82be6024642a9b7a58b6e256f045ceb274a9153 Parents: 6983d76 Author: Carlos Rovira <[email protected]> Authored: Tue Jan 24 23:58:13 2017 +0100 Committer: Carlos Rovira <[email protected]> Committed: Tue Jan 24 23:58:13 2017 +0100 ---------------------------------------------------------------------- .../MDLExample/src/main/flex/Toggles.mxml | 6 +- .../main/flex/org/apache/flex/mdl/CheckBox.as | 152 ++++++++++--------- 2 files changed, 89 insertions(+), 69 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b82be602/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml b/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml index b723abf..b67eeeb 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml @@ -25,6 +25,9 @@ limitations under the License. <fx:Script> <![CDATA[ import org.apache.flex.mdl.materialIcons.MaterialIconType; + + [Bindable] + public var counter:int = 0; ]]> </fx:Script> @@ -35,7 +38,8 @@ limitations under the License. <mdl:Grid> <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> - <mdl:CheckBox id="mdlchk" text="Disabled at start" className="mdlchk_example"/> + <mdl:CheckBox id="mdlchk" text="Disabled at start" className="mdlchk_example" change="counter++"/> + <js:Label id="chklb" text="Chebox throw 'change' event {counter} times"/> <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/> <mdl:RadioButton groupName="g1" text="Black" className="mdlrb_example"/> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b82be602/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as index 52aeef2..daf12bf 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as @@ -18,26 +18,30 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl { - COMPILE::SWF - { - import org.apache.flex.html.CheckBox; - } + import org.apache.flex.html.CheckBox; + import org.apache.flex.core.IToggleButtonModel; + COMPILE::JS { - import org.apache.flex.core.UIBase; import org.apache.flex.core.WrappedHTMLElement; } /** - * The CheckBox class provides a MDL UI-like appearance for - * a CheckBox. + * The CheckBox class provides a MDL UI-like appearance for a CheckBox. + * + * The Material Design Lite (MDL) checkbox component is an enhanced version + * of the standard HTML <input type="checkbox"> element. A checkbox consists + * of a small square and, typically, text that clearly communicates a binary + * condition that will be set or unset when the user clicks or touches it. + * Checkboxes typically, but not necessarily, appear in groups, and can be + * selected and deselected individually. The MDL checkbox component allows + * you to add display and click effects. * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ - COMPILE::SWF public class CheckBox extends org.apache.flex.html.CheckBox { /** @@ -51,49 +55,18 @@ package org.apache.flex.mdl public function CheckBox() { super(); - } - - protected var _ripple:Boolean = false; - /** - * A boolean flag to activate "mdl-js-ripple-effect" effect selector. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ - public function get ripple():Boolean - { - return _ripple; - } - public function set ripple(value:Boolean):void - { - _ripple = value; - } - } - - COMPILE::JS - public class CheckBox extends UIBase - { - /** - * Constructor. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ - public function CheckBox() - { - super(); className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; } - private var input:HTMLInputElement; - private var checkbox:HTMLSpanElement; - private var label:HTMLLabelElement; - private var textNode:Text; + COMPILE::JS + protected var input:HTMLInputElement; + + COMPILE::JS + protected var checkbox:HTMLSpanElement; + + COMPILE::JS + protected var label:HTMLLabelElement; /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement @@ -102,6 +75,7 @@ package org.apache.flex.mdl * @flexjsignorecoercion HTMLSpanElement * @flexjsignorecoercion Text */ + COMPILE::JS override protected function createElement():WrappedHTMLElement { typeNames = "mdl-checkbox mdl-js-checkbox"; @@ -118,9 +92,6 @@ package org.apache.flex.mdl checkbox.className = 'mdl-checkbox__label'; label.appendChild(checkbox); - textNode = document.createTextNode('') as Text; - checkbox.appendChild(textNode); - positioner = element; (input as WrappedHTMLElement).flexjs_wrapper = this; (checkbox as WrappedHTMLElement).flexjs_wrapper = this; @@ -138,7 +109,7 @@ package org.apache.flex.mdl * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function get ripple():Boolean { @@ -155,24 +126,69 @@ package org.apache.flex.mdl } } - public function get text():String - { - return textNode.nodeValue; - } - - public function set text(value:String):void - { - textNode.nodeValue = value; - } - - public function get selected():Boolean - { - return input.checked; - } + /** + * The text label for the CheckBox. + * + * @flexjsignorecoercion Text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + override public function get text():String + { + return IToggleButtonModel(model).text; + } + + /** + * @private + */ + override public function set text(value:String):void + { + IToggleButtonModel(model).text = value; + + COMPILE::JS + { + if(textNode == null) + { + textNode = document.createTextNode('') as Text; + checkbox.appendChild(textNode); + } + + textNode.nodeValue = value; + } + } + + COMPILE::JS + protected var textNode:Text; + + [Bindable("change")] + /** + * <code>true</code> if the check mark is displayed. + * + * @default false + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + override public function get selected():Boolean + { + return IToggleButtonModel(model).selected; + } - public function set selected(value:Boolean):void + /** + * @private + */ + override public function set selected(value:Boolean):void { - input.checked = value; + IToggleButtonModel(model).selected = value; + + COMPILE::JS + { + input.checked = value; + } } }
