Esempio GUI con QtQuick 2.0

Riprendendo la serie di esempi di GUI stavolta e' la volta di QtQuick (Qt 5.1)
Da notare che la release 5.1 i problemi all'editor visuale di QtQuick all'interno di QtCreator sembrano essere risolti per cui per progettare la pagina e' sufficiente fare doppio clic sul file .qml della colonna Progetti

Editor Visuale di QtQuick in QtCreator

------------------------------------------

import QtQuick 2.1

import QtQuick.Controls 1.0

import QtQuick.Window 2.0

ApplicationWindow {

    title: qsTr("Esempio")

    width: 250

    height: 160

    menuBar: MenuBar {

        Menu {

            title: qsTr("File")

            MenuItem {

                text: qsTr("Exit")

                onTriggered: Qt.quit();

            }

        }

    }

    TextField {

        id: text_field1

        x: 21

        y: 17

        width: 200

        height: 20

        text: ""

        placeholderText: ""

    }

    ProgressBar {

        id: progress_bar1

        x: 21

        y: 54

    }

    Slider {

        id: slider__horizontal_1

        x: 21

        y: 101

        value: 0.5

        onValueChanged: aggiorna();

        function aggiorna()

            {

            text_field1.text = slider__horizontal_1.value.toFixed(2).toString();

            progress_bar1.setValue(slider__horizontal_1.value);

        }

    }

}