From 28e0f484cfb2b677661f0cb1a90a7b88d8f46f03 Mon Sep 17 00:00:00 2001 From: Yann Bodson Date: Wed, 7 Oct 2009 17:07:55 +1000 Subject: move files to avoid duplication. --- doc/src/declarative/tutorial1.qdoc | 17 ++++---- doc/src/declarative/tutorial2.qdoc | 16 +++---- doc/src/declarative/tutorial3.qdoc | 7 ++- examples/declarative/tutorials/helloworld/Cell.qml | 32 ++++++++++++++ .../tutorials/helloworld/t1/tutorial1.qml | 22 ---------- .../declarative/tutorials/helloworld/t2/Cell.qml | 32 -------------- .../tutorials/helloworld/t2/tutorial2.qml | 31 ------------- .../declarative/tutorials/helloworld/t3/Cell.qml | 20 --------- .../tutorials/helloworld/t3/tutorial3.qml | 51 ---------------------- .../declarative/tutorials/helloworld/tutorial1.qml | 22 ++++++++++ .../declarative/tutorials/helloworld/tutorial2.qml | 31 +++++++++++++ .../declarative/tutorials/helloworld/tutorial3.qml | 51 ++++++++++++++++++++++ 12 files changed, 156 insertions(+), 176 deletions(-) create mode 100644 examples/declarative/tutorials/helloworld/Cell.qml delete mode 100644 examples/declarative/tutorials/helloworld/t1/tutorial1.qml delete mode 100644 examples/declarative/tutorials/helloworld/t2/Cell.qml delete mode 100644 examples/declarative/tutorials/helloworld/t2/tutorial2.qml delete mode 100644 examples/declarative/tutorials/helloworld/t3/Cell.qml delete mode 100644 examples/declarative/tutorials/helloworld/t3/tutorial3.qml create mode 100644 examples/declarative/tutorials/helloworld/tutorial1.qml create mode 100644 examples/declarative/tutorials/helloworld/tutorial2.qml create mode 100644 examples/declarative/tutorials/helloworld/tutorial3.qml diff --git a/doc/src/declarative/tutorial1.qdoc b/doc/src/declarative/tutorial1.qdoc index f46c59d..c9a1c5a 100644 --- a/doc/src/declarative/tutorial1.qdoc +++ b/doc/src/declarative/tutorial1.qdoc @@ -10,7 +10,7 @@ The picture below is a screenshot of this program. Here is the QML code for the application: -\snippet examples/declarative/tutorials/helloworld/t1/tutorial1.qml 0 +\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 0 \section1 Walkthrough @@ -19,19 +19,20 @@ Here is the QML code for the application: First, we need to import the types that we need for this example. Most QML files will import the built-in QML types (like \l{Rectangle}, \l{Image}, ...) that come with Qt with: -\snippet examples/declarative/tutorials/helloworld/t1/tutorial1.qml 3 +\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 3 \section2 Rectangle element -\snippet examples/declarative/tutorials/helloworld/t1/tutorial1.qml 1 +\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 1 We declare a root element of type \l{Rectangle}. It is one of the basic building blocks you can use to create an application in QML. -We give it an \c{id} to be able to refer to it later. In this case, we call it \e page. We also set the \c width, \c height and \c color properties. +We give it an \c{id} to be able to refer to it later. In this case, we call it \e page. +We also set the \c width, \c height and \c color properties. The \l{Rectangle} element contains many other properties (such as \c x and \c y), but these are left at their default values. \section2 Text element -\snippet examples/declarative/tutorials/helloworld/t1/tutorial1.qml 2 +\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 2 We add a \l Text element as a child of our root element that will display the text 'Hello world!'. @@ -44,13 +45,13 @@ In this case, we specify that our text element should be horizontally centered i \section2 Viewing the example -To view what you have created, run the qmlviewer (located in the \c bin directory) with your filename as the first argument. For example, to run the provided completed Tutorial 1 example from the install location, you would type: +To view what you have created, run the qmlviewer (located in the \c bin directory) with your filename as the first argument. +For example, to run the provided completed Tutorial 1 example from the install location, you would type: \code -bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/t1/tutorial1.qml +bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml \endcode [\l tutorial] [Next: \l tutorial2] */ - diff --git a/doc/src/declarative/tutorial2.qdoc b/doc/src/declarative/tutorial2.qdoc index 21b5ebd..a076a62 100644 --- a/doc/src/declarative/tutorial2.qdoc +++ b/doc/src/declarative/tutorial2.qdoc @@ -15,36 +15,36 @@ defined in its own QML file (for more details, see \l components). Here is the QML code for \c Cell.qml: -\snippet examples/declarative/tutorials/helloworld/t2/Cell.qml 0 +\snippet examples/declarative/tutorials/helloworld/Cell.qml 0 \section1 Walkthrough \section2 The Cell Component -\snippet examples/declarative/tutorials/helloworld/t2/Cell.qml 1 +\snippet examples/declarative/tutorials/helloworld/Cell.qml 1 The root element of our component is an \l Item with the \c id \e container. An \l Item is the most basic visual element in QML and is often used as a container for other elements. -\snippet examples/declarative/tutorials/helloworld/t2/Cell.qml 4 +\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 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{Properties}). -\snippet examples/declarative/tutorials/helloworld/t2/Cell.qml 5 +\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 will use this signal to change the color of the text in the main QML file later. -\snippet examples/declarative/tutorials/helloworld/t2/Cell.qml 2 +\snippet examples/declarative/tutorials/helloworld/Cell.qml 2 Our cell component is basically a colored rectangle with the \c id \e rectangle. The \c anchors.fill property is a convenient way to set the size of an element. In this case the rectangle will have the same size as its parent (see \l{anchor-layout}{Anchor-based Layout}). -\snippet examples/declarative/tutorials/helloworld/t2/Cell.qml 3 +\snippet examples/declarative/tutorials/helloworld/Cell.qml 3 In order to change the color of the text when clicking on a cell, we create a \l MouseRegion element with the same size as its parent. @@ -56,11 +56,11 @@ When this signal is triggered we want to emit our own \e clicked signal with the In our main QML file, we use our \c Cell component to create the color picker: -\snippet examples/declarative/tutorials/helloworld/t2/tutorial2.qml 0 +\snippet examples/declarative/tutorials/helloworld/tutorial2.qml 0 We create the color picker by putting 6 cells with different colors in a grid. -\snippet examples/declarative/tutorials/helloworld/t2/tutorial2.qml 1 +\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. We can react to any signal of our component through a property of the name \e 'onSignalName' (see \l{Signal Handlers}). diff --git a/doc/src/declarative/tutorial3.qdoc b/doc/src/declarative/tutorial3.qdoc index 21b7ae5..d766015 100644 --- a/doc/src/declarative/tutorial3.qdoc +++ b/doc/src/declarative/tutorial3.qdoc @@ -11,11 +11,11 @@ We want our text to move to the bottom of the screen, rotate and become red when Here is the QML code: -\snippet examples/declarative/tutorials/helloworld/t3/tutorial3.qml 0 +\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 0 \section1 Walkthrough -\snippet examples/declarative/tutorials/helloworld/t3/tutorial3.qml 2 +\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 2 First, we create a new \e down state for our text element. This state will be activated when the \l MouseRegion is pressed, and deactivated when it is released. @@ -24,7 +24,7 @@ The \e down state includes a set of property changes from our implicit \e {defau (the items as they were initially defined in the QML). Specifically, we set the \c y property of the text to \c 160, the rotation to \c 180 and the \c color to red. -\snippet examples/declarative/tutorials/helloworld/t3/tutorial3.qml 3 +\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 3 Because we don't want the text to appear at the bottom instantly but rather move smoothly, we add a transition between our two states. @@ -44,4 +44,3 @@ For more details on states and transitions, see \l {states-transitions}{States a [Previous: \l tutorial2] [\l tutorial] */ - diff --git a/examples/declarative/tutorials/helloworld/Cell.qml b/examples/declarative/tutorials/helloworld/Cell.qml new file mode 100644 index 0000000..ab6e565 --- /dev/null +++ b/examples/declarative/tutorials/helloworld/Cell.qml @@ -0,0 +1,32 @@ +//![0] +import Qt 4.6 + +//![1] +Item { + id: container +//![4] + property alias color: rectangle.color +//![4] +//![5] + signal clicked(string color) +//![5] + + width: 40; height: 25 +//![1] + +//![2] + Rectangle { + id: rectangle + border.color: "white" + anchors.fill: parent + } +//![2] + +//![3] + MouseRegion { + anchors.fill: parent + onClicked: container.clicked(container.color) + } +//![3] +} +//![0] diff --git a/examples/declarative/tutorials/helloworld/t1/tutorial1.qml b/examples/declarative/tutorials/helloworld/t1/tutorial1.qml deleted file mode 100644 index 93d3c34..0000000 --- a/examples/declarative/tutorials/helloworld/t1/tutorial1.qml +++ /dev/null @@ -1,22 +0,0 @@ -//![0] -//![3] -import Qt 4.6 -//![3] - -//![1] -Rectangle { - id: page - width: 500; height: 200 - color: "lightgray" -//![1] - -//![2] - Text { - id: helloText - text: "Hello world!" - font.pointSize: 24; font.bold: true - y: 30; anchors.horizontalCenter: page.horizontalCenter - } -//![2] -} -//![0] diff --git a/examples/declarative/tutorials/helloworld/t2/Cell.qml b/examples/declarative/tutorials/helloworld/t2/Cell.qml deleted file mode 100644 index ab6e565..0000000 --- a/examples/declarative/tutorials/helloworld/t2/Cell.qml +++ /dev/null @@ -1,32 +0,0 @@ -//![0] -import Qt 4.6 - -//![1] -Item { - id: container -//![4] - property alias color: rectangle.color -//![4] -//![5] - signal clicked(string color) -//![5] - - width: 40; height: 25 -//![1] - -//![2] - Rectangle { - id: rectangle - border.color: "white" - anchors.fill: parent - } -//![2] - -//![3] - MouseRegion { - anchors.fill: parent - onClicked: container.clicked(container.color) - } -//![3] -} -//![0] diff --git a/examples/declarative/tutorials/helloworld/t2/tutorial2.qml b/examples/declarative/tutorials/helloworld/t2/tutorial2.qml deleted file mode 100644 index 99889d7..0000000 --- a/examples/declarative/tutorials/helloworld/t2/tutorial2.qml +++ /dev/null @@ -1,31 +0,0 @@ -//![0] -import Qt 4.6 - -Rectangle { - id: page - width: 500; height: 200 - color: "lightgray" - - Text { - id: helloText - text: "Hello world!" - font.pointSize: 24; font.bold: true - y: 30; anchors.horizontalCenter: page.horizontalCenter - } - - Grid { - id: colorPicker - anchors.bottom: page.bottom - rows: 2; columns: 3; spacing: 3 - -//![1] - Cell { color: "red"; onClicked: helloText.color = color } -//![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 } - } -} -//![0] diff --git a/examples/declarative/tutorials/helloworld/t3/Cell.qml b/examples/declarative/tutorials/helloworld/t3/Cell.qml deleted file mode 100644 index 578369d..0000000 --- a/examples/declarative/tutorials/helloworld/t3/Cell.qml +++ /dev/null @@ -1,20 +0,0 @@ -import Qt 4.6 - -Item { - id: container - property alias color: rectangle.color - signal clicked(string color) - - width: 40; height: 25 - - Rectangle { - id: rectangle - border.color: "white" - anchors.fill: parent - } - - MouseRegion { - anchors.fill: parent - onClicked: container.clicked(container.color) - } -} diff --git a/examples/declarative/tutorials/helloworld/t3/tutorial3.qml b/examples/declarative/tutorials/helloworld/t3/tutorial3.qml deleted file mode 100644 index d641eba..0000000 --- a/examples/declarative/tutorials/helloworld/t3/tutorial3.qml +++ /dev/null @@ -1,51 +0,0 @@ -//![0] -import Qt 4.6 - -Rectangle { - id: page - width: 500; height: 200 - color: "lightgray" - - Text { - id: helloText - text: "Hello world!" - font.pointSize: 24; font.bold: true - y: 30; anchors.horizontalCenter: page.horizontalCenter - transformOrigin: "Center" - -//![1] - MouseRegion { id: mouseRegion; anchors.fill: parent } -//![1] - -//![2] - states: State { - name: "down"; when: mouseRegion.pressed == true - PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" } - } -//![2] - -//![3] - transitions: Transition { - from: ""; to: "down"; reversible: true - ParallelAnimation { - NumberAnimation { properties: "y,rotation"; duration: 500; easing: "easeInOutQuad" } - ColorAnimation { property: "color"; duration: 500 } - } - } -//![3] - } - - Grid { - id: colorPicker - anchors.bottom: page.bottom - 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 } - } -} -//![0] diff --git a/examples/declarative/tutorials/helloworld/tutorial1.qml b/examples/declarative/tutorials/helloworld/tutorial1.qml new file mode 100644 index 0000000..93d3c34 --- /dev/null +++ b/examples/declarative/tutorials/helloworld/tutorial1.qml @@ -0,0 +1,22 @@ +//![0] +//![3] +import Qt 4.6 +//![3] + +//![1] +Rectangle { + id: page + width: 500; height: 200 + color: "lightgray" +//![1] + +//![2] + Text { + id: helloText + text: "Hello world!" + font.pointSize: 24; font.bold: true + y: 30; anchors.horizontalCenter: page.horizontalCenter + } +//![2] +} +//![0] diff --git a/examples/declarative/tutorials/helloworld/tutorial2.qml b/examples/declarative/tutorials/helloworld/tutorial2.qml new file mode 100644 index 0000000..99889d7 --- /dev/null +++ b/examples/declarative/tutorials/helloworld/tutorial2.qml @@ -0,0 +1,31 @@ +//![0] +import Qt 4.6 + +Rectangle { + id: page + width: 500; height: 200 + color: "lightgray" + + Text { + id: helloText + text: "Hello world!" + font.pointSize: 24; font.bold: true + y: 30; anchors.horizontalCenter: page.horizontalCenter + } + + Grid { + id: colorPicker + anchors.bottom: page.bottom + rows: 2; columns: 3; spacing: 3 + +//![1] + Cell { color: "red"; onClicked: helloText.color = color } +//![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 } + } +} +//![0] diff --git a/examples/declarative/tutorials/helloworld/tutorial3.qml b/examples/declarative/tutorials/helloworld/tutorial3.qml new file mode 100644 index 0000000..d641eba --- /dev/null +++ b/examples/declarative/tutorials/helloworld/tutorial3.qml @@ -0,0 +1,51 @@ +//![0] +import Qt 4.6 + +Rectangle { + id: page + width: 500; height: 200 + color: "lightgray" + + Text { + id: helloText + text: "Hello world!" + font.pointSize: 24; font.bold: true + y: 30; anchors.horizontalCenter: page.horizontalCenter + transformOrigin: "Center" + +//![1] + MouseRegion { id: mouseRegion; anchors.fill: parent } +//![1] + +//![2] + states: State { + name: "down"; when: mouseRegion.pressed == true + PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" } + } +//![2] + +//![3] + transitions: Transition { + from: ""; to: "down"; reversible: true + ParallelAnimation { + NumberAnimation { properties: "y,rotation"; duration: 500; easing: "easeInOutQuad" } + ColorAnimation { property: "color"; duration: 500 } + } + } +//![3] + } + + Grid { + id: colorPicker + anchors.bottom: page.bottom + 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 } + } +} +//![0] -- cgit v0.12