Qt 5.1.1, Qt Creator 2.8.1 and Installer Framework 1.4.0 released

Qt 5.1.1, the first patch release for the Qt 5.1 series, released. It provides many improvements over Qt 5.1.0 as well as packages Qt Creator 2.8.1 to the installers. As a patch release, it does not add new features and remains binary compatible with Qt 5.1.0.

Source:
- Qt 5.1.1 Released
- Qt Creator 2.8.1 & Installer Framework 1.4.0 released

qml example: load image from internet and handle status changed

import QtQuick 2.0
import QtQuick.Window 2.0

Window {

    title: "Qteveloper(qteveloper.blogspot.com)";

    width: 360
    height: 360
    Text {
        id: myHello
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Hello World"
    }

    Image {
        id: myImage
        source: "http://goo.gl/kdbgF8"
        anchors {
            left: parent.left
            top: myHello.bottom
        }

        onStatusChanged:
            switch(myImage.status){
            case Image.Null:
                myState.text = "no image has been set";
                break;
            case Image.Ready:
                myState.text = "the image has been loaded\n"
                        + myImage.width + " x " + myImage.height;
                break;
            case Image.Loading:
                myState.text = "the image is currently being loaded";
                break;
            case Image.Error:
                myState.text = "an error occurred while loading the image";
                break;
            }
    }

    Text {
        id: myState
        anchors.horizontalCenter: parent.horizontalCenter
        anchors {
            left: myImage.left
            top: myImage.bottom
            leftMargin: 20
            topMargin: 10
        }
    }

}

qml example: set title of Window

qml example: set title of Window

import QtQuick 2.0
import QtQuick.Window 2.0

Window {

    title: "Qteveloper(qteveloper.blogspot.com)";

    width: 360
    height: 360
    Text {
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Hello World"
    }

}

qml example: detect mouse and draw on Canvas

qml example: detect mouse and draw on Canvas

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    property int xpos
    property int ypos

    Canvas {
        id: myCanvas
        anchors.fill: parent

        onPaint: {
            var ctx = getContext('2d')
            ctx.fillStyle = "red"
            ctx.fillRect(xpos-1, ypos-1, 3, 3)

        }

        MouseArea{
            anchors.fill: parent
            onPressed: {
                xpos = mouseX
                ypos = mouseY
                myCanvas.requestPaint()
            }
            onMouseXChanged: {
                xpos = mouseX
                ypos = mouseY
                myCanvas.requestPaint()
            }
            onMouseYChanged: {
                xpos = mouseX
                ypos = mouseY
                myCanvas.requestPaint()
            }
        }

    }

}

qml example: Draw text on Canvas

qml example: Draw text on Canvas

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Canvas {
        anchors.fill: parent

        onPaint: {
            var ctx = getContext('2d');
            ctx.font="50px";
            ctx.fillText("qteveloper", 50, 150);
            ctx.font="20px";
            ctx.strokeText("qteveloper.blogspot.com", 50, 200);

        }

    }
}

qml example: Draw something on Canvas

qml example: Draw something on Canvas

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Canvas {
        anchors.fill: parent

        onPaint: {
            var ctx = getContext('2d');

            ctx.fillStyle = "red"
            ctx.fillRect(150, 200, 120, 120)

            ctx.beginPath();
            ctx.lineWidth = 3
            ctx.strokeStyle = "blue"
            ctx.ellipse(10, 10, 200, 200)
            ctx.rect(50, 50, 200, 200)
            ctx.stroke();

        }

    }
}

qml example: Slider

qml example: Slider

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        id: myText
        anchors.centerIn: parent
        text: mySliderHandle.x
    }

    Rectangle {
        id: mySlider

        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            leftMargin: 20
            rightMargin: 20
            bottomMargin: 10
        }

        height: 20
        radius: 10
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "gray" }
        }

        Rectangle {
            id: mySliderHandle
            x: 1; y: 1; width: 30; height: 20
            radius: 10
            smooth: true
            color: "blue"

            MouseArea {
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: parent.parent.width - 30
            }
        }
    }
}

qml example: PathView

Example of using qml PathView. For details of Path, read Path.

qml example: PathView

import QtQuick 2.0

Rectangle {

    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    PathView {
        id: myPathView
        anchors.fill: parent


        model: myListModel
        delegate: Component{
            Item{
                property variant itemData: model.modelData
                width: 100
                height: 12
                Column{
                    Text {
                        text: dayOfWeek;
                        anchors.horizontalCenter: parent.horizontalCenter }
                }

                //Use mouse click to select currentIndex
                MouseArea{
                    id: itemMouseArea
                    anchors.fill: parent
                    onClicked: {
                        myPathView.currentIndex = index

                    }
                }

            }
        }

        //To read detail of Path,
        //visit: http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-path.html
        path: Path {
            startX: 50; startY: 12
            PathLine { x: 300-50; y: 360-12 }
        }

        focus: true

        //Press Left/Right key to change currentIndex
        Keys.onLeftPressed: decrementCurrentIndex()
        Keys.onRightPressed: incrementCurrentIndex()

    }

}

qml example: simple GridView vs ListView

Simple GridView:

simple GridView

import QtQuick 2.0

Rectangle {

    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    GridView {
        width: parent.width; height: parent.height
        cellWidth: 100; cellHeight: 20
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }

        model: myListModel
        delegate: Column {
            Text { text: num + " : " + dayOfWeek; anchors.horizontalCenter: parent.horizontalCenter }
        }
        focus: true
    }

}

Simple ListView:

simple ListView

import QtQuick 2.0

Rectangle {

    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    ListView {
        width: parent.width; height: parent.height
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }

        model: myListModel
        delegate: Column {
            Text { text: num + " : " + dayOfWeek; anchors.horizontalCenter: parent.horizontalCenter }
        }
        focus: true
    }

}

qml example: load ListView with data from ListModel

Example of qml to load ListView with data from ListModel.

qml example: load ListView with data from ListModel

import QtQuick 2.0
import QtWebKit 3.0

Rectangle {
    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    ListView{
        id: myListView
        width: parent.width
        height: 100
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
        model: myListModel

        delegate: Component{
            Item{
                width: parent.width
                height: 12
                Column{
                    Text {text: model.num + " : " + model.dayOfWeek}
                }
                MouseArea{
                    id: itemMouseArea
                    anchors.fill: parent
                    onClicked: {
                        myListView.currentIndex = index
                    }
                }
            }
        }

        onCurrentItemChanged: {
            myText.text = myListModel.get(myListView.currentIndex).dayOfWeek
        }
    }

    Text {
        id: myText
        anchors.centerIn: parent
    }
}

qml example: Detect mouse click on ListView

Last qml example of ListView response for keyboard only. It is modified in this example to handle mouse click, with MouseArea.

qml example: Detect mouse click on ListView

import QtQuick 2.0
import QtWebKit 3.0

Rectangle {
    width: 300
    height: 360

    ListView{
        id: myListView
        width: parent.width
        height: 100
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
        model: ["Sunday", "Monday", "Tuesday", "Wednesday",
            "Thursday", "Friday", "Saturday"]

        delegate: Component{
            Item{
                property variant itemData: model.modelData
                width: parent.width
                height: 12
                Column{
                    Text {text: model.modelData}
                }
                MouseArea{
                    id: itemMouseArea
                    anchors.fill: parent
                    onClicked: {
                        myListView.currentIndex = index

                    }
                }
            }
        }

        onCurrentItemChanged: myText.text = myListView.currentItem.itemData

    }

    Text {
        id: myText
        anchors.centerIn: parent
    }
}