Repository: flex-asjs Updated Branches: refs/heads/develop ee803d5b2 -> 40b604b0e
IconToggle refactor to support âclickâ and âchangeâ events. More Icons Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/40b604b0 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/40b604b0 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/40b604b0 Branch: refs/heads/develop Commit: 40b604b0eb950a8683fcc35d4dcd7055a40a0ea3 Parents: ee803d5 Author: Carlos Rovira <[email protected]> Authored: Wed Jan 25 20:40:53 2017 +0100 Committer: Carlos Rovira <[email protected]> Committed: Wed Jan 25 20:40:53 2017 +0100 ---------------------------------------------------------------------- .../MDLExample/src/main/flex/Toggles.mxml | 19 +++- .../main/flex/org/apache/flex/mdl/IconToggle.as | 82 +++++++++++++- .../flex/mdl/materialIcons/MaterialIconType.as | 111 ++++++++++--------- .../src/main/resources/defaults.css | 5 + 4 files changed, 155 insertions(+), 62 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/40b604b0/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 b67eeeb..1cc8c43 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml @@ -28,6 +28,12 @@ limitations under the License. [Bindable] public var counter:int = 0; + + [Bindable] + public var counter2:int = 0; + + [Bindable] + public var counter3:int = 0; ]]> </fx:Script> @@ -35,11 +41,11 @@ limitations under the License. <js:ContainerDataBinding/> </mdl:beads> - <mdl:Grid> + <mdl:Grid width="250"> <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> <mdl:CheckBox id="mdlchk" text="Disabled at start" className="mdlchk_example" change="counter++"/> - <js:Label id="chklb" text="Chebox throw 'change' event {counter} times"/> + <js:Label 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"/> @@ -48,17 +54,22 @@ limitations under the License. <mdl:Switch text="Switch" ripple="true" selected="true"/> - <mdl:IconToggle dataMdlFor="mdlBoldIcon"> + <mdl:IconToggle dataMdlFor="mdlBoldIcon" click="counter2++"> <mdl:materialIcon> <mdl:MaterialIcon text="{MaterialIconType.FORMAT_BOLD}"/> </mdl:materialIcon> </mdl:IconToggle> + + <js:Label text="IconToggle throw 'click' event {counter2} times"/> - <mdl:IconToggle dataMdlFor="mdlItalicIcon"> + <mdl:IconToggle dataMdlFor="mdlItalicIcon" change="counter3++"> <mdl:materialIcon> <mdl:MaterialIcon text="{MaterialIconType.FORMAT_ITALIC}"/> </mdl:materialIcon> </mdl:IconToggle> + + <js:Label text="IconToggle throw 'change' event {counter3} times"/> + </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/40b604b0/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/IconToggle.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/IconToggle.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/IconToggle.as index c7dc241..6bab489 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/IconToggle.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/IconToggle.as @@ -20,13 +20,44 @@ package org.apache.flex.mdl { import org.apache.flex.mdl.materialIcons.IMaterialIcon; import org.apache.flex.mdl.supportClasses.MaterialIconBase; + import org.apache.flex.core.IToggleButtonModel; import org.apache.flex.core.UIBase; + import org.apache.flex.events.Event; + import org.apache.flex.events.MouseEvent; + import org.apache.flex.core.IStrand; + import org.apache.flex.html.TextButton; + import org.apache.flex.events.IEventDispatcher; + import org.apache.flex.core.IUIBase; COMPILE::JS { import org.apache.flex.core.WrappedHTMLElement; } + //-------------------------------------- + // Events + //-------------------------------------- + + /** + * Dispatched when the user clicks on IconToggle. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + [Event(name="click", type="org.apache.flex.events.MouseEvent")] + + /** + * Dispatched when IconToggle is being selected/unselected. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + [Event(name="change", type="org.apache.flex.events.Event")] + /** * The Material Design Lite (MDL) icon-toggle component is an enhanced version of * the standard HTML <input type="checkbox"> element. An icon-toggle consists of a @@ -46,7 +77,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.8 */ - public class IconToggle extends UIBase implements IMaterialIcon + public class IconToggle extends TextButton implements IStrand, IEventDispatcher, IUIBase, IMaterialIcon { /** * constructor. @@ -60,14 +91,35 @@ package org.apache.flex.mdl { super(); + COMPILE::SWF + { + addEventListener(MouseEvent.CLICK, internalMouseHandler); + } + className = ""; } - COMPILE::JS - protected var label:HTMLLabelElement; + [Bindable("change")] + /** + * <code>true</code> if the Button is selected. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + public function get selected():Boolean + { + return IToggleButtonModel(model).selected; + } - COMPILE::JS - protected var input:HTMLInputElement; + /** + * @private + */ + public function set selected(value:Boolean):void + { + IToggleButtonModel(model).selected = value; + } private var _dataMdlFor:String = "icon-toggle-1"; /** @@ -147,6 +199,12 @@ package org.apache.flex.mdl } } + COMPILE::JS + protected var label:HTMLLabelElement; + + COMPILE::JS + protected var input:HTMLInputElement; + /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement * @flexjsignorecoercion HTMLLabelElement @@ -182,7 +240,21 @@ package org.apache.flex.mdl (input as WrappedHTMLElement).flexjs_wrapper = this; element.flexjs_wrapper = this; + element.addEventListener("click", clickHandler, false); + return element; } + + COMPILE::JS + public function clickHandler(event:Event):void + { + selected = !selected; + } + + COMPILE::SWF + private function internalMouseHandler(event:MouseEvent) : void + { + //selected = !selected; + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/40b604b0/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconType.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconType.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconType.as index 41c19c8..f9f19db 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconType.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconType.as @@ -151,6 +151,64 @@ package org.apache.flex.mdl.materialIcons public static const OPEN_IN_BROWSER:String = 'open_in_browser'; public static const OPEN_IN_NEW:String = 'open_in_new'; + public static const OPEN_WITH:String = 'open_with'; + public static const PAGEVIEW:String = 'pageview'; + public static const PAN_TOOL:String = 'pan_tool'; + public static const PAYMENT:String = 'payment'; + public static const PERM_CAMERA_MIC:String = 'perm_camera_mic'; + public static const PERM_CONTACT_CALENDAR:String = 'perm_contact_calendar'; + public static const PERM_DATA_SETTING:String = 'perm_data_setting'; + public static const PERM_DEVICE_INFORMATION:String = 'perm_device_information'; + public static const PERM_IDENTITY:String = 'perm_identity'; + public static const PERM_MEDIA:String = 'perm_media'; + + public static const PERM_PHONE_MSG:String = 'perm_phone_msg'; + public static const PERM_SCAN_WIFI:String = 'perm_scan_wifi'; + public static const PETS:String = 'pets'; + public static const PICTURE_IN_PICTURE:String = 'picture_in_picture'; + public static const PICTURE_IN_PICTURE_ALT:String = 'picture_in_picture_alt'; + public static const PLAY_FOR_WORK:String = 'play_for_work'; + public static const POLYMER:String = 'polymer'; + public static const POWER_SETTINGS_NEW:String = 'power_settings_new'; + public static const PREGNANT_WOMAN:String = 'pregnant_woman'; + public static const PRINT:String = 'print'; + + public static const QUERY_BUILDER:String = 'query_builder'; + public static const QUESTION_ANSWER:String = 'question_answer'; + public static const RECEIPT:String = 'receipt'; + public static const RECORD_VOICE_OVER:String = 'record_voice_over'; + public static const REDEEM:String = 'redeem'; + public static const REMOVE_SHOPPING_CART:String = 'remove_shopping_cart'; + public static const REORDER:String = 'reorder'; + public static const REPORT_PROBLEM:String = 'report_problem'; + public static const RESTORE:String = 'restore'; + public static const RESTORE_PAGE:String = 'restore_page'; + + public static const ROOM:String = 'room'; + public static const ROUND_CORNER:String = 'rounded_corner'; + public static const ROWING:String = 'rowing'; + public static const SCHEDULE:String = 'schedule'; + public static const SEARCH:String = 'search'; + public static const SETTINGS:String = 'settings'; + public static const SETTINGS_APPLICATIONS:String = 'settings_applications'; + public static const SETTINGS_BACKUP_RESTORE:String = 'settings_backup_restore'; + public static const SETTINGS_BLUETOOTH:String = 'settings_bluetooth'; + public static const SETTINGS_BRIGHTNESS:String = 'settings_brightness'; + + public static const SETTINGS_CELL:String = 'settings_cell'; + public static const SETTINGS_ETHERNET:String = 'settings_ethernet'; + public static const SETTINGS_INPUT_ANTENNA:String = 'settings_input_antenna'; + public static const SETTINGS_INPUT_COMPONENT:String = 'settings_input_component'; + public static const SETTINGS_INPUT_COMPOSITE:String = 'settings_input_composite'; + public static const SETTINGS_INPUT_HDMI:String = 'settings_input_hdmi'; + public static const SETTINGS_INPUT_SVIDEO:String = 'settings_input_svideo'; + public static const SETTINGS_OVERSCAN:String = 'settings_overscan'; + public static const SETTINGS_PHONE:String = 'settings_phone'; + public static const SETTINGS_POWER:String = 'settings_power'; + + public static const SETTINGS_REMOTE:String = 'settings_remote'; + public static const SETTINGS_VOICE:String = 'settings_voice'; + /* public static const ACCESSIBLE:String = 'XXX'; public static const ACCESSIBLE:String = 'XXX'; @@ -163,58 +221,6 @@ package org.apache.flex.mdl.materialIcons public static const ACCESSIBLE:String = 'XXX'; public static const ACCESSIBLE:String = 'XXX'; - 'open_with', - 'pageview', - 'pan_tool', - 'payment', - 'perm_camera_mic', - 'perm_contact_calendar', - 'perm_data_setting', - 'perm_device_information', - 'perm_identity', - 'perm_media', - 'perm_phone_msg', - 'perm_scan_wifi', - 'pets', - 'picture_in_picture', - 'picture_in_picture_alt', - 'play_for_work', - 'polymer', - 'power_settings_new', - 'pregnant_woman', - 'print', - 'query_builder', - 'question_answer', - 'receipt', - 'record_voice_over', - 'redeem', - 'remove_shopping_cart', - 'reorder', - 'report_problem', - 'restore', - 'restore_page', - 'room', - 'rounded_corner', - 'rowing', - 'schedule', - 'search', - 'settings', - 'settings_applications', - 'settings_backup_restore', - 'settings_bluetooth', - 'settings_brightness', - 'settings_cell', - 'settings_ethernet', - 'settings_input_antenna', - 'settings_input_component', - 'settings_input_composite', - 'settings_input_hdmi', - 'settings_input_svideo', - 'settings_overscan', - 'settings_phone', - 'settings_power', - 'settings_remote', - 'settings_voice', 'shop', 'shop_two', 'shopping_basket', @@ -994,7 +1000,6 @@ package org.apache.flex.mdl.materialIcons public static const SHARE:String = "share"; public static const MOOD:String = "mood"; public static const MORE_VERT:String = "more_vert"; - public static const SEARCH:String = "search"; public static const KEYBOARD_ARROW_DOWN:String = "keyboard_arrow_down"; public static const FORMAT_BOLD:String = "format_bold"; public static const FORMAT_ITALIC:String = "format_italic"; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/40b604b0/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css index 3fa6096..cc469d7 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css @@ -53,6 +53,11 @@ CheckBox IBeadModel: ClassReference("org.apache.flex.html.beads.models.ToggleButtonModel"); } +IconToggle +{ + IBeadModel: ClassReference("org.apache.flex.html.beads.models.ToggleButtonModel"); +} + Slider { IBeadModel: ClassReference("org.apache.flex.html.beads.models.RangeModel");
