Create the custom picker UI

The last step is to create the UI in QML. Open the main.qml file and remove the pre-populated contents. Add the required imports to the project:

import bb.cascades 1.0
import custom.pickers 1.0

Next, create a Page and a Container to hold the custom picker. Specify an id and objectName for the Container, and create a Label to display the title for your Page.

Page {
    Container {
        id: maincontainer
        objectName: "mainContainer"
        Label {
            text: "RGB Picker"
        }
    }
}

Add your Picker to the Container, and specify an id, objectName, title, and description. Assign a pickerItemProvider and call the RGBPickerProvider class that you created in C++ to create the entries for your Picker.

Picker {
    id: picker1
    objectName: "picker1"
    title: "RGB Picker"
    description: picker1.selectedValue 
    pickerItemProvider: 
        RGBPickerProvider {
            id: rgbProvider
            columnWidthRatio: [1, 1, 1]
    }
}

Finally, create a Container that displays the custom color that is retrieved from your custom picker. A Label is used to display the hex value for the selection.

Container {
    id: colorbar
    background: Color.create(picker1.selectedValue)
    horizontalAlignment: HorizontalAlignment.Center
        Label {
            id: colorlabel
            text: picker1.selectedValue
    }
}

Your finished main.qml file should look like this:

import bb.cascades 1.0
import custom.pickers 1.0

Page {
    Container {
        id: mainContainer
        objectName: "mainContainer"
        Label {
            text: "RGB Picker"
        }
        Picker {
            id: picker1
            objectName: "picker1"
            title: "RGB Picker"
            description: picker1.selectedValue 
            pickerItemProvider: 
                RGBPickerProvider {
                    id: rgbProvider
                    columnWidthRatio: [1, 1, 1]
                }
        }
        Container {
            id: colorbar
            background: Color.create(picker1.selectedValue)
            horizontalAlignment: HorizontalAlignment.Center
            Label {
                id: colorlabel
                text: picker1.selectedValue
            }
        }
    }
}

The code for your custom picker is now complete! Build and run the project to see the final result.

Screen showing the finished custom RGB picker.

Last modified: 2015-03-31



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus