Qt-based BB10 API Examples Documentation

main.qml Example File

repeater/assets/main.qml
    /* Copyright (c) 2012, 2013  BlackBerry Limited.
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    * You may obtain a copy of the License at
    *
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing, software
    * distributed under the License is distributed on an "AS IS" BASIS,
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
    */

    import bb.cascades 1.0
    import Components 1.0

    TabbedPane {
        Tab {
            title: qsTr ("Simple")
            Page {
                CustomPage {
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Fill

                        leftPadding: 30
                        topPadding: 30
                        rightPadding: 30

                        Repeater {
                            // Use a simple number (N) as model -> the delegate will be repeated N times
                            model: 5

                            Label {
                                text: qsTr ("Hello World")
                                textStyle {
                                    base: SystemDefaults.TextStyles.BodyText
                                    color: Color.White
                                }
                            }
                        }
                    }
                }
            }
        }

        Tab {
            title: qsTr ("Index")
            Page {
                CustomPage {
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Fill

                        leftPadding: 30
                        topPadding: 30
                        rightPadding: 30

                        Repeater {
                            // Use a simple number (N) as model -> the delegate will be repeated N times
                            model: 5

                            Label {
                                // The current index can be accessed via the 'index' context property
                                text: qsTr ("Hello World (%1)").arg(index)
                                textStyle {
                                    base: SystemDefaults.TextStyles.BodyText
                                    color: Color.White
                                }
                            }
                        }
                    }
                }
            }
        }

        Tab {
            title: qsTr ("Dynamic")
            Page {

                CustomPage {
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Fill

                        leftPadding: 30
                        topPadding: 30
                        rightPadding: 30

                        Slider {
                            id: slider
                            fromValue: 1
                            toValue: 5
                            value: 1
                        }

                        Repeater {
                            // The number, that is used as model, can be a property binding as well
                            model: slider.immediateValue

                            Label {
                                text: qsTr ("Hello World (%1)").arg(index)
                                textStyle {
                                    base: SystemDefaults.TextStyles.BodyText
                                    color: Color.White
                                }
                            }
                        }
                    }
                }
            }
        }

        Tab {
            title: qsTr ("Array")
            Page {
                CustomPage {
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Fill

                        leftPadding: 30
                        topPadding: 30
                        rightPadding: 30

                        Repeater {
                            // Use an array of arbitrary values as model
                            model: [Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.White]

                            Label {
                                text: qsTr ("Hello World (%1)").arg(index)

                                // The current value of the model can be accessed via the 'modelData' context property
                                textStyle {
                                    base: SystemDefaults.TextStyles.BodyText
                                    color: modelData
                                }
                            }
                        }
                    }
                }
            }
        }

        Tab {
            title: qsTr ("SQL Model")
            Page {
                CustomPage {
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Fill

                        leftPadding: 30
                        topPadding: 30
                        rightPadding: 30

                        ScrollView {
                            scrollViewProperties {
                                scrollMode: ScrollMode.Vertical
                            }

                            Container {
                                Repeater {
                                    // Use a DataModel object as model
                                    model: _sqlModel
                                    Container {
                                        topPadding: 30

                                        // The values of the current model entry can be accessed by their key names (here: title, firstname, surname)
                                        Label {
                                            text: title
                                            textStyle.base: SystemDefaults.TextStyles.TitleText
                                            textStyle.color: Color.White
                                        }

                                        Label {
                                            text: qsTr ("[%1 %2]").arg(firstname).arg(surname)
                                            textStyle.base: SystemDefaults.TextStyles.BodyText
                                            textStyle.color: Color.White
                                        }

                                        Divider {}
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }