Qt Quick Components

SampleColumn.qml Example File

examples/symbian/gallery/SampleColumn.qml
 /****************************************************************************
 **
 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
 ** All rights reserved.
 ** Contact: Nokia Corporation (qt-info@nokia.com)
 **
 ** This file is part of the Qt Components project on Qt Labs.
 **
 ** No Commercial Usage
 ** This file contains pre-release code and may not be distributed.
 ** You may use this file in accordance with the terms and conditions contained
 ** in the Technology Preview License Agreement accompanying this package.
 **
 ** GNU Lesser General Public License Usage
 ** Alternatively, this file may be used under the terms of the GNU Lesser
 ** General Public License version 2.1 as published by the Free Software
 ** Foundation and appearing in the file LICENSE.LGPL included in the
 ** packaging of this file.  Please review the following information to
 ** ensure the GNU Lesser General Public License version 2.1 requirements
 ** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
 **
 ** If you have questions regarding the use of this file, please contact
 ** Nokia at qt-info@nokia.com.
 **
 ****************************************************************************/

 import Qt 4.7
 import com.nokia.symbian 1.0
 import Qt.labs.components 1.0

 Column {
     id: column
     spacing: 14

     Text {
         anchors.horizontalCenter: parent.horizontalCenter
         text: "Qt Components " + (enabled ? "(enabled)" : "(disabled)")
         font { family: platformStyle.fontFamilyRegular; pixelSize: platformStyle.fontSizeMedium }
         color: platformStyle.colorNormalLight
     }

     Button {
         anchors.horizontalCenter: parent.horizontalCenter
         text: "Push me"
         width: parent.width - parent.spacing
     }

     TextField {
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - parent.spacing
     }

     TextArea {
         anchors.horizontalCenter: parent.horizontalCenter
         placeholderText: "This is a\n multiline control."
         width: parent.width - parent.spacing; height: 280
     }

     Slider {
         anchors.horizontalCenter: parent.horizontalCenter
         value: 50
     }

     Row {
         anchors.horizontalCenter: parent.horizontalCenter
         spacing: parent.spacing

         CheckableGroup { id: group }

         RadioButton {
             platformExclusiveGroup: group
         }

         RadioButton {
             platformExclusiveGroup: group
         }
     }

     Row {
         anchors.horizontalCenter: parent.horizontalCenter
         spacing: parent.spacing

         CheckBox {
         }

         CheckBox {
             checked: true
         }
     }

     Row {
         anchors.horizontalCenter: parent.horizontalCenter
         spacing: parent.spacing

         Switch {
         }

         Switch {
             checked: true
         }
     }

     ProgressBar {
         anchors.horizontalCenter: parent.horizontalCenter

         Timer {
             running: true
             repeat: true
             interval: 25
             onTriggered: parent.value = (parent.value + 1) % 1.1
         }
     }

     ProgressBar {
         anchors.horizontalCenter: parent.horizontalCenter
         indeterminate: true
     }

     Button {
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - parent.spacing
         text: "Dialog"
         onClicked: dialog.open()
     }

     SelectionDialog {
         id: singleSelectionDialog
         titleText: "Select background color"
         selectedIndex: 1

         model: ListModel {
             id: colorModel

             ListElement { name: "Red" }
             ListElement { name: "Blue" }
             ListElement { name: "Green" }
             ListElement { name: "Yellow" }
             ListElement { name: "Black" }
             ListElement { name: "White" }
             ListElement { name: "Grey" }
             ListElement { name: "Orange" }
             ListElement { name: "Pink" }
         }

         onAccepted: { column.parent.color = colorModel.get(selectedIndex).name }
     }

     Button {
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - parent.spacing
         text: "Selection Dialog"
         onClicked: singleSelectionDialog.open()
     }

     Dialog {
         id: dialog

         title: Text {
             text: "Dialog"
             font { bold: true; pixelSize: 16 }
             color: "white"
             anchors.fill: parent
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
         }
         buttons: Row {
             height: 60
             width: parent.width
             ToolButton {
                 text: "Ok"
                 width: parent.width / 2
                 height: parent.height
                 onClicked: dialog.accept()
             }

             ToolButton {
                 text: "Cancel"
                 width: parent.width / 2
                 height: parent.height
                 onClicked: dialog.reject()
             }
         }
         content: Text {
             text: "This is the content"
             font { bold: true; pixelSize: 16 }
             anchors.fill: parent
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
         }
     }

     Button {
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - parent.spacing
         text: "QueryDialog"
         onClicked: queryDialog.open()
     }

     QueryDialog {
         id: queryDialog

         titleText: "Query Dialog"
         message: "Lorem ipsum dolor sit amet, consectetur adipisici elit,"
                  + "sed eiusmod tempor incidunt ut labore et dolore magna aliqua."
                  + "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris"
                  + "nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit"
                  + "in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
                  + "Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui"
                  + "officia deserunt mollit anim id est laborum."

         acceptButtonText: "Ok"
         rejectButtonText: "Cancel"
     }

     Button {
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - parent.spacing
         text: "ContextMenu"
         onClicked: contextMenu.open()
     }

     ContextMenu {
         id: contextMenu

         content: MenuLayout {
             MenuItem { text: "White"; onClicked: { column.parent.color = "White" } }
             MenuItem { text: "Red"; onClicked: { column.parent.color = "Red" } }
             MenuItem { text: "LightBlue"; onClicked: { column.parent.color = "LightBlue" } }
             MenuItem { text: "LightGreen"; onClicked: { column.parent.color = "LightGreen" } }
         }
     }

     ListView {
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - parent.spacing; height: 120
         clip: true
         delegate: listDelegate
         model: listModel
         header: listHeading
     }

     ListModel {
         id: listModel

         ListElement {
             titleText: "Title"
             subTitleText: "SubTitle"
         }
     }

     Component {
         id: listHeading
         ListHeading {
             width: parent.width
             ListItemText {
                 anchors.fill: parent.paddingItem
                 role: "Heading"
                 text: "ListHeading"
             }
         }
     }

     Component {
         id: listDelegate
         ListItem {
             id: listItem
             Column {
                 anchors.fill: listItem.paddingItem
                 ListItemText {
                     mode: listItem.mode
                     role: "Title"
                     text: titleText
                 }
                 ListItemText {
                     mode: listItem.mode
                     role: "SubTitle"
                     text: subTitleText
                 }
             }
         }
     }

     ChoiceList {
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - parent.spacing
         currentIndex: 2
         model: ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"]
     }

     TabBar {
         width: parent.width - parent.spacing
         TabButton { tab: tab1content; text: "1" }
         TabButton { tab: tab2content; text: "2" }
         TabButton { tab: tab3content; text: "3" }
     }

     TabGroup {
         height: 100
         width: parent.width - parent.spacing
         Button { id: tab1content; text: "tab1" }
         Text { id: tab2content; text: "tab2"; horizontalAlignment: "AlignHCenter"; verticalAlignment: "AlignVCenter" }
         Page {
             id: tab3content
             CheckBox { anchors.fill: parent; text: "tab3" }
         }
     }

     ToolButton {
         id: toolButton
         text: "ToolButton"
     }

     ToolButton {
         id: toolButton2
         checkable: true
         iconSource: "image://theme/qtg_graf_radiobutton_normal_selected"
     }

     ToolButton {
         id: toolButton3
         text: "ToolButton"
         iconSource: "image://theme/qtg_graf_radiobutton_normal_selected"
     }

     Row {
         spacing: 5

         BusyIndicator {
             id: busyInd1
             width: 20
             height: 20
             running: true
         }

         BusyIndicator {
             // default width/height is 40
             id: busyInd2
             running: true
         }

         BusyIndicator {
             id: busyInd3
             width: 60
             height: 60
             running: true
         }

         Button {
             text: "Toggle"
             onClicked: {
                 busyInd1.running = !busyInd1.running
                 busyInd2.running = !busyInd2.running
                 busyInd3.running = !busyInd3.running
             }
         }
     }

     Button {
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - parent.spacing
         text: "SectionScroller"
         onClicked: sectionScroll.open()
     }

     Dialog {
         id: sectionScroll
         title: Text {
             text: "Section Scroller"
             font { bold: true; pixelSize: 16 }
             color: "white"
             anchors.fill: parent
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
         }
         buttons:
             ToolButton {
                 text: "Close"
                 width: parent.width
                 height: 60
                 anchors.horizontalCenter: parent.horizontalCenter
                 onClicked: sectionScroll.close()
             }
         content:
             Rectangle {
             width: parent.width; height: parent.height - singleRow.height

             ListModel {
                 id: testModel
                 ListElement { name: "A Cat 1"; alphabet: "A" }
                 ListElement { name: "A Cat 2"; alphabet: "A" }
                 ListElement { name: "Boo 1"; alphabet: "B" }
                 ListElement { name: "Boo 2"; alphabet: "B" }
                 ListElement { name: "Cat 1"; alphabet: "C" }
                 ListElement { name: "Cat 2"; alphabet: "C" }
                 ListElement { name: "Dog 1"; alphabet: "D" }
                 ListElement { name: "Dog 2"; alphabet: "D" }
                 ListElement { name: "Elephant 1"; alphabet: "E" }
                 ListElement { name: "Elephant 2"; alphabet: "E" }
                 ListElement { name: "FElephant 1"; alphabet: "F" }
                 ListElement { name: "FElephant 2"; alphabet: "F" }
                 ListElement { name: "Guinea pig"; alphabet: "G" }
                 ListElement { name: "Goose"; alphabet: "G" }
                 ListElement { name: "Horse"; alphabet: "H" }
                 ListElement { name: "Horse"; alphabet: "H" }
                 ListElement { name: "Parrot"; alphabet: "P" }
                 ListElement { name: "Parrot"; alphabet: "P" }
             }

             ListView {
                 id: list
                 anchors.fill: parent
                 clip: true
                 delegate:  Rectangle {
                     width: list.width
                     height: 20
                     border.color: "#000"
                     border.width: 1
                     color: index % 2 == 0 ? "#ffffff" : "#eeeeee"
                     property string section: name[0]
                     Text {
                         anchors.verticalCenter: parent.verticalCenter
                         x: 20
                         text: name + " (index " + index + ")"
                     }
                 }

                 model: testModel
                 section.property: "alphabet"
                 section.criteria: ViewSection.FullString
                 section.delegate: Rectangle {
                     width: list.width
                     height: 30
                     color: "#888"
                     Text {
                         anchors.verticalCenter: parent.verticalCenter
                         x: 5
                          text: section
                          font.bold: true
                          font.pointSize: 16
                      }
                 }
             }
             ScrollDecorator {
                 flickableItem: list
             }

             SectionScroller {
                 id: sectionScroller
                 listView: list
             }

             CheckBox {
                 id: singleRow
                 anchors.top: parent.bottom
                 text: "Single Row"
                 onClicked: sectionScroller.platformSingleRow = !sectionScroller.platformSingleRow
             }
         }
     }

     ButtonRow {
        id: buttonRow1
        width: parent.width - parent.spacing
        exclusive: true
        checkedButton: b2

        Button { text: "b1" }
        Button { text: "b2" }
        Button { text: "b3" }
    }

    ButtonRow {
        id: buttonRow2
        width: parent.width - parent.spacing
        exclusive: true

        ToolButton { text: "tb1" }
        ToolButton { text: "tb2" }
    }

    ButtonColumn {
        id: buttonColumn
        width: parent.width - parent.spacing
        exclusive: true

        Button { text: "b4" }
        Button { text: "b5" }
        Button { text: "b6" }
        Button { text: "b7" }
    }
 }