flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [05/17] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL RadioButton
Date Tue, 18 Oct 2016 22:51:48 GMT
MDL RadioButton


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/c3026f6c
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/c3026f6c
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/c3026f6c

Branch: refs/heads/feature/mdl
Commit: c3026f6c9f13736fc53cb6e6e538ec9ba9b1679a
Parents: b0e7dc2
Author: Carlos Rovira <carlosrovira@apache.org>
Authored: Mon Oct 17 17:58:42 2016 +0200
Committer: Carlos Rovira <carlosrovira@apache.org>
Committed: Wed Oct 19 00:51:15 2016 +0200

----------------------------------------------------------------------
 .../flex/org/apache/flex/mdl/RadioButton.as     | 249 +++++++++++++++++++
 .../src/main/resources/mdl-manifest.xml         |   1 +
 2 files changed, 250 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c3026f6c/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
new file mode 100644
index 0000000..d7e9b2f
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
@@ -0,0 +1,249 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.mdl
+{
+    COMPILE::SWF
+    {
+        import org.apache.flex.html.RadioButton;            
+    }
+    COMPILE::JS
+    {
+        import org.apache.flex.core.UIBase;
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+
+    /**
+     *  The RadioButton class provides a MDL UI-like appearance for
+     *  a RadioButton.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+    COMPILE::SWF
+	public class RadioButton extends org.apache.flex.html.RadioButton
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function RadioButton()
+		{
+			super();
+		}
+	}
+    
+    COMPILE::JS
+    public class RadioButton extends UIBase
+    {
+        /**
+         * Provides unique name
+         */
+        public static var radioCounter:int = 0;
+
+        private var input:HTMLInputElement;
+        private var radio:HTMLSpanElement;
+        private var label:HTMLLabelElement;
+        private var textNode:Text;
+        
+        /**
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+         * @flexjsignorecoercion HTMLLabelElement
+         * @flexjsignorecoercion HTMLInputElement
+         * @flexjsignorecoercion HTMLSpanElement
+         * @flexjsignorecoercion Text
+         */
+        override protected function createElement():WrappedHTMLElement
+        { 
+            // hide this eleement
+            input = document.createElement('input') as HTMLInputElement;
+            input.type = 'radio';
+            input.className = 'mdl-radio__button';
+            input.id = '_radio_' + radioCounter++;
+            input.addEventListener('change', selectionChangeHandler, false);  
+
+            radio = document.createElement('span') as HTMLSpanElement;
+            radio.className = 'mdl-radio__label';
+            radio.addEventListener('mouseover', mouseOverHandler, false);
+            radio.addEventListener('mouseout', mouseOutHandler, false);
+            
+            textNode = document.createTextNode('') as Text;
+            
+            label = document.createElement('label') as HTMLLabelElement;
+            label.className = "mdl-radio mdl-js-radio mdl-js-ripple-effect";
+            label.appendChild(input);
+            label.appendChild(radio);
+            radio.appendChild(textNode);
+            label.style.position = 'relative';
+            
+            element = label as WrappedHTMLElement;
+            //element.className = 'RadioButton';
+            typeNames = 'RadioButton';
+            
+            positioner = element;
+            positioner.style.position = 'relative';
+            (input as WrappedHTMLElement).flexjs_wrapper = this;
+            (radio as WrappedHTMLElement).flexjs_wrapper = this;
+            element.flexjs_wrapper = this;
+            (textNode as WrappedHTMLElement).flexjs_wrapper = this;
+            
+            return element;
+        };
+        
+        
+        /**
+         * @param e The event object.
+         */
+        private function mouseOverHandler(e:Event):void
+        {
+            //radio.className = 'radio-icon-hover';
+        }
+        
+        
+        /**
+         * @param e The event object.
+         */
+        private function mouseOutHandler(e:Event):void
+        {
+            /*if (input.checked)
+                radio.className = 'radio-icon-checked';
+            else
+                radio.className = 'radio-icon';*/
+        }
+        
+        
+        /**
+         * @param e The event object.
+         */
+        private function selectionChangeHandler(e:Event):void 
+        {
+            // this should reset the icons in the non-selected radio
+            selectedValue = value;
+        }
+        
+        
+        override public function set id(value:String):void
+        {
+            super.id = value;
+            label.id = value;
+            input.id = value;
+        }
+        
+        /**
+         * @flexjsignorecoercion String
+         */
+        public function get groupName():String
+        {
+            return input.name as String;
+        }
+        
+        public function set groupName(value:String):void
+        {
+            input.name = value;
+        }
+        
+        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;
+        }
+        
+        public function set selected(value:Boolean):void
+        {
+            input.checked = value;
+            /*if (input.checked)
+                radio.className = 'radio-icon-checked';
+            else
+                radio.className = 'radio-icon';*/
+        }
+        
+        public function get value():String
+        {
+            return input.value;
+        }
+        
+        public function set value(value:String):void
+        {
+            input.value = value;
+        }
+        
+        /**
+         * @flexjsignorecoercion Array 
+         * @flexjsignorecoercion String
+         */
+        public function get selectedValue():Object
+        {
+            var buttons:Array;
+            var groupName:String;
+            var i:int;
+            var n:int;
+            
+            groupName = input.name as String;
+            buttons = document.getElementsByName(groupName) as Array;
+            n = buttons.length;
+            
+            for (i = 0; i < n; i++) {
+                if (buttons[i].checked) {
+                    return buttons[i].value;
+                }
+            }
+            return null;            
+        }
+        
+        /**
+         * @flexjsignorecoercion Array
+         * @flexjsignorecoercion String
+         */
+        public function set selectedValue(value:Object):void
+        {
+            var buttons:Array;
+            var groupName:String;
+            var i:int;
+            var n:int;
+            
+            groupName = input.name as String;
+            buttons = document.getElementsByName(groupName) as Array;
+            n = buttons.length;
+            for (i = 0; i < n; i++) {
+                if (buttons[i].value === value) {
+                    buttons[i].checked = true;
+                    buttons[i].flexjs_wrapper.selected = true;
+                }
+                else
+                    buttons[i].flexjs_wrapper.selected = false;
+            }
+        }
+
+    }
+
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c3026f6c/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
index ffbc9c0..6dcb073 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -24,5 +24,6 @@
     <component id="Button" class="org.apache.flex.mdl.Button"/>
     <component id="TextInput" class="org.apache.flex.mdl.TextInput"/>
     <component id="CheckBox" class="org.apache.flex.mdl.CheckBox"/>
+    <component id="RadioButton" class="org.apache.flex.mdl.RadioButton"/>
 
 </componentPackage>


Mime
View raw message