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

SystemDialog

You can use a SystemDialog control to ask the user to confirm an action (see Listing 4-22). (Note that you need to import the bb.system 1.2 library.)

Listing 4-22. SystemDialog with User Confirmation

import bb.cascades 1.2

import bb.system 1.2

Page {

Container {

layout: DockLayout {

}

Button {

text: "Show Dialog!"

verticalAlignment: VerticalAlignment.Center horizontalAlignment: HorizontalAlignment.Center onClicked: {

myDialog.show();

}

}

attachedObjects: [ SystemDialog {

title: "Save Changes" id: myDialog onFinished: {

switch (value) {

case (SystemUiResult.ConfirmButtonSelection):

console.log("save confirmed"); break;

case(SystemUiResult.CancelButtonSelection): console.log("save canceled");

break; default:

break;

}

}

}

]

}

}

To display the dialog, you need to call SystemDialog.show(). To determine the user's selection, you need to handle the SystemDialog.finished() signal. The SystemDialog's text property will be displayed on the dialog's title bar (see Figure 4-16).

Figure 4-16. SystemDialog

SystemPrompt

You can use a SystemPrompt to ask for some input from the user before continuing with your application flow. The SystemPrompt will display two default buttons for accepting or rejecting the dialog box and an input field for user input. You can retrieve the user's input by calling SystemPrompt. inputFieldTextEntry() (see Listing 4-23).

Listing 4-23. SystemPrompt

import bb.cascades 1.2

import bb.system 1.2

Page {

Container {

layout: DockLayout {

}

Button {

text: "Show Dialog!"

verticalAlignment: VerticalAlignment.Center horizontalAlignment: HorizontalAlignment.Center onClicked: {

myPrompt.show();

}

}

attachedObjects: [ SystemPrompt {

title: "Enter a new file name" id: myPrompt

onFinished: {

switch (value) {

case (SystemUiResult.ConfirmButtonSelection):

console.log("new file name is: "+myPrompt.inputFieldTextEntry()) break;

case(SystemUiResult.CancelButtonSelection): console.log("new file canceled");

break; default:

break;

}

}

}

]

}

}

Figure 4-17 shows the SystemPrompt when displayed.

Figure 4-17. SystemPrompt

SystemToast

A toast is a simple pop-up message that is displayed for a predefined amount of time. The toast is for information purposes only and the user does not need to interact with it. Listing 4-24 shows you how to use a SystemToast to display a toast to the user.

Listing 4-24. SystemToast

import bb.cascades 1.2

import bb.system 1.2

Page {

Container {

layout: DockLayout {

}

Button {

text: "Show Dialog!"

verticalAlignment: VerticalAlignment.Center horizontalAlignment: HorizontalAlignment.Center

onClicked: {

myToast.show();

}

}

attachedObjects: [ SystemToast {

id: myToast

body: "Happy New Year!"

}

]

}

}

Summary

This chapter gave you a broad perspective of essential Cascades controls. You should now have a good understanding of the core controls and be able to use them in your own applications when designing single page UIs (the goal of the next chapter will be to show you how to add application navigation and structure using multiple pages).

Layout management is also an important topic covered in this chapter. The StackLayout was given a particular emphasis because it is the building block for creating device-independent and resizable UIs using space quotas. You also saw that in practice it is a good idea to use space quotas to define relative controls sizes instead of statically specifying a control's preferred size. Finally, you discovered how Cascades gives lots of flexibility in styling UI text by either using text style definition objects or by using inline HTML and CSS.

 
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