royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 36/49: - Change slider to input range (but still is unfinished , no events), and CSS compilation give problem (reported as issues) - CheckBox and Radio Button still need more progress, but still fins problems in CSS compilation that needs to be solved
Date Tue, 27 Mar 2018 08:32:31 GMT
This is an automated email from the ASF dual-hosted git repository.

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

commit f1283ac45f62e7207f9a9bb6be53a81e5afbd67c
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Fri Mar 23 00:13:36 2018 +0100

    - Change slider to input range (but still is unfinished , no events), and CSS compilation
give problem (reported as issues)
    - CheckBox and Radio Button still need more progress, but still fins problems in CSS compilation
that needs to be solved
---
 .../src/main/royale/TextInputPlayGround.mxml       |   2 +-
 .../projects/Jewel/src/main/resources/defaults.css |   4 +-
 .../Jewel/src/main/resources/jewel-manifest.xml    |   1 +
 .../projects/Jewel/src/main/royale/JewelClasses.as |   4 +-
 .../royale/org/apache/royale/jewel/CheckBox.as     |   4 +-
 .../royale/org/apache/royale/jewel/RadioButton.as  |   1 +
 .../main/royale/org/apache/royale/jewel/Slider.as  | 145 +++++++++-
 .../royale/org/apache/royale/jewel/TextField.as    |  23 +-
 .../org/apache/royale/jewel/beads/SliderView.as    |   5 +-
 .../beads/controllers/SliderMouseController.as     | 307 +++++++++++++++++++++
 .../jewel/beads/layouts/HorizontalSliderLayout.as  | 144 ++++++++++
 .../royale/jewel/supportClasses/TextFieldBase.as   |  38 ++-
 .../Jewel/src/main/sass/components/_slider.sass    |   4 +-
 .../JewelTheme/src/main/resources/defaults.css     |  95 +++++--
 .../src/main/sass/components/_button.sass          |   2 +
 .../src/main/sass/components/_checkbox.sass        |  26 +-
 .../src/main/sass/components/_radiobutton.sass     |  24 +-
 .../src/main/sass/components/_slider.sass          |  32 ++-
 .../src/main/sass/components/_textbutton.sass      |   1 +
 .../src/main/sass/components/_textfield.sass       |  54 ++--
 20 files changed, 816 insertions(+), 100 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index e5a1021..6880431 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -34,7 +34,7 @@ limitations under the License.
 			<j:HorizontalLayoutWithPaddingAndGap gap="10"/>
 		</js:beads>
 		<j:TextButton text="Check it!" primary="true"/>
-		<j:TextField text="A TextField"/>
+		<j:TextField text="A TextField" primary="true"/>
 	</js:Group>
 
 	<js:Group>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 627c8e3..ed036f4 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -53,8 +53,8 @@ Label {
 Slider {
   IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
   IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
-  IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
-  IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout");
+  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController");
 }
 
 .SliderTrack {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 7799373..029c767 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -37,6 +37,7 @@
     <component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap"/>
     <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
 
+    <component id="HorizontalSliderLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout"
/>
     <!-- <component id="JewelLabelViewBead" class="org.apache.royale.jewel.beads.views.JewelLabelViewBead"/>
-->
     
 </componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 41f586d..3860218 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -28,7 +28,9 @@ package
     internal class JewelClasses
     {
         import org.apache.royale.jewel.beads.SliderView; SliderView;
-	    
+        import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
+	    import org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout; HorizontalSliderLayout;
+
         COMPILE::SWF
 	    {
             import org.apache.royale.html.beads.TextFieldView; TextFieldView;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
index ee8dbff..3eb4807 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
@@ -84,11 +84,11 @@ package org.apache.royale.jewel
             
             input = document.createElement('input') as HTMLInputElement;
             input.type = 'checkbox';    
-            //input.className = 'input';
+            input.className = 'input';
             label.appendChild(input);
             
             checkbox = document.createElement('span') as HTMLSpanElement;
-            //checkbox.className = 'label';
+            checkbox.className = 'span';
             label.appendChild(checkbox);
             
             (input as WrappedHTMLElement).royale_wrapper = this;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
index fd9f037..e77196e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
@@ -102,6 +102,7 @@ package org.apache.royale.jewel
             labelFor = addElementToWrapper(this,'label') as HTMLLabelElement;
             labelFor.appendChild(icon.element);
             labelFor.appendChild(textNode);
+            icon.element.className = "input";
             
             (textNode as WrappedHTMLElement).royale_wrapper = this;
 			(icon.element as WrappedHTMLElement).royale_wrapper = this;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
index 8d52a61..817efe8 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
@@ -18,16 +18,43 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-	import org.apache.royale.html.Slider;
+	import org.apache.royale.core.IRangeModel;
+	import org.apache.royale.core.UIBase;
+	import org.apache.royale.events.Event;
 
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
+		import org.apache.royale.utils.cssclasslist.addStyles; 
     }
 
+	//--------------------------------------
+    //  Events
+    //--------------------------------------
+
 	[Event(name="valueChange", type="org.apache.royale.events.Event")]
 
+     /**
+     *  Dispatched when Slider ends its change from one position to another.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.8
+     */
+	[Event(name="change", type="org.apache.royale.events.Event")]
+
+	/**
+     *  Dispatched each time user moves the slider thumb from one position to another
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.8
+     */
+	[Event(name="input", 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:
@@ -44,7 +71,7 @@ package org.apache.royale.jewel
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.2
 	 */
-	public class Slider extends org.apache.royale.html.Slider
+	public class Slider extends UIBase
 	{
 		/**
 		 *  constructor.
@@ -61,13 +88,125 @@ package org.apache.royale.jewel
 			typeNames = "jewel slider"
 		}
 		
+		/**
+		 *  The current value of the Slider.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.8
+		 */
+		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.8
+		 */
+		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.8
+		 */
+		public function get maximum():Number
+		{
+			return IRangeModel(model).maximum;
+		}
+		public function set maximum(value:Number):void
+		{
+			IRangeModel(model).maximum = 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.8
+		 */
+        public function get stepSize():Number
+        {
+            return IRangeModel(model).stepSize;
+        }
+
+        public function set stepSize(value:Number):void
+        {
+            IRangeModel(model).stepSize = value;
+        }
+
+		COMPILE::JS
+		private var _positioner:WrappedHTMLElement;
+
+		COMPILE::JS
+		override public function get positioner():WrappedHTMLElement
+		{
+			return _positioner;
+		}
+
+		COMPILE::JS
+		override public function set positioner(value:WrappedHTMLElement):void
+		{
+			_positioner = value;
+		}
+
+
         /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-			return addElementToWrapper(this,'div');
+			var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+            div.className = typeNames;
+            
+            var input:HTMLInputElement = addElementToWrapper(this,'input') as HTMLInputElement;
+            input.setAttribute('type', 'range');
+			input.className = "slider";
+
+			//attach input handler to dispatch royale change event when user write in textinput
+            //goog.events.listen(element, 'change', killChangeHandler);
+            //goog.events.listen(input, 'input', textChangeHandler);
+            
+			div.appendChild(input);
+
+            positioner = div as WrappedHTMLElement;
+            _positioner.royale_wrapper = this;
+			
+			return element;
+        }
+
+		/**
+         * since we have a div surronding the main input, we need to 
+         * route the class assignaments to div
+         */
+        COMPILE::JS
+        override protected function setClassName(value:String):void
+        {
+            addStyles(positioner, value);
         }
     }
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index fa795ef..0a49aeb 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
@@ -53,27 +53,6 @@ package org.apache.royale.jewel
             typeNames = "jewel textfield";
 		}
 
-        COMPILE::JS
-        private var _positioner:WrappedHTMLElement;
-
-		COMPILE::JS
-        /**
-         * The HTMLElement used to position the component.
-         */
-        override public function get positioner():WrappedHTMLElement
-		{
-			return _positioner;
-		}
-
-		COMPILE::JS
-        /**
-         * @private
-         */
-        override public function set positioner(value:WrappedHTMLElement):void
-		{
-			_positioner = value;
-		}
-
         /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          * @royaleignorecoercion HTMLDivElement
@@ -106,7 +85,7 @@ package org.apache.royale.jewel
 
             positioner = div as WrappedHTMLElement;
             //(label as WrappedHTMLElement).royale_wrapper = this;
-            _positioner.royale_wrapper = this;
+            positioner.royale_wrapper = this;
             
             return element;
         }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
index c62a3fc..f7ceec2 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
@@ -61,6 +61,7 @@ package org.apache.royale.jewel.beads
 		 */
 		public function SliderView()
 		{
+			super();
 		}
 		
 		private var rangeModel:IRangeModel;
@@ -98,7 +99,7 @@ package org.apache.royale.jewel.beads
 				s.addElement(_thumb);
 				
 			}
-			COMPILE::JS {
+			/*COMPILE::JS {
 				_track = new Button();
 				_track.className = "SliderTrack";
 				host.addElement(_track);
@@ -107,7 +108,7 @@ package org.apache.royale.jewel.beads
 				_thumb.className = "SliderThumb";
 				_thumb.text = '\u29BF';
 				host.addElement(_thumb);
-			}
+			}*/
 			
 			rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as
new file mode 100644
index 0000000..7dfe805
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.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.jewel.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 SliderMouseController 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 SliderMouseController implements IBead, IBeadController
+	{
+		/**
+		 *  constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function SliderMouseController()
+		{
+		}
+		
+		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/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalSliderLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalSliderLayout.as
new file mode 100644
index 0000000..320a81b
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalSliderLayout.as
@@ -0,0 +1,144 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.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;
+			
+            // 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);
+
+			var thumb:IUIBase = viewBead.thumb as IUIBase;
+            if(thumb != null) {
+                thumb.width = square;
+			    thumb.height = square;
+
+                thumb.x = xloc;
+			    thumb.y = 0;
+            }
+			
+			var track:IUIBase = viewBead.track as IUIBase;
+			if(track != null)
+            {
+                track.x = square/2;
+                track.y = trackHeight; // 1/3 of the totalHeight
+                track.width = useWidth - square;
+                track.height = trackHeight;
+            }
+			
+			return true;
+		}
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
index 06a8d63..5977727 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
@@ -25,7 +25,9 @@ package org.apache.royale.jewel.supportClasses
     COMPILE::JS
     {
         import goog.events;
-        import org.apache.royale.core.WrappedHTMLElement;        
+        import org.apache.royale.core.WrappedHTMLElement;
+        import org.apache.royale.utils.cssclasslist.toggleStyle;
+        import org.apache.royale.utils.cssclasslist.addStyles; 
     }
     
     /**
@@ -122,9 +124,40 @@ package org.apache.royale.jewel.supportClasses
 		 */
 		override protected function setClassName(value:String):void
 		{
-			positioner.className = value;           
+			//positioner.className = value;
+            addStyles(positioner, value);
 		}
 
+        private var _primary:Boolean = false;
+
+        /**
+		 *  A boolean flag to activate "primary" effect selector.
+		 *  Applies primary color display effect.
+         *  Colors are defined in royale-jewel.css
+         *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+        public function get primary():Boolean
+        {
+            return _primary;
+        }
+
+        public function set primary(value:Boolean):void
+        {
+            if (_primary != value)
+            {
+                _primary = value;
+
+                COMPILE::JS
+                {
+                    toggleStyle(positioner, "primary", _primary);
+                }
+            }
+        }
+
         private var _isInvalid:Boolean = false;
         /**
 		 *  A boolean flag to activate "is-invalid" effect selector.
@@ -146,6 +179,7 @@ package org.apache.royale.jewel.supportClasses
 
             COMPILE::JS
             {
+                toggleStyle(positioner, "is-invalid", _isInvalid);
                 //positioner.classList.toggle("is-invalid", _isInvalid);
                 //typeNames = positioner.className;
             }
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
index b61e110..7633733 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
@@ -25,8 +25,8 @@
 Slider
 	IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel")
 	IBeadView:  ClassReference("org.apache.royale.jewel.beads.SliderView")
-	IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout")
-	IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController")
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout")
+	IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController")
 
 .SliderTrack
 	position: absolute
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index c4286da..bf22702 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -173,16 +173,13 @@ span {
   cursor: unset;
 }
 
-.jewel.checkbox > input[type="checkbox"] {
-  width: 50px;
-  height: 50px;
+.jewel.checkbox .span {
+  padding-left: 5px;
 }
-.jewel.checkbox > label {
-  cursor: auto;
-  position: relative;
-  display: block;
-  padding-left: 20px;
-  outline: none;
+.jewel.checkbox .input {
+  width: 15px;
+  height: 15px;
+  border: 1px solid;
 }
 
 .jewel.label {
@@ -190,16 +187,44 @@ span {
   font-size: 14px;
 }
 
-.jewel.radiobutton > input[type="radio"] {
-  width: 50px;
-  height: 50px;
+.jewel.radiobutton {
+  padding-left: 5px;
 }
-.jewel.radiobutton > label {
-  cursor: auto;
-  position: relative;
-  display: block;
-  padding-left: 20px;
+.jewel.radiobutton .input {
+  width: 15px;
+  height: 15px;
+  border: 1px solid;
+}
+
+.jewel.slider .slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 15px;
+  border-radius: 5px;
+  background: #d3d3d3;
   outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+}
+.jewel.slider .slider:hover {
+  opacity: 1;
+}
+.jewel.slider .slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: #4CAF50;
+  cursor: pointer;
+}
+.jewel.slider .slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: #4CAF50;
+  cursor: pointer;
 }
 
 .jewel.textbutton {
@@ -367,24 +392,46 @@ span {
 
 .jewel.textfield {
   position: relative;
-  font-size: 14px;
-  font-weight: normal;
   display: inline-flex;
 }
 .jewel.textfield .input {
-  margin: 0em;
+  margin: 0;
+  padding: 0.67em 1em;
   max-width: 100%;
   flex: 1 0 auto;
   outline: none;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   text-align: left;
-  line-height: 1.2em;
+  line-height: 1.4em;
   font-family: "Lato", sans-serif;
   font-size: 14px;
+  font-weight: normal;
+  background: linear-gradient(white, #f3f3f3);
+  border: 1px solid #b3b3b3;
+  color: #808080;
+  border-radius: 3px;
+  box-shadow: none;
+}
+
+.jewel.textfield.primary {
+  position: relative;
+  display: inline-flex;
+}
+.jewel.textfield.primary .input {
+  margin: 0;
   padding: 0.67em 1em;
-  background: #ffffff;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  color: rgba(0, 0, 0, 0.87);
+  max-width: 100%;
+  flex: 1 0 auto;
+  outline: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  text-align: left;
+  line-height: 1.4em;
+  font-family: "Lato", sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  background: linear-gradient(white, #f3f3f3);
+  border: 1px solid #0f88d1;
+  color: #FFFFFF;
   border-radius: 3px;
   box-shadow: none;
 }
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index 6b8551f..6afddb2 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -17,6 +17,8 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
+// Jewel Button
+
 // Button variables
 $button-margin: 0 !default
 $button-padding: 10px 16px !default
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index da62df3..485b972 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -18,13 +18,21 @@
 ////////////////////////////////////////////////////////////////////////////////
 
 .jewel.checkbox
-    > input[type="checkbox"]
-        width: 50px
-        height: 50px
-    > label
-        cursor: auto
-        position: relative
-        display: block
-        padding-left: 20px
-        outline: none
+
+    .span
+        padding-left: 5px
+    .input
+        width: 15px
+        height: 15px
+        border: 1px solid
+
+    // > input[type="checkbox"]
+    //     width: 50px
+    //     height: 50px
+    // > label
+    //     cursor: auto
+    //     position: relative
+    //     display: block
+    //     padding-left: 20px
+    //     outline: none
         //font-size: @labelFontSize
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index eb1cdf6..0bba0f1 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -18,13 +18,19 @@
 ////////////////////////////////////////////////////////////////////////////////
 
 .jewel.radiobutton
-    > input[type="radio"]
-        width: 50px
-        height: 50px
-    > label
-        cursor: auto
-        position: relative
-        display: block
-        padding-left: 20px
-        outline: none
+    padding-left: 5px
+    .input
+        width: 15px
+        height: 15px
+        border: 1px solid
+
+    // > input[type="radio"]
+    //     width: 50px
+    //     height: 50px
+    // > label
+    //     cursor: auto
+    //     position: relative
+    //     display: block
+    //     padding-left: 20px
+    //     outline: none
         //font-size: @labelFontSize
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
index 1d72a04..6e8d491 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
@@ -17,4 +17,34 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-.jewel.slider
\ No newline at end of file
+.jewel.slider
+
+    .slider
+        -webkit-appearance: none
+        width: 100%
+        height: 15px
+        border-radius: 5px
+        background: #d3d3d3
+        outline: none
+        opacity: 0.7
+        -webkit-transition: .2s
+        transition: opacity .2s
+
+        &:hover
+            opacity: 1
+
+        &::-webkit-slider-thumb
+            -webkit-appearance: none
+            appearance: none
+            width: 25px
+            height: 25px
+            border-radius: 50%
+            background: #4CAF50
+            cursor: pointer
+        
+        &::-moz-range-thumb
+            width: 25px
+            height: 25px
+            border-radius: 50%
+            background: #4CAF50
+            cursor: pointer
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index 03b66da..d10fb6e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -17,6 +17,7 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
+// Jewel TextButton
 // Note: Use Button variables
 
 =textbutton-theme($button-color, $text-color)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 0a606f8..81feb03 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -18,40 +18,54 @@
 ////////////////////////////////////////////////////////////////////////////////
 
 // Jewel Textfield
-.jewel.textfield
+
+// Textfield variables
+$textfield-margin: 0 !default
+$textfield-padding: .67em 1em !default
+//10px 16px
+$textfield-min-height: 34px !default
+$textfield-min-width: 74px !default
+
+$textfield-border-radius: 3px
+
+=textfield-theme($textfield-color, $text-color)
 	position: relative
-	font:
-		//family: $font-stack 
-		size: $font-size
-		weight: normal
 	display: inline-flex
 	
 	.input
-		margin: 0em
+		margin: $textfield-margin
+		padding: $textfield-padding
+		
 		max-width: 100%
+		
 		flex: 1 0 auto
 		outline: none
 		-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
+		
 		text-align: left
-		line-height: 1.2em
+		line-height: 1.4em
 
 		font:
 			family: $font-stack
 			size: $font-size
-		padding: .67em 1em
-
-		background: #ffffff
-		border: 1px solid rgba(34, 36, 38, .15)
-		color: rgba(0, 0, 0, .87)
-		border-radius: 3px
+			weight: normal
+		
+		background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+		border: 1px solid darken($textfield-color, 15%)
+		color: $text-color
+		border-radius: $textfield-border-radius
 		//transition: transition
 
 		box-shadow: none
 
-//    padding: 5px;
-//    border: solid 1px #666666;
-//    border-radius: 6px;
-//    color: #333333;
-//:hover 
-//    padding: 5px;
-//    background-color: #DFDFDF;
+		//:hover 
+		//    padding: 5px;
+		//    background-color: #DFDFDF;
+
+
+.jewel.textfield
+	+textfield-theme($default-color, $default-font-color)
+
+.jewel.textfield.primary
+	+textfield-theme($primary-color, $font-theme-color)
+

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

Mime
View raw message