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);

        }

    }

}

Mandelbrot in QtQuick 2

Visto che oramai sembra che nell'immediato futuro un po' di sistemi mobili useranno le QtQuick (Ubuntu Touch ed Android) e visto che e' uscito l'SDK Qt 5.1 ho voluto riaprire l'argomento per vedere se e' la volta buona

Come risulta chiaro dal confronto con questo post QtQuick eredita molta della struttura del codice da Javascript anche se vi sono comunque differenze. Per esempio la stampa con il comando

context.fillRect(j,i,1,1);
in QtQuick e' dovuta diventare

ctx.moveTo(j,i);

ctx.lineTo(j+1,i+1);

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

import QtQuick 2.0

Canvas {

    id : canvas

    width : 640

    height : 640

    MouseArea {

             anchors.fill: parent

             onClicked: { }

         }

    onPaint: {

        var re_min = -2.0;

        var im_min = -1.2;

        var re_max = 1.0;

        var im_max = 1.2;

        var iterazioni = 255;

        var r;

        var a,b;

        var x,y,x_new,y_new;

        var k,j,i;

        var SCREEN_HEIGHT = 640;

        var SCREEN_WIDTH = 640;

        var re_factor = (re_max-re_min);

        var im_factor = (im_max-im_min);

        var ctx = canvas.getContext('2d');

        ctx.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);

        ctx.save();

        ctx.strokeStyle = "#FFFFFF";

        for (var i=0;i<SCREEN_WIDTH;i++) {

            for (var j=0;j<SCREEN_HEIGHT;j++) {

                a = re_min+(j*re_factor/SCREEN_WIDTH);

                b = im_min+(i*im_factor/SCREEN_HEIGHT);

                x = 0;

                y = 0;

                for (var k=0;k<iterazioni;k++)

                                      {

                                      x_new = (x*x)-(y*y)+a;

                                      y_new = (2*x*y)+b;

                                      if (((x_new*x_new)+(y_new*y_new))>4)

                                       {

                                       r = k%2;

                                       if (r == 1)

                                           {

                                           ctx.beginPath();

                                           ctx.moveTo(j,i);

                                           ctx.lineTo(j+1,i+1);

                                           ctx.stroke();

                                           }

                                       break;

                                       }

                                      x = x_new;

                                      y = y_new;

                                    }

                }

            }

         }

}

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

Creare eseguibile da QT/QML

I programmi scritti in QtQuick sono visibili all'interno di Qmlviewer
C'e' pero' la possbilita' di creare delle applicazioni stand-alone creando una applicazione Qt che di fatto e' un viewer per QtQuick

questa procedura e' resa automatica all'interno di Qt SDK creando un Nuovo progetto e selezionando Qt Quick Application.

Al termine della procedura guidata viene chiesto di selezionare il file qml di interesse (o di crearne uno nuovo)

Viene cosi' creato in automatico un progetto che ha come funzione main la seguente
----------------------------------

#include <QtGui/QApplication>

#include "qmlapplicationviewer.h"

int main(int argc, char *argv[])

{

    QApplication app(argc, argv);

    QmlApplicationViewer viewer;

    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);

    viewer.setMainQmlFile(QLatin1String("qml/gg/gg.qml"));

    viewer.showExpanded();

    return app.exec();

}

----------------------------------
si vede chiaramente il funzionamento del programma e dove viene referenziato il file qml

Qt Desktop Components in QtQuick/Qt4.7 Debian

Come gia' visto in precedenza QtQuick non ha molti componenti visuali di default ed Ubuntu ha risolto il problema aggiungendo le proprie estensioni per Ubuntu for Phones

Per l'ambiente Desktop, e piu' in dettaglio Qt 4.7, sono disponibili i Qt Desktop Components che possono essere scaricati in sorgente da qui
Dopo aver scaricato il file tgz del master si scompatta e da root si digita

qmake 
make install

terminata la compilazione si puo' avere un riassunto dei componenti visuali entrando nella directory examples e digitando

qmlviewer Gallery.qml

Gallery.qml in esecuzione

Questo esempio funziona con Qt 4.7 ma non con Qt 5.0 Beta 2

Per l'SDK Qt5 Beta 2 i componenti di QtQuick 2.0 si trovano gia' in
/opt/qt5/examples/qtdeclarative/demos

Esempio della calcolatrice di QtQuick 2.0