Selecting options from a group of Jewel CheckBox controls
In this example we'll show a set of Jewel CheckBox controls that let the user select one or more options 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"
xmlns:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
private function checkboxChanged(event:Event):void
{
result.text = "The options selected are: ";
if(chk1.selected)
result.text += chk1.value + " ";
if(chk2.selected)
result.text += chk2.value + " ";
if(chk3.selected)
result.text += chk3.value;
}
]]>
</fx:Script>
<j:initialView>
<j:View>
<j:beads>
<j:VerticalLayout gap="10"/>
</j:beads>
<html:H2 text="Selecting options from a group of Jewel Checkbox controls"/>
<j:Label text="Which option(s) do you prefer?"/>
<j:CheckBox id="chk1" text="Option 1" value="1" change="checkboxChanged(event)"/>
<j:CheckBox id="chk2" text="Option 2" value="2" change="checkboxChanged(event)"/>
<j:CheckBox id="chk3" text="Option 3" value="3" change="checkboxChanged(event)">
<j:beads>
<j:Disabled id="opt3disable" disabled="false"/>
</j:beads>
</j:CheckBox>
<j:Label id="result" text="The options selected are:"/>
<j:Button text="disable/enable option 3" emphasis="primary" click="opt3disable.disabled = !opt3disable.disabled"/>
</j:View>
</j:initialView>
</j:Application>
The CheckBox is a two-state button control with the following properties available:
- text: The label description for the CheckBox
- value: The internal value of the CheckBox
- selected: If this is true it means that the CheckBox is selected; it is false otherwise
Each checkbox has CLICK and CHANGE events. CLICK is dispatched when the user clicks the CheckBox, either to select it or to remove the selection. CHANGE is dispatched when the CheckBox is selected/unselected, and is used in this example to update a label with the value properties of all selected check boxes.
As a bonus, you can provide the ability to disable/enable any of the check boxes (and any other Jewel control) by adding the Disabled bead to it. In the example, see if you can have Option 3 both selected and disabled!
Adding beads lets you extend what controls can do by composition, rather than being limited to what the control inherits. The Disabled bead lets you enable or disable the control programmatically, depending on whatever you find important for your application (for instance, whether the user is logged in or has made a selection in another control that is required before selecting one of these options). We'll be talking more about beads in future posts.
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:
Binding the text property of a Jewel TextInput to update a text Label
In this example we'll cover how to use the data binding feature with a Jewel TextInput field 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"
xmlns:js="library://ns.apache.org/royale/basic">
<fx:Script>
<![CDATA[
private function textChanged(event:Event):void
{
result.text = "The textinput text value is: " + textinput.text;
}
]]>
</fx:Script>
<j:beads>
<js:ApplicationDataBinding />
</j:beads>
<j:initialView>
<j:View>
<j:beads>
<j:VerticalLayout gap="10"/>
</j:beads>
<j:Label text="Binding the text property of a Jewel TextInput field to update a text Label"/>
<j:TextInput id="textinput" change="textChanged(event)">
<j:beads>
<j:TextPrompt prompt="Using change event"/>
</j:beads>
</j:TextInput>
<j:Label id="result" text="The TextInput field text value is: "/>
<j:TextInput id="databinding_ti">
<j:beads>
<j:TextPrompt prompt="Using databinding"/>
</j:beads>
</j:TextInput>
<j:Label text="The TextInput field text value is: {databinding_ti.text}"/>
</j:View>
</j:initialView>
</j:Application>
Data binding is a general technique that binds together and synchonizes data from a provider, or source (in this case the contents of the text property of a TextInput field), and a consumer (in this case the text property of a Label). You can use data binding with many controls, variables and components to provide a powerful user experience. You can bind a List as the data provider for an ArrayList variable so the ArrayList displays details of the item the user selects in the List. Changing a Slider's value can change the width of a control or container the Slider is bound to.
In Apache Royale, you can configure data binding at different levels: Application, View, Container, ItemRenderer, and more. This follows the PAYG (Pay As You Go) philosophy that is key to the global design of Apache Royale. PAYG keeps an application as lightweight as possible, since you only add many features and functions to the components that actually need them. Other front-end technologies follow a "just in case" model of providing every possible function to each component even though most of those features, and the weight of that code, will serve no good use. In Royale you stay light and agile by declaring features like data binding only if the application, or some part of it, needs them.
In this example, we use data binding at the application level, since the whole example is only a few lines of code. So we use the ApplicationDataBinding bead. This bead adheres to the Application strand, "composing" or "adding" the binding functionality at the application level. In a more complex application, you might decide you only need data binding in a particular View or Container. Then you could use a ViewDataBinding bead, or a ContainerDataBinding bead. PAYG ensures features like data binding are only present where you really need them, and not using up system resources by sitting around in parts of the application where they will never be used.
In our example the first TextInput control uses a normal CHANGE event handler to update the text property of the Label field below it. The second TextInput control uses data binding to update the Label below it. You get the same result, but in different ways.
Notice that both TextInput controls use a TextPrompt bead that adds the prompt functionality to the control. We wanted that feature for this example; but since not every TextInput control in every application has to have a prompt, you "pay" for the function by adding the TextPrompt bead only where you need it: PAYG!
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:
Creating a group of Jewel radio buttons
In this example we'll cover how to show a list of options in a Royale application with a group of Jewel RadioButton controls. 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:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
private function radioChanged(event:Event):void
{
result.text = "The radio button selected has the value: " + RadioButton(event.target).value;
}
]]>
</fx:Script>
<j:initialView>
<j:View>
<j:beads>
<j:VerticalLayout gap="10"/>
</j:beads>
<html:H2 text="Creating a group of Jewel RadioButtons"/>
<j:Label text="Which option do you prefer?"/>
<j:RadioButton text="Option 1" groupName="radios" value="1" change="radioChanged(event)"/>
<j:RadioButton text="Option 2" groupName="radios" value="2" change="radioChanged(event)"/>
<j:RadioButton text="Option 3" groupName="radios" value="3" change="radioChanged(event)">
<j:beads>
<j:Disabled id="opt3disable" disabled="false"/>
</j:beads>
</j:RadioButton>
<j:Label id="result" text="The radio button selected has the value:"/>
<j:Button text="disable/enable option 3" emphasis="primary" click="opt3disable.disabled = !opt3disable.disabled"/>
</j:View>
</j:initialView>
</j:Application>
The radio buttons have these properties available:
- text: The label description for the radio button
- value: The internal value of the radio button
- selected: If this is true it means that the radio button is selected; it is false otherwise
- groupName: All radio buttons with the same group name are related, so the user can change which radio button is selected but can never select more than one member of the group at a time
Each radio button has CLICK and CHANGE events. CLICK is dispatched when the user clicks the RadioButton. CHANGE is dispatched when the RadioButton is selected/unselected, and is used in this example to update a label with the value property of the selected radio button.
As a bonus, you can provide the ability to disable/enable any of the radio buttons (and any other Jewel control) by adding the Disabled bead to it. Adding beads lets you change what controls can do by composition, rather than being limited to what the control inherits. The Disabled bead lets you enable or disable the control programmatically, depending on whatever you find important for your application (for instance, whether the user is logged in or has made a selection in another control that is required before selecting one of these options). We'll be talking more about beads in future posts.
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: