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


You can use buttons in order to capture touch events in your application. A Button can display some text, an image, or both. You can set the following properties on a Button:

n For sizing, you can set the preferredWidth, minWidth, and maxWidth properties. A button's height is fixed and you cannot change it. The button's width is increased automatically in order to fit text and images. A button will truncate its text if the text content is wider than the maxWidth property.

n The button's text property specifies the text that will be displayed on the Button.

n You can use the image or imageSource properties for specifying an image to be displayed on the Button. In most cases, you will use the imageSource property, which will usually correspond to the URL of an image located in a subfolder of your application's assets folder (you can also use the image property to specify a Image wrapped as a QVariant).

As explained in the previous chapters, the button will emit the clicked signal that you can handle in QML using the onClicked signal handler (see Listing 4-14).

Listing 4-14. Button Clicked Signal


id: button

text: "mybutton" onClicked: {

console.log("I was clicked!")



The following best practices apply to buttons:

n Set the button that users are most likely to tap as the default button. Also, don't make a button associated with a destructive action as the default button.

n Use single-word labels when possible.

n Use verbs that describe the associated action (for example: Login, Cancel, Delete, or Save).


A Slider is a control that allows the selection of a value from a range of values (see Figure 4-9).

You can set the range using the fromValue and toValue properties. You can handle the value using the onImmediateValueChanged signal handler. In practice, you will have to round to the closest integer the immediateValue passed to the handler (see Listing 4-15).

Figure 4-9. Slider

Listing 4-15. Slider

import bb.cascades 1.0 Page {

Container {

TextField {

id: texfield



id: slider fromValue: 0

toValue: 100 onImmediateValueChanged: {

texfield.text = Math.round(immediateValue)





Use a slider when a user needs to quickly set a value from a predetermined range of values.


An ImageView is a visual control for displaying images (you used ImageView controls in Listing 4-3 and in the HelloCascades app from Chapter 1). You can either set the imageSource property, which is a URL specifying the location of the image, or set the image property, which is a Image wrapped as a QVariant (note that when you specify the imageSource property as an absolute path on the filesystem, you must prepend the path with “file://”). You can also set the ImageView's scalingMethod property, which specifies how the source image will be scaled within the control.

n ScalingMethod.AspectFit: Fit the image inside the area while preserving the correct aspect ratio.

n ScalingMethod.AspectFill: Stretch and crop the image to fill the entire assigned area while keeping the aspect ratio.

n ScalingMethod.Fill: Stretch the image to fill the assigned area.

n ScalingMethod.None: Content is either cropped or centered with no scaling.

Found a mistake? Please highlight the word and press Shift + Enter  
< Prev   CONTENTS   Next >
Business & Finance
Computer Science
Language & Literature
Political science