Using the Jewel Slider Control

Using the Jewel Slider Control

Using the Jewel Slider Control 737 550 Carlos Rovira

In this example we’ll see the basic use of the Jewel Slider control in a Royale application. It uses the new Jewel UI set that supports themes and is available in the 0.9.4 release or later.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?xml version="1.0" encoding="UTF-8"?>
<j:Application xmlns:fx="//ns.adobe.com/mxml/2009"
              xmlns:j="library://ns.apache.org/royale/jewel">
   
    <fx:Script>
        <![CDATA[
       
        private function clickHandler(event:MouseEvent):void
        {
            slider_w.value = 400;
            slider_h.value = 200;
        }

        private function onValueChange(event:Event):void
       {
            button.width = slider_w.value;
            button.height = slider_h.value;
            button.text = slider_w.value + "x" + slider_h.value;
        }
        ]]>
    </fx:Script>

    <j:initialView>
        <j:View>
            <j:beads>
                <j:VerticalLayout gap="10"/>
            </j:beads>

            <j:Slider id="slider_w" width="250" value="250" minimum="100" maximum="500"
               valueChange="onValueChange(event)"/>

            <j:Slider id="slider_h" width="250" value="80" minimum="40" maximum="300"
               valueChange="onValueChange(event)"/>

            <j:Button id="button" text="Slider to 400x200" width="250" height="80" emphasis="secondary"
               click="clickHandler(event)"/>
        </j:View>
    </j:initialView>
   
</j:Application>

In this example, you can click the Jewel button to set up slider values. When you do this the ValueChangeEvent.VALUE_CHANGE will fire, calling the onValueChange event handler and setting width, height and text in the Button.

On the other hand, you can drag each slider to change width and height in the Button, and function to update value in “onValueChange” will be called continuously as you drag the slider controls.

You can click in the track at any place to change the value immediately to the value at that point in the track. And if you need them, you have available “input” and “change” events in Slider. The first fires each time you move the slider thumb from one position to another, and the second fires when Slider ends its change from one position to another.

The result of this code snippet is the following:

(We’re using an iframe to host the compiled results of this example. To see the example in a separate window click this link.)

Full project with source code can be found here:

Join Us!

You can be part of Apache Royale and start using and contributing to this project. We need your skills to make this great technology reach the next step. You can start by joining us in our mailing list.