diff options
Diffstat (limited to 'doc/src/snippets/declarative')
27 files changed, 639 insertions, 0 deletions
diff --git a/doc/src/snippets/declarative/border-image.qml b/doc/src/snippets/declarative/border-image.qml new file mode 100644 index 0000000..9c4247e --- /dev/null +++ b/doc/src/snippets/declarative/border-image.qml @@ -0,0 +1,29 @@ +import Qt 4.7 + +Rectangle { + id: page + color: "white" + width: 520; height: 280 + + Row { + anchors.centerIn: parent + spacing: 50 +//! [0] +BorderImage { + width: 180; height: 180 + border { left: 30; top: 30; right: 30; bottom: 30 } + horizontalTileMode: BorderImage.Stretch + verticalTileMode: BorderImage.Stretch + source: "content/colors.png" +} + +BorderImage { + width: 180; height: 180 + border { left: 30; top: 30; right: 30; bottom: 30 } + horizontalTileMode: BorderImage.Round + verticalTileMode: BorderImage.Round + source: "content/colors.png" +} +//! [0] + } +} diff --git a/doc/src/snippets/declarative/codingconventions/dotproperties.qml b/doc/src/snippets/declarative/codingconventions/dotproperties.qml new file mode 100644 index 0000000..942b0b1 --- /dev/null +++ b/doc/src/snippets/declarative/codingconventions/dotproperties.qml @@ -0,0 +1,28 @@ +import Qt 4.7 + +Item { + +//! [0] +Rectangle { + anchors.left: parent.left; anchors.top: parent.top; anchors.right: parent.right; anchors.leftMargin: 20 +} + +Text { + text: "hello" + font.bold: true; font.italic: true; font.pixelSize: 20; font.capitalization: Font.AllUppercase +} + +//! [0] + +//! [1] +Rectangle { + anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 } +} + +Text { + text: "hello" + font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase } +} +//! [1] + +} diff --git a/doc/src/snippets/declarative/codingconventions/javascript-imports.qml b/doc/src/snippets/declarative/codingconventions/javascript-imports.qml new file mode 100644 index 0000000..417366c --- /dev/null +++ b/doc/src/snippets/declarative/codingconventions/javascript-imports.qml @@ -0,0 +1,7 @@ +import Qt 4.7 + +//![0] +import "myscript.js" as Script + +Rectangle { color: "blue"; width: Script.calculateWidth(parent) } +//![0] diff --git a/doc/src/snippets/declarative/codingconventions/javascript.qml b/doc/src/snippets/declarative/codingconventions/javascript.qml new file mode 100644 index 0000000..64b5a40 --- /dev/null +++ b/doc/src/snippets/declarative/codingconventions/javascript.qml @@ -0,0 +1,33 @@ +import Qt 4.7 + +Rectangle { + +//![0] +Rectangle { color: "blue"; width: parent.width / 3 } +//![0] + +//![1] +Rectangle { + color: "blue" + width: { + var w = parent.width / 3 + console.debug(w) + return w + } +} +//![1] + +//![2] +function calculateWidth(object) +{ + var w = object.width / 3 + // ... + // more javascript code + // ... + console.debug(w) + return w +} + +Rectangle { color: "blue"; width: calculateWidth(parent) } +//![2] +} diff --git a/doc/src/snippets/declarative/codingconventions/lists.qml b/doc/src/snippets/declarative/codingconventions/lists.qml new file mode 100644 index 0000000..63e8100 --- /dev/null +++ b/doc/src/snippets/declarative/codingconventions/lists.qml @@ -0,0 +1,22 @@ +import Qt 4.7 + +Item { + Item { +//! [0] +states: [ + State { + name: "open" + PropertyChanges { target: container; width: 200 } + } +] +//! [0] + } + Item { +//! [1] +states: State { + name: "open" + PropertyChanges { target: container; width: 200 } +} +//! [1] + } +} diff --git a/doc/src/snippets/declarative/codingconventions/myscript.js b/doc/src/snippets/declarative/codingconventions/myscript.js new file mode 100644 index 0000000..cfa6462 --- /dev/null +++ b/doc/src/snippets/declarative/codingconventions/myscript.js @@ -0,0 +1,9 @@ +function calculateWidth(parent) +{ + var w = parent.width / 3 + // ... + // more javascript code + // ... + console.debug(w) + return w +} diff --git a/doc/src/snippets/declarative/codingconventions/photo.qml b/doc/src/snippets/declarative/codingconventions/photo.qml new file mode 100644 index 0000000..c28c2c9 --- /dev/null +++ b/doc/src/snippets/declarative/codingconventions/photo.qml @@ -0,0 +1,37 @@ +import Qt 4.7 + +//! [0] +Rectangle { + id: photo // id on the first line makes it easy to find an object + + property bool thumbnail: false // property declarations + property alias image: photoImage.source + + signal clicked // signal declarations + + function doSomething(x) { // javascript functions + return x + photoImage.width + } + + x: 20; y: 20; width: 200; height: 150 // object properties + color: "gray" // try to group related properties together + + Rectangle { // child objects + id: border + anchors.centerIn: parent; color: "white" + + Image { id: photoImage; anchors.centerIn: parent } + } + + states: State { // states + name: "selected" + PropertyChanges { target: border; color: "red" } + } + + transitions: Transition { // transitions + from: ""; to: "selected" + ColorAnimation { target: border; duration: 200 } + } +} +//! [0] + diff --git a/doc/src/snippets/declarative/comments.qml b/doc/src/snippets/declarative/comments.qml new file mode 100644 index 0000000..ab1bbc9 --- /dev/null +++ b/doc/src/snippets/declarative/comments.qml @@ -0,0 +1,11 @@ +import Qt 4.7 + +Text { + text: "Hello world!" //a basic greeting + /* + We want this text to stand out from the rest so + we give it a large size and different font. + */ + font.family: "Helvetica" + font.pointSize: 24 +} diff --git a/doc/src/snippets/declarative/drag.qml b/doc/src/snippets/declarative/drag.qml new file mode 100644 index 0000000..9465efb --- /dev/null +++ b/doc/src/snippets/declarative/drag.qml @@ -0,0 +1,18 @@ +import Qt 4.7 + +//! [0] +Rectangle { + id: blurtest; width: 600; height: 200; color: "white" + Image { + id: pic; source: "qtlogo-64.png"; anchors.verticalCenter: parent.verticalCenter + opacity: (600.0-pic.x) / 600; + MouseArea { + anchors.fill: parent + drag.target: pic + drag.axis: "XAxis" + drag.minimumX: 0 + drag.maximumX: blurtest.width-pic.width + } + } +} +//! [0] diff --git a/doc/src/snippets/declarative/flipable.qml b/doc/src/snippets/declarative/flipable.qml new file mode 100644 index 0000000..ae74345 --- /dev/null +++ b/doc/src/snippets/declarative/flipable.qml @@ -0,0 +1,37 @@ +//! [0] +import Qt 4.7 + +Flipable { + id: flipable + width: 240 + height: 240 + + property int angle: 0 + property bool flipped: false + + front: Image { source: "front.png" } + back: Image { source: "back.png" } + + transform: Rotation { + origin.x: flipable.width/2; origin.y: flipable.height/2 + axis.x: 0; axis.y: 1; axis.z: 0 // rotate around y-axis + angle: flipable.angle + } + + states: State { + name: "back" + PropertyChanges { target: flipable; angle: 180 } + when: flipable.flipped + } + + transitions: Transition { + NumberAnimation { properties: "angle"; duration: 1000 } + } + + MouseArea { + anchors.fill: parent + onClicked: flipable.flipped = !flipable.flipped + } +} +//! [0] + diff --git a/doc/src/snippets/declarative/gradient.qml b/doc/src/snippets/declarative/gradient.qml new file mode 100644 index 0000000..168398d --- /dev/null +++ b/doc/src/snippets/declarative/gradient.qml @@ -0,0 +1,10 @@ +import Qt 4.7 + +Rectangle { + width: 100; height: 100 + gradient: Gradient { + GradientStop { position: 0.0; color: "red" } + GradientStop { position: 0.33; color: "yellow" } + GradientStop { position: 1.0; color: "green" } + } +} diff --git a/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml new file mode 100644 index 0000000..90f139d --- /dev/null +++ b/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml @@ -0,0 +1,25 @@ +import Qt 4.7 + +ListModel { + id: contactModel + ListElement { + name: "Bill Smith" + number: "555 3264" + portrait: "pics/portrait.png" + } + ListElement { + name: "Jim Williams" + number: "555 5673" + portrait: "pics/portrait.png" + } + ListElement { + name: "John Brown" + number: "555 8426" + portrait: "pics/portrait.png" + } + ListElement { + name: "Sam Wise" + number: "555 0473" + portrait: "pics/portrait.png" + } +} diff --git a/doc/src/snippets/declarative/gridview/gridview.qml b/doc/src/snippets/declarative/gridview/gridview.qml new file mode 100644 index 0000000..1d3df97 --- /dev/null +++ b/doc/src/snippets/declarative/gridview/gridview.qml @@ -0,0 +1,47 @@ +import Qt 4.7 + +//! [3] +Rectangle { + width: 240; height: 180; color: "white" + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: delegate + Item { + id: wrapper + width: 80; height: 78 + Column { + Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter } + Text { text: name; anchors.horizontalCenter: parent.horizontalCenter } + } + } + } +//! [0] + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. +//! [1] + Component { + id: highlight + Rectangle { + color: "lightsteelblue" + radius: 5 + } + } +//! [1] + // The actual grid +//! [2] + GridView { + width: parent.width; height: parent.height + model: ContactModel; delegate: delegate + cellWidth: 80; cellHeight: 80 + highlight: highlight + focus: true + } +//! [2] +} +//! [3] diff --git a/doc/src/snippets/declarative/gridview/pics/portrait.png b/doc/src/snippets/declarative/gridview/pics/portrait.png Binary files differnew file mode 100644 index 0000000..fb5052a --- /dev/null +++ b/doc/src/snippets/declarative/gridview/pics/portrait.png diff --git a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml new file mode 100644 index 0000000..20687cf --- /dev/null +++ b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml @@ -0,0 +1,17 @@ +import Qt 4.7 + +ListModel { + id: contactModel + ListElement { + name: "Bill Smith" + number: "555 3264" + } + ListElement { + name: "John Brown" + number: "555 8426" + } + ListElement { + name: "Sam Wise" + number: "555 0473" + } +} diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml new file mode 100644 index 0000000..794b3f2 --- /dev/null +++ b/doc/src/snippets/declarative/listview/highlight.qml @@ -0,0 +1,63 @@ +import Qt 4.7 + +Rectangle { + width: 180; height: 200; color: "white" + + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: delegate + Item { + id: wrapper + width: 180; height: 40 + Column { + x: 5; y: 5 + Text { text: '<b>Name:</b> ' + name } + Text { text: '<b>Number:</b> ' + number } + } + // Use the ListView.isCurrentItem attached property to + // indent the item if it is the current item. + states: [ + State { + name: "Current" + when: wrapper.ListView.isCurrentItem + PropertyChanges { target: wrapper; x: 10 } + } + ] + transitions: [ + Transition { NumberAnimation { properties: "x"; duration: 200 } } + ] + } + } +//! [0] + // Specify a highlight with custom movement. Note that autoHighlight + // is set to false in the ListView so that we can control how the + // highlight moves to the current item. +//! [1] + Component { + id: highlight + Rectangle { + width: 180; height: 40 + color: "lightsteelblue"; radius: 5 + SpringFollow on y { + to: list.currentItem.y + spring: 3 + damping: 0.2 + } + } + } + ListView { + id: list + width: parent.height; height: parent.height + model: ContactModel; delegate: delegate + highlight: highlight + highlightFollowsCurrentItem: false + focus: true + } +//! [1] +} diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml new file mode 100644 index 0000000..61bf126 --- /dev/null +++ b/doc/src/snippets/declarative/listview/listview.qml @@ -0,0 +1,49 @@ +import Qt 4.7 + +//! [3] +Rectangle { + width: 180; height: 200; color: "white" + + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: delegate + Item { + id: wrapper + width: 180; height: 40 + Column { + x: 5; y: 5 + Text { text: '<b>Name:</b> ' + name } + Text { text: '<b>Number:</b> ' + number } + } + } + } +//! [0] + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. +//! [1] + Component { + id: highlight + Rectangle { + color: "lightsteelblue" + radius: 5 + } + } +//! [1] + // The actual list +//! [2] + ListView { + width: parent.width; height: parent.height + model: ContactModel + delegate: delegate + highlight: highlight + focus: true + } +//! [2] +} +//! [3] diff --git a/doc/src/snippets/declarative/mouseregion.qml b/doc/src/snippets/declarative/mouseregion.qml new file mode 100644 index 0000000..a464069 --- /dev/null +++ b/doc/src/snippets/declarative/mouseregion.qml @@ -0,0 +1,26 @@ +import Qt 4.7 + +Rectangle { width: 200; height: 100 +Row { +//! [0] +Rectangle { width: 100; height: 100; color: "green" + MouseArea { anchors.fill: parent; onClicked: { parent.color = 'red' } } +} +//! [0] +//! [1] +Rectangle { + width: 100; height: 100; color: "green" + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.LeftButton | Qt.RightButton + onClicked: { + if (mouse.button == Qt.RightButton) + parent.color = 'blue'; + else + parent.color = 'red'; + } + } +} +//! [1] +} +} diff --git a/doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml b/doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml new file mode 100644 index 0000000..4004076 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml @@ -0,0 +1,17 @@ +import Qt 4.7 + +ListModel { + id: menuModel + ListElement { + name: "Bill Jones" + icon: "pics/qtlogo-64.png" + } + ListElement { + name: "Jane Doe" + icon: "pics/qtlogo-64.png" + } + ListElement { + name: "John Smith" + icon: "pics/qtlogo-64.png" + } +} diff --git a/doc/src/snippets/declarative/pathview/pathattributes.qml b/doc/src/snippets/declarative/pathview/pathattributes.qml new file mode 100644 index 0000000..ba860c2 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/pathattributes.qml @@ -0,0 +1,36 @@ +import Qt 4.7 + +Rectangle { + width: 240; height: 200; color: 'white' +//! [0] +//! [1] + Component { + id: delegate + Item { + id: wrapper + width: 80; height: 80 + scale: PathView.scale + opacity: PathView.opacity + Column { + Image { anchors.horizontalCenter: name.horizontalCenter; width: 64; height: 64; source: icon } + Text { text: name; font.pointSize: 16} + } + } + } +//! [1] +//! [2] + PathView { + anchors.fill: parent; model: MenuModel; delegate: delegate + path: Path { + startX: 120; startY: 100 + PathAttribute { name: "scale"; value: 1.0 } + PathAttribute { name: "opacity"; value: 1.0 } + PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } + PathAttribute { name: "scale"; value: 0.3 } + PathAttribute { name: "opacity"; value: 0.5 } + PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } + } + } +//! [2] +//! [0] +} diff --git a/doc/src/snippets/declarative/pathview/pathview.qml b/doc/src/snippets/declarative/pathview/pathview.qml new file mode 100644 index 0000000..3686398 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/pathview.qml @@ -0,0 +1,30 @@ +import Qt 4.7 + +Rectangle { + width: 240; height: 200; color: 'white' +//! [0] +//! [1] + Component { + id: delegate + Item { + id: wrapper + width: 80; height: 80 + Column { + Image { anchors.horizontalCenter: name.horizontalCenter; width: 64; height: 64; source: icon } + Text { text: name; font.pointSize: 16} + } + } + } +//! [1] +//! [2] + PathView { + anchors.fill: parent; model: MenuModel; delegate: delegate + path: Path { + startX: 120; startY: 100 + PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } + PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } + } + } +//! [2] +//! [0] +} diff --git a/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png b/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png Binary files differnew file mode 100644 index 0000000..4f68e16 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png diff --git a/doc/src/snippets/declarative/pics/qt.png b/doc/src/snippets/declarative/pics/qt.png Binary files differnew file mode 100644 index 0000000..cbed1a9 --- /dev/null +++ b/doc/src/snippets/declarative/pics/qt.png diff --git a/doc/src/snippets/declarative/repeater-index.qml b/doc/src/snippets/declarative/repeater-index.qml new file mode 100644 index 0000000..709eaf2 --- /dev/null +++ b/doc/src/snippets/declarative/repeater-index.qml @@ -0,0 +1,15 @@ +import Qt 4.7 + +Rectangle { + width: 50; height: childrenRect.height; color: "white" + +//! [0] + Column { + Repeater { + model: 10 + Text { text: "I'm item " + index } + } + } +//! [0] +} + diff --git a/doc/src/snippets/declarative/repeater.qml b/doc/src/snippets/declarative/repeater.qml new file mode 100644 index 0000000..02a8208 --- /dev/null +++ b/doc/src/snippets/declarative/repeater.qml @@ -0,0 +1,16 @@ +import Qt 4.7 + +Rectangle { + width: 220; height: 20; color: "white" + +//! [0] + Row { + Rectangle { width: 10; height: 20; color: "red" } + Repeater { + model: 10 + Rectangle { width: 20; height: 20; radius: 10; color: "green" } + } + Rectangle { width: 10; height: 20; color: "blue" } + } +//! [0] +} diff --git a/doc/src/snippets/declarative/rotation.qml b/doc/src/snippets/declarative/rotation.qml new file mode 100644 index 0000000..f2fd78c --- /dev/null +++ b/doc/src/snippets/declarative/rotation.qml @@ -0,0 +1,33 @@ +import Qt 4.7 + +Rectangle { + width: 360; height: 80 + color: "white" +//! [0] + Row { + x: 10; y: 10 + spacing: 10 + Image { source: "pics/qt.png" } + Image { + source: "pics/qt.png" + transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 18 } + smooth: true + } + Image { + source: "pics/qt.png" + transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 36 } + smooth: true + } + Image { + source: "pics/qt.png" + transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 54 } + smooth: true + } + Image { + source: "pics/qt.png" + transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 72 } + smooth: true + } + } +//! [0] +} diff --git a/doc/src/snippets/declarative/workerscript.qml b/doc/src/snippets/declarative/workerscript.qml new file mode 100644 index 0000000..838e7e5 --- /dev/null +++ b/doc/src/snippets/declarative/workerscript.qml @@ -0,0 +1,24 @@ +//![0] +import Qt 4.7 + +Rectangle { + width: 300; height: 300 + + Text { + id: myText + text: 'Click anywhere' + } + + WorkerScript { + id: myWorker + source: "script.js" + + onMessage: myText.text = messageObject.reply + } + + MouseArea { + anchors.fill: parent + onClicked: myWorker.sendMessage({ 'x': mouse.x, 'y': mouse.y }) + } +} +//![0] |
