qml example: add image on button

qml example: add image on button

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: myButton

        width: 200
        height: 120
        anchors.centerIn: parent

        property color buttonColor: "white"
        property color buttonColorPressed: "gray"
        property color buttonBorderColor: "gray"
        property color buttonBorderColorPressed: "black"

        MouseArea{
            id: myButtonMouseArea
            anchors.fill: parent
        }

        color: myButtonMouseArea.pressed
               ? buttonColorPressed : buttonColor

        border.width: 2
        border.color: myButtonMouseArea.pressed
                      ? buttonBorderColorPressed : buttonBorderColor

        Text{
            id: buttonLabel
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: parent.top
            }
            color: "black"
            text: "Button Label"
        }

        Image {
            id: buttonImage
            source: "http://goo.gl/kdbgF8"
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: buttonLabel.bottom
            }
        }
    }
}

---

qml button step-by-step

qml example: add label to button

Label can be added to button as text.

qml example: add label to button

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: myButton

        width: 100
        height: 50
        anchors.centerIn: parent

        property color buttonColor: "white"
        property color buttonColorPressed: "gray"
        property color buttonBorderColor: "gray"
        property color buttonBorderColorPressed: "black"


        MouseArea{
            id: myButtonMouseArea
            anchors.fill: parent
        }

        color: myButtonMouseArea.pressed
               ? buttonColorPressed : buttonColor

        border.width: 2
        border.color: myButtonMouseArea.pressed
                      ? buttonBorderColorPressed : buttonBorderColor

        Text{
            id: buttonLabel
            anchors.centerIn: parent
            color: "black"
            text: "Button Label"
        }
    }
}

---

qml button step-by-step

qml example: simple button

qml example: simple button

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: myButton

        width: 100
        height: 50
        anchors.centerIn: parent

        property color buttonColor: "white"
        property color buttonColorPressed: "gray"
        property color buttonBorderColor: "gray"
        property color buttonBorderColorPressed: "black"


        MouseArea{
            id: myButtonMouseArea
            anchors.fill: parent
        }

        color: myButtonMouseArea.pressed
               ? buttonColorPressed : buttonColor

        border.width: 2
        border.color: myButtonMouseArea.pressed
                      ? buttonBorderColorPressed : buttonBorderColor
    }
}

more: Implement qml button step-by-step

• add label to button
• add image on button
• handle events for button
• implement custom signal and signal handler
• created rounded Rectangle with radius
• make gradient color

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()
            }
        }

    }

}