From 52d9927713df64f8dec11b69bf907a50a9dc32a2 Mon Sep 17 00:00:00 2001 From: Yann Bodson Date: Thu, 1 Apr 2010 15:19:55 +1000 Subject: Make QML 'hello world' tutorial less confusing. Task-number: QTBUG-9384 --- doc/src/declarative/tutorial.qdoc | 6 +++--- examples/declarative/tutorials/helloworld/Cell.qml | 6 +++--- .../declarative/tutorials/helloworld/tutorial2.qml | 14 +++++++------- .../declarative/tutorials/helloworld/tutorial3.qml | 19 +++++++++---------- 4 files changed, 22 insertions(+), 23 deletions(-) diff --git a/doc/src/declarative/tutorial.qdoc b/doc/src/declarative/tutorial.qdoc index 66de741..1a93d05 100644 --- a/doc/src/declarative/tutorial.qdoc +++ b/doc/src/declarative/tutorial.qdoc @@ -155,13 +155,13 @@ An \l Item is the most basic visual element in QML and is often used as a contai \snippet examples/declarative/tutorials/helloworld/Cell.qml 4 -We declare a \c color property. This property is accessible from \e outside our component, this allows us +We declare a \c cellColor property. This property is accessible from \e outside our component, this allows us to instantiate the cells with different colors. This property is just an alias to an existing property - the color of the rectangle that compose the cell (see \l{intro-properties}{Properties}). \snippet examples/declarative/tutorials/helloworld/Cell.qml 5 -We want our component to also have a signal that we call \e clicked with a \e color parameter. +We want our component to also have a signal that we call \e clicked with a \e cellColor parameter of type \e color. We will use this signal to change the color of the text in the main QML file later. \snippet examples/declarative/tutorials/helloworld/Cell.qml 2 @@ -189,7 +189,7 @@ We create the color picker by putting 6 cells with different colors in a grid. \snippet examples/declarative/tutorials/helloworld/tutorial2.qml 1 -When the \e clicked signal of our cell is triggered, we want to set the color of the text to the color passed as a parameter. +When the \e clicked signal of our cell is triggered, we want to set the color of the text to the \e cellColor passed as a parameter. We can react to any signal of our component through a property of the name \e 'onSignalName' (see \l{Signal Handlers}). */ diff --git a/examples/declarative/tutorials/helloworld/Cell.qml b/examples/declarative/tutorials/helloworld/Cell.qml index de4f3bb..9249ffe 100644 --- a/examples/declarative/tutorials/helloworld/Cell.qml +++ b/examples/declarative/tutorials/helloworld/Cell.qml @@ -5,10 +5,10 @@ import Qt 4.6 Item { id: container //![4] - property alias color: rectangle.color + property alias cellColor: rectangle.color //![4] //![5] - signal clicked(color color) + signal clicked(color cellColor) //![5] width: 40; height: 25 @@ -25,7 +25,7 @@ Item { //![3] MouseArea { anchors.fill: parent - onClicked: container.clicked(container.color) + onClicked: container.clicked(container.cellColor) } //![3] } diff --git a/examples/declarative/tutorials/helloworld/tutorial2.qml b/examples/declarative/tutorials/helloworld/tutorial2.qml index 99889d7..38447e2 100644 --- a/examples/declarative/tutorials/helloworld/tutorial2.qml +++ b/examples/declarative/tutorials/helloworld/tutorial2.qml @@ -15,17 +15,17 @@ Rectangle { Grid { id: colorPicker - anchors.bottom: page.bottom + x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4 rows: 2; columns: 3; spacing: 3 //![1] - Cell { color: "red"; onClicked: helloText.color = color } + Cell { cellColor: "red"; onClicked: helloText.color = cellColor } //![1] - Cell { color: "green"; onClicked: helloText.color = color } - Cell { color: "blue"; onClicked: helloText.color = color } - Cell { color: "yellow"; onClicked: helloText.color = color } - Cell { color: "steelblue"; onClicked: helloText.color = color } - Cell { color: "black"; onClicked: helloText.color = color } + 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 } } } //![0] diff --git a/examples/declarative/tutorials/helloworld/tutorial3.qml b/examples/declarative/tutorials/helloworld/tutorial3.qml index b8a4f77..d851c49 100644 --- a/examples/declarative/tutorials/helloworld/tutorial3.qml +++ b/examples/declarative/tutorials/helloworld/tutorial3.qml @@ -11,15 +11,14 @@ Rectangle { text: "Hello world!" font.pointSize: 24; font.bold: true y: 30; anchors.horizontalCenter: page.horizontalCenter - transformOrigin: Item.Center //![1] - MouseArea { id: mouseRegion; anchors.fill: parent } + MouseArea { id: mouseArea; anchors.fill: parent } //![1] //![2] states: State { - name: "down"; when: mouseRegion.pressed == true + name: "down"; when: mouseArea.pressed == true PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" } } //![2] @@ -37,15 +36,15 @@ Rectangle { Grid { id: colorPicker - anchors.bottom: page.bottom + x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4 rows: 2; columns: 3; spacing: 3 - Cell { color: "red"; onClicked: helloText.color = color } - Cell { color: "green"; onClicked: helloText.color = color } - Cell { color: "blue"; onClicked: helloText.color = color } - Cell { color: "yellow"; onClicked: helloText.color = color } - Cell { color: "steelblue"; onClicked: helloText.color = color } - Cell { color: "black"; onClicked: helloText.color = color } + 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 } } } //![0] -- cgit v0.12