flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [15/17] git commit: [flex-asjs] [refs/heads/feature/mdl] - Changes to MDL Slider to get valueChange working but maven build is failing
Date Mon, 26 Dec 2016 18:41:06 GMT
Changes to MDL Slider to get valueChange working but maven build is failing


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

Branch: refs/heads/feature/mdl
Commit: c4429d78e0cbc20e74d87ed928b64687be56366f
Parents: 2d58e54
Author: Carlos Rovira <carlosrovira@apache.org>
Authored: Mon Dec 19 03:18:52 2016 +0100
Committer: Carlos Rovira <carlosrovira@apache.org>
Committed: Mon Dec 26 19:39:20 2016 +0100

----------------------------------------------------------------------
 .../flexjs/MDLExample/src/main/flex/Cards.mxml  |  14 +-
 frameworks/projects/MaterialDesignLite/pom.xml  |  21 ++
 .../src/main/flex/org/apache/flex/mdl/Slider.as |  54 +---
 .../apache/flex/mdl/beads/SliderThumbView.as    | 121 ++++++++
 .../apache/flex/mdl/beads/SliderTrackView.as    | 121 ++++++++
 .../beads/controllers/SliderMouseController.as  | 287 +++++++++++++++++++
 .../apache/flex/mdl/beads/views/SliderView.as   | 188 ++++++++++++
 .../src/main/resources/defaults.css             |  12 +-
 .../src/main/resources/mdl-manifest.xml         |   4 +
 9 files changed, 773 insertions(+), 49 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4429d78/examples/flexjs/MDLExample/src/main/flex/Cards.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml
index 6369d42..e81715d 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml
@@ -22,9 +22,19 @@ limitations under the License.
                  xmlns:mdl="library://ns.apache.org/flexjs/mdl"
                  xmlns="http://www.w3.org/1999/xhtml">
     
+    <fx:Script>
+    <![CDATA[
+        private function onValueChange(event:Event):void
+        {
+            trace("value change:", slider.value);
+            mycard.shadow = slider.value
+        }
+    ]]>
+</fx:Script>
+
     <mdl:Grid className="center-items">
         
-            <mdl:Card className="demo-card-wide" shadow="2">
+            <mdl:Card id="mycard" className="demo-card-wide" shadow="2">
                 <mdl:CardTitle>
                     <mdl:CardTitleText text="Welcome"/>
                 </mdl:CardTitle>
@@ -37,6 +47,8 @@ limitations under the License.
                 </mdl:CardSupportingText>
                 <mdl:CardActions border="true">
                     <mdl:Button text="Get Started" ripple="true" colored="true"/>
+                    <mdl:Slider id="slider" minimum="0" maximum="16" value="2" stepSize="1"
width="200"
+                                valueChange="onValueChange(event)"/>
                 </mdl:CardActions>
                 <mdl:CardMenu>
                     <mdl:Button icon="true" ripple="true">

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4429d78/frameworks/projects/MaterialDesignLite/pom.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/pom.xml b/frameworks/projects/MaterialDesignLite/pom.xml
index d5fde11..ca2ca23 100644
--- a/frameworks/projects/MaterialDesignLite/pom.xml
+++ b/frameworks/projects/MaterialDesignLite/pom.xml
@@ -89,15 +89,36 @@
     </dependency>
     <dependency>
       <groupId>org.apache.flex.flexjs.framework</groupId>
+      <artifactId>Binding</artifactId>
+      <version>0.8.0-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>typedefs</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.flex.flexjs.framework</groupId>
       <artifactId>Graphics</artifactId>
       <version>0.8.0-SNAPSHOT</version>
       <type>swc</type>
     </dependency>
     <dependency>
       <groupId>org.apache.flex.flexjs.framework</groupId>
+      <artifactId>Graphics</artifactId>
+      <version>0.8.0-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>typedefs</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.flex.flexjs.framework</groupId>
+      <artifactId>Collections</artifactId>
+      <version>0.8.0-SNAPSHOT</version>
+      <type>swc</type>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.flex.flexjs.framework</groupId>
       <artifactId>Collections</artifactId>
       <version>0.8.0-SNAPSHOT</version>
       <type>swc</type>
+      <classifier>typedefs</classifier>
     </dependency>
     <dependency>
       <groupId>org.apache.flex.flexjs.framework</groupId>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4429d78/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 18a077b..bcbef9b 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
@@ -24,6 +24,7 @@ package org.apache.flex.mdl
 
     COMPILE::JS
     {
+		import org.apache.flex.html.beads.controllers.SliderMouseController;
         import org.apache.flex.core.WrappedHTMLElement;            
     }
 
@@ -35,6 +36,8 @@ package org.apache.flex.mdl
 	 *  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.
 	 *  
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
@@ -80,10 +83,10 @@ package org.apache.flex.mdl
 		{
 			IRangeModel(model).value = newValue;
 
-			COMPILE::JS
+			/*COMPILE::JS
 			{
 				(element as HTMLInputElement).value = IRangeModel(model).value.toString();
-			}
+			}*/
 		}
 		
 		/**
@@ -102,10 +105,10 @@ package org.apache.flex.mdl
 		{
 			IRangeModel(model).minimum = value;
 
-			COMPILE::JS
+			/*COMPILE::JS
 			{
 				(element as HTMLInputElement).min = IRangeModel(model).minimum.toString();
-			}
+			}*/
 		}
 		
 		/**
@@ -124,11 +127,10 @@ package org.apache.flex.mdl
 		{
 			IRangeModel(model).maximum = value;
 
-			COMPILE::JS
+			/*COMPILE::JS
 			{
 				(element as HTMLInputElement).max = IRangeModel(model).maximum.toString();
-			}
-			
+			}*/
 		}
 		
 		/**
@@ -166,20 +168,11 @@ package org.apache.flex.mdl
         {
             IRangeModel(model).stepSize = value;
 
-			COMPILE::JS
+			/*COMPILE::JS
 			{
 				(element as HTMLInputElement).step = IRangeModel(model).stepSize.toString();
-			}
+			}*/
         }
-
-        //COMPILE::JS
-        //private var track:SliderTrackView;
-        
-        //COMPILE::JS
-        //private var thumb:SliderThumbView;
-        
-        //COMPILE::JS
-        //private var controller:SliderMouseController;
         
 		COMPILE::JS
 		private var input:HTMLInputElement;
@@ -209,12 +202,6 @@ package org.apache.flex.mdl
 
 			element = input as WrappedHTMLElement;
             
-            //track = new SliderTrackView();
-            //addBead(track);            
-            //thumb = new SliderThumbView();
-            //addBead(thumb);
-            //controller = new SliderMouseController();
-            //addBead(controller);
             
             positioner = p as WrappedHTMLElement;
 			(input as WrappedHTMLElement).flexjs_wrapper = this;
@@ -243,6 +230,7 @@ package org.apache.flex.mdl
 		}
 
         /**
+		 * @private
          */
         COMPILE::JS
         public function snap(value:Number):Number
@@ -260,23 +248,5 @@ package org.apache.flex.mdl
                 return n + si;
             return n;
         }
-        
-        
-        /**
-         * @param {number} value The value used to calculate new position of the thumb.
-         * @return {void} Moves the thumb to the corresponding position.
-         *
-        COMPILE::JS
-        public function setThumbFromValue(value:Number):void
-        {
-            var min:Number = model.minimum;
-            var max:Number = model.maximum;
-            var p:Number = (value - min) / (max - min);
-            var xloc:Number = p * (parseInt(track.element.style.width, 10) -
-                parseInt(thumb.element.style.width, 10));
-            
-            thumb.element.style.left = "" + xloc + 'px';
-        } */       
-
     }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4429d78/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderThumbView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderThumbView.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderThumbView.as
new file mode 100644
index 0000000..5113b5a
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderThumbView.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 flash.display.Graphics;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+
+    import org.apache.flex.core.BeadViewBase;
+    import org.apache.flex.core.IBeadView;
+    import org.apache.flex.core.IStrand;
+	import org.apache.flex.events.Event;
+    import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.core.IChild;
+	
+    import org.apache.flex.mdl.Button;
+
+	/**
+	 *  The SliderThumbView class creates the draggable input element for the 
+	 *  org.apache.flex.html.Slider component.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class SliderThumbView extends BeadViewBase implements IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function SliderThumbView()
+		{
+            hitArea = new Shape();
+            upView = new Shape();
+            downView = new Shape();
+            overView = new Shape();                
+		}
+		
+		/**
+		 * @private
+		 */
+		private function drawView(g:Graphics, bgColor:uint):void
+		{
+			var host:Button = Button(_strand);
+            var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton;
+			g.clear();
+			g.lineStyle(1,0x000000);
+			g.beginFill(bgColor,1.0);
+			g.drawCircle(host.width/2, host.height/2, 10);
+			g.endFill();
+		}
+		
+		private var hitArea:Shape;
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+         *  @flexjsignoreimport org.apache.flex.core.WrappedHTMLElement
+         *  @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			
+            drawView(hitArea.graphics, 0xDD0000);
+            drawView(upView.graphics, 0xFFFFFF);
+            drawView(downView.graphics, 0x999999);
+            drawView(overView.graphics, 0xDDDDDD);
+            
+            var button:SimpleButton = IChild(value).$displayObject as SimpleButton;
+            button.upState = upView;
+            button.downState = downView;
+            button.overState = overView;
+            button.hitTestState = hitArea;
+            
+            IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+            IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
               
+		}
+		
+		private var upView:Shape;
+		private var downView:Shape;
+		private var overView:Shape;
+        
+		/**
+		 * @private
+		 */
+		private function sizeChangeHandler( event:Event ) : void
+		{
+			drawView(hitArea.graphics, 0xDD0000);
+			drawView(upView.graphics, 0xFFFFFF);
+			drawView(downView.graphics, 0x999999);
+			drawView(overView.graphics, 0xDDDDDD);
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4429d78/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderTrackView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderTrackView.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderTrackView.as
new file mode 100644
index 0000000..603a4fb
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderTrackView.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 flash.display.Graphics;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;			
+	
+	import org.apache.flex.core.BeadViewBase;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.core.IChild;
+
+    import org.apache.flex.mdl.Button;
+	
+	/**
+	 *  The SliderTrackView class creates the track area for the org.apache.flex.html.Slider
+	 *  component.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class SliderTrackView extends BeadViewBase implements IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function SliderTrackView()
+		{
+			hitArea = new Shape();
+			upView = new Shape();
+			downView = new Shape();
+			overView = new Shape();					
+		}
+		
+		/**
+		 * @private
+		 */
+		private function drawView(g:Graphics, bgColor:uint):void
+		{
+			var host:Button = Button(_strand);
+            var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton;
+			g.clear();
+			g.lineStyle(1,0x000000);
+			g.beginFill(bgColor);
+			g.drawRect(0, 0, host.width, host.height);
+			g.endFill();
+		}
+		
+		private var hitArea:Shape;
+		
+		/**
+		 *  @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.core.WrappedHTMLElement
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			
+			drawView(hitArea.graphics, 0xDD0000);
+			drawView(upView.graphics, 0xCCCCCC);
+			drawView(downView.graphics, 0x808080);
+			drawView(overView.graphics, 0xEEEEEE);
+			
+            var button:SimpleButton = IChild(value).$displayObject as SimpleButton;
+			button.upState = upView;
+			button.downState = downView;
+			button.overState = overView;
+			button.hitTestState = hitArea;
+			
+			IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+			IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);					
+		}
+		
+		private var upView:Shape;
+		private var downView:Shape;
+		private var overView:Shape;
+		
+		/**
+		 * @private
+		 */
+		private function sizeChangeHandler( event:Event ) : void
+		{
+			drawView(hitArea.graphics, 0xDD0000);
+			drawView(upView.graphics, 0xCCCCCC);
+			drawView(downView.graphics, 0x808080);
+			drawView(overView.graphics, 0xEEEEEE);
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4429d78/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as
new file mode 100644
index 0000000..8cbc8db
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as
@@ -0,0 +1,287 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.controllers
+{
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadController;
+	import org.apache.flex.core.IRangeModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.events.MouseEvent;
+	import org.apache.flex.geom.Point;
+
+	import org.apache.flex.html.beads.ISliderView;
+	import org.apache.flex.mdl.beads.SliderTrackView;
+
+    COMPILE::JS
+    {
+        import goog.events;
+        import goog.events.EventType;
+        import org.apache.flex.events.BrowserEvent;
+
+        import org.apache.flex.mdl.Slider;
+        import org.apache.flex.mdl.beads.SliderThumbView;
+        import org.apache.flex.mdl.beads.SliderTrackView;
+    }
+	
+	/**
+	 *  The SliderMouseController class bead handles mouse events on the 
+	 *  org.apache.flex.html.Slider's component parts (thumb and track) and 
+	 *  dispatches change events on behalf of the Slider (as well as co-ordinating visual 
+	 *  changes (such as moving the thumb when the track has been tapped or clicked).
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class SliderMouseController implements IBead, IBeadController
+	{
+		/**
+		 *  constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function SliderMouseController()
+		{
+		}
+		
+		private var rangeModel:IRangeModel;
+		
+		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
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			rangeModel = UIBase(value).model as IRangeModel;
+			
+            COMPILE::SWF
+            {
+                var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView;
+                sliderView.thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDownHandler);
+                
+                // add handler to detect click on track
+                sliderView.track.addEventListener(MouseEvent.CLICK, trackClickHandler, false,
99999);
+                                    
+            }
+            COMPILE::JS
+            {
+				var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView;
+				track = sliderView.track as UIBase;
+				thumb = sliderView.thumb as UIBase;
+                
+                goog.events.listen(track.element, goog.events.EventType.CLICK,
+                    handleTrackClick, false, this);
+                
+                goog.events.listen(thumb.element, goog.events.EventType.MOUSEDOWN,
+                    handleThumbDown, false, this);
+
+            }
+		}
+		
+        COMPILE::JS
+        private var track:UIBase;
+        
+        COMPILE::JS
+        private var thumb:UIBase;
+        
+		/**
+		 * @private
+		 */
+        COMPILE::SWF
+		private function thumbDownHandler( event:MouseEvent ) : void
+		{
+			UIBase(_strand).topMostEventDispatcher.addEventListener(MouseEvent.MOUSE_MOVE, thumbMoveHandler);
+			UIBase(_strand).topMostEventDispatcher.addEventListener(MouseEvent.MOUSE_UP, thumbUpHandler);
+			
+			var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView;
+			
+			origin = new Point(event.screenX, event.screenY);
+			thumb = new Point(sliderView.thumb.x,sliderView.thumb.y);
+		}
+		
+		/**
+		 * @private
+		 */
+        COMPILE::SWF
+		private function thumbUpHandler( event:MouseEvent ) : void
+		{
+			UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_MOVE, thumbMoveHandler);
+			UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_UP, thumbUpHandler);
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event("valueChange"));
+		}
+		
+        COMPILE::SWF
+		private var origin:Point;
+        COMPILE::SWF
+		private var thumb:Point;
+		
+		/**
+		 * @private
+		 */
+        COMPILE::SWF
+		private function thumbMoveHandler( event:MouseEvent ) : void
+		{
+			var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView;
+			
+			var deltaX:Number = event.screenX - origin.x;
+			var thumbW:Number = sliderView.thumb.width/2;
+			var newX:Number = thumb.x + deltaX;
+			
+			var p:Number = newX/sliderView.track.width;
+			var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum;
+		
+			rangeModel.value = n;
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event("valueChange"));
+		}
+		
+		/**
+		 * @private
+		 */
+        COMPILE::SWF
+		private function trackClickHandler( event:MouseEvent ) : void
+		{
+			event.stopImmediatePropagation();
+			
+			var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView;
+			
+			var xloc:Number = event.localX;
+			var p:Number = xloc/sliderView.track.width;
+			var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum;
+			
+			rangeModel.value = n;
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event("valueChange"));
+		}
+        
+        /**
+         */
+        COMPILE::JS
+        private function handleTrackClick(event:BrowserEvent):void
+        {
+            var host:Slider = _strand as Slider;
+            var xloc:Number = event.clientX;
+            var p:Number = Math.min(1, xloc / parseInt(track.element.style.width, 10));
+            var n:Number = p * (host.maximum - host.minimum) +
+                host.minimum;
+            
+            host.value = n;
+            
+            origin = parseInt(thumb.element.style.left, 10);
+            position = parseInt(thumb.element.style.left, 10);
+            
+            calcValFromMousePosition(event, true);
+            
+            host.dispatchEvent(new org.apache.flex.events.Event('valueChange'));
+        }
+        
+        
+        /**
+         */
+        COMPILE::JS
+        private function handleThumbDown(event:BrowserEvent):void
+        {
+            var host:Slider = _strand as Slider;
+            goog.events.listen(host.element, goog.events.EventType.MOUSEUP,
+                handleThumbUp, false, this);
+            goog.events.listen(host.element, goog.events.EventType.MOUSEMOVE,
+                handleThumbMove, false, this);
+            
+            origin = event.clientX;
+            position = parseInt(thumb.element.style.left, 10);
+        }
+        
+        COMPILE::JS
+        private var origin:Number;
+        COMPILE::JS
+        private var position:int;
+        
+        /**
+         */
+        COMPILE::JS
+        private function handleThumbUp(event:BrowserEvent):void
+        {
+            var host:Slider = _strand as Slider;
+            goog.events.unlisten(host.element, goog.events.EventType.MOUSEUP,
+                handleThumbUp, false, this);
+            goog.events.unlisten(host.element, goog.events.EventType.MOUSEMOVE,
+                handleThumbMove, false, this);
+            
+            calcValFromMousePosition(event, false);
+            
+            host.dispatchEvent(new org.apache.flex.events.Event('valueChange'));
+        }
+        
+        
+        /**
+         */
+        COMPILE::JS
+        private function handleThumbMove(event:BrowserEvent):void
+        {
+            var host:Slider = _strand as Slider;
+            calcValFromMousePosition(event, false);
+            
+            host.dispatchEvent(new org.apache.flex.events.Event('valueChange'));
+        }
+        
+        
+        /**
+         */
+        COMPILE::JS
+        private function calcValFromMousePosition(event:BrowserEvent, useOffset:Boolean):void
+        {
+            var host:Slider = _strand as Slider;
+            var deltaX:Number = (useOffset ? event.offsetX : event.clientX) - origin;
+            var thumbW:int = parseInt(thumb.element.style.width, 10) / 2;
+            var newX:Number = position + deltaX;
+            
+            var p:Number = newX / parseInt(track.element.style.width, 10);
+            var n:Number = p * (host.maximum - host.minimum) +
+                host.minimum;
+            n = host.snap(n);
+            if (n < host.minimum) n = host.minimum;
+            else if (n > host.maximum) n = host.maximum;
+            
+            p = (n - host.minimum) / (host.maximum -
+                host.minimum);
+            newX = p * parseInt(track.element.style.width, 10);
+            
+            thumb.element.style.left = String(newX -
+                parseInt(thumb.element.style.width, 10) / 2) + 'px';
+            
+            host.value = n;
+        }
+    }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4429d78/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as
new file mode 100644
index 0000000..d578b70
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as
@@ -0,0 +1,188 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.views
+{
+	COMPILE::SWF {
+		import flash.display.DisplayObject;
+		import flash.display.Sprite;
+	}
+	
+    import org.apache.flex.core.BeadViewBase;
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadModel;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IRangeModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	
+    import org.apache.flex.mdl.Button;
+    import org.apache.flex.html.beads.ISliderView;
+	
+	/**
+	 *  The SliderView class creates the visual elements of the org.apache.flex.html.Slider

+	 *  component. The Slider has a track and a thumb control which are also created with view
beads.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class SliderView extends BeadViewBase implements ISliderView, IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function SliderView()
+		{
+		}
+		
+		private var rangeModel:IRangeModel;
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			
+			COMPILE::SWF {
+				var s:UIBase = UIBase(_strand);
+				
+				_track = new Button();
+				_track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);
+				_track.className = "SliderTrack";
+				s.addElement(_track);
+				
+				_thumb = new Button();
+				_thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);
+				_thumb.className = "SliderThumb";
+				s.addElement(_thumb);
+				
+			}
+			COMPILE::JS {
+				_track = new Button();
+				//_track.className = "SliderTrack";
+				UIBase(_strand).addElement(_track);
+				
+				_thumb = new Button();
+				//_thumb.className = "SliderThumb";
+				UIBase(_strand).addElement(_thumb);
+			}
+			
+			IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+			IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+			
+			rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
+			
+			// listen for changes to the model and adjust the UI accordingly.
+			IEventDispatcher(rangeModel).addEventListener("valueChange",modelChangeHandler);
+			IEventDispatcher(rangeModel).addEventListener("minimumChange",modelChangeHandler);
+			IEventDispatcher(rangeModel).addEventListener("maximumChange",modelChangeHandler);
+			IEventDispatcher(rangeModel).addEventListener("stepSizeChange",modelChangeHandler);
+			IEventDispatcher(rangeModel).addEventListener("snapIntervalChange",modelChangeHandler);
+			
+			sizeChangeHandler(null);
+		}
+		
+		private var _track:Button;
+		private var _thumb:Button;
+		
+		
+		/**
+		 *  The track component.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get track():IUIBase
+		{
+			return _track;
+		}
+		
+		/**
+		 *  The thumb component.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get thumb():IUIBase
+		{
+			return _thumb;
+		}
+		
+		/**
+		 * @private
+		 */
+		private function sizeChangeHandler( event:Event ) : void
+		{
+			var host:UIBase = UIBase(_strand);
+			var w:Number = host.width;
+			var h:Number = host.height;
+			
+			_thumb.width = 20;
+			_thumb.height = host.height;
+		
+			// the track is inset 1/2 of the thumbwidth so the thumb can
+			// overlay the track on either end with the thumb center being
+			// on the track's edge
+			_track.width = host.width - _thumb.width;
+			_track.height = 5;
+			_track.x = _thumb.width/2;
+			_track.y = (host.height - _track.height)/2;
+			
+			setThumbPositionFromValue(rangeModel.value);
+		}
+		
+		/**
+		 * @private
+		 */
+		private function modelChangeHandler( event:Event ) : void
+		{
+			setThumbPositionFromValue(rangeModel.value);
+		}
+		
+		/**
+		 * @private
+		 */
+		private function setThumbPositionFromValue( value:Number ) : void
+		{
+			var p:Number = (value-rangeModel.minimum)/(rangeModel.maximum-rangeModel.minimum);
+			var xloc:Number = (p*_track.width); 
+			_thumb.x = xloc;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4429d78/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 2894c29..810be12 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
@@ -28,15 +28,15 @@ CheckBox
 Slider
 {
 	IBeadModel: ClassReference("org.apache.flex.html.beads.models.RangeModel");
+	iBeadView:  ClassReference("org.apache.flex.mdl.beads.views.SliderView");
+	iBeadController: ClassReference("org.apache.flex.mdl.beads.controllers.SliderMouseController");
 }
 
-/*Slider
+Slider
 {
-    iBeadView:  ClassReference("org.apache.flex.html.beads.SliderView");
-    iBeadController: ClassReference("org.apache.flex.html.beads.controllers.SliderMouseController");
-    iThumbView: ClassReference("org.apache.flex.html.beads.SliderThumbView");
-    iTrackView: ClassReference("org.apache.flex.html.beads.SliderTrackView");
-}*/
+    iThumbView: ClassReference("org.apache.flex.mdl.beads.SliderThumbView");
+    iTrackView: ClassReference("org.apache.flex.mdl.beads.SliderTrackView");
+}
 
 List
 {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4429d78/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 09f446c..d298d46 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -30,6 +30,10 @@
     <component id="Restrict" class="org.apache.flex.mdl.beads.Restrict"/>
     <component id="Disabled" class="org.apache.flex.mdl.beads.Disabled"/>
     <component id="Slider" class="org.apache.flex.mdl.Slider"/>
+    <component id="SliderView" class="org.apache.flex.mdl.beads.views.SliderView"/>
+    <component id="SliderTrackView" class="org.apache.flex.mdl.beads.SliderTrackView"/>
+    <component id="SliderThumbView" class="org.apache.flex.mdl.beads.SliderThumbView"/>
+    <component id="SliderMouseController" class="org.apache.flex.mdl.beads.controllers.SliderMouseController"/>
     <component id="Badge" class="org.apache.flex.mdl.beads.Badge"/>
     <component id="Menu" class="org.apache.flex.mdl.Menu"/>
     <component id="MenuItem" class="org.apache.flex.mdl.MenuItem"/>


Mime
View raw message