flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [33/41] git commit: [flex-asjs] [refs/heads/feature/mdl] - Badge and BadgeElement
Date Sun, 06 Nov 2016 01:30:49 GMT
Badge and BadgeElement


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

Branch: refs/heads/feature/mdl
Commit: 0e1283d5f9d3a3bd38971ec229be0e55c6477a61
Parents: 244ea0f
Author: Carlos Rovira <carlosrovira@apache.org>
Authored: Thu Nov 3 20:15:00 2016 +0100
Committer: Carlos Rovira <carlosrovira@apache.org>
Committed: Sun Nov 6 02:28:52 2016 +0100

----------------------------------------------------------------------
 .../flexjs/MDLExample/src/main/flex/App.mxml    |  28 +++
 .../src/main/flex/org/apache/flex/mdl/Badge.as  | 233 +++++++++++++++++++
 .../src/main/flex/org/apache/flex/mdl/Slider.as |  16 +-
 .../org/apache/flex/mdl/beads/BadgeEffect.as    | 121 ++++++++++
 .../src/main/resources/mdl-manifest.xml         |   2 +
 5 files changed, 390 insertions(+), 10 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0e1283d5/examples/flexjs/MDLExample/src/main/flex/App.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/App.mxml b/examples/flexjs/MDLExample/src/main/flex/App.mxml
index 8487f5b..8b3ebbc 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -106,6 +106,34 @@ limitations under the License.
 
                 <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/>
 
+                <js:VContainer>
+                    <mdl:Badge text="This is a Badge" dataBadge="5" linkUrl="http://flex.apache.org">
+                        <js:beads>
+                            <mdl:BadgeEffect overlap="true" noBackground="true"/>
+                        </js:beads>
+                    </mdl:Badge>
+
+                    <mdl:Badge id="badge1" text="Loving this." dataBadge="1" linkUrl="http://flex.apache.org"/>
+                </js:VContainer>
+
+                <mdl:Button text="TYPE LINK" click="badge1.type = 0">
+                    <js:beads>
+                        <mdl:ButtonEffect raised="true" colored="true"/>
+                    </js:beads>
+                </mdl:Button>
+
+                <mdl:Button text="TYPE TEXT" click="badge1.type = 1">
+                    <js:beads>
+                        <mdl:ButtonEffect raised="true" colored="false"/>
+                    </js:beads>
+                </mdl:Button>
+
+                <mdl:Button text="TYPE CONTAINER" click="badge1.type = 2; badge1.text='account_box'">
+                    <js:beads>
+                        <mdl:ButtonEffect raised="true" accent="true"/>
+                    </js:beads>
+                </mdl:Button>
+
             </js:Form>
 
         </js:View>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0e1283d5/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Badge.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Badge.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Badge.as
new file mode 100644
index 0000000..fa4ffd1
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Badge.as
@@ -0,0 +1,233 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+	import org.apache.flex.core.UIBase;
+
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;            
+    }
+
+	/**
+	 *  The Badge class provides a MDL UI-like appearance for a badge.
+	 *  A Badge is an onscreen notification element consists of a small circle, 
+     *  typically containing a number or other characters, that appears in 
+     *  proximity to another object
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class Badge extends UIBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function Badge()
+		{
+			super();
+		}
+		
+        private var _type:Number = 0;
+        public static const LINK_TYPE:Number = 0;
+        public static const TEXT_TYPE:Number = 1;
+        public static const CONTAINER_TYPE:Number = 2;
+
+        /**
+         *  the type of badge
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get type():Number
+		{
+            return _type;   
+		}
+
+		public function set type(value:Number):void
+		{
+            _type = value;
+            
+            COMPILE::JS
+            {
+                if(value == LINK_TYPE)
+                {
+                    var link:HTMLElement = document.createElement('a') as HTMLElement;
+                    link.setAttribute('href', linkUrl);
+                    link.setAttribute('data-badge', dataBadge);
+                    link.appendChild(textNode);
+                    link.className = 'mdl-badge';
+                    
+                    element.parentNode.replaceChild(link, element);
+
+
+                    element = link as WrappedHTMLElement;
+                } 
+                else if(value == TEXT_TYPE)
+                {  
+                    var span:HTMLSpanElement = document.createElement('span') as HTMLSpanElement;
+                    span.setAttribute('data-badge', dataBadge);
+                    span.appendChild(textNode); 
+                    span.className = 'mdl-badge';
+
+                    element.parentNode.replaceChild(span, element);
+                    
+                    element = span as WrappedHTMLElement;
+                } 
+                else if(value == CONTAINER_TYPE)
+                {
+                    var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+                    div.setAttribute('data-badge', dataBadge);
+                    div.appendChild(textNode); 
+                    div.className = 'mdl-badge material-icons';
+
+                    element.parentNode.replaceChild(div, element);
+                    
+                    element = div as WrappedHTMLElement;
+                }
+                
+                positioner = element;
+                positioner.style.position = 'relative';
+                element.flexjs_wrapper = this;
+                
+            }
+		}
+
+        private var _text:String = "";
+
+        /**
+         *  The text of the link
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get text():String
+		{
+            COMPILE::SWF
+            {
+                return _text;
+            }
+            COMPILE::JS
+            {
+                return textNode.nodeValue;
+            }
+		}
+
+		public function set text(value:String):void
+		{
+            COMPILE::SWF
+            {
+                _text = value;
+            }
+            COMPILE::JS
+            {
+                textNode.nodeValue = value;
+            }
+		}
+        
+        private var _linkUrl:String = "#";
+
+        /**
+         *  the link url
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get linkUrl():String
+		{
+            return _linkUrl;   
+		}
+
+		public function set linkUrl(value:String):void
+		{
+            _linkUrl = value;
+            
+            COMPILE::JS
+            {
+                (element as HTMLElement).setAttribute('href', value);
+            }
+		}
+
+
+        private var _dataBadge:Number = 0;
+
+		/**
+		 *  The current value of the Badge that appers inside the circle.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get dataBadge():Number
+		{
+			return _dataBadge;
+		}
+		public function set dataBadge(value:Number):void
+		{
+			_dataBadge = value;
+
+			COMPILE::JS
+			{
+				(element as HTMLElement).setAttribute('data-badge', _dataBadge.toString());
+			}
+		}
+		
+        COMPILE::JS
+        private var textNode:Text;
+		
+        /**
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+		 * @flexjsignorecoercion HTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			var a:HTMLElement = document.createElement('a') as HTMLElement;
+            a.setAttribute('href', linkUrl);
+            a.setAttribute('data-badge', dataBadge);
+
+            textNode = document.createTextNode('') as Text;
+            a.appendChild(textNode); 
+
+			element = a as WrappedHTMLElement;
+            
+            positioner = element;
+            positioner.style.position = 'relative';
+			element.flexjs_wrapper = this;
+            
+            className = typeNames = 'mdl-badge';
+
+            return element;
+        }
+    }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0e1283d5/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
index 31267ad..126ea12 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
@@ -32,14 +32,11 @@ package org.apache.flex.mdl
 	[Event(name="valueChange", type="org.apache.flex.events.Event")]
 	
 	/**
-	 *  The Slider class is a component that displays a range of values using a
-	 *  track and a thumb control. The Slider uses the following bead types:
+	 *  The Slider class provides a MDL UI-like appearance for a slider.
+	 *  It displays a range of values using a track and a thumb control. 
+	 *  The Slider uses the following bead types:
 	 * 
 	 *  org.apache.flex.core.IBeadModel: the data model, typically an IRangeModel, that holds
the Slider values.
-	 *  org.apache.flex.core.IBeadView:  the bead that constructs the visual parts of the Slider.
-	 *  org.apache.flex.core.IBeadController: the bead that handles input.
-	 *  org.apache.flex.core.IThumbValue: the bead responsible for the display of the thumb
control.
-	 *  org.apache.flex.core.ITrackView: the bead responsible for the display of the track.
 	 *  
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
@@ -60,8 +57,6 @@ package org.apache.flex.mdl
 		{
 			super();
 			
-			//className = "Slider";
-			
 			IRangeModel(model).value = 0;
 			IRangeModel(model).minimum = 0;
 			IRangeModel(model).maximum = 100;
@@ -201,12 +196,13 @@ package org.apache.flex.mdl
 
 			input = document.createElement('input') as HTMLInputElement;
 			input.type = "range";
+			input.className = 'mdl-slider mdl-js-slider';
+
 			input.value = IRangeModel(model).value.toString();
 			input.min = IRangeModel(model).minimum.toString();
 			input.max = IRangeModel(model).maximum.toString();
 			input.step = IRangeModel(model).stepSize.toString();
-			input.className = 'mdl-slider mdl-js-slider';
-
+			
 			p.appendChild(input);
 
 			element = input as WrappedHTMLElement;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0e1283d5/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/BadgeEffect.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/BadgeEffect.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/BadgeEffect.as
new file mode 100644
index 0000000..0cc62a8
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/BadgeEffect.as
@@ -0,0 +1,121 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.IBead;
+	import org.apache.flex.mdl.Badge;
+	
+	
+	/**
+	 *  The BadgeEffect class is a specialty bead that can be used with
+	 *  a MDL Badge control to apply some MDL complementary effect.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class BadgeEffect implements IBead
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function BadgeEffect()
+		{
+		}
+
+		private var _noBackground:String = "";
+        /**
+		 *  A boolean flag to activate "mdl-badge--no-background" effect selector.
+		 *  Applies open-circle effect to badge
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+        public function get noBackground():Boolean
+        {
+            return _noBackground;
+        }
+        public function set noBackground(value:Boolean):void
+        {
+            if(value) {
+                _noBackground = " mdl-badge--no-background";
+            } else {
+                _noBackground = "";
+            }   
+        }
+
+        private var _overlap:String = "";
+        /**
+		 *  A boolean flag to activate "mdl-badge--overlap" effect selector.
+		 *  Make the badge overlap with its container
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+        public function get overlap():Boolean
+        {
+            return _overlap;
+        }
+        public function set overlap(value:Boolean):void
+        {
+            if(value) {
+                _overlap = " mdl-badge--overlap";
+            } else {
+                _overlap = "";
+            }   
+        }
+
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 *  @flexjsignorecoercion org.apache.flex.mdl.TextInput;
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			COMPILE::JS
+			{
+				if (value is Badge) {
+					var badge:Badge = value as Badge;
+					badge.className = _noBackground + _overlap;
+				} else {
+					throw new Error("Host component must be an MDL Badge.");
+				}
+			}
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0e1283d5/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 bf24f3b..f60da64 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -31,5 +31,7 @@
     <component id="TextInputEffect" class="org.apache.flex.mdl.beads.TextInputEffect"/>
     <component id="Disabled" class="org.apache.flex.mdl.beads.Disabled"/>
     <component id="Slider" class="org.apache.flex.mdl.Slider"/>
+    <component id="Badge" class="org.apache.flex.mdl.Badge"/>
+    <component id="BadgeEffect" class="org.apache.flex.mdl.beads.BadgeEffect"/>
 
 </componentPackage>


Mime
View raw message