ubuntu-phone team mailing list archive

[Matthias Apitz <guru@xxxxxxxxxxx>]

Hi,

I'm trying to follow this QML tutorial:

http://doc.qt.io/qt-5/qml-tutorial3.html

to understand a bit better how the QML apps do work. When you put the
attached two files in some place in the BQ and run:

qmlscene --desktop_file_hint=/usr/share/applications/webbrowser-app.desktop qml-tutorial3.qml

the 'app' starts fine and one can change the color of the text with the
six buttons. But, rotating the text does not work as explained in the
above tutorial... What do I wrong?

Thanks


	matthias
-- 
Matthias Apitz, ✉ guru@xxxxxxxxxxx, ⌂ http://www.unixarea.de/  ☎ +49-176-38902045
¡Dios querido denos otra vez los problemas de ayer, los que tuvimos en la RDA!
My Lord, give us back the problems of yesterday, those we have had in the GDR.

import QtQuick 2.0

Item {
    id: container
    property alias cellColor: rectangle.color
    signal clicked(color cellColor)

    width: 80; height: 50

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

    MouseArea {
        anchors.fill: parent
        onClicked: container.clicked(container.cellColor)
    }
}

import QtQuick 2.4
import Ubuntu.Components 1.3

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true

        MouseArea { id: mouseArea; anchors.fill: parent }

        states: State {
            name: "down"; when: mouseArea.presses == true
            PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
        }

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }
    }

    Grid {
        id: colorPicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}