Menu
Home
Log in / Register
 
Home arrow Computer Science arrow Learn BlackBerry 10 App Development
< Prev   CONTENTS   Next >

Selection Controls

You can use a selection control to specify a criteria for refining the information displayed to the user. In practice, selection controls will display a list of options to the user so that he can perform a selection from the list. It is therefore not surprising that Cascades provides a wealth of controls

organized around option selection. The purpose of this section is to pass the controls in review and illustrate their usage by starting with the essential building block, which is the Option control.

Option

The Option control represents the basic building block of a list of selectable items. You will therefore use an Option control combined with controls such as DropDown, RadioGroup, and SegmentedControl to display a selectable item in a list of items. You can set the Option's text, description, and imageSource properties to display the option on the screen and provide visual feedback. The Option's selected property indicates its state.

DropDown

A DropDown is a control that allows users to select an option from a list of options. As illustrated in Figure 4-11, a DropDown consists of a title bar and an expandable list of options. The list expands and collapses when you tap on the title bar. When the DropDown is expanded, each option displays a title with an optional description and/or image. When the user selects an option, the drop-down is collapsed and the selected option's title is displayed to the right on the title bar.

As illustrated in Listing 4-16, you can determine the user's selection by handling the drop-down's selectedIndexChanged signal and/or the option's selectedChanged signal (if an option is selected, selected=true will be passed to the signal).

Listing 4-16. DropDown

Page {

DropDown {

title: "Actors" enabled: true

onSelectedIndexChanged: {

console.log("SelectedIndex was changed to " + selectedIndex);

}

Option {

id: clint

text: "Clint Eastwood"

description: "The Good, The Bad, The Ugly" value: "Blondie"

onSelectedChanged: {

if (selected == true) { console.log(clint.value);

}

}

}

Option {

id: robert

text: "Robert De Niro" description: "Taxi Driver" value: "Travis Bickle" selected: true

onSelectedChanged: {

if (selected == true) { console.log(robert.value);

}

}

}

Option {

id: jack

text: "Jack Nicholson"

// description omitted value: "J.J. Jake Gittes" onSelectedChanged: {

if (selected == true) { console.log(jack.value);

}

}

}

}

}

Figure 4-10 illustrates the corresponding UI.

Figure 4-10. DropDown

In practice, you should use a drop-down when you want your users to select a single option from a list of options. A drop-down also makes your UI more compact, thus saving you some screen real estate. You should not use drop-downs when you need to select multiple interconnected values

(in this case, use a picker).

RadioGroup

A RadioGroup can be used to group a set of options together. However, only one option can be selected at a time. Options are displayed as radio buttons, with an optional text describing their purpose (see Figure 4-11).

Figure 4-11. RadioGroup

You can handle option selection by responding to the RadioGroup's selectedOptionChanged signal

(or alternatively, you could also directly handle the Option's selectedChanged signal; see Listing 4-17).

Listing 4-17. RadioGroup

// Create a RadioGroup with three options Page {

RadioGroup {

Option {

id: option1 text: "Easy"

onSelectedChanged: { if (selected) {

console.log("Easy selected");

}

}

}

Option {

id: option2 text: "Hard" selected: true

onSelectedChanged: { if (selected) {

console.log("Hard selected");

}

}

}

Option {

id: option3

text: "Very Hard" onSelectedChanged: {

if (selected) {

console.log("Very hard selected");

}

}

}

}

}

Use a RadioButton when users can choose between more than two mutually exclusive options.

SegmentedControl

A SegmentedControl displays a horizontal row of selectable options (in practice, you can display up to four visible options). A SegmentedControl is a great way of filtering content inside a view (for example, you will see in Chapter 5 how to use a SegmentedControl to dynamically switch QML components depending on the selected option). Listing 4-18 shows you how to create a SegmentedControl in QML.

Listing 4-18. SegmentedControl

Page {

Container {

SegmentedControl { id: segmented1 Option {

id: option1 text: "Option 1" value: "option1" selected: true

}

Option {

id: option2 text: "Option 2" value: "option2"

}

Option {

id: option3 text: "Option 3" value: "option3"

}

onSelectedIndexChanged: {

var value = segmented1.selectedValue console.debug("Selected value: " + value);

}

}

}

}

And Figure 4-12 shows the corresponding UI.

Figure 4-12. SegmentedControl

 
Found a mistake? Please highlight the word and press Shift + Enter  
< Prev   CONTENTS   Next >
 
Subjects
Accounting
Business & Finance
Communication
Computer Science
Economics
Education
Engineering
Environment
Geography
Health
History
Language & Literature
Law
Management
Marketing
Philosophy
Political science
Psychology
Religion
Sociology
Travel