diff options
Diffstat (limited to 'examples/declarative/modelviews')
79 files changed, 2602 insertions, 0 deletions
diff --git a/examples/declarative/modelviews/gridview/gridview-example.qml b/examples/declarative/modelviews/gridview/gridview-example.qml new file mode 100644 index 0000000..a5f41fb --- /dev/null +++ b/examples/declarative/modelviews/gridview/gridview-example.qml @@ -0,0 +1,49 @@ +import Qt 4.7 + +Rectangle { + width: 300; height: 400 + color: "white" + + ListModel { + id: appModel + ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" } + ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" } + ListElement { name: "Camera"; icon: "pics/Camera_48.png" } + ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" } + ListElement { name: "Messaging"; icon: "pics/EMail_48.png" } + ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } + ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" } + } + + Component { + id: appDelegate + + Item { + width: 100; height: 100 + + Image { + id: myIcon + y: 20; anchors.horizontalCenter: parent.horizontalCenter + source: icon + } + Text { + anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter } + text: name + } + } + } + + Component { + id: appHighlight + Rectangle { width: 80; height: 80; color: "lightsteelblue" } + } + + GridView { + anchors.fill: parent + cellWidth: 100; cellHeight: 100 + highlight: appHighlight + focus: true + model: appModel + delegate: appDelegate + } +} diff --git a/examples/declarative/modelviews/gridview/gridview.qmlproject b/examples/declarative/modelviews/gridview/gridview.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/modelviews/gridview/gridview.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/modelviews/gridview/pics/AddressBook_48.png b/examples/declarative/modelviews/gridview/pics/AddressBook_48.png Binary files differnew file mode 100644 index 0000000..1ab7c8e --- /dev/null +++ b/examples/declarative/modelviews/gridview/pics/AddressBook_48.png diff --git a/examples/declarative/modelviews/gridview/pics/AudioPlayer_48.png b/examples/declarative/modelviews/gridview/pics/AudioPlayer_48.png Binary files differnew file mode 100644 index 0000000..f4b8689 --- /dev/null +++ b/examples/declarative/modelviews/gridview/pics/AudioPlayer_48.png diff --git a/examples/declarative/modelviews/gridview/pics/Camera_48.png b/examples/declarative/modelviews/gridview/pics/Camera_48.png Binary files differnew file mode 100644 index 0000000..c76b524 --- /dev/null +++ b/examples/declarative/modelviews/gridview/pics/Camera_48.png diff --git a/examples/declarative/modelviews/gridview/pics/DateBook_48.png b/examples/declarative/modelviews/gridview/pics/DateBook_48.png Binary files differnew file mode 100644 index 0000000..58f5787 --- /dev/null +++ b/examples/declarative/modelviews/gridview/pics/DateBook_48.png diff --git a/examples/declarative/modelviews/gridview/pics/EMail_48.png b/examples/declarative/modelviews/gridview/pics/EMail_48.png Binary files differnew file mode 100644 index 0000000..d6d84a6 --- /dev/null +++ b/examples/declarative/modelviews/gridview/pics/EMail_48.png diff --git a/examples/declarative/modelviews/gridview/pics/TodoList_48.png b/examples/declarative/modelviews/gridview/pics/TodoList_48.png Binary files differnew file mode 100644 index 0000000..0988448 --- /dev/null +++ b/examples/declarative/modelviews/gridview/pics/TodoList_48.png diff --git a/examples/declarative/modelviews/gridview/pics/VideoPlayer_48.png b/examples/declarative/modelviews/gridview/pics/VideoPlayer_48.png Binary files differnew file mode 100644 index 0000000..52638c5 --- /dev/null +++ b/examples/declarative/modelviews/gridview/pics/VideoPlayer_48.png diff --git a/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml b/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml new file mode 100644 index 0000000..f65c2b3 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml @@ -0,0 +1,31 @@ +import Qt 4.7 + +Item { + id: page + property int repeatdelay: 300 + property int repeatperiod: 75 + property bool isPressed: false + + signal pressed + signal released + signal clicked + + SequentialAnimation on isPressed { + running: false + id: autoRepeat + PropertyAction { target: page; property: "isPressed"; value: true } + ScriptAction { script: page.pressed() } + ScriptAction { script: page.clicked() } + PauseAnimation { duration: repeatdelay } + SequentialAnimation { + loops: Animation.Infinite + ScriptAction { script: page.clicked() } + PauseAnimation { duration: repeatperiod } + } + } + MouseArea { + anchors.fill: parent + onPressed: autoRepeat.start() + onReleased: { autoRepeat.stop(); parent.isPressed = false; page.released() } + } +} diff --git a/examples/declarative/modelviews/listview/content/MediaButton.qml b/examples/declarative/modelviews/listview/content/MediaButton.qml new file mode 100644 index 0000000..a625b4c --- /dev/null +++ b/examples/declarative/modelviews/listview/content/MediaButton.qml @@ -0,0 +1,35 @@ +import Qt 4.7 + +Item { + property variant text + signal clicked + + id: container + Image { + id: normal + source: "pics/button.png" + } + Image { + id: pressed + source: "pics/button-pressed.png" + opacity: 0 + } + MouseArea { + id: clickRegion + anchors.fill: normal + onClicked: { container.clicked(); } + } + Text { + font.bold: true + color: "white" + anchors.centerIn: normal + text: container.text + } + width: normal.width + + states: State { + name: "Pressed" + when: clickRegion.pressed == true + PropertyChanges { target: pressed; opacity: 1 } + } +} diff --git a/examples/declarative/modelviews/listview/content/pics/add.png b/examples/declarative/modelviews/listview/content/pics/add.png Binary files differnew file mode 100644 index 0000000..f29d84b --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/add.png diff --git a/examples/declarative/modelviews/listview/content/pics/archive-insert.png b/examples/declarative/modelviews/listview/content/pics/archive-insert.png Binary files differnew file mode 100644 index 0000000..b706248 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/archive-insert.png diff --git a/examples/declarative/modelviews/listview/content/pics/archive-remove.png b/examples/declarative/modelviews/listview/content/pics/archive-remove.png Binary files differnew file mode 100644 index 0000000..9640f6b --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/archive-remove.png diff --git a/examples/declarative/modelviews/listview/content/pics/button-pressed.png b/examples/declarative/modelviews/listview/content/pics/button-pressed.png Binary files differnew file mode 100644 index 0000000..e434d32 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/button-pressed.png diff --git a/examples/declarative/modelviews/listview/content/pics/button.png b/examples/declarative/modelviews/listview/content/pics/button.png Binary files differnew file mode 100644 index 0000000..56a63ce --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/button.png diff --git a/examples/declarative/modelviews/listview/content/pics/del.png b/examples/declarative/modelviews/listview/content/pics/del.png Binary files differnew file mode 100644 index 0000000..1d753a3 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/del.png diff --git a/examples/declarative/modelviews/listview/content/pics/fruit-salad.jpg b/examples/declarative/modelviews/listview/content/pics/fruit-salad.jpg Binary files differnew file mode 100644 index 0000000..da5a6b1 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/fruit-salad.jpg diff --git a/examples/declarative/modelviews/listview/content/pics/go-down.png b/examples/declarative/modelviews/listview/content/pics/go-down.png Binary files differnew file mode 100644 index 0000000..63331a5 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/go-down.png diff --git a/examples/declarative/modelviews/listview/content/pics/go-up.png b/examples/declarative/modelviews/listview/content/pics/go-up.png Binary files differnew file mode 100644 index 0000000..4459024 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/go-up.png diff --git a/examples/declarative/modelviews/listview/content/pics/hamburger.jpg b/examples/declarative/modelviews/listview/content/pics/hamburger.jpg Binary files differnew file mode 100644 index 0000000..d0a15be --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/hamburger.jpg diff --git a/examples/declarative/modelviews/listview/content/pics/lemonade.jpg b/examples/declarative/modelviews/listview/content/pics/lemonade.jpg Binary files differnew file mode 100644 index 0000000..db445c9 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/lemonade.jpg diff --git a/examples/declarative/modelviews/listview/content/pics/list-add.png b/examples/declarative/modelviews/listview/content/pics/list-add.png Binary files differnew file mode 100644 index 0000000..e029787 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/list-add.png diff --git a/examples/declarative/modelviews/listview/content/pics/list-remove.png b/examples/declarative/modelviews/listview/content/pics/list-remove.png Binary files differnew file mode 100644 index 0000000..2bb1a59 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/list-remove.png diff --git a/examples/declarative/modelviews/listview/content/pics/moreDown.png b/examples/declarative/modelviews/listview/content/pics/moreDown.png Binary files differnew file mode 100644 index 0000000..31a35d5 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/moreDown.png diff --git a/examples/declarative/modelviews/listview/content/pics/moreUp.png b/examples/declarative/modelviews/listview/content/pics/moreUp.png Binary files differnew file mode 100644 index 0000000..fefb9c9 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/moreUp.png diff --git a/examples/declarative/modelviews/listview/content/pics/pancakes.jpg b/examples/declarative/modelviews/listview/content/pics/pancakes.jpg Binary files differnew file mode 100644 index 0000000..60c4396 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/pancakes.jpg diff --git a/examples/declarative/modelviews/listview/content/pics/trash.png b/examples/declarative/modelviews/listview/content/pics/trash.png Binary files differnew file mode 100644 index 0000000..2042595 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/trash.png diff --git a/examples/declarative/modelviews/listview/content/pics/vegetable-soup.jpg b/examples/declarative/modelviews/listview/content/pics/vegetable-soup.jpg Binary files differnew file mode 100644 index 0000000..9dce332 --- /dev/null +++ b/examples/declarative/modelviews/listview/content/pics/vegetable-soup.jpg diff --git a/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml b/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml new file mode 100644 index 0000000..f15dda3 --- /dev/null +++ b/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml @@ -0,0 +1,61 @@ +import Qt 4.7 + +// ListModel allows free form list models to be defined and populated. + +ListModel { + id: petsModel + ListElement { + name: "Polly" + type: "Parrot" + age: 12 + size: "Small" + } + ListElement { + name: "Penny" + type: "Turtle" + age: 4 + size: "Small" + } + ListElement { + name: "Warren" + type: "Rabbit" + age: 2 + size: "Small" + } + ListElement { + name: "Spot" + type: "Dog" + age: 9 + size: "Medium" + } + ListElement { + name: "Schrödinger" + type: "Cat" + age: 2 + size: "Medium" + } + ListElement { + name: "Joey" + type: "Kangaroo" + age: 1 + size: "Medium" + } + ListElement { + name: "Kimba" + type: "Bunny" + age: 65 + size: "Large" + } + ListElement { + name: "Rover" + type: "Dog" + age: 5 + size: "Large" + } + ListElement { + name: "Tiny" + type: "Elephant" + age: 15 + size: "Large" + } +} diff --git a/examples/declarative/modelviews/listview/dummydata/Recipes.qml b/examples/declarative/modelviews/listview/dummydata/Recipes.qml new file mode 100644 index 0000000..f707c82 --- /dev/null +++ b/examples/declarative/modelviews/listview/dummydata/Recipes.qml @@ -0,0 +1,90 @@ +import Qt 4.7 + +ListModel { + id: recipesModel + ListElement { + title: "Pancakes" + picture: "content/pics/pancakes.jpg" + ingredients: "<html> + <ul> + <li> 1 cup (150g) self-raising flour + <li> 1 tbs caster sugar + <li> 3/4 cup (185ml) milk + <li> 1 egg + </ul> + </html>" + method: "<html> + <ol> + <li> Sift flour and sugar together into a bowl. Add a pinch of salt. + <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth. + <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface. + <li> Turn over and cook other side until golden. + </ol> + </html>" + } + ListElement { + title: "Fruit Salad" + picture: "content/pics/fruit-salad.jpg" + ingredients: "* Seasonal Fruit" + method: "* Chop fruit and place in a bowl." + } + ListElement { + title: "Vegetable Soup" + picture: "content/pics/vegetable-soup.jpg" + ingredients: "<html> + <ul> + <li> 1 onion + <li> 1 turnip + <li> 1 potato + <li> 1 carrot + <li> 1 head of celery + <li> 1 1/2 litres of water + </ul> + </html>" + method: "<html> + <ol> + <li> Chop vegetables. + <li> Boil in water until vegetables soften. + <li> Season with salt and pepper to taste. + </ol> + </html>" + } + ListElement { + title: "Hamburger" + picture: "content/pics/hamburger.jpg" + ingredients: "<html> + <ul> + <li> 500g minced beef + <li> Seasoning + <li> lettuce, tomato, onion, cheese + <li> 1 hamburger bun for each burger + </ul> + </html>" + method: "<html> + <ol> + <li> Mix the beef, together with seasoning, in a food processor. + <li> Shape the beef into burgers. + <li> Grill the burgers for about 5 mins on each side (until cooked through) + <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion. + </ol> + </html>" + } + ListElement { + title: "Lemonade" + picture: "content/pics/lemonade.jpg" + ingredients: "<html> + <ul> + <li> 1 cup Lemon Juice + <li> 1 cup Sugar + <li> 6 Cups of Water (2 cups warm water, 4 cups cold water) + </ul> + </html>" + method: "<html> + <ol> + <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves. + <li> Pour in lemon juice, stir again, and add 4 cups of cold water. + <li> Chill or serve over ice cubes. + </ol> + </html>" + } +} diff --git a/examples/declarative/modelviews/listview/dynamic.qml b/examples/declarative/modelviews/listview/dynamic.qml new file mode 100644 index 0000000..693e88a --- /dev/null +++ b/examples/declarative/modelviews/listview/dynamic.qml @@ -0,0 +1,208 @@ +import Qt 4.7 +import "content" +import "../../ui-components/scrollbar" + +Rectangle { + id: container + width: 640; height: 480 + color: "#343434" + + ListModel { + id: fruitModel + + ListElement { + name: "Apple"; cost: 2.45 + attributes: [ + ListElement { description: "Core" }, + ListElement { description: "Deciduous" } + ] + } + ListElement { + name: "Banana"; cost: 1.95 + attributes: [ + ListElement { description: "Tropical" }, + ListElement { description: "Seedless" } + ] + } + ListElement { + name: "Cumquat"; cost: 3.25 + attributes: [ + ListElement { description: "Citrus" } + ] + } + ListElement { + name: "Durian"; cost: 9.95 + attributes: [ + ListElement { description: "Tropical" }, + ListElement { description: "Smelly" } + ] + } + ListElement { + name: "Elderberry"; cost: 0.05 + attributes: [ + ListElement { description: "Berry" } + ] + } + ListElement { + name: "Fig"; cost: 0.25 + attributes: [ + ListElement { description: "Flower" } + ] + } + } + + Component { + id: fruitDelegate + + Item { + width: container.width; height: 55 + + Column { + id: moveButtons + x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter + + Image { + source: "content/pics/go-up.png" + MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index-1,1) } + } + Image { source: "content/pics/go-down.png" + MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index+1,1) } + } + } + + Column { + anchors { right: itemButtons.left; verticalCenter: parent.verticalCenter; left: moveButtons.right; leftMargin: 10 } + + Text { + id: label + width: parent.width + color: "White" + font.bold: true; font.pixelSize: 15 + text: name; elide: Text.ElideRight + } + Row { + spacing: 5 + Repeater { + model: attributes + Component { + Text { text: description; color: "White" } + } + } + } + } + + Row { + id: itemButtons + + anchors { right: removeButton.left; rightMargin: 35; verticalCenter: parent.verticalCenter } + width: childrenRect.width + spacing: 10 + + Image { + source: "content/pics/list-add.png" + scale: clickUp.isPressed ? 0.9 : 1 + + ClickAutoRepeating { + id: clickUp + anchors.fill: parent + onClicked: fruitModel.setProperty(index, "cost", cost+0.25) + } + } + + Text { id: costText; text: '$'+Number(cost).toFixed(2); font.pixelSize: 15; color: "White"; font.bold: true; } + + Image { + source: "content/pics/list-remove.png" + scale: clickDown.isPressed ? 0.9 : 1 + + ClickAutoRepeating { + id: clickDown + anchors.fill: parent + onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25)) + } + } + } + Image { + id: removeButton + anchors { verticalCenter: parent.verticalCenter; right: parent.right; rightMargin: 10 } + source: "content/pics/archive-remove.png" + + MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) } + } + } + } + + ListView { + id: view + anchors { top: parent.top; left: parent.left; right: parent.right; bottom: buttons.top } + model: fruitModel + delegate: fruitDelegate + } + + // Attach scrollbar to the right edge of the view. + ScrollBar { + id: verticalScrollBar + + width: 8; height: view.height; anchors.right: view.right + opacity: 0 + orientation: Qt.Vertical + position: view.visibleArea.yPosition + pageSize: view.visibleArea.heightRatio + + // Only show the scrollbar when the view is moving. + states: State { + name: "ShowBars"; when: view.movingVertically + PropertyChanges { target: verticalScrollBar; opacity: 1 } + } + transitions: Transition { + NumberAnimation { properties: "opacity"; duration: 400 } + } + } + + Row { + id: buttons + + x: 8; width: childrenRect.width; height: childrenRect.height + anchors { bottom: parent.bottom; bottomMargin: 8 } + spacing: 8 + + Image { + source: "content/pics/archive-insert.png" + + MouseArea { + anchors.fill: parent + onClicked: { + fruitModel.append({ + "name": "Pizza Margarita", + "cost": 5.95, + "attributes": [{"description": "Cheese"},{"description": "Tomato"}] + }) + } + } + } + + Image { + source: "content/pics/archive-insert.png" + + MouseArea { + anchors.fill: parent; + onClicked: { + fruitModel.insert(0, { + "name": "Pizza Supreme", + "cost": 9.95, + "attributes": [{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}] + }) + } + } + } + + Image { + source: "content/pics/archive-remove.png" + + MouseArea { + anchors.fill: parent + onClicked: fruitModel.clear() + } + } + } +} diff --git a/examples/declarative/modelviews/listview/highlight.qml b/examples/declarative/modelviews/listview/highlight.qml new file mode 100644 index 0000000..ade355d --- /dev/null +++ b/examples/declarative/modelviews/listview/highlight.qml @@ -0,0 +1,55 @@ +import Qt 4.7 + +Rectangle { + width: 400; height: 300 + + // MyPets model is defined in dummydata/MyPetsModel.qml + // The launcher automatically loads files in dummydata/* to assist + // development without a real data source. + // This one contains my pets. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. + Component { + id: petDelegate + Item { + id: wrapper + width: 200; height: 50 + Column { + Text { text: 'Name: ' + name } + Text { text: 'Type: ' + type } + Text { text: 'Age: ' + age } + } + // 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 } + } + } + } + // Specify a highlight with custom movement. Note that highlightFollowsCurrentItem + // is set to false in the ListView so that we can control how the + // highlight moves to the current item. + Component { + id: petHighlight + Rectangle { + width: 200; height: 50 + color: "#FFFF88" + SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 } + } + } + + ListView { + id: list1 + width: 200; height: parent.height + model: MyPetsModel + delegate: petDelegate + highlight: petHighlight; highlightFollowsCurrentItem: false + focus: true + } +} diff --git a/examples/declarative/modelviews/listview/itemlist.qml b/examples/declarative/modelviews/listview/itemlist.qml new file mode 100644 index 0000000..b73b3a3 --- /dev/null +++ b/examples/declarative/modelviews/listview/itemlist.qml @@ -0,0 +1,67 @@ +// This example demonstrates placing items in a view using +// a VisualItemModel + +import Qt 4.7 + +Rectangle { + color: "lightgray" + width: 240 + height: 320 + + VisualItemModel { + id: itemModel + + Rectangle { + width: view.width; height: view.height + color: "#FFFEF0" + Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent } + } + Rectangle { + width: view.width; height: view.height + color: "#F0FFF7" + Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent } + } + Rectangle { + width: view.width; height: view.height + color: "#F4F0FF" + Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent } + } + } + + ListView { + id: view + anchors { fill: parent; bottomMargin: 30 } + model: itemModel + preferredHighlightBegin: 0; preferredHighlightEnd: 0 + highlightRangeMode: ListView.StrictlyEnforceRange + orientation: ListView.Horizontal + snapMode: ListView.SnapOneItem; flickDeceleration: 2000 + } + + Rectangle { + width: 240; height: 30 + anchors { top: view.bottom; bottom: parent.bottom } + color: "gray" + + Row { + anchors.centerIn: parent + spacing: 20 + + Repeater { + model: itemModel.count + + Rectangle { + width: 5; height: 5 + radius: 3 + color: view.currentIndex == index ? "blue" : "white" + + MouseArea { + width: 20; height: 20 + anchors.centerIn: parent + onClicked: view.currentIndex = index + } + } + } + } + } +} diff --git a/examples/declarative/modelviews/listview/listview-example.qml b/examples/declarative/modelviews/listview/listview-example.qml new file mode 100644 index 0000000..2e8cdda --- /dev/null +++ b/examples/declarative/modelviews/listview/listview-example.qml @@ -0,0 +1,93 @@ +import Qt 4.7 + +Rectangle { + width: 600; height: 300 + + // MyPets model is defined in dummydata/MyPetsModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + // This one contains my pets. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. + Component { + id: petDelegate + Item { + width: 200; height: 50 + Column { + Text { text: 'Name: ' + name } + Text { text: 'Type: ' + type } + Text { text: 'Age: ' + age } + } + } + } + + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. + Component { + id: petHighlight + Rectangle { color: "#FFFF88" } + } + + // Show the model in three lists, with different highlight ranges. + // preferredHighlightBegin and preferredHighlightEnd set the + // range in which to attempt to maintain the highlight. + // + // Note that the second and third ListView + // set their currentIndex to be the same as the first, and that + // the first ListView is given keyboard focus. + // + // The default mode allows the currentItem to move freely + // within the visible area. If it would move outside the visible + // area, the view is scrolled to keep it visible. + // + // The second list sets a highlight range which attempts to keep the + // current item within the the bounds of the range, however + // items will not scroll beyond the beginning or end of the view, + // forcing the highlight to move outside the range at the ends. + // + // The third list sets the highlightRangeMode to StrictlyEnforceRange + // and sets a range smaller than the height of an item. This + // forces the current item to change when the view is flicked, + // since the highlight is unable to move. + // + // Note that the first ListView sets its currentIndex to be equal to + // the third ListView's currentIndex. By flicking List3 with + // the mouse, the current index of List1 will be changed. + + ListView { + id: list1 + width: 200; height: parent.height + model: MyPetsModel + delegate: petDelegate + + highlight: petHighlight + currentIndex: list3.currentIndex + focus: true + } + + ListView { + id: list2 + x: 200; width: 200; height: parent.height + model: MyPetsModel + delegate: petDelegate + + highlight: petHighlight + currentIndex: list1.currentIndex + preferredHighlightBegin: 80; preferredHighlightEnd: 220 + highlightRangeMode: ListView.ApplyRange + } + + ListView { + id: list3 + x: 400; width: 200; height: parent.height + model: MyPetsModel + delegate: petDelegate + + highlight: Rectangle { color: "lightsteelblue" } + currentIndex: list1.currentIndex + preferredHighlightBegin: 125; preferredHighlightEnd: 125 + highlightRangeMode: ListView.StrictlyEnforceRange + flickDeceleration: 1000 + } +} diff --git a/examples/declarative/modelviews/listview/listview.qmlproject b/examples/declarative/modelviews/listview/listview.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/modelviews/listview/listview.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/modelviews/listview/recipes.qml b/examples/declarative/modelviews/listview/recipes.qml new file mode 100644 index 0000000..990e272 --- /dev/null +++ b/examples/declarative/modelviews/listview/recipes.qml @@ -0,0 +1,160 @@ +import Qt 4.7 +import "content" + +// This example illustrates expanding a list item to show a more detailed view + +Rectangle { + id: page + width: 400; height: 240 + color: "black" + + // Delegate for the recipes. This delegate has two modes: + // 1. the list mode (default), which just shows the picture and title of the recipe. + // 2. the details mode, which also shows the ingredients and method. + Component { + id: recipeDelegate + + Item { + id: wrapper + + // Create a property to contain the visibility of the details. + // We can bind multiple element's opacity to this one property, + // rather than having a "PropertyChanges" line for each element we + // want to fade. + property real detailsOpacity : 0 + + width: list.width + + // A simple rounded rectangle for the background + Rectangle { + id: background + x: 1; y: 2; width: parent.width - 2; height: parent.height - 4 + color: "#FEFFEE" + border.color: "#FFBE4F" + radius: 5 + } + + // This mouse region covers the entire delegate. + // When clicked it changes mode to 'Details'. If we are already + // in Details mode, then no change will happen. + MouseArea { + id: pageMouse + anchors.fill: parent + onClicked: wrapper.state = 'Details'; + } + + // Layout the page. Picture, title and ingredients at the top, method at the + // bottom. Note that elements that should not be visible in the list + // mode have their opacity set to wrapper.detailsOpacity. + Row { + id: topLayout + x: 10; y: 10; height: recipePic.height; width: parent.width + spacing: 10 + + Image { + id: recipePic + source: picture; width: 48; height: 48 + } + + Column { + width: background.width-recipePic.width-20; height: recipePic.height; + spacing: 5 + + Text { id: name; text: title; font.bold: true; font.pointSize: 16 } + + Text { + text: "Ingredients" + font.pointSize: 12; font.bold: true + opacity: wrapper.detailsOpacity + } + + Text { + text: ingredients + wrapMode: Text.WordWrap + width: parent.width + opacity: wrapper.detailsOpacity + } + } + } + + Item { + id: details + x: 10; width: parent.width-20 + anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 } + opacity: wrapper.detailsOpacity + + Text { + id: methodTitle + anchors.top: parent.top + text: "Method" + font.pointSize: 12; font.bold: true + } + + Flickable { + id: flick + width: parent.width + anchors { top: methodTitle.bottom; bottom: parent.bottom } + contentHeight: methodText.height; clip: true + + Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width } + } + + Image { + anchors { right: flick.right; top: flick.top } + source: "content/pics/moreUp.png" + opacity: flick.atYBeginning ? 0 : 1 + } + + Image { + anchors { right: flick.right; bottom: flick.bottom } + source: "content/pics/moreDown.png" + opacity: flick.atYEnd ? 0 : 1 + } + } + + // A button to close the detailed view, i.e. set the state back to default (''). + MediaButton { + y: 10; anchors { right: background.right; rightMargin: 5 } + opacity: wrapper.detailsOpacity + text: "Close" + + onClicked: wrapper.state = ''; + } + + // Set the default height to the height of the picture, plus margin. + height: 68 + + states: State { + name: "Details" + + PropertyChanges { target: background; color: "white" } + PropertyChanges { target: recipePic; width: 128; height: 128 } // Make picture bigger + PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 } // Make details visible + PropertyChanges { target: wrapper; height: list.height } // Fill the entire list area with the detailed view + + // Move the list so that this item is at the top. + PropertyChanges { target: wrapper.ListView.view; explicit: true; contentY: wrapper.y } + + // Disallow flicking while we're in detailed view + PropertyChanges { target: wrapper.ListView.view; interactive: false } + } + + transitions: Transition { + // Make the state changes smooth + ParallelAnimation { + ColorAnimation { property: "color"; duration: 500 } + NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" } + } + } + } + } + + // The actual list + ListView { + id: list + anchors.fill: parent + clip: true + model: Recipes + delegate: recipeDelegate + } +} diff --git a/examples/declarative/modelviews/listview/sections.qml b/examples/declarative/modelviews/listview/sections.qml new file mode 100644 index 0000000..21f9f03 --- /dev/null +++ b/examples/declarative/modelviews/listview/sections.qml @@ -0,0 +1,71 @@ +import Qt 4.7 + +//! [0] +Rectangle { + width: 200 + height: 240 + + // MyPets model is defined in dummydata/MyPetsModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + // This one contains my pets. + + // Define a delegate component that includes a separator for sections. + Component { + id: petDelegate + + Item { + id: wrapper + width: 200 + height: desc.height // height is the combined height of the description and the section separator + + Item { + id: desc + x: 5; height: layout.height + 4 + + Column { + id: layout + y: 2 + Text { text: 'Name: ' + name } + Text { text: 'Type: ' + type } + Text { text: 'Age: ' + age } + } + } + } + } + + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. + Component { + id: petHighlight + Rectangle { color: "#FFFF88" } + } + + // The list + ListView { + id: myList + + width: 200; height: parent.height + model: MyPetsModel + delegate: petDelegate + highlight: petHighlight + focus: true + + // The sectionExpression is simply the size of the pet. + // We use this to determine which section we are in above. + section.property: "size" + section.criteria: ViewSection.FullString + section.delegate: Rectangle { + color: "lightsteelblue" + width: 200 + height: 20 + Text { + x: 2; height: parent.height + verticalAlignment: Text.AlignVCenter + text: section + font.bold: true + } + } + } +} +//! [0] diff --git a/examples/declarative/modelviews/modelviews.pro b/examples/declarative/modelviews/modelviews.pro new file mode 100644 index 0000000..b811e44 --- /dev/null +++ b/examples/declarative/modelviews/modelviews.pro @@ -0,0 +1,7 @@ +TEMPLATE = subdirs + +SUBDIRS += \ + objectlistmodel \ + stringlistmodel + + diff --git a/examples/declarative/modelviews/modelviews.qmlproject b/examples/declarative/modelviews/modelviews.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/modelviews/modelviews.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/modelviews/objectlistmodel/dataobject.cpp b/examples/declarative/modelviews/objectlistmodel/dataobject.cpp new file mode 100644 index 0000000..14be1b9 --- /dev/null +++ b/examples/declarative/modelviews/objectlistmodel/dataobject.cpp @@ -0,0 +1,79 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include <QDebug> +#include "dataobject.h" + +DataObject::DataObject(QObject *parent) + : QObject(parent) +{ +} + +DataObject::DataObject(const QString &name, const QString &color, QObject *parent) + : QObject(parent), m_name(name), m_color(color) +{ +} + +QString DataObject::name() const +{ + return m_name; +} + +void DataObject::setName(const QString &name) +{ + if (name != m_name) { + m_name = name; + emit nameChanged(); + } +} + +QString DataObject::color() const +{ + return m_color; +} + +void DataObject::setColor(const QString &color) +{ + if (color != m_color) { + m_color = color; + emit colorChanged(); + } +} diff --git a/examples/declarative/modelviews/objectlistmodel/dataobject.h b/examples/declarative/modelviews/objectlistmodel/dataobject.h new file mode 100644 index 0000000..852110d --- /dev/null +++ b/examples/declarative/modelviews/objectlistmodel/dataobject.h @@ -0,0 +1,73 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#ifndef DATAOBJECT_H +#define DATAOBJECT_H + +#include <QObject> + +class DataObject : public QObject +{ + Q_OBJECT + + Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged) + Q_PROPERTY(QString color READ color WRITE setColor NOTIFY colorChanged) + +public: + DataObject(QObject *parent=0); + DataObject(const QString &name, const QString &color, QObject *parent=0); + + QString name() const; + void setName(const QString &name); + + QString color() const; + void setColor(const QString &color); + +signals: + void nameChanged(); + void colorChanged(); + +private: + QString m_name; + QString m_color; +}; + +#endif // DATAOBJECT_H diff --git a/examples/declarative/modelviews/objectlistmodel/main.cpp b/examples/declarative/modelviews/objectlistmodel/main.cpp new file mode 100644 index 0000000..b210570 --- /dev/null +++ b/examples/declarative/modelviews/objectlistmodel/main.cpp @@ -0,0 +1,77 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the demonstration applications of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include <QApplication> + +#include <qdeclarativeengine.h> +#include <qdeclarativecontext.h> +#include <qdeclarative.h> +#include <qdeclarativeitem.h> +#include <qdeclarativeview.h> + +#include "dataobject.h" + +/* + This example illustrates exposing a QList<QObject*> as a + model in QML +*/ + +int main(int argc, char ** argv) +{ + QApplication app(argc, argv); + + QDeclarativeView view; + + QList<QObject*> dataList; + dataList.append(new DataObject("Item 1", "red")); + dataList.append(new DataObject("Item 2", "green")); + dataList.append(new DataObject("Item 3", "blue")); + dataList.append(new DataObject("Item 4", "yellow")); + + QDeclarativeContext *ctxt = view.rootContext(); + ctxt->setContextProperty("myModel", QVariant::fromValue(dataList)); + + view.setSource(QUrl("qrc:view.qml")); + view.show(); + + return app.exec(); +} + diff --git a/examples/declarative/modelviews/objectlistmodel/objectlistmodel.pro b/examples/declarative/modelviews/objectlistmodel/objectlistmodel.pro new file mode 100644 index 0000000..869cde3 --- /dev/null +++ b/examples/declarative/modelviews/objectlistmodel/objectlistmodel.pro @@ -0,0 +1,18 @@ +TEMPLATE = app +TARGET = objectlistmodel +DEPENDPATH += . +INCLUDEPATH += . +QT += declarative + +# Input +SOURCES += main.cpp \ + dataobject.cpp +HEADERS += dataobject.h +RESOURCES += objectlistmodel.qrc + +sources.files = $$SOURCES $$HEADERS $$RESOURCES objectlistmodel.pro view.qml +sources.path = $$[QT_INSTALL_EXAMPLES]/declarative/objectlistmodel +target.path = $$[QT_INSTALL_EXAMPLES]/declarative/objectlistmodel + +INSTALLS += sources target + diff --git a/examples/declarative/modelviews/objectlistmodel/objectlistmodel.qmlproject b/examples/declarative/modelviews/objectlistmodel/objectlistmodel.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/modelviews/objectlistmodel/objectlistmodel.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/modelviews/objectlistmodel/objectlistmodel.qrc b/examples/declarative/modelviews/objectlistmodel/objectlistmodel.qrc new file mode 100644 index 0000000..17e9301 --- /dev/null +++ b/examples/declarative/modelviews/objectlistmodel/objectlistmodel.qrc @@ -0,0 +1,5 @@ +<!DOCTYPE RCC><RCC version="1.0"> +<qresource> + <file>view.qml</file> +</qresource> +</RCC> diff --git a/examples/declarative/modelviews/objectlistmodel/view.qml b/examples/declarative/modelviews/objectlistmodel/view.qml new file mode 100644 index 0000000..2b8383f --- /dev/null +++ b/examples/declarative/modelviews/objectlistmodel/view.qml @@ -0,0 +1,16 @@ +import Qt 4.7 + +ListView { + width: 100 + height: 100 + anchors.fill: parent + model: myModel + delegate: Component { + Rectangle { + height: 25 + width: 100 + color: model.modelData.color + Text { text: name } + } + } +} diff --git a/examples/declarative/modelviews/package/Delegate.qml b/examples/declarative/modelviews/package/Delegate.qml new file mode 100644 index 0000000..785fde6 --- /dev/null +++ b/examples/declarative/modelviews/package/Delegate.qml @@ -0,0 +1,48 @@ +import Qt 4.7 + +//![0] +Package { + Text { id: listDelegate; width: 200; height: 25; text: 'Empty'; Package.name: 'list' } + Text { id: gridDelegate; width: 100; height: 50; text: 'Empty'; Package.name: 'grid' } + + Rectangle { + id: wrapper + width: 200; height: 25 + color: 'lightsteelblue' + + Text { text: display; anchors.centerIn: parent } + MouseArea { + anchors.fill: parent + onClicked: { + if (wrapper.state == 'inList') + wrapper.state = 'inGrid'; + else + wrapper.state = 'inList'; + } + } + + state: 'inList' + states: [ + State { + name: 'inList' + ParentChange { target: wrapper; parent: listDelegate } + }, + State { + name: 'inGrid' + ParentChange { + target: wrapper; parent: gridDelegate + x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height + } + } + ] + + transitions: [ + Transition { + ParentAnimation { + NumberAnimation { properties: 'x,y,width,height'; duration: 300 } + } + } + ] + } +} +//![0] diff --git a/examples/declarative/modelviews/package/package.qmlproject b/examples/declarative/modelviews/package/package.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/modelviews/package/package.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/modelviews/package/view.qml b/examples/declarative/modelviews/package/view.qml new file mode 100644 index 0000000..67f896b --- /dev/null +++ b/examples/declarative/modelviews/package/view.qml @@ -0,0 +1,35 @@ +import Qt 4.7 + +Item { + width: 400 + height: 200 + + ListModel { + id: myModel + ListElement { display: "One" } + ListElement { display: "Two" } + ListElement { display: "Three" } + ListElement { display: "Four" } + ListElement { display: "Five" } + ListElement { display: "Six" } + ListElement { display: "Seven" } + ListElement { display: "Eight" } + } + //![0] + VisualDataModel { + id: visualModel + delegate: Delegate {} + model: myModel + } + + ListView { + width: 200; height:200 + model: visualModel.parts.list + } + GridView { + x: 200; width: 200; height:200 + cellHeight: 50 + model: visualModel.parts.grid + } + //![0] +} diff --git a/examples/declarative/modelviews/parallax/parallax.qml b/examples/declarative/modelviews/parallax/parallax.qml new file mode 100644 index 0000000..110f17e --- /dev/null +++ b/examples/declarative/modelviews/parallax/parallax.qml @@ -0,0 +1,41 @@ +import Qt 4.7 +import "../../toys/clocks/content" +import "qml" + +Rectangle { + id: root + + width: 320; height: 480 + + ParallaxView { + id: parallax + anchors.fill: parent + background: "pics/background.jpg" + + Item { + property url icon: "pics/yast-wol.png" + width: 320; height: 480 + Clock { anchors.centerIn: parent } + } + + Item { + property url icon: "pics/home-page.svg" + width: 320; height: 480 + Smiley { } + } + + Item { + property url icon: "pics/yast-joystick.png" + width: 320; height: 480 + + Loader { + anchors { top: parent.top; topMargin: 10; horizontalCenter: parent.horizontalCenter } + width: 300; height: 400 + clip: true; + source: "../../../../demos/declarative/samegame/samegame.qml" + } + } + + currentIndex: root.currentIndex + } +} diff --git a/examples/declarative/modelviews/parallax/parallax.qmlproject b/examples/declarative/modelviews/parallax/parallax.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/modelviews/parallax/parallax.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/modelviews/parallax/pics/background.jpg b/examples/declarative/modelviews/parallax/pics/background.jpg Binary files differnew file mode 100644 index 0000000..61cca2f --- /dev/null +++ b/examples/declarative/modelviews/parallax/pics/background.jpg diff --git a/examples/declarative/modelviews/parallax/pics/face-smile.png b/examples/declarative/modelviews/parallax/pics/face-smile.png Binary files differnew file mode 100644 index 0000000..3d66d72 --- /dev/null +++ b/examples/declarative/modelviews/parallax/pics/face-smile.png diff --git a/examples/declarative/modelviews/parallax/pics/home-page.svg b/examples/declarative/modelviews/parallax/pics/home-page.svg new file mode 100644 index 0000000..4f16958 --- /dev/null +++ b/examples/declarative/modelviews/parallax/pics/home-page.svg @@ -0,0 +1,445 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="48" + height="48" + overflow="visible" + enable-background="new 0 0 128 129.396" + xml:space="preserve" + id="svg2" + sodipodi:version="0.32" + inkscape:version="0.46" + sodipodi:docname="go-home.svg" + sodipodi:docbase="/home/jimmac/src/cvs/tango-icon-theme/scalable/actions" + version="1.0" + inkscape:export-filename="/home/tigert/My Downloads/go-home.png" + inkscape:export-xdpi="90.000000" + inkscape:export-ydpi="90.000000" + inkscape:output_extension="org.inkscape.output.svg.inkscape"><metadata + id="metadata367"><rdf:RDF><cc:Work + rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><cc:license + rdf:resource="http://creativecommons.org/licenses/publicdomain/" /><dc:title>Go Home</dc:title><dc:creator><cc:Agent><dc:title>Jakub Steiner</dc:title></cc:Agent></dc:creator><dc:source>http://jimmac.musichall.cz</dc:source><dc:subject><rdf:Bag><rdf:li>home</rdf:li><rdf:li>return</rdf:li><rdf:li>go</rdf:li><rdf:li>default</rdf:li><rdf:li>user</rdf:li><rdf:li>directory</rdf:li></rdf:Bag></dc:subject><dc:contributor><cc:Agent><dc:title>Tuomas Kuosmanen</dc:title></cc:Agent></dc:contributor></cc:Work><cc:License + rdf:about="http://creativecommons.org/licenses/publicdomain/"><cc:permits + rdf:resource="http://creativecommons.org/ns#Reproduction" /><cc:permits + rdf:resource="http://creativecommons.org/ns#Distribution" /><cc:permits + rdf:resource="http://creativecommons.org/ns#DerivativeWorks" /></cc:License></rdf:RDF></metadata><defs + id="defs365"><inkscape:perspective + sodipodi:type="inkscape:persp3d" + inkscape:vp_x="0 : 24 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_z="48 : 24 : 1" + inkscape:persp3d-origin="24 : 16 : 1" + id="perspective92" /><radialGradient + inkscape:collect="always" + xlink:href="#linearGradient5060" + id="radialGradient5031" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(-2.774389,0,0,1.969706,112.7623,-872.8854)" + cx="605.71429" + cy="486.64789" + fx="605.71429" + fy="486.64789" + r="117.14286" /><linearGradient + inkscape:collect="always" + id="linearGradient5060"><stop + style="stop-color:black;stop-opacity:1;" + offset="0" + id="stop5062" /><stop + style="stop-color:black;stop-opacity:0;" + offset="1" + id="stop5064" /></linearGradient><radialGradient + inkscape:collect="always" + xlink:href="#linearGradient5060" + id="radialGradient5029" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(2.774389,0,0,1.969706,-1891.633,-872.8854)" + cx="605.71429" + cy="486.64789" + fx="605.71429" + fy="486.64789" + r="117.14286" /><linearGradient + id="linearGradient5048"><stop + style="stop-color:black;stop-opacity:0;" + offset="0" + id="stop5050" /><stop + id="stop5056" + offset="0.5" + style="stop-color:black;stop-opacity:1;" /><stop + style="stop-color:black;stop-opacity:0;" + offset="1" + id="stop5052" /></linearGradient><linearGradient + inkscape:collect="always" + xlink:href="#linearGradient5048" + id="linearGradient5027" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(2.774389,0,0,1.969706,-1892.179,-872.8854)" + x1="302.85715" + y1="366.64789" + x2="302.85715" + y2="609.50507" /><linearGradient + id="linearGradient2406"><stop + style="stop-color:#7c7e79;stop-opacity:1;" + offset="0" + id="stop2408" /><stop + id="stop2414" + offset="0.1724138" + style="stop-color:#848681;stop-opacity:1;" /><stop + style="stop-color:#898c86;stop-opacity:1;" + offset="1" + id="stop2410" /></linearGradient><linearGradient + inkscape:collect="always" + id="linearGradient2390"><stop + style="stop-color:#919191;stop-opacity:1;" + offset="0" + id="stop2392" /><stop + style="stop-color:#919191;stop-opacity:0;" + offset="1" + id="stop2394" /></linearGradient><linearGradient + inkscape:collect="always" + id="linearGradient2378"><stop + style="stop-color:#575757;stop-opacity:1;" + offset="0" + id="stop2380" /><stop + style="stop-color:#575757;stop-opacity:0;" + offset="1" + id="stop2382" /></linearGradient><linearGradient + inkscape:collect="always" + id="linearGradient2368"><stop + style="stop-color:#ffffff;stop-opacity:1;" + offset="0" + id="stop2370" /><stop + style="stop-color:#ffffff;stop-opacity:0;" + offset="1" + id="stop2372" /></linearGradient><linearGradient + inkscape:collect="always" + id="linearGradient2349"><stop + style="stop-color:#000000;stop-opacity:1;" + offset="0" + id="stop2351" /><stop + style="stop-color:#000000;stop-opacity:0;" + offset="1" + id="stop2353" /></linearGradient><linearGradient + id="linearGradient2341"><stop + id="stop2343" + offset="0" + style="stop-color:#000000;stop-opacity:1;" /><stop + id="stop2345" + offset="1" + style="stop-color:#000000;stop-opacity:0;" /></linearGradient><linearGradient + id="linearGradient2329"><stop + style="stop-color:#000000;stop-opacity:0.18556701;" + offset="0" + id="stop2331" /><stop + style="stop-color:#ffffff;stop-opacity:1;" + offset="1" + id="stop2333" /></linearGradient><linearGradient + inkscape:collect="always" + id="linearGradient2319"><stop + style="stop-color:#000000;stop-opacity:1;" + offset="0" + id="stop2321" /><stop + style="stop-color:#000000;stop-opacity:0;" + offset="1" + id="stop2323" /></linearGradient><linearGradient + id="linearGradient2307"><stop + style="stop-color:#edd400;stop-opacity:1;" + offset="0" + id="stop2309" /><stop + style="stop-color:#998800;stop-opacity:1;" + offset="1" + id="stop2311" /></linearGradient><linearGradient + inkscape:collect="always" + id="linearGradient2299"><stop + style="stop-color:#ffffff;stop-opacity:1;" + offset="0" + id="stop2301" /><stop + style="stop-color:#ffffff;stop-opacity:0;" + offset="1" + id="stop2303" /></linearGradient><linearGradient + id="XMLID_2_" + gradientUnits="userSpaceOnUse" + x1="80.223602" + y1="117.5205" + x2="48.046001" + y2="59.7995" + gradientTransform="matrix(0.314683,0.000000,0.000000,0.314683,4.128264,3.742874)"> + <stop + offset="0" + style="stop-color:#CCCCCC" + id="stop17" /> + <stop + offset="0.9831" + style="stop-color:#FFFFFF" + id="stop19" /> + <midPointStop + offset="0" + style="stop-color:#CCCCCC" + id="midPointStop48" /> + <midPointStop + offset="0.5" + style="stop-color:#CCCCCC" + id="midPointStop50" /> + <midPointStop + offset="0.9831" + style="stop-color:#FFFFFF" + id="midPointStop52" /> + </linearGradient><linearGradient + inkscape:collect="always" + xlink:href="#XMLID_2_" + id="linearGradient1514" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.336922,0.000000,0.000000,0.166888,17.98288,15.46151)" + x1="52.006104" + y1="166.1331" + x2="14.049017" + y2="-42.218513" /><linearGradient + id="XMLID_39_" + gradientUnits="userSpaceOnUse" + x1="64.387703" + y1="65.124001" + x2="64.387703" + y2="35.569" + gradientTransform="matrix(0.354101,0.000000,0.000000,0.354101,1.638679,-8.364921e-2)"> + <stop + offset="0" + style="stop-color:#FFFFFF" + id="stop336" /> + <stop + offset="0.8539" + style="stop-color:#FF6200" + id="stop338" /> + <stop + offset="1" + style="stop-color:#F25D00" + id="stop340" /> + <midPointStop + offset="0" + style="stop-color:#FFFFFF" + id="midPointStop335" /> + <midPointStop + offset="0.5" + style="stop-color:#FFFFFF" + id="midPointStop337" /> + <midPointStop + offset="0.8539" + style="stop-color:#FF6200" + id="midPointStop339" /> + <midPointStop + offset="0.5" + style="stop-color:#FF6200" + id="midPointStop341" /> + <midPointStop + offset="1" + style="stop-color:#F25D00" + id="midPointStop343" /> + </linearGradient><radialGradient + inkscape:collect="always" + xlink:href="#linearGradient2299" + id="radialGradient2305" + cx="7.5326638" + cy="24.202574" + fx="7.5326638" + fy="24.202574" + r="8.2452128" + gradientTransform="matrix(4.100086,-1.627292e-17,2.125447e-14,4.201322,-25.41506,-78.53967)" + gradientUnits="userSpaceOnUse" /><radialGradient + inkscape:collect="always" + xlink:href="#linearGradient2307" + id="radialGradient2313" + cx="19.985598" + cy="36.77816" + fx="19.985598" + fy="36.77816" + r="1.0821035" + gradientTransform="matrix(1.125263,0.000000,0.000000,0.982744,-3.428678,0.565787)" + gradientUnits="userSpaceOnUse" /><radialGradient + inkscape:collect="always" + xlink:href="#linearGradient2319" + id="radialGradient2325" + cx="20.443665" + cy="37.425829" + fx="20.443665" + fy="37.425829" + r="1.0821035" + gradientTransform="matrix(1.125263,0.000000,0.000000,0.982744,-3.428678,0.731106)" + gradientUnits="userSpaceOnUse" /><linearGradient + inkscape:collect="always" + xlink:href="#linearGradient2329" + id="linearGradient2335" + x1="17.602522" + y1="26.057423" + x2="17.682528" + y2="32.654099" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.898789,0,0,1.071914,0.478025,-2.080838)" /><radialGradient + inkscape:collect="always" + xlink:href="#linearGradient2341" + id="radialGradient2339" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(4.100086,1.627292e-17,2.125447e-14,-4.201322,-5.198109,105.3535)" + cx="11.68129" + cy="19.554111" + fx="11.68129" + fy="19.554111" + r="8.2452126" /><radialGradient + inkscape:collect="always" + xlink:href="#linearGradient2349" + id="radialGradient2355" + cx="24.023088" + cy="40.56913" + fx="24.023088" + fy="40.56913" + r="16.28684" + gradientTransform="matrix(1.000000,0.000000,0.000000,0.431250,1.157278e-15,23.07369)" + gradientUnits="userSpaceOnUse" /><radialGradient + inkscape:collect="always" + xlink:href="#linearGradient2368" + id="radialGradient2374" + cx="29.913452" + cy="30.442923" + fx="29.913452" + fy="30.442923" + r="4.0018832" + gradientTransform="matrix(3.751495,-2.191984e-22,1.723265e-22,3.147818,-82.00907,-65.70704)" + gradientUnits="userSpaceOnUse" /><radialGradient + inkscape:collect="always" + xlink:href="#linearGradient2378" + id="radialGradient2384" + cx="24.195112" + cy="10.577631" + fx="24.195112" + fy="10.577631" + r="15.242914" + gradientTransform="matrix(1.125263,-3.585417e-8,4.269819e-8,1.340059,-3.006704,1.355395)" + gradientUnits="userSpaceOnUse" /><linearGradient + inkscape:collect="always" + xlink:href="#linearGradient2390" + id="linearGradient2396" + x1="30.603519" + y1="37.337803" + x2="30.603519" + y2="36.112415" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(1.263867,0,0,0.859794,-6.499556,8.390924)" /><linearGradient + inkscape:collect="always" + xlink:href="#linearGradient2406" + id="linearGradient2412" + x1="17.850183" + y1="28.939463" + x2="19.040216" + y2="41.03223" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.888785,0,0,1.08932,2.41099,-1.524336)" /></defs><sodipodi:namedview + inkscape:cy="-2.3755359" + inkscape:cx="25.234802" + inkscape:zoom="1" + inkscape:window-height="691" + inkscape:window-width="872" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + borderopacity="0.21568627" + bordercolor="#666666" + pagecolor="#ffffff" + id="base" + inkscape:showpageshadow="false" + inkscape:window-x="466" + inkscape:window-y="157" + inkscape:current-layer="svg2" + fill="#555753" + showgrid="false" + stroke="#a40000" + showguides="true" + inkscape:guide-bbox="true" /> + <g + style="display:inline" + id="g5022" + transform="matrix(2.158196e-2,0,0,1.859457e-2,43.12251,41.63767)"><rect + y="-150.69685" + x="-1559.2523" + height="478.35718" + width="1339.6335" + id="rect4173" + style="opacity:0.40206185;color:black;fill:url(#linearGradient5027);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" /><path + sodipodi:nodetypes="cccc" + id="path5058" + d="M -219.61876,-150.68038 C -219.61876,-150.68038 -219.61876,327.65041 -219.61876,327.65041 C -76.744594,328.55086 125.78146,220.48075 125.78138,88.454235 C 125.78138,-43.572302 -33.655436,-150.68036 -219.61876,-150.68038 z " + style="opacity:0.40206185;color:black;fill:url(#radialGradient5029);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" /><path + style="opacity:0.40206185;color:black;fill:url(#radialGradient5031);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" + d="M -1559.2523,-150.68038 C -1559.2523,-150.68038 -1559.2523,327.65041 -1559.2523,327.65041 C -1702.1265,328.55086 -1904.6525,220.48075 -1904.6525,88.454235 C -1904.6525,-43.572302 -1745.2157,-150.68036 -1559.2523,-150.68038 z " + id="path5018" + sodipodi:nodetypes="cccc" /></g><path + style="color:#000000;fill:url(#linearGradient1514);fill-opacity:1;fill-rule:nonzero;stroke:#757575;stroke-width:1.0000006;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" + d="M 21.619576,8.1833733 L 27.577035,8.1833733 C 28.416767,8.1833733 41.46351,23.618701 41.46351,24.524032 L 41.019989,43.020777 C 41.019989,43.92611 40.343959,44.654954 39.504227,44.654954 L 8.0469496,44.654954 C 7.2072167,44.654954 6.5311871,43.92611 6.5311871,43.020777 L 6.5876651,24.524032 C 6.5876651,23.618701 20.779844,8.1833733 21.619576,8.1833733 z " + id="rect1512" + sodipodi:nodetypes="ccccccccc" /><path + style="fill:none" + id="path5" + d="M 46.963575,45.735573 L 1.6386762,45.735573 L 1.6386762,0.41067554 L 46.963575,0.41067554 L 46.963575,45.735573 z " /><path + style="fill:url(#linearGradient2335);fill-opacity:1;fill-rule:evenodd" + id="path2327" + d="M 23,29 L 22.954256,44.090942 L 11.111465,44.090942 L 11,29 L 23,29 z " + clip-rule="evenodd" + sodipodi:nodetypes="ccccc" /><path + sodipodi:nodetypes="ccccccccc" + id="path2357" + d="M 21.780459,9.405584 L 27.339556,9.405584 C 28.123138,9.405584 40.340425,23.805172 40.340425,24.649756 L 39.993267,42.862067 C 39.993267,43.321326 39.84953,43.515532 39.480892,43.515532 L 8.0936894,43.529812 C 7.7250517,43.529812 7.5097258,43.449894 7.5097258,43.076262 L 7.7250676,24.649756 C 7.7250676,23.805172 20.99688,9.405584 21.780459,9.405584 z " + style="opacity:0.3125;color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.00000012;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" /><path + clip-rule="evenodd" + d="M 7.2075295,27.943053 L 7.1532728,30.538247 L 25.521437,17.358993 L 40.807832,28.513421 L 40.879142,28.201707 L 24.508686,12.297576 L 7.2075295,27.943053 z " + id="path23" + style="opacity:0.2;fill:url(#radialGradient2384);fill-opacity:1;fill-rule:evenodd" + sodipodi:nodetypes="ccccccc" /><path + clip-rule="evenodd" + d="M 22,30 L 22,44.090942 L 12.188971,44.090942 L 12,30 L 22,30 z " + id="path188" + style="fill:url(#linearGradient2412);fill-opacity:1;fill-rule:evenodd" + sodipodi:nodetypes="ccccc" /><path + style="opacity:0.40909089;fill:url(#radialGradient2325);fill-opacity:1;fill-rule:evenodd" + id="path2315" + d="M 19.576856,36.44767 C 20.249646,36.44767 20.793472,36.922275 20.793472,37.506177 C 20.793472,38.095988 20.249646,38.574532 19.576856,38.574532 C 18.904584,38.574532 18.35817,38.095988 18.35817,37.506177 C 18.358685,36.922275 18.904584,36.44767 19.576856,36.44767 z " + clip-rule="evenodd" /><path + clip-rule="evenodd" + d="M 19.462314,35.932229 C 20.135103,35.932229 20.678929,36.406834 20.678929,36.990736 C 20.678929,37.580545 20.135103,38.059089 19.462314,38.059089 C 18.790041,38.059089 18.243627,37.580545 18.243627,36.990736 C 18.244142,36.406834 18.790041,35.932229 19.462314,35.932229 z " + id="path217" + style="fill:url(#radialGradient2313);fill-opacity:1;fill-rule:evenodd" /><path + d="M 24.447748,11.559337 L 43.374808,28.729205 L 43.869487,29.121196 L 44.273163,28.949811 L 43.900293,28.188138 L 43.622679,27.964702 L 24.447748,12.392396 L 5.0582327,28.135731 L 4.8206309,28.279851 L 4.603921,28.986637 L 5.0373408,29.115885 L 5.4218948,28.807462 L 24.447748,11.559337 z " + id="path342" + style="fill:url(#XMLID_39_)" + sodipodi:nodetypes="ccccccccccccc" /><path + style="fill:#ef2929;stroke:#a40000" + id="path362" + d="M 24.330168,2.2713382 L 2.4484294,20.372675 L 1.8237005,27.538603 L 3.8236367,29.602926 C 3.8236367,29.602926 24.231018,12.445641 24.44773,12.274963 L 44.08027,29.818223 L 45.978694,27.494226 L 44.362903,20.382852 L 24.44773,2.1668788 L 24.330168,2.2713382 z " + sodipodi:nodetypes="cccccccccc" /> +<path + style="opacity:0.40909089;color:#000000;fill:url(#radialGradient2305);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" + d="M 2.8413446,20.613129 L 2.5497894,27.236494 L 24.369219,8.980075 L 24.298891,3.0867443 L 2.8413446,20.613129 z " + id="path1536" + sodipodi:nodetypes="ccccc" /><path + sodipodi:nodetypes="ccccc" + id="path2337" + d="M 24.483763,8.7509884 L 24.583223,2.9098867 L 43.912186,20.56184 L 45.403998,27.062652 L 24.483763,8.7509884 z " + style="opacity:0.13636367;color:#000000;fill:url(#radialGradient2339);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" /><path + style="opacity:0.31818183;color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.99999934;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" + d="M 27.102228,27.719824 L 36.142223,27.719824 C 36.912818,27.719824 37.53319,28.340194 37.53319,29.110791 L 37.525229,38.190012 C 37.525229,38.960608 36.928907,39.455981 36.158311,39.455981 L 27.102228,39.455981 C 26.331631,39.455981 25.711261,38.835608 25.711261,38.065012 L 25.711261,29.110791 C 25.711261,28.340194 26.331631,27.719824 27.102228,27.719824 z " + id="rect2361" + sodipodi:nodetypes="ccccccccc" /><rect + style="opacity:1;color:#000000;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:#757575;stroke-width:0.9999994;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" + id="rect3263" + width="10.001333" + height="9.9624557" + x="26.507767" + y="28.514256" + rx="0.38128215" + ry="0.38128215" /><path + style="opacity:0.39772728;color:#000000;fill:url(#radialGradient2374);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999958;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" + d="M 27.107118,34.408261 C 30.725101,34.739438 32.634842,32.962557 35.97527,32.855521 L 36,29.00603 L 27.088388,29 L 27.107118,34.408261 z " + id="rect2363" + sodipodi:nodetypes="ccccc" /></svg>
\ No newline at end of file diff --git a/examples/declarative/modelviews/parallax/pics/shadow.png b/examples/declarative/modelviews/parallax/pics/shadow.png Binary files differnew file mode 100644 index 0000000..8270565 --- /dev/null +++ b/examples/declarative/modelviews/parallax/pics/shadow.png diff --git a/examples/declarative/modelviews/parallax/pics/yast-joystick.png b/examples/declarative/modelviews/parallax/pics/yast-joystick.png Binary files differnew file mode 100644 index 0000000..858cea0 --- /dev/null +++ b/examples/declarative/modelviews/parallax/pics/yast-joystick.png diff --git a/examples/declarative/modelviews/parallax/pics/yast-wol.png b/examples/declarative/modelviews/parallax/pics/yast-wol.png Binary files differnew file mode 100644 index 0000000..7712180 --- /dev/null +++ b/examples/declarative/modelviews/parallax/pics/yast-wol.png diff --git a/examples/declarative/modelviews/parallax/qml/ParallaxView.qml b/examples/declarative/modelviews/parallax/qml/ParallaxView.qml new file mode 100644 index 0000000..e869a21 --- /dev/null +++ b/examples/declarative/modelviews/parallax/qml/ParallaxView.qml @@ -0,0 +1,83 @@ +import Qt 4.7 + +Item { + id: root + + property alias background: background.source + default property alias content: visualModel.children + property int currentIndex: 0 + + Image { + id: background + fillMode: Image.TileHorizontally + x: -list.contentX / 2 + width: Math.max(list.contentWidth, parent.width) + } + + ListView { + id: list + + currentIndex: root.currentIndex + onCurrentIndexChanged: root.currentIndex = currentIndex + + orientation: Qt.Horizontal + boundsBehavior: Flickable.DragOverBounds + anchors.fill: parent + model: VisualItemModel { id: visualModel } + + highlightRangeMode: ListView.StrictlyEnforceRange + snapMode: ListView.SnapOneItem + } + + ListView { + id: selector + + Rectangle { + color: "#60FFFFFF" + x: -10; y: -10; radius: 10; z: -1 + width: parent.width + 20; height: parent.height + 20 + } + currentIndex: root.currentIndex + onCurrentIndexChanged: root.currentIndex = currentIndex + + height: 50 + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + width: Math.min(count * 50, parent.width - 20) + interactive: width == parent.width - 20 + orientation: Qt.Horizontal + + delegate: Item { + width: 50; height: 50 + id: delegateRoot + + Image { + id: image + source: modelData.icon + smooth: true + scale: 0.8 + } + + MouseArea { + anchors.fill: parent + onClicked: { root.currentIndex = index } + } + + states: State { + name: "Selected" + when: delegateRoot.ListView.isCurrentItem == true + PropertyChanges { + target: image + scale: 1 + y: -5 + } + } + transitions: Transition { + NumberAnimation { + properties: "scale,y" + } + } + } + model: visualModel.children + } +} diff --git a/examples/declarative/modelviews/parallax/qml/Smiley.qml b/examples/declarative/modelviews/parallax/qml/Smiley.qml new file mode 100644 index 0000000..662addc --- /dev/null +++ b/examples/declarative/modelviews/parallax/qml/Smiley.qml @@ -0,0 +1,46 @@ +import Qt 4.7 + +Item { + id: window + width: 320; height: 480 + + // The shadow for the smiley face + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: "../pics/shadow.png"; y: smiley.minHeight + 58 + + // The scale property depends on the y position of the smiley face. + scale: smiley.y * 0.5 / (smiley.minHeight - smiley.maxHeight) + } + + Image { + id: smiley + property int maxHeight: window.height / 3 + property int minHeight: 2 * window.height / 3 + + anchors.horizontalCenter: parent.horizontalCenter + source: "../pics/face-smile.png"; y: minHeight + + // Animate the y property. Setting repeat to true makes the + // animation repeat indefinitely, otherwise it would only run once. + SequentialAnimation on y { + loops: Animation.Infinite + + // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function + NumberAnimation { + from: smiley.minHeight; to: smiley.maxHeight + easing.type: Easing.OutExpo; duration: 300 + } + + // Then move back to minHeight in 1 second, using the OutBounce easing function + NumberAnimation { + from: smiley.maxHeight; to: smiley.minHeight + easing.type: Easing.OutBounce; duration: 1000 + } + + // Then pause for 500ms + PauseAnimation { duration: 500 } + } + } +} + diff --git a/examples/declarative/modelviews/stringlistmodel/main.cpp b/examples/declarative/modelviews/stringlistmodel/main.cpp new file mode 100644 index 0000000..abbffa7 --- /dev/null +++ b/examples/declarative/modelviews/stringlistmodel/main.cpp @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the demonstration applications of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include <QApplication> + +#include <qdeclarativeengine.h> +#include <qdeclarativecontext.h> +#include <qdeclarative.h> +#include <qdeclarativeitem.h> +#include <qdeclarativeview.h> + + +/* + This example illustrates exposing a QStringList as a + model in QML +*/ + +int main(int argc, char ** argv) +{ + QApplication app(argc, argv); + + QDeclarativeView view; + + QStringList dataList; + dataList.append("Item 1"); + dataList.append("Item 2"); + dataList.append("Item 3"); + dataList.append("Item 4"); + + QDeclarativeContext *ctxt = view.rootContext(); + ctxt->setContextProperty("myModel", QVariant::fromValue(dataList)); + + view.setSource(QUrl("qrc:view.qml")); + view.show(); + + return app.exec(); +} + diff --git a/examples/declarative/modelviews/stringlistmodel/stringlistmodel.pro b/examples/declarative/modelviews/stringlistmodel/stringlistmodel.pro new file mode 100644 index 0000000..23dc481 --- /dev/null +++ b/examples/declarative/modelviews/stringlistmodel/stringlistmodel.pro @@ -0,0 +1,9 @@ +TEMPLATE = app +TARGET = stringlistmodel +DEPENDPATH += . +INCLUDEPATH += . +QT += declarative + +# Input +SOURCES += main.cpp +RESOURCES += stringlistmodel.qrc diff --git a/examples/declarative/modelviews/stringlistmodel/stringlistmodel.qrc b/examples/declarative/modelviews/stringlistmodel/stringlistmodel.qrc new file mode 100644 index 0000000..17e9301 --- /dev/null +++ b/examples/declarative/modelviews/stringlistmodel/stringlistmodel.qrc @@ -0,0 +1,5 @@ +<!DOCTYPE RCC><RCC version="1.0"> +<qresource> + <file>view.qml</file> +</qresource> +</RCC> diff --git a/examples/declarative/modelviews/stringlistmodel/view.qml b/examples/declarative/modelviews/stringlistmodel/view.qml new file mode 100644 index 0000000..41c03d9 --- /dev/null +++ b/examples/declarative/modelviews/stringlistmodel/view.qml @@ -0,0 +1,15 @@ +import Qt 4.7 + +ListView { + width: 100 + height: 100 + anchors.fill: parent + model: myModel + delegate: Component { + Rectangle { + height: 25 + width: 100 + Text { text: modelData } + } + } +} diff --git a/examples/declarative/modelviews/webview/alerts.html b/examples/declarative/modelviews/webview/alerts.html new file mode 100644 index 0000000..82caddf --- /dev/null +++ b/examples/declarative/modelviews/webview/alerts.html @@ -0,0 +1,5 @@ +<html> +<body onclick="alert('This is an alert')"> +<p>This is a web page. It fires an alert when clicked. +</body> +</html> diff --git a/examples/declarative/modelviews/webview/alerts.qml b/examples/declarative/modelviews/webview/alerts.qml new file mode 100644 index 0000000..7684c3e --- /dev/null +++ b/examples/declarative/modelviews/webview/alerts.qml @@ -0,0 +1,58 @@ +import Qt 4.7 +import org.webkit 1.0 + +WebView { + id: webView + width: 120 + height: 150 + url: "alerts.html" + + onAlert: popup.show(message) + + Rectangle { + id: popup + + color: "red" + border.color: "black"; border.width: 2 + radius: 4 + + y: parent.height // off "screen" + anchors.horizontalCenter: parent.horizontalCenter + width: label.width+5 + height: label.height+5 + + opacity: 0 + + function show(t) { + label.text = t + popup.state = "visible" + timer.start() + } + states: State { + name: "visible" + PropertyChanges { target: popup; opacity: 1 } + PropertyChanges { target: popup; y: (webView.height-popup.height)/2 } + } + + transitions: [ + Transition { from: ""; PropertyAnimation { properties: "opacity,y"; duration: 65 } }, + Transition { from: "visible"; PropertyAnimation { properties: "opacity,y"; duration: 500 } } + ] + + Timer { + id: timer + interval: 1000 + onTriggered: popup.state = "" + } + + Text { + id: label + anchors.centerIn: parent + color: "white" + font.pixelSize: 20 + width: webView.width*0.75 + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter + } + } +} diff --git a/examples/declarative/modelviews/webview/autosize.qml b/examples/declarative/modelviews/webview/autosize.qml new file mode 100644 index 0000000..9632883 --- /dev/null +++ b/examples/declarative/modelviews/webview/autosize.qml @@ -0,0 +1,62 @@ +import Qt 4.7 +import org.webkit 1.0 + +// The WebView size is determined by the width, height, +// preferredWidth, and preferredHeight properties. +Rectangle { + id: rect + width: 200 + height: layout.height + + Column { + id: layout + spacing: 2 + WebView { + html: "No width defined." + Rectangle { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + width: rect.width + html: "The width is full." + Rectangle { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + width: rect.width/2 + html: "The width is half." + Rectangle { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + preferredWidth: rect.width/2 + html: "The preferredWidth is half." + Rectangle { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + preferredWidth: rect.width/2 + html: "The_preferredWidth_is_half." + Rectangle { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + width: rect.width/2 + html: "The_width_is_half." + Rectangle { + color: "#10000000" + anchors.fill: parent + } + } + } +} diff --git a/examples/declarative/modelviews/webview/content/FieldText.qml b/examples/declarative/modelviews/webview/content/FieldText.qml new file mode 100644 index 0000000..d1d003f --- /dev/null +++ b/examples/declarative/modelviews/webview/content/FieldText.qml @@ -0,0 +1,157 @@ +import Qt 4.7 + +Item { + id: fieldText + height: 30 + property string text: "" + property string label: "" + property bool mouseGrabbed: false + signal confirmed + signal cancelled + signal startEdit + + function edit() { + if (!mouseGrabbed) { + fieldText.startEdit(); + fieldText.state='editing'; + mouseGrabbed=true; + } + } + + function confirm() { + fieldText.state=''; + fieldText.text = textEdit.text; + mouseGrabbed=false; + fieldText.confirmed(); + } + + function reset() { + textEdit.text = fieldText.text; + fieldText.state=''; + mouseGrabbed=false; + fieldText.cancelled(); + } + + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "pics/cancel.png" + opacity: 0 + } + + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "pics/ok.png" + opacity: 0 + } + + TextInput { + id: textEdit + text: fieldText.text + focus: false + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.verticalCenter: parent.verticalCenter + color: "black" + font.bold: true + readOnly: true + onAccepted: confirm() + Keys.onEscapePressed: reset() + } + + Text { + id: textLabel + x: 5 + width: parent.width-10 + anchors.verticalCenter: parent.verticalCenter + horizontalAlignment: Text.AlignHCenter + color: fieldText.state == "editing" ? "#505050" : "#AAAAAA" + font.italic: true + font.bold: true + text: label + opacity: textEdit.text == '' ? 1 : 0 + Behavior on opacity { + NumberAnimation { + property: "opacity" + duration: 250 + } + } + } + + MouseArea { + anchors.fill: cancelIcon + onClicked: { reset() } + } + + MouseArea { + anchors.fill: confirmIcon + onClicked: { confirm() } + } + + MouseArea { + id: editRegion + anchors.fill: textEdit + onClicked: { edit() } + } + + states: [ + State { + name: "editing" + PropertyChanges { + target: confirmIcon + opacity: 1 + } + PropertyChanges { + target: cancelIcon + opacity: 1 + } + PropertyChanges { + target: textEdit + color: "black" + readOnly: false + focus: true + selectionStart: 0 + selectionEnd: -1 + } + PropertyChanges { + target: editRegion + opacity: 0 + } + PropertyChanges { + target: textEdit.anchors + leftMargin: 34 + } + PropertyChanges { + target: textEdit.anchors + rightMargin: 34 + } + } + ] + + transitions: [ + Transition { + from: "" + to: "*" + reversible: true + NumberAnimation { + properties: "opacity,leftMargin,rightMargin" + duration: 200 + } + ColorAnimation { + property: "color" + duration: 150 + } + } + ] +} diff --git a/examples/declarative/modelviews/webview/content/Mapping/Map.qml b/examples/declarative/modelviews/webview/content/Mapping/Map.qml new file mode 100644 index 0000000..5d3ba81 --- /dev/null +++ b/examples/declarative/modelviews/webview/content/Mapping/Map.qml @@ -0,0 +1,26 @@ +import Qt 4.7 +import org.webkit 1.0 + +Item { + id: page + property real latitude: -34.397 + property real longitude: 150.644 + property string address: "" + property alias status: js.status + WebView { + id: map + anchors.fill: parent + url: "map.html" + javaScriptWindowObjects: QtObject { + id: js + WebView.windowObjectName: "qml" + property real lat: page.latitude + property real lng: page.longitude + property string address: page.address + property string status: "Loading" + onAddressChanged: { if (map.url != "" && map.progress==1) map.evaluateJavaScript("goToAddress()") } + } + pressGrabTime: 0 + onLoadFinished: { evaluateJavaScript("goToAddress()"); } + } +} diff --git a/examples/declarative/modelviews/webview/content/Mapping/map.html b/examples/declarative/modelviews/webview/content/Mapping/map.html new file mode 100755 index 0000000..a8726fd --- /dev/null +++ b/examples/declarative/modelviews/webview/content/Mapping/map.html @@ -0,0 +1,52 @@ +<html> +<head> +<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> +<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> +<script type="text/javascript"> + var geocoder + var map + function goToLatLng(latlng,bounds) { + if (map) { + map.setCenter(latlng) + map.fitBounds(bounds) + } else { + var myOptions = { + zoom: 8, + center: latlng, + mapTypeId: google.maps.MapTypeId.ROADMAP + }; + map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); + } + } + function initialize() { + geocoder = new google.maps.Geocoder(); + if (window.qml.address) { + goToAddress() + } else { + goToLatLng(new google.maps.LatLng(window.qml.lat,window.qml.lng)); + } + } + function goToAddress() { + if (geocoder) { + var req = { + address: window.qml.address, + } + if (map) + req.bounds = map.getBounds() + window.qml.status = "Loading"; + geocoder.geocode(req, function(results, status) { + if (status == google.maps.GeocoderStatus.OK) { + window.qml.status = "Ready"; + goToLatLng(results[0].geometry.location,results[0].geometry.bounds); + } else { + window.qml.status = "Error"; + } + }); + } + } +</script> +</head> +<body onload="initialize()" leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px"> + <div id="map_canvas" style="width:100%; height:100%"></div> +</body> +</html> diff --git a/examples/declarative/modelviews/webview/content/SpinSquare.qml b/examples/declarative/modelviews/webview/content/SpinSquare.qml new file mode 100644 index 0000000..dba48d4 --- /dev/null +++ b/examples/declarative/modelviews/webview/content/SpinSquare.qml @@ -0,0 +1,25 @@ +import Qt 4.7 + +Item { + property variant period : 250 + property variant color : "black" + id: root + + Item { + x: root.width/2 + y: root.height/2 + Rectangle { + color: root.color + x: -width/2 + y: -height/2 + width: root.width + height: width + } + NumberAnimation on rotation { + from: 0 + to: 360 + loops: Animation.Infinite + duration: root.period + } + } +} diff --git a/examples/declarative/modelviews/webview/content/pics/cancel.png b/examples/declarative/modelviews/webview/content/pics/cancel.png Binary files differnew file mode 100644 index 0000000..ecc9533 --- /dev/null +++ b/examples/declarative/modelviews/webview/content/pics/cancel.png diff --git a/examples/declarative/modelviews/webview/content/pics/ok.png b/examples/declarative/modelviews/webview/content/pics/ok.png Binary files differnew file mode 100644 index 0000000..5795f04 --- /dev/null +++ b/examples/declarative/modelviews/webview/content/pics/ok.png diff --git a/examples/declarative/modelviews/webview/googleMaps.qml b/examples/declarative/modelviews/webview/googleMaps.qml new file mode 100644 index 0000000..5506012 --- /dev/null +++ b/examples/declarative/modelviews/webview/googleMaps.qml @@ -0,0 +1,43 @@ +// This example demonstrates how Web services such as Google Maps can be +// abstracted as QML types. Here we have a "Mapping" module with a "Map" +// type. The Map type has an address property. Setting that property moves +// the map. The underlying implementation uses WebView and the Google Maps +// API, but users from QML don't need to understand the implementation in +// order to create a Map. + +import Qt 4.7 +import org.webkit 1.0 +import "content/Mapping" + +Map { + id: map + width: 300 + height: 300 + address: "Paris" + + Rectangle { + x: 70 + width: input.width + 20 + height: input.height + 4 + anchors.bottom: parent.bottom; anchors.bottomMargin: 5 + radius: 5 + opacity: map.status == "Ready" ? 1 : 0 + + TextInput { + id: input + text: map.address + anchors.centerIn: parent + Keys.onReturnPressed: map.address = input.text + } + } + + Text { + id: loading + anchors.centerIn: parent + text: map.status == "Error" ? "Error" : "Loading" + opacity: map.status == "Ready" ? 0 : 1 + font.pixelSize: 30 + + Behavior on opacity { NumberAnimation{} } + } +} diff --git a/examples/declarative/modelviews/webview/inline-html.qml b/examples/declarative/modelviews/webview/inline-html.qml new file mode 100644 index 0000000..eec7fc6 --- /dev/null +++ b/examples/declarative/modelviews/webview/inline-html.qml @@ -0,0 +1,15 @@ +import Qt 4.7 +import org.webkit 1.0 + +// Inline HTML with loose formatting can be +// set on the html property. +WebView { + html:"\ + <body bgcolor=white>\ + <table border=1>\ + <tr><th><th>One<th>Two<th>Three\ + <tr><th>1<td>X<td>1<td>X\ + <tr><th>2<td>0<td>X<td>0\ + <tr><th>3<td>X<td>1<td>X\ + </table>" +} diff --git a/examples/declarative/modelviews/webview/newwindows.html b/examples/declarative/modelviews/webview/newwindows.html new file mode 100644 index 0000000..f169599 --- /dev/null +++ b/examples/declarative/modelviews/webview/newwindows.html @@ -0,0 +1,3 @@ +<h1>Multiple windows...</h1> + +<a target="_blank" href="newwindows.html">Popup!</a> diff --git a/examples/declarative/modelviews/webview/newwindows.qml b/examples/declarative/modelviews/webview/newwindows.qml new file mode 100644 index 0000000..2e4a72e --- /dev/null +++ b/examples/declarative/modelviews/webview/newwindows.qml @@ -0,0 +1,31 @@ +// Demonstrates opening new WebViews from HTML +// +// Note that to open windows from JavaScript, you will need to +// allow it on WebView with settings.javascriptCanOpenWindows: true + +import Qt 4.7 +import org.webkit 1.0 + +Grid { + columns: 3 + id: pages + height: 300; width: 600 + + Component { + id: webViewPage + Rectangle { + width: webView.width + height: webView.height + border.color: "gray" + + WebView { + id: webView + newWindowComponent: webViewPage + newWindowParent: pages + url: "newwindows.html" + } + } + } + + Loader { sourceComponent: webViewPage } +} diff --git a/examples/declarative/modelviews/webview/transparent.qml b/examples/declarative/modelviews/webview/transparent.qml new file mode 100644 index 0000000..e4efc31 --- /dev/null +++ b/examples/declarative/modelviews/webview/transparent.qml @@ -0,0 +1,15 @@ +import Qt 4.7 +import org.webkit 1.0 + +// The WebView background is transparent +// if the HTML does not specify a background +Rectangle { + color: "green" + width: web.width + height: web.height + + WebView { + id: web + html: "Hello <b>World!</b>" + } +} diff --git a/examples/declarative/modelviews/webview/webview.qmlproject b/examples/declarative/modelviews/webview/webview.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/modelviews/webview/webview.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} |
