flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [35/50] flex-asjs git commit: IconToggle refactor to support ‘click’ and ‘change’ events. More Icons
Date Fri, 27 Jan 2017 22:14:16 GMT
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/feature/mdl
Commit: 40b604b0eb950a8683fcc35d4dcd7055a40a0ea3
Parents: ee803d5
Author: Carlos Rovira <carlosrovira@apache.org>
Authored: Wed Jan 25 20:40:53 2017 +0100
Committer: Carlos Rovira <carlosrovira@apache.org>
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");


Mime
View raw message