You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2016/11/04 16:10:51 UTC

[15/35] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL CheckBox impl

MDL CheckBox impl


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

Branch: refs/heads/feature/mdl
Commit: 6f33bf23fc268aecf506a0a020d93300965e00a5
Parents: 4590f11
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 17 16:16:22 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Fri Nov 4 17:10:12 2016 +0100

----------------------------------------------------------------------
 .../main/flex/org/apache/flex/mdl/CheckBox.as   | 162 +++++++++++++++++++
 .../src/main/resources/mdl-manifest.xml         |   1 +
 2 files changed, 163 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6f33bf23/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
new file mode 100644
index 0000000..082b99f
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
@@ -0,0 +1,162 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.CheckBox;            
+    }
+    COMPILE::JS
+    {
+        import org.apache.flex.core.UIBase;
+        import org.apache.flex.core.WrappedHTMLElement;
+        import org.apache.flex.events.Event;
+    }
+
+    /**
+     *  The CheckBox class provides a MDL UI-like appearance for
+     *  a CheckBox.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+    COMPILE::SWF
+	public class CheckBox extends org.apache.flex.html.CheckBox
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CheckBox()
+		{
+			super();
+		}
+	}
+    
+    COMPILE::JS
+    public class CheckBox extends UIBase
+    {
+        
+        private var input:HTMLInputElement;
+        private var checkbox: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
+        {
+                label = document.createElement('label') as HTMLLabelElement;
+                label.className = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect';
+                element = label as WrappedHTMLElement;
+                
+                input = document.createElement('input') as HTMLInputElement;
+                input.type = 'checkbox';
+                input.className = 'mdl-checkbox__input';
+                //input.addEventListener('change', selectionChangeHandler, false);
+                label.appendChild(input);
+                
+                checkbox = document.createElement('span') as HTMLSpanElement;
+                checkbox.className = 'mdl-checkbox__label';
+                //checkbox.addEventListener('mouseover', mouseOverHandler, false);
+                //checkbox.addEventListener('mouseout', mouseOutHandler, false);
+                label.appendChild(checkbox);
+                
+                textNode = document.createTextNode('') as Text;
+                checkbox.appendChild(textNode);
+                //label.className = 'CheckBox';
+                typeNames = 'CheckBox';
+                
+                positioner = element;
+                positioner.style.position = 'relative';
+                (input as WrappedHTMLElement).flexjs_wrapper = this;
+                (checkbox as WrappedHTMLElement).flexjs_wrapper = this;
+                element.flexjs_wrapper = this;
+                
+                return element;
+            };
+        
+        
+        /**
+         */
+        private function mouseOverHandler(event:Event):void
+        {
+            //checkbox.className = 'checkbox-icon-hover';
+        }
+        
+        /**
+         */
+        private function mouseOutHandler(event:Event):void
+        {
+            /*if (input.checked)
+                checkbox.className = 'checkbox-icon-checked';
+            else
+                checkbox.className = 'checkbox-icon';*/
+        }
+        
+        
+        /**
+         */
+        private function selectionChangeHandler(event:Event):void
+        {
+            /*if (input.checked)
+                checkbox.className = 'checkbox-icon-checked';
+            else
+                checkbox.className = 'checkbox-icon';*/
+        }
+        
+        
+        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 (value)
+                checkbox.className = 'checkbox-icon-checked';
+            else
+                checkbox.className = 'checkbox-icon';*/
+        }
+
+    }
+
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6f33bf23/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 eb65435..ffbc9c0 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -23,5 +23,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"/>
 
 </componentPackage>