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

Pickers

A picker is a control for selecting items such as a picture, a file, or a date. I will describe in this section the FilePicker and the DataAndTimePicker, which come as standard controls with Cascades. (You can also create your own custom picker, but I won't cover this here. Custom pickers are nevertheless explained in the online BlackBerry 10 developer documentation.)

FilePicker

A FilePicker allows the user to either select a file from the file system (in picker mode) or specify a name and location for saving a file (in saver mode). For example, you can use a FilePicker to load an image from the device's photo folder in an ImageView (see Listing 4-19). (Note that in QML you must prefix the path returned by a FilePicker with “file://” before passing it to an ImageView.) You can also filter the file types by setting the FilePicker's type property. Finally, you can use the fileSelected signal to handle selection (the signal is emitted both in picker and saver modes).

Listing 4-19. FilePicker

import bb.cascades 1.0

import bb.cascades.pickers 1.0

Page {

Container { ImageView{

id: myImageView

}

Button {

text: "FilePicker from QML" onClicked: {

filePicker.open()

}

}

attachedObjects: [ FilePicker {

id:filePicker

type : FileType.Picture title : "Select Picture"

directories : ["/accounts/1000/shared/misc"] onFileSelected : {

console.log("FileSelected signal received : " + selectedFiles); myImageView.imageSource = "file://" + selectedFiles[0];

}

}

]

}

}

Also note that in the example provided in Listing 4-14, the FilePicker is an attached object property of the Container (this enables you to selectively display the FilePicker when the button is pressed).

A DateTimePicker is a control for selecting a date and/or time. You can set the DateTimePicker's mode, which specifies how date and time are shown to the user (see Figure 4-13).

DateTimePicker

n DateTimePickerMode.Time: In this mode, the time is shown in two columns (hours and minutes).

n DateTimePickerMode.Date: This is the default mode. The date is shown in three columns (day, month, and year).

n DateTimePickerMode.DateTime: Shows the day and time in three columns (day, hours, and minutes).

n DateTimePickerMode.Timer: Shows the time in three columns, like a stopwatch (hours, minutes, and seconds).

Figure 4-13. DateTimePiker (image source: BlackBerry web site)

Note that the internal representation of a date by the QDateTimePicker is a Qt QDateTime object, which is accessible with the QDateTimePicker.value property. In QML, there are several ways of setting this property: you can set the value property either by using a correctly formatted string

or by using a JavaScript Date object. Finally, you can respond to the valueChanged signal to handle date changes.

 
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