Example of QtQuick.Controls SpinBox

Example to implement QtQuick.Controls SpinBox with qml.

example of QtQuick.Controls SpinBox

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow {
    title: qsTr("qteveloper.blogspot.com")
    width: 400
    height: 350

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    Column{
        Label {
            id: label
        }

        SpinBox{
            id: spinbox1
            width: 100
            maximumValue: 100
            minimumValue: 0
            value: 50
            onValueChanged: label.text = "spinbox1: " + value
        }
        SpinBox{
            id: spinbox2
            width: 100
            maximumValue: 100
            minimumValue: 0
            value: 50
            stepSize: 5
            prefix: "prefix: "
            onValueChanged: label.text = "spinbox2: " + value
        }
        SpinBox{
            id: spinbox3
            width: 100
            maximumValue: 100
            minimumValue: 0
            value: 50
            stepSize: 10
            suffix: "-suffix"
            onValueChanged: label.text = "spinbox3: " + value
        }

    }
}

QtQuick.Controls example, Slider.

qml example to implement QtQuick.Controls Slider.

QtQuick.Controls Slider

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow {
    title: qsTr("qteveloper.blogspot.com")
    width: 400
    height: 350

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    Column{

        Label {
            id: label
        }

        Slider{
            id: slider1
            maximumValue: 100
            minimumValue: 0
            value: 50
            onValueChanged: label.text = "slider1: " + value
        }
        Slider{
            id: slider2
            maximumValue: 100
            minimumValue: 0
            value: 50
            stepSize: 10
            onValueChanged: label.text = "slider2: " + value
        }
        Slider{
            id: slider3
            maximumValue: 100
            minimumValue: 0
            value: 50
            stepSize: 25
            orientation: Qt.Vertical
            onValueChanged: label.text = "slider3: " + value
        }
    }
}

QtQuick.Controls example, ProgressBar.

qml example to implement QtQuick.Controls ProgressBar.

QtQuick.Controls ProgressBar

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow {
    title: qsTr("qteveloper.blogspot.com")
    width: 400
    height: 350

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    Column{

        ProgressBar{
            id: progressBar1
            maximumValue: 100
            minimumValue: 0
            value: 50
        }
        ProgressBar{
            id: progressBar2
            maximumValue: 100
            minimumValue: 0
            value: 50
            indeterminate: true
        }
        ProgressBar{
            id: progressBar3
            maximumValue: 100
            minimumValue: 0
            value: 50
            orientation: Qt.Vertical
        }

        Button {
            id: buttonInc
            text: "+10"
            onClicked: {
                progressBar1.value += 10
                progressBar2.value += 10
                progressBar3.value += 10
            }
        }
        Button {
            id: buttonDec
            text: "-10"
            onClicked: {
                progressBar1.value -= 10
                progressBar2.value -= 10
                progressBar3.value -= 10
            }
        }

    }
}

QtQuick.Controls example, RadioButton and GroupBox

qml example to implement QtQuick.Controls RadioButton and GroupBox.

qml example of QtQuick.Controls RadioButton and GroupBox

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow {
    title: qsTr("qteveloper.blogspot.com")
    width: 400
    height: 350

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    ExclusiveGroup {
        id: exclusiveGroup1
    }

    ExclusiveGroup {
        id: exclusiveGroup2
    }

    Column{
        GroupBox {
            title: "GroupBox 1 (exclusive)"
            Column {
                RadioButton {
                    id: radioButton1a
                    text: "RadioButton 1a"
                    exclusiveGroup: exclusiveGroup1
                    checked: true
                }
                RadioButton {
                    id: radioButton1b
                    text: "RadioButton 1b"
                    exclusiveGroup: exclusiveGroup1
                }
                RadioButton {
                    id: radioButton1c
                    text: "RadioButton 1c"
                    exclusiveGroup: exclusiveGroup1
                }
            }
        }

        GroupBox {
            title: "GroupBox 2"
            Row {
                RadioButton {
                    id: radioButton2a
                    text: "2a"
                    checked: true
                }
                RadioButton {
                    id: radioButton2b
                    text: "2b"
                }
                RadioButton {
                    id: radioButton2c
                    text: "2c"
                }
            }
        }
    }
}

QtQuick.Controls examples - single selectable CheckBox in ExclusiveGroup

To make a group of CheckBox to be single selectable, we can apply the CheckBoxes to ExclusiveGroup.

Only one CheckBox can be checked in a ExclusiveGroup

Example:

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow {
    title: qsTr("qteveloper.blogspot.com")
    width: 400
    height: 350

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    ExclusiveGroup {
        id: exclusiveGroup1
    }

    ExclusiveGroup {
        id: exclusiveGroup2
    }

    Column{
        Column {
            CheckBox {
                text: "option 1"
                exclusiveGroup: exclusiveGroup1
            }
            CheckBox {
                text: "option 2"
                exclusiveGroup: exclusiveGroup1
            }
            CheckBox {
                text: "option 3"
                exclusiveGroup: exclusiveGroup1
            }
        }
        Row {
            CheckBox {
                text: "option A"
                checked: true
                exclusiveGroup: exclusiveGroup2
            }
            CheckBox {
                text: "option B"
                exclusiveGroup:
                    exclusiveGroup2
            }
            CheckBox {
                text: "option C"
                exclusiveGroup: exclusiveGroup2
            }
        }
    }
}

QtQuick.Controls examples - CheckBox

A CheckBox of QtQuick.Controls is an option button that can be toggled on (checked) or off (unchecked).

QtQuick.Controls examples - CheckBox

Example code:

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow {
    title: qsTr("qteveloper.blogspot.com")
    width: 400
    height: 350

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    Column{
        Column {
            CheckBox { text: "option 1" }
            CheckBox { text: "option 2" }
            CheckBox { text: "option 3" }
        }
        Row {
            CheckBox { text: "option A" }
            CheckBox { text: "option B" }
            CheckBox { text: "option C" }
        }
    }
}

QtQuick example: resizing Window

QtQuick example: resizing Window

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow {
    title: "Qteveloper (http://qteveloper.blogspot.com/)"
    width: 400
    height: 380

    menuBar: MenuBar {
        Menu {
            title: "Sub-Window"
            MenuItem {
                text: "Open"
                onTriggered: myWindow.open();
            }
            MenuItem {
                text: "Close"
                onTriggered: myWindow.close();
            }
        }
    }

    Window{
        id: myWindow
        title: "Child Window"
        width: 300
        height: 300
        visible: false
        function open(){
            visible = true
        }
        function close(){
            visible = false
        }

        Rectangle {
            anchors.fill: parent

            Button {
                id: maxMe
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                text:"Maximize me"
                width: parent.width
                tooltip:"Maximize this child window"
                onClicked: myWindow.showMaximized()
            }
            Button {
                id: normalizeMe
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: maxMe.bottom
                text:"Normalize me"
                width: parent.width
                tooltip:"Normalize this child window"
                onClicked: myWindow.showNormal()
            }
            Button {
                id: minMe
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: normalizeMe.bottom
                text:"Minimized...but not work as expected!"
                width: parent.width
                tooltip:"Minimized this child window"
                onClicked: myWindow.showMinimized()
            }
            Button {
                id: closeMe
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                text:"Close me"
                width: parent.width
                tooltip:"Close this child Window"
                onClicked: myWindow.close()
            }
        }
    }
}

QtQuick Controls example: GroupBox

GroupBox provides a frame, a title on top and displays various other controls inside itself. Group boxes can also be checkable.

GroupBox example

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    title: "Qteveloper (http://qteveloper.blogspot.com/)"
    width: 480
    height: 320

    ColumnLayout{

        GroupBox {
            id: groupBoxA
            title: "GroupBox A"
            Layout.fillWidth: true
            Image {
                source: "http://goo.gl/kdbgF8"
            }
        }

        GroupBox {
            id: groupBoxB
            title: "GroupBox B"
            Layout.fillWidth: true
            checkable: true

            ColumnLayout {
                anchors.fill: parent
                Label { text: "Label 1" }
                Label { text: "Label 2" }
                Label { text: "Label 3" }
            }
        }

    }

}

QtQuick Controls: SplitView

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480

    SplitView{
        anchors.fill: parent
        orientation: Qt.Horizontal

        Rectangle{
            width: 100
            Layout.minimumWidth: 200
            Image {
                width: 500
                height: 250
                source: "http://goo.gl/ZfY4AM"
            }
        }

        Rectangle{
            Layout.minimumWidth: 50
            Image {
                source: "http://goo.gl/ZfY4AM"
            }
        }
    }
}

Related: QtQuick Controls: ScrollView

QtQuick Controls: Apply Action to Buttons

QtQuick Controls: Apply Action to Buttons

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    title: "Qteveloper (http://qteveloper.blogspot.com/)"
    width: 480
    height: 320

    ColumnLayout{

        Button { action: actionButtonA }
        Button { action: actionButtonB }
        Button { action: actionButtonC }

        RowLayout{
            Button { action: actionButtonD1 }
            Button { action: actionButtonD2 }
            Button { action: actionButtonD3 }
        }
        Button { action: actionButtonE }
    }

    Action{
        id: actionButtonA
        text: "Button A"
        onTriggered: statusLabel.text = "Button A Triggered "
    }

    Action{
        id: actionButtonB
        text: "Button B - Logo"
        iconSource: "qtlogo.png"
        onTriggered: statusLabel.text = "Button B Triggered "
    }

    Action{
        id: actionButtonC
        text: "Button C - checkable"
        checkable: true
        onCheckedChanged: statusLabel.text = "Button C checked: " + checked
    }

    ExclusiveGroup {
        id: group_D

        Action{
            id: actionButtonD1
            text: "Button D1"
            checkable: true
            onCheckedChanged: {
                if(checked){
                    statusLabel.text = "Button D1 checked"
                }
            }
        }

        Action{
            id: actionButtonD2
            text: "Button D2"
            checkable: true
            onCheckedChanged: {
                if(checked){
                    statusLabel.text = "Button D2 checked"
                }
            }
        }

        Action{
            id: actionButtonD3
            text: "Button D3"
            checkable: true
            onCheckedChanged: {
                if(checked){
                    statusLabel.text = "Button D3 checked"
                }
            }
        }

        Action{
            id: actionButtonE
            text: "Button &E"
            shortcut: "Ctrl+E"
            onTriggered: statusLabel.text = "Button E Triggered "
        }
    }

    statusBar: StatusBar{
        RowLayout{
            Label{
                id: statusLabel
                text: "Status Bar"
            }
        }
    }
}

Related: QtQuick Controls: Example to apply Action to MenuItem and ToolButton

QtQuick Controls: Example to apply Action to MenuItem and ToolButton

Example to apply Action to MenuItem and ToolButton

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: myWindow
    title: "Qteveloper (http://qteveloper.blogspot.com/)"
    width: 480
    height: 320

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                action: actionExit
            }
        }
    }

    toolBar: ToolBar{
        RowLayout{
            ToolButton{ action: actionToolButtonA }
            ToolButton{ action: actionToolButtonB }
            ToolButton{ action: actionToolButtonC }
        }
    }

    Action{
        id: actionExit
        text: "E&xit"
        shortcut: "Ctrl+X"
        iconSource: "qtlogo.png"
        onTriggered: Qt.quit()
    }

    Action{
        id: actionToolButtonA
        text: "ToolButton A"
        onTriggered: statusLabel.text = "ToolButton A Triggered "
        iconSource: "qtlogo.png"
    }

    Action{
        id: actionToolButtonB
        text: "ToolButton B"
        checkable: true
        onCheckedChanged: statusLabel.text = "ToolButton B Checked - "
                          + checked
    }

    Action{
        id: actionToolButtonC
        text: "ToolButton C"
        checkable: true
        onCheckedChanged: statusLabel.text = "ToolButton C Checked - "
                          + checked
    }

    statusBar: StatusBar{
        RowLayout{
            Label{
                id: statusLabel
                text: "Status Bar"
            }
        }
    }
}

Related: QtQuick Controls: Apply Action to Buttons

QtQuick Controls: ApplicationWindow, MenuBar, ToolBar and StatusBar

QtQuick Controls: ApplicationWindow, MenuBar, ToolBar and StatusBar

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: myWindow
    title: "Qteveloper (http://qteveloper.blogspot.com/)"
    width: 480
    height: 320


    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
            MenuItem {
                text: "File - Item 2"
                onTriggered: statusLabel.text = "File - Item 2 Triggered"
            }
        }
        Menu {
            title: "Option B"
            MenuItem {
                text: "Opt B1"
                onTriggered: statusLabel.text = "Opt B1 Triggered"

            }
            MenuItem {
                text: "Opt B2"
                checkable: true
                onCheckedChanged: statusLabel.text = "Opt B2 Checked - "
                                  + checked
            }
            MenuItem {
                text: "Opt B3"
                checkable: true
                onCheckedChanged: statusLabel.text = "Opt B3 Checked - "
                                  + checked
            }
        }
    }

    toolBar: ToolBar{
        RowLayout{
            ToolButton{
                text: "ToolButton T1"
                onClicked: statusLabel.text = "ToolButton T1 clicked"
            }
            ToolButton{
                text: "ToolButton T2"
                onClicked: statusLabel.text = "ToolButton T2 clicked"
            }
            ToolButton{
                text: "ToolButton T3"
                onClicked: statusLabel.text = "ToolButton T3 clicked"
            }
        }
    }

    statusBar: StatusBar{
        RowLayout{
            Label{
                id: statusLabel
                text: "Status Bar"
            }
        }
    }
}

~ QtQuick Controls: Example to apply Action to MenuItem and ToolButton

QtQuick Controls: ScrollView

Example of using ScrollView in QtQuick.Controls 1.0.

There are two Images in the window, both loaded from the same source at internet. The upper one place within a ScrollView, the bottom one is a standalone image.

QtQuick Controls: ScrollView

import QtQuick 2.1
import QtQuick.Controls 1.0

Rectangle {
    width: 500
    height: 500

    //Image within ScrollView
    ScrollView{
        id: myScrollView
        anchors.top: parent.top
        width: 500
        height: 250
        Image {
            source: "http://goo.gl/ZfY4AM"
        }
    }

    //standalone Image
    Image {
        anchors.top: myScrollView.bottom
        width: 500
        height: 250
        source: "http://goo.gl/ZfY4AM"
    }
}

Related: QtQuick Controls: SplitView