This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/themes
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit 8d7680898d39b46894c554010c0aec37987d780d
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Thu Feb 8 20:08:43 2018 +0100

    including slider
---
 .../src/main/royale/ButtonPlayGround.mxml          |  11 +-
 .../projects/Vivid/src/main/resources/defaults.css |  27 ++
 .../Vivid/src/main/resources/vivid-manifest.xml    |   4 +
 .../projects/Vivid/src/main/royale/VividClasses.as |  12 +
 .../main/royale/org/apache/royale/vivid/Slider.as  | 194 +++++++++++++
 .../apache/royale/vivid/beads/SliderThumbView.as   | 121 ++++++++
 .../apache/royale/vivid/beads/SliderTrackView.as   | 121 ++++++++
 .../org/apache/royale/vivid/beads/SliderView.as    | 172 ++++++++++++
 .../beads/controllers/HSliderMouseController.as    | 307 +++++++++++++++++++++
 .../beads/controllers/VSliderMouseController.as    | 291 +++++++++++++++++++
 .../vivid/beads/layouts/HorizontalSliderLayout.as  | 138 +++++++++
 .../vivid/beads/layouts/VerticalSliderLayout.as    | 137 +++++++++
 12 files changed, 1530 insertions(+), 5 deletions(-)

diff --git a/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml 
b/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml
index f51eabf..a3bf90e 100644
--- a/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml
@@ -18,20 +18,21 @@ limitations under the License.
 
 -->
 <js:Group xmlns:fx="http://ns.adobe.com/mxml/2009";
-                 xmlns:js="library://ns.apache.org/royale/basic" >
+                 xmlns:js="library://ns.apache.org/royale/basic"
+                 xmlns:v="library://ns.apache.org/royale/vivid">
     
        <fx:Script>
                <![CDATA[
         private function onValueChange(event:Event):void
         {
-        //    button.width = slider.value;
+               button.width = slider.value;
         }
        ]]>
        </fx:Script>
        
-       <js:TextButton id="button" text="Button" width="120" height="40"/>
+       <v:Button id="button" text="Button" width="120" height="40"/>
 
-       <!--<js:Slider id="slider" width="250" value="120" minimum="50" 
maximum="250"
-                       valueChange="onValueChange(event)"/>-->
+       <v:Slider id="slider" width="250" value="120" minimum="50" maximum="250"
+                               valueChange="onValueChange(event)"/>
 
 </js:Group>
diff --git a/frameworks/projects/Vivid/src/main/resources/defaults.css 
b/frameworks/projects/Vivid/src/main/resources/defaults.css
index 6a4624a..7118c05 100644
--- a/frameworks/projects/Vivid/src/main/resources/defaults.css
+++ b/frameworks/projects/Vivid/src/main/resources/defaults.css
@@ -49,6 +49,33 @@ Button:active {
 }
 
 /*
+* Vivid Slider
+*/
+Slider
+{
+       IBeadModel: 
ClassReference("org.apache.royale.html.beads.models.RangeModel");
+       IBeadView:  ClassReference("org.apache.royale.vivid.beads.SliderView");
+       IBeadLayout: 
ClassReference("org.apache.royale.vivid.beads.layouts.HorizontalSliderLayout");
+       IBeadController: 
ClassReference("org.apache.royale.vivid.beads.controllers.HSliderMouseController");
+       position: relative;
+}
+.SliderTrack {
+       position: absolute;
+}
+.SliderThumb {
+       position: absolute;
+}
+
+@media -royale-swf
+{
+    Slider
+       {
+               iThumbView: 
ClassReference("org.apache.royale.vivid.beads.SliderThumbView");
+               iTrackView: 
ClassReference("org.apache.royale.vivid.beads.SliderTrackView");
+       }
+}
+
+/*
 * Vivid TextInput
 */
 
diff --git a/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml 
b/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
index 616b9d7..248f2b4 100644
--- a/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
+++ b/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
@@ -23,5 +23,9 @@
 
     <component id="Application" class="org.apache.royale.vivid.Application"/>
     <component id="Button" class="org.apache.royale.vivid.Button"/>
+    <component id="Slider" class="org.apache.royale.vivid.Slider"/>
+    <component id="VerticalSliderLayout" 
class="org.apache.royale.vivid.beads.layouts.VerticalSliderLayout" />
+    <component id="HorizontalSliderLayout" 
class="org.apache.royale.vivid.beads.layouts.HorizontalSliderLayout" />
+    
 
 </componentPackage>
diff --git a/frameworks/projects/Vivid/src/main/royale/VividClasses.as 
b/frameworks/projects/Vivid/src/main/royale/VividClasses.as
index 35fb517..460187a 100644
--- a/frameworks/projects/Vivid/src/main/royale/VividClasses.as
+++ b/frameworks/projects/Vivid/src/main/royale/VividClasses.as
@@ -27,6 +27,18 @@ package
      */
     internal class VividClasses
     {
+        import org.apache.royale.vivid.beads.SliderView; SliderView;
+           import 
org.apache.royale.vivid.beads.layouts.HorizontalSliderLayout; 
HorizontalSliderLayout;
+           import org.apache.royale.vivid.beads.layouts.VerticalSliderLayout; 
VerticalSliderLayout;
+        import 
org.apache.royale.vivid.beads.controllers.HSliderMouseController; 
HSliderMouseController;
+           import 
org.apache.royale.vivid.beads.controllers.VSliderMouseController; 
VSliderMouseController;
+       
+        COMPILE::SWF
+           {
+            import org.apache.royale.vivid.beads.SliderThumbView; 
SliderThumbView;
+            import org.apache.royale.vivid.beads.SliderTrackView; 
SliderTrackView;
+        }
+
     }
 
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/Slider.as 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/Slider.as
new file mode 100644
index 0000000..858ad31
--- /dev/null
+++ 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/Slider.as
@@ -0,0 +1,194 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.royale.vivid
+{
+       import org.apache.royale.core.IRangeModel;
+       import org.apache.royale.core.UIBase;
+
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+               import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+       [Event(name="valueChange", type="org.apache.royale.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:
+        *
+        *  org.apache.royale.core.IBeadModel: the data model, typically an 
IRangeModel, that holds the Slider values.
+        *  org.apache.royale.core.IBeadView:  the bead that constructs the 
visual parts of the Slider.
+        *  org.apache.royale.core.IBeadController: the bead that handles input.
+        *  org.apache.royale.core.IThumbValue: the bead responsible for the 
display of the thumb control.
+        *  org.apache.royale.core.ITrackView: the bead responsible for the 
display of the track.
+        *
+     *  @toplevel
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.9.2
+        */
+       public class Slider extends UIBase
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9.2
+                */
+               public function Slider()
+               {
+                       super();
+
+                       className = "Slider";
+
+                       IRangeModel(model).value = 0;
+                       IRangeModel(model).minimum = 0;
+                       IRangeModel(model).maximum = 100;
+                       IRangeModel(model).stepSize = 1;
+                       IRangeModel(model).snapInterval = 1;
+               }
+
+               /**
+                *  The current value of the Slider.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+               [Bindable("valueChange")]
+               public function get value():Number
+               {
+                       return IRangeModel(model).value;
+               }
+               public function set value(newValue:Number):void
+               {
+                       IRangeModel(model).value = newValue;
+               }
+
+               /**
+                *  The minimum value of the Slider.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+               public function get minimum():Number
+               {
+                       return IRangeModel(model).minimum;
+               }
+               public function set minimum(value:Number):void
+               {
+                       IRangeModel(model).minimum = value;
+               }
+
+               /**
+                *  The maximum value of the Slider.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+               public function get maximum():Number
+               {
+                       return IRangeModel(model).maximum;
+               }
+               public function set maximum(value:Number):void
+               {
+                       IRangeModel(model).maximum = value;
+               }
+
+               /**
+                *  The modulus of the Slider value. The thumb will be 
positioned
+                *  at the nearest multiple of this value.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+               public function get snapInterval():Number
+               {
+                       return IRangeModel(model).snapInterval;
+               }
+               public function set snapInterval(value:Number):void
+               {
+                       IRangeModel(model).snapInterval = value;
+               }
+
+               /**
+                *  The amount to move the thumb when the track is selected. 
This value is
+                *  adjusted to fit the nearest snapInterval.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+        public function get stepSize():Number
+        {
+            return IRangeModel(model).stepSize;
+        }
+        public function set stepSize(value:Number):void
+        {
+            IRangeModel(model).stepSize = value;
+        }
+
+        /**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+                       addElementToWrapper(this,'div');
+
+                       // just to give it some default values
+            element.style.width = '100px';
+            element.style.height = '30px';
+            className = 'Slider';
+            return element;
+        }
+
+        /**
+                * @private
+         */
+        COMPILE::JS
+        public function snap(value:Number):Number
+        {
+            var si:Number = snapInterval;
+            var n:Number = Math.round((value - minimum) / si) *
+                si + minimum;
+            if (value > 0)
+            {
+                if (value - n < n + si - value)
+                    return n;
+                return n + si;
+            }
+            if (value - n > n + si - value)
+                return n + si;
+            return n;
+        }
+    }
+}
diff --git 
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/SliderThumbView.as
 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/SliderThumbView.as
new file mode 100644
index 0000000..cb2768b
--- /dev/null
+++ 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/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.royale.vivid.beads
+{
+       import flash.display.Graphics;
+       import flash.display.Shape;
+       import flash.display.SimpleButton;
+
+    import org.apache.royale.core.BeadViewBase;
+    import org.apache.royale.core.IBeadView;
+    import org.apache.royale.core.IStrand;
+       import org.apache.royale.html.Button;
+    import org.apache.royale.events.Event;
+    import org.apache.royale.events.IEventDispatcher;
+    import org.apache.royale.core.IChild;
+       
+       /**
+        *  The SliderThumbView class creates the draggable input element for 
the 
+        *  org.apache.royale.html.Slider component.
+        *  
+        *  @viewbead
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.0
+        */
+       public class SliderThumbView extends BeadViewBase implements IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 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.royale.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+         *  @royaleignoreimport org.apache.royale.core.WrappedHTMLElement
+         *  @royaleignorecoercion org.apache.royale.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);
+               }
+       }
+}
diff --git 
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/SliderTrackView.as
 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/SliderTrackView.as
new file mode 100644
index 0000000..4b40230
--- /dev/null
+++ 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/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.royale.vivid.beads
+{
+       import flash.display.Graphics;
+       import flash.display.Shape;
+       import flash.display.SimpleButton;                      
+       
+       import org.apache.royale.core.BeadViewBase;
+       import org.apache.royale.core.IBeadView;
+       import org.apache.royale.core.IStrand;
+       import org.apache.royale.core.UIBase;
+       import org.apache.royale.html.Button;
+       import org.apache.royale.events.Event;
+       import org.apache.royale.events.IEventDispatcher;
+       import org.apache.royale.core.IChild;
+       
+       /**
+        *  The SliderTrackView class creates the track area for the 
org.apache.royale.html.Slider
+        *  component.
+        *  
+        *  @viewbead
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.0
+        */
+       public class SliderTrackView extends BeadViewBase implements IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 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.royale.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+         *  @royaleignorecoercion org.apache.royale.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);
+               }
+       }
+}
diff --git 
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/SliderView.as
 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/SliderView.as
new file mode 100644
index 0000000..cc18c9d
--- /dev/null
+++ 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/SliderView.as
@@ -0,0 +1,172 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.royale.vivid.beads
+{
+       COMPILE::SWF {
+               import flash.display.DisplayObject;
+               import flash.display.Sprite;
+       }
+       
+    import org.apache.royale.html.beads.ISliderView;
+    import org.apache.royale.core.BeadViewBase;
+    import org.apache.royale.core.IBead;
+    import org.apache.royale.core.IBeadLayout;
+    import org.apache.royale.core.IBeadModel;
+    import org.apache.royale.core.IBeadView;
+    import org.apache.royale.core.IRangeModel;
+    import org.apache.royale.core.IStrand;
+    import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.UIBase;
+    import org.apache.royale.core.ValuesManager;
+    import org.apache.royale.events.Event;
+    import org.apache.royale.events.IEventDispatcher;
+    import org.apache.royale.html.Button;
+    import org.apache.royale.html.TextButton;
+       
+       /**
+        *  The SliderView class creates the visual elements of the 
org.apache.royale.html.Slider 
+        *  component. The Slider has a track and a thumb control which are 
also created with view beads.
+        *  
+        *  @viewbead
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.0
+        */
+       public class SliderView extends BeadViewBase implements ISliderView, 
IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+               public function SliderView()
+               {
+               }
+               
+               private var rangeModel:IRangeModel;
+               
+               /**
+                *  @copy org.apache.royale.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+               override public function set strand(value:IStrand):void
+               {
+                       super.strand = value;
+                       
+                       var layout:IBeadLayout = 
_strand.getBeadByType(IBeadLayout) as IBeadLayout;
+                       if (layout == null) {
+                               var klass:Class = 
ValuesManager.valuesImpl.getValue(_strand, "iBeadLayout");
+                               _strand.addBead(new klass() as IBead);
+                       }
+                       
+                       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 TextButton();
+                               _thumb.text = '\u29BF';
+                               _thumb.addBead(new 
(ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);
+                               _thumb.className = "SliderThumb";
+                               s.addElement(_thumb);
+                               
+                       }
+                       COMPILE::JS {
+                               _track = new Button();
+                               _track.className = "SliderTrack";
+                               host.addElement(_track);
+                               
+                               _thumb = new TextButton();
+                               _thumb.className = "SliderThumb";
+                               _thumb.text = '\u29BF';
+                               host.addElement(_thumb);
+                       }
+                       
+                       rangeModel = _strand.getBeadByType(IBeadModel) as 
IRangeModel;
+
+                       var rm:IEventDispatcher = rangeModel as 
IEventDispatcher;
+                       
+                       // listen for changes to the model and adjust the UI 
accordingly.
+                       rm.addEventListener("valueChange",modelChangeHandler);
+                       rm.addEventListener("minimumChange",modelChangeHandler);
+                       rm.addEventListener("maximumChange",modelChangeHandler);
+                       
rm.addEventListener("stepSizeChange",modelChangeHandler);
+                       
rm.addEventListener("snapIntervalChange",modelChangeHandler);
+                       
+                       (_strand as IEventDispatcher).dispatchEvent(new 
Event("layoutNeeded"));
+               }
+               
+               private var _track:Button;
+               private var _thumb:TextButton;
+               
+               
+               /**
+                *  The track component.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+               public function get track():IUIBase
+               {
+                       return _track;
+               }
+               
+               /**
+                *  The thumb component.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+               public function get thumb():IUIBase
+               {
+                       return _thumb;
+               }
+               
+               /**
+                * @royaleignorecoercion org.apache.royale.core.UIBase
+                */
+               private function get host():UIBase
+               {
+                       return _strand as UIBase;
+               }
+               
+               /**
+                * @private
+                */
+               private function modelChangeHandler( event:Event ) : void
+               {
+                       (_strand as IEventDispatcher).dispatchEvent(new 
Event("layoutNeeded"));
+               }
+       }
+}
diff --git 
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/controllers/HSliderMouseController.as
 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/controllers/HSliderMouseController.as
new file mode 100644
index 0000000..d0053cc
--- /dev/null
+++ 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/controllers/HSliderMouseController.as
@@ -0,0 +1,307 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.royale.vivid.beads.controllers
+{
+       import org.apache.royale.collections.parsers.JSONInputParser;
+       import org.apache.royale.core.IBead;
+       import org.apache.royale.core.IBeadController;
+       import org.apache.royale.core.IRangeModel;
+       import org.apache.royale.core.IStrand;
+       import org.apache.royale.core.UIBase;
+       import org.apache.royale.events.Event;
+       import org.apache.royale.events.IEventDispatcher;
+       import org.apache.royale.events.MouseEvent;
+       import org.apache.royale.events.ValueChangeEvent;
+       import org.apache.royale.geom.Point;
+       import org.apache.royale.html.beads.ISliderView;
+
+    COMPILE::JS
+    {
+        import goog.events;
+        import goog.events.EventType;
+        import org.apache.royale.events.BrowserEvent;
+        import org.apache.royale.html.Slider;
+    }
+       
+       /**
+        *  The HSliderMouseController class bead handles mouse events on the 
+        *  org.apache.royale.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). Use
+        *  this controller for horizontally oriented Sliders.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.0
+        */
+       public class HSliderMouseController implements IBead, IBeadController
+       {
+               /**
+                *  constructor.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.0
+                */
+               public function HSliderMouseController()
+               {
+               }
+               
+               private var rangeModel:IRangeModel;
+               
+               private var _strand:IStrand;
+
+               private var oldValue:Number;
+                               
+               /**
+                *  @copy org.apache.royale.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 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);
+                       oldValue = rangeModel.value;
+               }
+               
+               /**
+                * @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);
+                       
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, 
rangeModel.value);
+                       IEventDispatcher(_strand).dispatchEvent(vce);
+               }
+               
+        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;
+               
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n);
+                       rangeModel.value = n;
+                       
+                       IEventDispatcher(_strand).dispatchEvent(vce);
+               }
+               
+               /**
+                * @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;
+                       
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n);
+                       rangeModel.value = n;
+                       
+                       IEventDispatcher(_strand).dispatchEvent(vce);
+               }
+        
+        /**
+                * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+         */
+        COMPILE::JS
+        private function handleTrackClick(event:MouseEvent):void
+        {
+                       var bevent:BrowserEvent = event["wrappedEvent"] as 
BrowserEvent;
+            var host:Slider = _strand as Slider;
+            var xloc:Number = bevent.offsetX;
+                       var useWidth:Number = 
parseInt(track.element.style.width, 10) * 1.0;
+            var p:Number = xloc / useWidth;
+                       var n:Number = p*(rangeModel.maximum - 
rangeModel.minimum) + rangeModel.minimum;
+            
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n);
+            rangeModel.value = n;
+            
+            host.dispatchEvent(vce);
+        }
+        
+        
+        /**
+                * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+         */
+        COMPILE::JS
+        private function handleThumbDown(event:MouseEvent):void
+        {
+                       var bevent:BrowserEvent = event["wrappedEvent"] as 
BrowserEvent;
+            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);
+                       goog.events.listen(host.element, 
goog.events.EventType.MOUSELEAVE,
+                               handleThumbLeave, false, this);
+            
+            mouseOrigin = bevent.screenX; //.clientX;
+            thumbOrigin = parseInt(thumb.element.style.left, 10);
+            oldValue = rangeModel.value;
+        }
+        
+        COMPILE::JS
+        private var mouseOrigin:Number;
+        COMPILE::JS
+        private var thumbOrigin:int;
+        
+        /**
+                * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+         */
+        COMPILE::JS
+        private function handleThumbUp(event:MouseEvent):void
+        {
+                       var bevent:BrowserEvent = event["wrappedEvent"] as 
BrowserEvent;
+            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);
+                       goog.events.unlisten(host.element, 
goog.events.EventType.MOUSELEAVE,
+                               handleThumbLeave, false, this);
+            
+            calcValFromMousePosition(bevent, false);
+            var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, 
rangeModel.value);
+            
+            host.dispatchEvent(vce);
+        }
+        
+        
+        /**
+                * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+         */
+        COMPILE::JS
+        private function handleThumbMove(event:MouseEvent):void
+        {
+                       var bevent:BrowserEvent = event["wrappedEvent"] as 
BrowserEvent;
+            var host:Slider = _strand as Slider;
+            var lastValue:Number = rangeModel.value;
+            calcValFromMousePosition(bevent, false);
+            
+            var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", lastValue, 
rangeModel.value);
+            
+            host.dispatchEvent(vce);
+        }
+               
+               COMPILE::JS
+               private function handleThumbLeave(event:MouseEvent):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);
+                       goog.events.unlisten(host.element, 
goog.events.EventType.MOUSELEAVE,
+                               handleThumbLeave, false, this);
+               }
+        
+        
+        /**
+         */
+        COMPILE::JS
+        private function calcValFromMousePosition(event:BrowserEvent, 
useOffset:Boolean):void
+        {
+            var deltaX:Number = event.screenX - mouseOrigin;
+                       if (deltaX == 0) return;
+                       
+            var thumbW:int = parseInt(thumb.element.style.width, 10) / 2;
+                       var newPointX:Number = thumbOrigin + deltaX;
+                       
+                       var useWidth:Number = 
parseInt(track.element.style.width,10) * 1.0;
+                       var p:Number = newPointX / useWidth;
+                       var n:Number = p*(rangeModel.maximum - 
rangeModel.minimum) + rangeModel.minimum;
+            
+                       rangeModel.value = n;
+        }
+    }
+}
diff --git 
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/controllers/VSliderMouseController.as
 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/controllers/VSliderMouseController.as
new file mode 100644
index 0000000..23b8313
--- /dev/null
+++ 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/controllers/VSliderMouseController.as
@@ -0,0 +1,291 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.royale.vivid.beads.controllers
+{
+       import org.apache.royale.collections.parsers.JSONInputParser;
+       import org.apache.royale.core.IBead;
+       import org.apache.royale.core.IBeadController;
+       import org.apache.royale.core.IRangeModel;
+       import org.apache.royale.core.IStrand;
+       import org.apache.royale.core.UIBase;
+       import org.apache.royale.events.Event;
+       import org.apache.royale.events.IEventDispatcher;
+       import org.apache.royale.events.MouseEvent;
+       import org.apache.royale.events.ValueChangeEvent;
+       import org.apache.royale.geom.Point;
+       import org.apache.royale.html.beads.ISliderView;
+       
+       COMPILE::JS
+       {
+               import goog.events;
+               import goog.events.EventType;
+               import org.apache.royale.events.BrowserEvent;
+               import org.apache.royale.html.Slider;
+       }
+       
+       /**
+        *  The VSliderMouseController class bead handles mouse events on the 
+        *  org.apache.royale.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). Use
+        *  this controller for vertically oriented Sliders.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.9
+        */
+       public class VSliderMouseController implements IBead, IBeadController
+       {
+               /**
+                * Constructor
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9
+                */
+               public function VSliderMouseController()
+               {
+               }
+               
+               private var rangeModel:IRangeModel;
+               
+               private var _strand:IStrand;
+               
+               private var oldValue:Number;
+               
+               /**
+                *  @copy org.apache.royale.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9
+                */
+               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;
+               
+               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);
+                       oldValue = rangeModel.value;
+               }
+               
+               COMPILE::SWF
+               private function thumbUpHandler( event:MouseEvent ) : void
+               {
+                       
UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_MOVE,
 thumbMoveHandler);
+                       
UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_UP, 
thumbUpHandler);
+                       
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, 
rangeModel.value);
+                       IEventDispatcher(_strand).dispatchEvent(vce);
+               }
+               
+               COMPILE::SWF
+               private var origin:Point;
+               COMPILE::SWF
+               private var thumb:Point;
+               
+               COMPILE::SWF
+               private function thumbMoveHandler( event:MouseEvent ) : void
+               {
+                       var sliderView:ISliderView = 
_strand.getBeadByType(ISliderView) as ISliderView;
+                       
+                       var deltaY:Number = event.screenY - origin.y;
+                       var thumbH:Number = sliderView.thumb.height/2;
+                       var newY:Number = thumb.y + deltaY;
+                       
+                       var p:Number = newY/sliderView.track.height;
+                       var n:Number = p*(rangeModel.maximum - 
rangeModel.minimum) + rangeModel.minimum;
+                       
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n);
+                       rangeModel.value = n;
+                       
+                       IEventDispatcher(_strand).dispatchEvent(vce);
+               }
+               
+               COMPILE::SWF
+               private function trackClickHandler( event:MouseEvent ) : void
+               {
+                       event.stopImmediatePropagation();
+                       
+                       var sliderView:ISliderView = 
_strand.getBeadByType(ISliderView) as ISliderView;
+                       
+                       var yloc:Number = event.localY;
+                       var p:Number = yloc/sliderView.track.height;
+                       var n:Number = p*(rangeModel.maximum - 
rangeModel.minimum) + rangeModel.minimum;
+                       
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n);
+                       rangeModel.value = n;
+                       
+                       IEventDispatcher(_strand).dispatchEvent(vce);
+               }
+               
+               /**
+                * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+                */
+               COMPILE::JS
+               private function handleTrackClick(event:MouseEvent):void
+               {
+                       var bevent:BrowserEvent = event["wrappedEvent"] as 
BrowserEvent;
+                       var host:Slider = _strand as Slider;
+                       var yloc:Number = bevent.offsetY;
+                       var useHeight:Number = 
parseInt(track.element.style.height, 10) * 1.0;
+                       var p:Number = yloc / useHeight;
+                       var n:Number = p*(rangeModel.maximum - 
rangeModel.minimum) + rangeModel.minimum;
+                       
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n);
+                       rangeModel.value = n;
+                       
+                       host.dispatchEvent(vce);
+               }
+               
+               /**
+                * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+                */
+               COMPILE::JS
+               private function handleThumbDown(event:MouseEvent):void
+               {
+                       var bevent:BrowserEvent = event["wrappedEvent"] as 
BrowserEvent;
+                       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);
+                       goog.events.listen(host.element, 
goog.events.EventType.MOUSELEAVE,
+                               handleThumbLeave, false, this);
+                       
+                       mouseOrigin = bevent.screenY; //.clientY;
+                       thumbOrigin = parseInt(thumb.element.style.top, 10);
+                       oldValue = rangeModel.value;
+               }
+               
+               COMPILE::JS
+               private var mouseOrigin:Number;
+               COMPILE::JS
+               private var thumbOrigin:int;
+               
+               /**
+                * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+                */
+               COMPILE::JS
+               private function handleThumbUp(event:MouseEvent):void
+               {
+                       var bevent:BrowserEvent = event["wrappedEvent"] as 
BrowserEvent;
+                       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);
+                       goog.events.unlisten(host.element, 
goog.events.EventType.MOUSELEAVE,
+                               handleThumbLeave, false, this);
+                       
+                       calcValFromMousePosition(bevent, false);
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, 
rangeModel.value);
+                       
+                       host.dispatchEvent(vce);
+               }
+               
+               /**
+                * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+                */
+               COMPILE::JS
+               private function handleThumbMove(event:MouseEvent):void
+               {
+                       var bevent:BrowserEvent = event["wrappedEvent"] as 
BrowserEvent;
+                       var host:Slider = _strand as Slider;
+                       var lastValue:Number = rangeModel.value;
+                       calcValFromMousePosition(bevent, false);
+                       
+                       var vce:ValueChangeEvent = 
ValueChangeEvent.createUpdateEvent(_strand, "value", lastValue, 
rangeModel.value);
+                       
+                       host.dispatchEvent(vce);
+               }
+               
+               COMPILE::JS
+               private function handleThumbLeave(event:MouseEvent):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);
+                       goog.events.unlisten(host.element, 
goog.events.EventType.MOUSELEAVE,
+                               handleThumbLeave, false, this);
+               }
+               
+               COMPILE::JS
+               private function calcValFromMousePosition(event:BrowserEvent, 
useOffset:Boolean):void
+               {
+                       var deltaY:Number = event.screenY - mouseOrigin;
+                       if (deltaY == 0) return;
+                       
+                       var thumbH:int = parseInt(thumb.element.style.height, 
10) / 2;
+                       var newPointY:Number = thumbOrigin + deltaY;
+                       
+                       var useHeight:Number = 
parseInt(track.element.style.height,10) * 1.0;
+                       var p:Number = newPointY / useHeight;
+                       var n:Number = p*(rangeModel.maximum - 
rangeModel.minimum) + rangeModel.minimum;
+                       
+                       rangeModel.value = n;
+               }
+       }
+}
\ No newline at end of file
diff --git 
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/layouts/HorizontalSliderLayout.as
 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/layouts/HorizontalSliderLayout.as
new file mode 100644
index 0000000..5e56f5d
--- /dev/null
+++ 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/layouts/HorizontalSliderLayout.as
@@ -0,0 +1,138 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.royale.vivid.beads.layouts
+{
+       import org.apache.royale.core.IBeadLayout;
+       import org.apache.royale.core.IRangeModel;
+       import org.apache.royale.core.IStrand;
+       import org.apache.royale.core.IUIBase;
+       import org.apache.royale.core.UIBase;
+       import org.apache.royale.events.Event;
+       import org.apache.royale.events.IEventDispatcher;
+       import org.apache.royale.html.beads.ISliderView;
+       
+       /**
+        * Use the HorizontalSliderLayout with a Slider to orient the Slider
+        * horizontally.
+        * 
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.9
+        */
+       public class HorizontalSliderLayout implements IBeadLayout
+       {
+               /**
+                * Constructor
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9
+                */
+               public function HorizontalSliderLayout()
+               {
+               }
+               
+               private var _strand:IStrand;
+               
+               /**
+                * @see org.apache.royale.core.IStrand
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9
+                */
+               public function set strand(value:IStrand):void
+               {
+                       _strand = value;
+                       
+                       host.addEventListener("layoutNeeded", performLayout);
+                       
+                       host.addEventListener("widthChanged",performLayout);
+                       host.addEventListener("heightChanged",performLayout);
+               }
+               
+               /**
+                * @private
+                */
+               private function performLayout(event:Event):void
+               {
+                       layout();
+               }
+               
+               /**
+                * @private
+                */
+               public function get host():UIBase
+               {
+                       return _strand as UIBase;
+               }
+               
+               /**
+                * Performs the layout (size and positioning) of the elements 
of the slider.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9
+                */
+               public function layout():Boolean
+               {
+                       var viewBead:ISliderView = host.view as ISliderView;
+                       if (viewBead == null) {
+                               return false;
+                       }
+                       
+                       var useWidth:Number = host.width;
+                       if (isNaN(useWidth)) {
+                               useWidth = 100;
+                       }
+                       var useHeight:Number = host.height;
+                       if (isNaN(useHeight)) {
+                               useHeight = 25;
+                       }
+                       var square:Number = Math.min(useWidth, useHeight);
+                       var trackHeight:Number = useHeight / 3;
+                       
+                       var thumb:IUIBase = viewBead.thumb as IUIBase;
+                       thumb.width = square;
+                       thumb.height = square;
+                       
+                       var track:IUIBase = viewBead.track as IUIBase;
+                       track.x = square/2;
+                       track.y = trackHeight; // 1/3 of the totalHeight
+                       track.width = useWidth - square;
+                       track.height = trackHeight;
+                       
+                       // determine the thumb position from the model 
information
+                       var model:IRangeModel = host.model as IRangeModel;
+                       var value:Number = model.value;
+                       if (value < model.minimum) value = model.minimum;
+                       if (value > model.maximum) value = model.maximum;
+                       var p:Number = 
(value-model.minimum)/(model.maximum-model.minimum);
+                       var xloc:Number = p * (useWidth - square);
+                       thumb.x = xloc;
+                       thumb.y = 0;
+                       
+                       return true;
+               }
+       }
+}
\ No newline at end of file
diff --git 
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/layouts/VerticalSliderLayout.as
 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/layouts/VerticalSliderLayout.as
new file mode 100644
index 0000000..3089cd1
--- /dev/null
+++ 
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/layouts/VerticalSliderLayout.as
@@ -0,0 +1,137 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.royale.vivid.beads.layouts
+{
+       import org.apache.royale.core.IBeadLayout;
+       import org.apache.royale.core.IRangeModel;
+       import org.apache.royale.core.IStrand;
+       import org.apache.royale.core.IUIBase;
+       import org.apache.royale.core.UIBase;
+       import org.apache.royale.events.Event;
+       import org.apache.royale.html.beads.ISliderView;
+       
+       /**
+        * Use the VerticalSliderLayout with a Slider to orient the
+        * slider vertically.
+        * 
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.9
+        */
+       public class VerticalSliderLayout implements IBeadLayout
+       {
+               /**
+                * Constructor
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9
+                */
+               public function VerticalSliderLayout()
+               {
+               }
+               
+               private var _strand:IStrand;
+               
+               /**
+                * @see org.apache.royale.core.IStrand
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9
+                */
+               public function set strand(value:IStrand):void
+               {
+                       _strand = value;
+                       
+                       host.addEventListener("layoutNeeded", performLayout);
+                       
+                       host.addEventListener("widthChanged",performLayout);
+                       host.addEventListener("heightChanged",performLayout);
+               }
+               
+               /**
+                * @private
+                */
+               private function performLayout(event:Event):void
+               {
+                       layout();
+               }
+               
+               /**
+                * @private
+                */
+               public function get host():UIBase
+               {
+                       return _strand as UIBase;
+               }
+               
+               /**
+                * Performs the layout (size and positioning) of the Slide 
elements.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9
+                */
+               public function layout():Boolean
+               {
+                       var viewBead:ISliderView = host.view as ISliderView;
+                       if (viewBead == null) {
+                               return false;
+                       }
+                       
+                       var useWidth:Number = host.width;
+                       if (isNaN(useWidth)) {
+                               useWidth = 25;
+                       }
+                       var useHeight:Number = host.height;
+                       if (isNaN(useHeight)) {
+                               useHeight = 100;
+                       }
+                       var square:Number = Math.min(useWidth, useHeight);
+                       var trackWidth:Number = useWidth / 3;
+                       
+                       var thumb:IUIBase = viewBead.thumb as IUIBase;
+                       thumb.width = square;
+                       thumb.height = square;
+                       
+                       var track:IUIBase = viewBead.track as IUIBase;
+                       track.y = square/2;
+                       track.x = trackWidth; // 1/3 of the totalWidth
+                       track.height = useHeight - square;
+                       track.width = trackWidth;
+                       
+                       // determine the thumb position from the model 
information
+                       var model:IRangeModel = host.model as IRangeModel;
+                       var value:Number = model.value;
+                       if (value < model.minimum) value = model.minimum;
+                       if (value > model.maximum) value = model.maximum;
+                       var p:Number = 
(value-model.minimum)/(model.maximum-model.minimum);
+                       var yloc:Number = p * (useHeight - square);
+                       thumb.y = yloc;
+                       thumb.x = 0;
+                       
+                       return true;
+               }
+       }
+}
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
carlosrov...@apache.org.

Reply via email to