Adding an item to a Jewel List
In this example we'll cover how to set up a Jewel List control that shows a list of basic string data in a Royale application, and then add an item to the list. It uses the new Jewel UI set that supports themes and is available in the 0.9.4 release or later.
<?xml version="1.0" encoding="UTF-8"?>
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
private function changeHandler(event:Event):void {
selected.text = "Selected: " + list.selectedItem;
}
private function clickHandler(event:Event):void {
avengersCharacters.addItem("Hawkeye");
}
]]>
</fx:Script>
<j:initialView>
<j:View>
<j:beads>
<j:VerticalLayout gap="10"/>
</j:beads>
<html:H3 text="Avengers Character List"/>
<j:List id="list" width="200" height="300" change="changeHandler(event)">
<j:beads>
<j:AddListItemRendererForArrayListData/>
</j:beads>
<j:dataProvider>
<js:ArrayList id="avengersCharacters" source="[Iron Man, Hulk, Thor, Captain America, Black Widow]" />
</j:dataProvider>
</j:List>
<j:Label id="selected"/>
<j:Button width="200" emphasis="primary" text="who is missing?" click="clickHandler(event)"/>
</j:View>
</j:initialView>
</j:Application>
In this example, the List is populated from an ArrayList object that holds a basic array of the data. The ArrayList has all collection methods to manage internal data, like addItem and addItemAt. We used Avengers character names to showcase this example, but you'll see one character is missing ;). For this example we used the Amethyst Jewel Theme to match movie colors better.
When you select a row in the List a CHANGE event is fired. We have the event call an event handler that shows the data for the selected item in a label.
Finally you can click the "Who's missing?" button to add the missing Avenger to the list. The List will update to reflect the addition. For this to happen you'll need to use a bead that encapsulates the code responsible of adding the item to the data provider and create the corresponding item renderer called AddListItemRendererForArrayListData.
Where to go from here
The result of this code snippet is the following:
(We're using an iframe to host the actual results of this example compilation. To see the example in a separate window click this link.)
Full project with source code can be found here:
Using the Jewel Slider Control
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.
<?xml version="1.0" encoding="UTF-8"?>
<j:Application xmlns:fx="http://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.
Where to go from here
The result of this code snippet is the following:
(We're using an iframe to host the actual results of this example compilation. To see the example in a separate window click this link.)
Full project with source code can be found here:
Using the Jewel Alert Control
The following code shows the basic method for displaying an Alert dialog 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.
<?xml version="1.0" encoding="UTF-8"?>
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel">
<fx:Script>
<![CDATA[
import org.apache.royale.jewel.Alert;
import org.apache.royale.events.CloseEvent;
private function clickHandler(event:MouseEvent):void {
var alert:Alert = Alert.show("Do you want to save your changes?", "Save Changes", Alert.YES | Alert.NO);
alert.addEventListener(CloseEvent.CLOSE, alertClickHandler);
}
private function alertClickHandler(event:CloseEvent):void {
if (event.detail == Alert.YES)
button.text="You answered Yes";
else
button.text="You answered No";
}
]]>
</fx:Script>
<j:initialView>
<j:View>
<j:Button id="button" text="Click Me" emphasis="primary" click="clickHandler(event)"/>
</j:View>
</j:initialView>
</j:Application>
In this example, the Jewel button adds a click handler that will be in charge of showing the Alert control. When the user clicks the button the Alert.show() static method is called. You can add a custom message, a custom title and choose which buttons will be created for that instance of the Alert.
Finally, the Alert instance adds an event listener to manage the alert response when the dialog is closed. In this example we're changing the label of the button according to the button the user clicks in the Alert.
Where to go from here
The result of this code snippet is the following:
(We're using an iframe to host the actual results of this example compilation. To see the example in a separate window click this link.)
Full project with source code can be found here: