You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/27 13:24:07 UTC
[royale-asjs] branch feature/jewel-ui-set updated: jewel slider
fixed, now is an input range with change and input events,
but still needs to create the valueChangeEvent
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
The following commit(s) were added to refs/heads/feature/jewel-ui-set by this push:
new 6b849b8 jewel slider fixed, now is an input range with change and input events, but still needs to create the valueChangeEvent
6b849b8 is described below
commit 6b849b8c1e7ea38d9c2b5de5c68e9373c9d267d2
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 27 15:24:00 2018 +0200
jewel slider fixed, now is an input range with change and input events, but still needs to create the valueChangeEvent
---
.../src/main/royale/SliderPlayGround.mxml | 6 +-
.../projects/Jewel/src/main/resources/defaults.css | 2 +-
.../projects/Jewel/src/main/royale/JewelClasses.as | 1 +
.../org/apache/royale/jewel/beads/SliderView.as | 132 +++++++-------
.../beads/controllers/SliderMouseController.as | 54 ++++--
.../royale/jewel/beads/models/SliderRangeModel.as | 198 +++++++++++++++++++++
.../Jewel/src/main/sass/components/_slider.sass | 2 +-
7 files changed, 309 insertions(+), 86 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
index 639e9b6..4b2d87e 100644
--- a/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
@@ -25,7 +25,7 @@ limitations under the License.
<fx:Script>
<![CDATA[
- private function onValueChange(event:Event):void
+ private function onChange(event:Event):void
{
button.width = slider.value;
button.height = slider_v.value;
@@ -40,9 +40,9 @@ limitations under the License.
<html:H3 text="Jewel Slider"/>
<j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
- valueChange="onValueChange(event)"/>
+ change="onChange(event)"/>
<j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
- valueChange="onValueChange(event)"/>
+ change="onChange(event)"/>
<j:TextButton id="button" text="Button" width="120" height="40" primary="true"/>
</js:Group>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index ed036f4..826be93 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -51,7 +51,7 @@ Label {
}
Slider {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout");
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController");
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 3860218..8e0a078 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -28,6 +28,7 @@ package
internal class JewelClasses
{
import org.apache.royale.jewel.beads.SliderView; SliderView;
+ import org.apache.royale.jewel.beads.models.SliderRangeModel; SliderRangeModel;
import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
import org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout; HorizontalSliderLayout;
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 f7ceec2..f61d500 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
@@ -40,7 +40,7 @@ package org.apache.royale.jewel.beads
import org.apache.royale.html.TextButton;
/**
- * The SliderView class creates the visual elements of the org.apache.royale.html.Slider
+ * The SliderView class creates the visual elements of the org.apache.royale.jewel.Slider
* component. The Slider has a track and a thumb control which are also created with view beads.
*
* @viewbead
@@ -57,76 +57,17 @@ package org.apache.royale.jewel.beads
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public function SliderView()
{
super();
}
- 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;
-
+ private var _thumb:Button;
+
+ private var rangeModel:IRangeModel;
/**
* The track component.
@@ -134,7 +75,7 @@ package org.apache.royale.jewel.beads
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.8
*/
public function get track():IUIBase
{
@@ -147,27 +88,76 @@ package org.apache.royale.jewel.beads
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.8
*/
public function get thumb():IUIBase
{
return _thumb;
}
-
+
/**
- * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
*/
- private function get host():UIBase
+ override public function set strand(value:IStrand):void
{
- return _strand as UIBase;
+ super.strand = value;
+
+ var host:UIBase = UIBase(_strand);
+ rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
+
+ COMPILE::SWF {
+ _track = new Button();
+ _track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);
+ _track.className = "SliderTrack";
+ host.addElement(_track);
+
+ _thumb = new Button();
+ _thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);
+ _thumb.className = "SliderThumb";
+ host.addElement(_thumb);
+
+ }
+
+ COMPILE::JS
+ {
+ var htmlSliderElement:HTMLInputElement = host.element as HTMLInputElement;
+ htmlSliderElement.value = String(rangeModel.value);
+ }
+
+ // listen for changes to the model and adjust the UI accordingly.
+ IEventDispatcher(rangeModel).addEventListener("stepSizeChange", modelChangeHandler);
+ IEventDispatcher(rangeModel).addEventListener("minimumChange", modelChangeHandler);
+ IEventDispatcher(rangeModel).addEventListener("maximumChange", modelChangeHandler);
+ IEventDispatcher(rangeModel).addEventListener("valueChange", modelChangeHandler);
+
+ modelChangeHandler(null);
}
/**
* @private
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
*/
private function modelChangeHandler( event:Event ) : void
{
- (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ COMPILE::JS
+ {
+ var inputElement:HTMLInputElement = (UIBase(_strand).element as HTMLInputElement);
+ inputElement.step = String(rangeModel.stepSize);
+ inputElement.min = String(rangeModel.minimum);
+ inputElement.max = String(rangeModel.maximum);
+ inputElement.value = rangeModel.value.toString();
+ }
+
+ //(_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
}
}
}
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
index 7dfe805..eba83f9 100644
--- 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
@@ -94,21 +94,55 @@ package org.apache.royale.jewel.beads.controllers
sliderView.track.addEventListener(MouseEvent.CLICK, trackClickHandler, false, 99999);
}
- /*COMPILE::JS
+ 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);
+ //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);
- }*/
+ goog.events.listen(UIBase(_strand).element, goog.events.EventType.CHANGE, handleChange, false, this);
+ goog.events.listen(UIBase(_strand).element, goog.events.EventType.INPUT, handleInput, false, this);
+ }
}
+ /**
+ * Manages the change event to update the range model value
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ COMPILE::JS
+ private function handleChange(event:BrowserEvent):void
+ {
+ var host:Slider = _strand as Slider;
+
+ rangeModel.value = Number((UIBase(_strand).element as HTMLInputElement).value);
+
+ //host.dispatchEvent(new org.apache.royale.events.Event('change')); --- This is not needed, the event is thrown in the main comp
+ }
+
+ /**
+ * Manages the input event to update the range model value and dispatch a input Royale event
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ COMPILE::JS
+ private function handleInput(event:BrowserEvent):void
+ {
+ var host:Slider = _strand as Slider;
+
+ rangeModel.value = Number((UIBase(_strand).element as HTMLInputElement).value);
+
+ //host.dispatchEvent(new org.apache.royale.events.Event('input'));
+ }
+
/*COMPILE::JS
private var track:UIBase;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/SliderRangeModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/SliderRangeModel.as
new file mode 100644
index 0000000..bf52755
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/SliderRangeModel.as
@@ -0,0 +1,198 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IRangeModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.events.Event;
+
+ /**
+ * The SliderRangeModel class bead defines a set of for a numeric range of values
+ * which includes a minimum, maximum, and current value.
+ *
+ * It do not calculate any values for slider - just holds it.
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.8
+ */
+ public class SliderRangeModel extends EventDispatcher implements IBead, IRangeModel
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function SliderRangeModel()
+ {
+ super();
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @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;
+ }
+
+ private var _maximum:Number = 100;
+
+ /**
+ * The maximum value for the range (defaults to 100).
+ *
+ * @copy org.apache.royale.core.IRangeModel#maximum
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get maximum():Number
+ {
+ return _maximum;
+ }
+
+ public function set maximum(value:Number):void
+ {
+ if (value != _maximum)
+ {
+ _maximum = value;
+ dispatchEvent(new Event("maximumChange"));
+ }
+ }
+
+ private var _minimum:Number = 0;
+
+ /**
+ * The minimum value for the range (defaults to 0).
+ *
+ * @copy org.apache.royale.core.IRangeModel#minimum
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get minimum():Number
+ {
+ return _minimum;
+ }
+
+ public function set minimum(value:Number):void
+ {
+ if (value != _minimum)
+ {
+ _minimum = value;
+ dispatchEvent(new Event("minimumChange"));
+ }
+ }
+
+ private var _snapInterval:Number = 1;
+
+ /**
+ * The modulus value for the range.
+ *
+ * @copy org.apache.royale.core.IRangeModel#snapInterval
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get snapInterval():Number
+ {
+ return _snapInterval;
+ }
+
+ public function set snapInterval(value:Number):void
+ {
+ if (value != _snapInterval)
+ {
+ _snapInterval = value;
+ dispatchEvent(new Event("snapIntervalChange"));
+ }
+ }
+
+ private var _stepSize:Number = 1;
+
+ /**
+ * The amount to adjust the value either up or down toward the edge of the range.
+ *
+ * @copy org.apache.royale.core.IRangeModel#stepSize
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get stepSize():Number
+ {
+ return _stepSize;
+ }
+
+ public function set stepSize(value:Number):void
+ {
+ if (value != _stepSize)
+ {
+ _stepSize = value;
+ dispatchEvent(new Event("stepSizeChange"));
+ }
+ }
+
+ private var _value:Number = 0;
+
+ /**
+ * The current value of the range, between the minimum and maximum values. Attempting
+ * to set the value outside of the minimum-maximum range changes the value to still be
+ * within the range. Note that the value is adjusted by the stepSize.
+ *
+ * @copy org.apache.royale.core.IRangeModel#value
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get value():Number
+ {
+ return _value;
+ }
+
+ public function set value(value:Number):void
+ {
+ if (value != _value)
+ {
+ _value = value;
+ dispatchEvent(new Event("valueChange"));
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
index 7633733..eab42ff 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
@@ -23,7 +23,7 @@
position: relative
Slider
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView")
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout")
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController")
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.