Skip to content

Commit 6b849b8

Browse files
carlosroviracarlosrovira
committed
jewel slider fixed, now is an input range with change and input events, but still needs to create the valueChangeEvent
1 parent 6eef867 commit 6b849b8

File tree

7 files changed

+309
-86
lines changed

7 files changed

+309
-86
lines changed

‎examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ limitations under the License.
2525

2626
<fx:Script>
2727
<![CDATA[
28-
private function onValueChange(event:Event):void
28+
private function onChange(event:Event):void
2929
{
3030
button.width = slider.value;
3131
button.height = slider_v.value;
@@ -40,9 +40,9 @@ limitations under the License.
4040
<html:H3 text="Jewel Slider"/>
4141

4242
<j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
43-
valueChange="onValueChange(event)"/>
43+
change="onChange(event)"/>
4444
<j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
45-
valueChange="onValueChange(event)"/>
45+
change="onChange(event)"/>
4646
<j:TextButton id="button" text="Button" width="120" height="40" primary="true"/>
4747

4848
</js:Group>

‎frameworks/projects/Jewel/src/main/resources/defaults.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/projects/Jewel/src/main/royale/JewelClasses.as

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ package
2828
internal class JewelClasses
2929
{
3030
import org.apache.royale.jewel.beads.SliderView; SliderView;
31+
import org.apache.royale.jewel.beads.models.SliderRangeModel; SliderRangeModel;
3132
import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
3233
import org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout; HorizontalSliderLayout;
3334

‎frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as

+61-71
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ package org.apache.royale.jewel.beads
4040
import org.apache.royale.html.TextButton;
4141

4242
/**
43-
* The SliderView class creates the visual elements of the org.apache.royale.html.Slider
43+
* The SliderView class creates the visual elements of the org.apache.royale.jewel.Slider
4444
* component. The Slider has a track and a thumb control which are also created with view beads.
4545
*
4646
* @viewbead
@@ -57,84 +57,25 @@ package org.apache.royale.jewel.beads
5757
* @langversion 3.0
5858
* @playerversion Flash 10.2
5959
* @playerversion AIR 2.6
60-
* @productversion Royale 0.0
60+
* @productversion Royale 0.9.3
6161
*/
6262
public function SliderView()
6363
{
6464
super();
6565
}
6666

67-
private var rangeModel:IRangeModel;
68-
69-
/**
70-
* @copy org.apache.royale.core.IBead#strand
71-
*
72-
* @langversion 3.0
73-
* @playerversion Flash 10.2
74-
* @playerversion AIR 2.6
75-
* @productversion Royale 0.0
76-
*/
77-
override public function set strand(value:IStrand):void
78-
{
79-
super.strand = value;
80-
81-
var layout:IBeadLayout = _strand.getBeadByType(IBeadLayout) as IBeadLayout;
82-
if (layout == null) {
83-
var klass:Class = ValuesManager.valuesImpl.getValue(_strand, "iBeadLayout");
84-
_strand.addBead(new klass() as IBead);
85-
}
86-
87-
COMPILE::SWF {
88-
var s:UIBase = UIBase(_strand);
89-
90-
_track = new Button();
91-
_track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);
92-
_track.className = "SliderTrack";
93-
s.addElement(_track);
94-
95-
_thumb = new TextButton();
96-
_thumb.text = '\u29BF';
97-
_thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);
98-
_thumb.className = "SliderThumb";
99-
s.addElement(_thumb);
100-
101-
}
102-
/*COMPILE::JS {
103-
_track = new Button();
104-
_track.className = "SliderTrack";
105-
host.addElement(_track);
106-
107-
_thumb = new TextButton();
108-
_thumb.className = "SliderThumb";
109-
_thumb.text = '\u29BF';
110-
host.addElement(_thumb);
111-
}*/
112-
113-
rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
114-
115-
var rm:IEventDispatcher = rangeModel as IEventDispatcher;
116-
117-
// listen for changes to the model and adjust the UI accordingly.
118-
rm.addEventListener("valueChange",modelChangeHandler);
119-
rm.addEventListener("minimumChange",modelChangeHandler);
120-
rm.addEventListener("maximumChange",modelChangeHandler);
121-
rm.addEventListener("stepSizeChange",modelChangeHandler);
122-
rm.addEventListener("snapIntervalChange",modelChangeHandler);
123-
124-
(_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
125-
}
126-
12767
private var _track:Button;
128-
private var _thumb:TextButton;
129-
68+
private var _thumb:Button;
69+
70+
private var rangeModel:IRangeModel;
13071

13172
/**
13273
* The track component.
13374
*
13475
* @langversion 3.0
13576
* @playerversion Flash 10.2
13677
* @playerversion AIR 2.6
137-
* @productversion Royale 0.0
78+
* @productversion Royale 0.8
13879
*/
13980
public function get track():IUIBase
14081
{
@@ -147,27 +88,76 @@ package org.apache.royale.jewel.beads
14788
* @langversion 3.0
14889
* @playerversion Flash 10.2
14990
* @playerversion AIR 2.6
150-
* @productversion Royale 0.0
91+
* @productversion Royale 0.8
15192
*/
15293
public function get thumb():IUIBase
15394
{
15495
return _thumb;
15596
}
156-
97+
15798
/**
158-
* @royaleignorecoercion org.apache.royale.core.UIBase
99+
* @copy org.apache.royale.core.IBead#strand
100+
*
101+
* @langversion 3.0
102+
* @playerversion Flash 10.2
103+
* @playerversion AIR 2.6
104+
* @productversion Royale 0.8
159105
*/
160-
private function get host():UIBase
106+
override public function set strand(value:IStrand):void
161107
{
162-
return _strand as UIBase;
108+
super.strand = value;
109+
110+
var host:UIBase = UIBase(_strand);
111+
rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
112+
113+
COMPILE::SWF {
114+
_track = new Button();
115+
_track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);
116+
_track.className = "SliderTrack";
117+
host.addElement(_track);
118+
119+
_thumb = new Button();
120+
_thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);
121+
_thumb.className = "SliderThumb";
122+
host.addElement(_thumb);
123+
124+
}
125+
126+
COMPILE::JS
127+
{
128+
var htmlSliderElement:HTMLInputElement = host.element as HTMLInputElement;
129+
htmlSliderElement.value = String(rangeModel.value);
130+
}
131+
132+
// listen for changes to the model and adjust the UI accordingly.
133+
IEventDispatcher(rangeModel).addEventListener("stepSizeChange", modelChangeHandler);
134+
IEventDispatcher(rangeModel).addEventListener("minimumChange", modelChangeHandler);
135+
IEventDispatcher(rangeModel).addEventListener("maximumChange", modelChangeHandler);
136+
IEventDispatcher(rangeModel).addEventListener("valueChange", modelChangeHandler);
137+
138+
modelChangeHandler(null);
163139
}
164140

165141
/**
166142
* @private
143+
*
144+
* @langversion 3.0
145+
* @playerversion Flash 10.2
146+
* @playerversion AIR 2.6
147+
* @productversion Royale 0.8
167148
*/
168149
private function modelChangeHandler( event:Event ) : void
169150
{
170-
(_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
151+
COMPILE::JS
152+
{
153+
var inputElement:HTMLInputElement = (UIBase(_strand).element as HTMLInputElement);
154+
inputElement.step = String(rangeModel.stepSize);
155+
inputElement.min = String(rangeModel.minimum);
156+
inputElement.max = String(rangeModel.maximum);
157+
inputElement.value = rangeModel.value.toString();
158+
}
159+
160+
//(_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
171161
}
172162
}
173163
}

‎frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as

+44-10
Original file line numberDiff line numberDiff line change
@@ -94,21 +94,55 @@ package org.apache.royale.jewel.beads.controllers
9494
sliderView.track.addEventListener(MouseEvent.CLICK, trackClickHandler, false, 99999);
9595

9696
}
97-
/*COMPILE::JS
97+
COMPILE::JS
9898
{
9999
var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView;
100-
track = sliderView.track as UIBase;
101-
thumb = sliderView.thumb as UIBase;
102-
103-
goog.events.listen(track.element, goog.events.EventType.CLICK,
104-
handleTrackClick, false, this);
105-
106-
goog.events.listen(thumb.element, goog.events.EventType.MOUSEDOWN,
107-
handleThumbDown, false, this);
100+
//track = sliderView.track as UIBase;
101+
//thumb = sliderView.thumb as UIBase;
102+
//goog.events.listen(track.element, goog.events.EventType.CLICK, handleTrackClick, false, this);
103+
//goog.events.listen(thumb.element, goog.events.EventType.MOUSEDOWN, handleThumbDown, false, this);
108104

109-
}*/
105+
goog.events.listen(UIBase(_strand).element, goog.events.EventType.CHANGE, handleChange, false, this);
106+
goog.events.listen(UIBase(_strand).element, goog.events.EventType.INPUT, handleInput, false, this);
107+
}
110108
}
111109

110+
/**
111+
* Manages the change event to update the range model value
112+
*
113+
* @langversion 3.0
114+
* @playerversion Flash 10.2
115+
* @playerversion AIR 2.6
116+
* @productversion Royale 0.8
117+
*/
118+
COMPILE::JS
119+
private function handleChange(event:BrowserEvent):void
120+
{
121+
var host:Slider = _strand as Slider;
122+
123+
rangeModel.value = Number((UIBase(_strand).element as HTMLInputElement).value);
124+
125+
//host.dispatchEvent(new org.apache.royale.events.Event('change')); --- This is not needed, the event is thrown in the main comp
126+
}
127+
128+
/**
129+
* Manages the input event to update the range model value and dispatch a input Royale event
130+
*
131+
* @langversion 3.0
132+
* @playerversion Flash 10.2
133+
* @playerversion AIR 2.6
134+
* @productversion Royale 0.8
135+
*/
136+
COMPILE::JS
137+
private function handleInput(event:BrowserEvent):void
138+
{
139+
var host:Slider = _strand as Slider;
140+
141+
rangeModel.value = Number((UIBase(_strand).element as HTMLInputElement).value);
142+
143+
//host.dispatchEvent(new org.apache.royale.events.Event('input'));
144+
}
145+
112146
/*COMPILE::JS
113147
private var track:UIBase;
114148

0 commit comments

Comments
 (0)