diff options
Diffstat (limited to 'examples/declarative')
29 files changed, 473 insertions, 644 deletions
diff --git a/examples/declarative/colorbrowser/colorbrowser.qml b/examples/declarative/colorbrowser/colorbrowser.qml deleted file mode 100644 index d4c21e7..0000000 --- a/examples/declarative/colorbrowser/colorbrowser.qml +++ /dev/null @@ -1,101 +0,0 @@ -import Qt 4.6 -import 'qml' - -Rectangle { - id: mainWindow - width: 800; height: 480; color: '#454545' - - VisualDataModel { id: colorsVisualModel; delegate: colorsDelegate; model: ColorsModel } - - Component { - id: colorsDelegate - Package { - - Item { - Package.name: 'grid' - GridView { - id: gridView; model: visualModel.parts.grid; width: mainWindow.width; height: mainWindow.height - cellWidth: 160; cellHeight: 160; interactive: false - onCurrentIndexChanged: listView.positionViewAtIndex(currentIndex, ListView.Contain) - } - } - - Item { - Package.name: 'fullscreen' - ListView { - id: listView; model: visualModel.parts.list; orientation: Qt.Horizontal - width: mainWindow.width; height: mainWindow.height; interactive: false - onCurrentIndexChanged: gridView.positionViewAtIndex(currentIndex, GridView.Contain) - highlightRangeMode: ListView.StrictlyEnforceRange; snapMode: ListView.SnapOneItem - } - } - - Item { - Package.name: 'stack' - id: wrapper - width: 260; height: 240 - - VisualDataModel { id: visualModel; model: colors; delegate: ColorDelegate {} } - - PathView { - id: pathView; model: visualModel.parts.stack; anchors.centerIn: parent - pathItemCount: 3 - path: Path { - PathAttribute { name: 'z'; value: 9999.0 } - PathLine { x: 1; y: 1 } - PathAttribute { name: 'z'; value: 0.0 } - } - } - - Item { - anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom; anchors.bottomMargin: 20 - width: albumTitle.width + 20 ; height: albumTitle.height + 4 - Text { id: albumTitle; text: name; color: 'white'; font.bold: true; anchors.centerIn: parent } - } - - MouseArea { anchors.fill: parent; onClicked: wrapper.state = 'inGrid' } - - states: [ - State { - name: 'inGrid' - PropertyChanges { target: gridView; interactive: true } - PropertyChanges { target: shade; opacity: 1 } - }, - State { - name: 'fullscreen'; extend: 'inGrid' - PropertyChanges { target: gridView; interactive: false } - PropertyChanges { target: listView; interactive: true } - PropertyChanges { target: infobox; opacity: 1 } - } - ] - - transitions: [ - Transition { - from: ''; to: 'inGrid'; reversible: true - NumberAnimation { target: shade; properties: 'opacity'; duration: 300 } - }, - Transition { - from: 'inGrid'; to: 'fullscreen'; reversible: true - SequentialAnimation { - PauseAnimation { duration: 300 } - NumberAnimation { target: infobox; properties: 'opacity'; duration: 300 } - } - } - ] - } - } - } - - GridView { width: parent.width; height: parent.height; cellWidth: 260; cellHeight: 240; model: colorsVisualModel.parts.stack } - Rectangle { id: shade; color: '#454545'; width: parent.width; height: parent.height; opacity: 0 } - ListView { anchors.fill: parent; model: colorsVisualModel.parts.grid; interactive: false } - ListView { anchors.fill: parent; model: colorsVisualModel.parts.fullscreen; interactive: false } - Item { id: foreground; anchors.fill: parent } - - Column { - id: infobox; opacity: 0 - anchors { left: parent.left; leftMargin: 20; bottom: parent.bottom; bottomMargin: 20 } - Text { id: infoColorName; color: '#eeeeee'; style: Text.Outline; styleColor: '#222222'; font.pointSize: 18 } - Text { id: infoColorHex; color: '#eeeeee'; style: Text.Outline; styleColor: '#222222'; font.pointSize: 14 } - } -} diff --git a/examples/declarative/colorbrowser/dummydata/ColorsModel.qml b/examples/declarative/colorbrowser/dummydata/ColorsModel.qml deleted file mode 100644 index eefbcfe..0000000 --- a/examples/declarative/colorbrowser/dummydata/ColorsModel.qml +++ /dev/null @@ -1,96 +0,0 @@ -import Qt 4.6 - -ListModel { - id: colorsModel - - ListElement { - name: "Reds" - colors: [ - ListElement { name: "Fire Brick"; hex: "#B22222" }, - ListElement { name: "Fire Brick 1"; hex: "#FF3030" }, - ListElement { name: "Fire Brick 2"; hex: "#EE2C2C" }, - ListElement { name: "Fire Brick 3"; hex: "#CD2626" }, - ListElement { name: "Fire Brick 4"; hex: "#8B1A1A" }, - ListElement { name: "Red"; hex: "#FF0000" }, - ListElement { name: "Red 2"; hex: "#EE0000" }, - ListElement { name: "Red 3"; hex: "#CD0000" }, - ListElement { name: "Red 4"; hex: "#8B0000" }, - ListElement { name: "Tomato"; hex: "#FF6347" }, - ListElement { name: "Tomato 2"; hex: "#EE5C42" }, - ListElement { name: "Tomato 3"; hex: "#CD4F39" }, - ListElement { name: "Tomato 4"; hex: "#8B3626" }, - ListElement { name: "Orange Red"; hex: "#FF4500" }, - ListElement { name: "Orange Red 2"; hex: "#EE4000" }, - ListElement { name: "Orange Red 3"; hex: "#CD3700" }, - ListElement { name: "Orange Red 4"; hex: "#8B2500" }, - ListElement { name: "Indian Red 2"; hex: "#EE6363" }, - ListElement { name: "Indian Red 3"; hex: "#CD5555" }, - ListElement { name: "Indian Red 4"; hex: "#8B3A3A" }, - ListElement { name: "Brown"; hex: "#A52A2A" }, - ListElement { name: "Brown 1"; hex: "#FF4040" }, - ListElement { name: "Brown 2"; hex: "#EE3B3B" }, - ListElement { name: "Brown 3"; hex: "#CD3333" }, - ListElement { name: "Brown 4"; hex: "#8B2323" } - ] - } - ListElement { - name: "Greens" - colors: [ - ListElement { name: "Green"; hex: "#008000" }, - ListElement { name: "Green 2"; hex: "#00EE00" }, - ListElement { name: "Green 3"; hex: "#00CD00" }, - ListElement { name: "Green 4"; hex: "#008B00" }, - ListElement { name: "Dark Green"; hex: "#006400" }, - ListElement { name: "Sap Green"; hex: "#308014" }, - ListElement { name: "Medium Spring Green"; hex: "#00FA9A" }, - ListElement { name: "Spring Green"; hex: "#00FF7F" }, - ListElement { name: "Spring Green 1"; hex: "#00EE76" }, - ListElement { name: "Spring Green 2"; hex: "#00CD66" }, - ListElement { name: "Spring Green 3"; hex: "#008B45" }, - ListElement { name: "Medium Sea Green"; hex: "#3CB371" }, - ListElement { name: "Sea Green 1"; hex: "#54FF9F" }, - ListElement { name: "Sea Green 2"; hex: "#4EEE94" }, - ListElement { name: "Sea Green 3"; hex: "#43CD80" }, - ListElement { name: "Sea Green 4"; hex: "#2E8B57" }, - ListElement { name: "Emerald Green"; hex: "#00C957" }, - ListElement { name: "Mint"; hex: "#BDFCC9" }, - ListElement { name: "Cobalt Green"; hex: "#3D9140" }, - ListElement { name: "Dark Sea Green"; hex: "#8FBC8F" }, - ListElement { name: "Dark Sea Green 1"; hex: "#C1FFC1" }, - ListElement { name: "Dark Sea Green 2"; hex: "#B4EEB4" }, - ListElement { name: "Dark Sea Green 3"; hex: "#9BCD9B" }, - ListElement { name: "Dark Sea Green 4"; hex: "#698B69" }, - ListElement { name: "Lime Green"; hex: "#00FF00" } - ] - } - ListElement { - name: "Blues" - colors: [ - ListElement { name: "Dark Slate Blue"; hex: "#483D8B" }, - ListElement { name: "Light Slate Blue"; hex: "#8470FF" }, - ListElement { name: "Medium Slate Blue"; hex: "#7B68EE" }, - ListElement { name: "Slate Blue"; hex: "#6A5ACD" }, - ListElement { name: "Blue"; hex: "#0000FF" }, - ListElement { name: "Midnight Blue"; hex: "#191970" }, - ListElement { name: "Cobalt"; hex: "#3D59AB" }, - ListElement { name: "Royal Blue"; hex: "#4169E1" }, - ListElement { name: "Corn Flower Blue"; hex: "#6495ED" }, - ListElement { name: "Light Steel Blue"; hex: "#B0C4DE" }, - ListElement { name: "Light Steel Blue 1"; hex: "#CAE1FF" }, - ListElement { name: "Light Steel Blue 2"; hex: "#BCD2EE" }, - ListElement { name: "Light Steel Blue 3"; hex: "#A2B5CD" }, - ListElement { name: "Dodger Blue"; hex: "#1E90FF" }, - ListElement { name: "Dodger Blue 2"; hex: "#1C86EE" }, - ListElement { name: "Dodger Blue 3"; hex: "#1874CD" }, - ListElement { name: "Dodger Blue 4"; hex: "#104E8B" }, - ListElement { name: "Steel Blue"; hex: "#4682B4" }, - ListElement { name: "Light Sky Blue"; hex: "#87CEFA" }, - ListElement { name: "Sky Blue"; hex: "#87CEEB" }, - ListElement { name: "Peacock"; hex: "#33A1C9" }, - ListElement { name: "Light Blue"; hex: "#ADD8E6" }, - ListElement { name: "Powder Blue"; hex: "#B0E0E6" }, - ListElement { name: "Cadet Blue"; hex: "#5F9EA0" }, - ListElement { name: "Cyan"; hex: "#00FFFF" } - ] - } -} diff --git a/examples/declarative/colorbrowser/qml/ColorDelegate.qml b/examples/declarative/colorbrowser/qml/ColorDelegate.qml deleted file mode 100644 index c123d12..0000000 --- a/examples/declarative/colorbrowser/qml/ColorDelegate.qml +++ /dev/null @@ -1,114 +0,0 @@ -import Qt 4.6 - -Package { - Item { id: stack; Package.name: 'stack'; width: 110; height: 110; z: stack.PathView.z } - Item { id: list; Package.name: 'list'; width: mainWindow.width + 4; height: 110 } - Item { id: grid; Package.name: 'grid'; width: 110; height: 110 } - - Item { - id: delegate - - property double randomAngle: Math.random() * (2 * 8 + 1) - 8 - property bool open: false - - width: 110; height: 110; z: stack.PathView.z - - Image { x: -6; y: -5; source: 'box-shadow.png'; smooth: true; } - Rectangle { color: hex; anchors.fill: parent; smooth: true } - Image { id: box; source: 'box.png'; smooth: true; anchors.fill: parent } - - Binding { - target: infoColorName; property: 'text' - value: name; when: delegate.open && list.ListView.isCurrentItem - } - - Binding { - target: infoColorHex; property: 'text' - value: hex; when: delegate.open && list.ListView.isCurrentItem - } - - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.RightButton | Qt.LeftButton - onClicked: { - if (wrapper.state == 'inGrid' && mouse.button == Qt.RightButton) { - wrapper.state = '' - } else if (wrapper.state == 'inGrid') { - grid.GridView.view.currentIndex = index; - wrapper.state = 'fullscreen' - } else { - grid.GridView.view.currentIndex = index; - wrapper.state = 'inGrid' - } - } - } - - states: [ - State { - name: 'stacked'; when: wrapper.state == '' - ParentChange { target: delegate; parent: stack; x: 0; y: 0; rotation: delegate.randomAngle } - PropertyChanges { target: delegate; visible: stack.PathView.onPath ? 1.0 : 0.0 } - }, - State { - name: 'inGrid'; when: wrapper.state == 'inGrid' - ParentChange { target: delegate; parent: grid; x: 24; y: 24 } - PropertyChanges { target: delegate; open: true } - }, - State { - name: 'fullscreen'; when: wrapper.state == 'fullscreen' - ParentChange { target: delegate; parent: list; x: 0; y: 0; width: mainWindow.width; height: mainWindow.height } - PropertyChanges { target: box; opacity: 0 } - PropertyChanges { target: delegate; open: true } - } - ] - - transitions: [ - Transition { - from: 'stacked'; to: 'inGrid' - SequentialAnimation { - PauseAnimation { duration: 20 * index } - ParentAnimation { - target: delegate; via: foreground - NumberAnimation { targets: delegate; properties: 'x,y,width,height,rotation'; duration: 600; easing.type: 'OutBack' } - } - } - }, - Transition { - from: 'inGrid'; to: 'stacked' - ParentAnimation { - target: delegate; via: foreground - NumberAnimation { properties: 'x,y,width,height,rotation'; duration: 300; easing.type: 'InOutQuad' } - } - }, - Transition { - from: 'inGrid'; to: 'fullscreen' - SequentialAnimation { - PauseAnimation { duration: grid.GridView.isCurrentItem ? 0 : 300 } - ParentAnimation { - target: delegate; via: foreground - NumberAnimation { - properties: 'x,y,width,height,opacity' - duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad' - } - } - } - }, - Transition { - from: 'fullscreen'; to: 'inGrid' - SequentialAnimation { - PauseAnimation { duration: grid.GridView.isCurrentItem ? 3 : 0 } - ParallelAnimation { - ParentAnimation { - target: delegate; via: foreground - NumberAnimation { - properties: 'x,y,width,height' - duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad' - } - } - NumberAnimation { properties: 'opacity'; duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad' } - } - } - } - ] - } -} diff --git a/examples/declarative/colorbrowser/qml/box-shadow.png b/examples/declarative/colorbrowser/qml/box-shadow.png Binary files differdeleted file mode 100644 index 3281a37..0000000 --- a/examples/declarative/colorbrowser/qml/box-shadow.png +++ /dev/null diff --git a/examples/declarative/colorbrowser/qml/box.png b/examples/declarative/colorbrowser/qml/box.png Binary files differdeleted file mode 100644 index 86538aa..0000000 --- a/examples/declarative/colorbrowser/qml/box.png +++ /dev/null diff --git a/examples/declarative/declarative.pro b/examples/declarative/declarative.pro index b8c0200..0f58738 100644 --- a/examples/declarative/declarative.pro +++ b/examples/declarative/declarative.pro @@ -5,7 +5,8 @@ SUBDIRS = \ extending \ imageprovider \ objectlistmodel \ - plugins + plugins \ + widgets # These examples contain no C++ and can simply be copied sources.files = \ @@ -14,13 +15,12 @@ sources.files = \ behaviours \ border-image \ clocks \ - colorbrowser \ connections \ dial \ dynamic \ effects \ fillmode \ - focusscope \ + focus \ fonts \ gridview \ layouts \ diff --git a/examples/declarative/focus/Core/ContextMenu.qml b/examples/declarative/focus/Core/ContextMenu.qml new file mode 100644 index 0000000..bd6d8a2 --- /dev/null +++ b/examples/declarative/focus/Core/ContextMenu.qml @@ -0,0 +1,15 @@ +import Qt 4.6 + +FocusScope { + id: container + property bool open: false + + Item { + anchors.fill: parent + + Rectangle { + anchors.fill: parent; color: "#D1DBBD"; focus: true + Keys.onRightPressed: mainView.focus = true + } + } +} diff --git a/examples/declarative/focus/Core/GridMenu.qml b/examples/declarative/focus/Core/GridMenu.qml new file mode 100644 index 0000000..03d837a --- /dev/null +++ b/examples/declarative/focus/Core/GridMenu.qml @@ -0,0 +1,54 @@ +import Qt 4.6 + +FocusScope { + property alias interactive: gridView.interactive + + onWantsFocusChanged: if (wantsFocus) mainView.state = "" + + Rectangle { + clip: true; anchors.fill: parent + gradient: Gradient { + GradientStop { position: 0.0; color: "#193441" } + GradientStop { position: 1.0; color: Qt.darker("#193441") } + } + + GridView { + id: gridView; cellWidth: 152; cellHeight: 152; focus: true + x: 20; width: parent.width - 40; height: parent.height + model: 12 + KeyNavigation.down: listViews + KeyNavigation.left: contextMenu + + delegate: Item { + id: container; width: GridView.view.cellWidth; height: GridView.view.cellHeight + + Rectangle { + id: content + color: "transparent"; smooth: true + anchors.centerIn: parent; width: container.width - 40; height: container.height - 40; radius: 10 + Rectangle { color: "#91AA9D"; x: 3; y: 3; width: parent.width - 6; height: parent.height - 6; radius: 8 } + Image { source: "images/qt-logo.png"; anchors.centerIn: parent; smooth: true } + } + + MouseArea { + id: mouseArea; anchors.fill: parent; hoverEnabled: true + onClicked: { + GridView.view.currentIndex = index + container.focus = true + gridMenu.focus = true + mainView.focus = true + } + } + + states: State { + name: "active"; when: container.focus == true + PropertyChanges { target: content; color: "#FCFFF5"; scale: 1.1 } + } + + transitions: Transition { + NumberAnimation { properties: "scale"; duration: 100 } + } + } + } + } +} diff --git a/examples/declarative/focus/Core/ListViewDelegate.qml b/examples/declarative/focus/Core/ListViewDelegate.qml new file mode 100644 index 0000000..b7e067a --- /dev/null +++ b/examples/declarative/focus/Core/ListViewDelegate.qml @@ -0,0 +1,39 @@ +import Qt 4.6 + +Component { + Item { + id: container + x: 5; width: ListView.view.width - 10; height: 60 + + Rectangle { + id: content + color: "transparent"; smooth: true + anchors.centerIn: parent; width: container.width - 40; height: container.height - 10; radius: 10 + Rectangle { color: "#91AA9D"; x: 3; y: 3; width: parent.width - 6; height: parent.height - 6; radius: 8 } + Text { + text: "List element " + (index + 1); color: "#193441"; font.bold: false; anchors.centerIn: parent + font.pixelSize: 14 + } + } + + MouseArea { + id: mouseArea; anchors.fill: parent; hoverEnabled: true + onClicked: { + ListView.view.currentIndex = index + container.focus = true + ListView.view.focus = true + listViews.focus = true + mainView.focus = true + } + } + + states: State { + name: "active"; when: container.focus == true + PropertyChanges { target: content; color: "#FCFFF5"; scale: 1.1 } + } + + transitions: Transition { + NumberAnimation { properties: "scale"; duration: 100 } + } + } +} diff --git a/examples/declarative/focus/Core/ListViews.qml b/examples/declarative/focus/Core/ListViews.qml new file mode 100644 index 0000000..3cc4836 --- /dev/null +++ b/examples/declarative/focus/Core/ListViews.qml @@ -0,0 +1,47 @@ +import Qt 4.6 + +FocusScope { + clip: true + + onWantsFocusChanged: if (wantsFocus) mainView.state = "showListViews" + + ListView { + id: list1 + delegate: ListViewDelegate {} + y: wantsFocus ? 10 : 40; focus: true; width: parent.width / 3; height: parent.height - 20 + model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: contextMenu; KeyNavigation.right: list2 + Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } } + } + + ListView { + id: list2 + delegate: ListViewDelegate {} + y: wantsFocus ? 10 : 40; x: parent.width / 3; width: parent.width / 3; height: parent.height - 20 + model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: list1; KeyNavigation.right: list3 + Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } } + } + + ListView { + id: list3 + delegate: ListViewDelegate {} + y: wantsFocus ? 10 : 40; x: 2 * parent.width / 3; width: parent.width / 3; height: parent.height - 20 + model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: list2 + Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } } + } + + Rectangle { width: parent.width; height: 1; color: "#D1DBBD" } + Rectangle { + y: 1; width: parent.width; height: 10 + gradient: Gradient { + GradientStop { position: 0.0; color: "#3E606F" } + GradientStop { position: 1.0; color: "transparent" } + } + } + Rectangle { + y: parent.height - 10; width: parent.width; height: 10 + gradient: Gradient { + GradientStop { position: 1.0; color: "#3E606F" } + GradientStop { position: 0.0; color: "transparent" } + } + } +} diff --git a/examples/declarative/focus/Core/images/arrow.png b/examples/declarative/focus/Core/images/arrow.png Binary files differnew file mode 100644 index 0000000..14978c2 --- /dev/null +++ b/examples/declarative/focus/Core/images/arrow.png diff --git a/examples/declarative/focus/Core/images/qt-logo.png b/examples/declarative/focus/Core/images/qt-logo.png Binary files differnew file mode 100644 index 0000000..14ddf2a --- /dev/null +++ b/examples/declarative/focus/Core/images/qt-logo.png diff --git a/examples/declarative/focus/Core/qmldir b/examples/declarative/focus/Core/qmldir new file mode 100644 index 0000000..0460d9c --- /dev/null +++ b/examples/declarative/focus/Core/qmldir @@ -0,0 +1,4 @@ +ContextMenu ContextMenu.qml +GridMenu GridMenu.qml +ListViews Listviews.qml +ListViewDelegate ListViewDelegate.qml diff --git a/examples/declarative/focus/focus.qml b/examples/declarative/focus/focus.qml new file mode 100644 index 0000000..a8dc3c8 --- /dev/null +++ b/examples/declarative/focus/focus.qml @@ -0,0 +1,50 @@ +import Qt 4.6 +import "Core" 1.0 + +Rectangle { + id: window; width: 800; height: 480; color: "#3E606F" + + FocusScope { + id: mainView; focus: true; width: parent.width; height: parent.height + + GridMenu { + id: gridMenu; focus: true + width: parent.width; height: 320; interactive: parent.wantsFocus + } + + ListViews { id: listViews; y: 320; width: parent.width; height: 320 } + + Rectangle { id: shade; color: "black"; opacity: 0; anchors.fill: parent } + + states: State { + name: "showListViews" + PropertyChanges { target: gridMenu; y: -160 } + PropertyChanges { target: listViews; y: 160 } + } + + transitions: Transition { + NumberAnimation { properties: "y"; duration: 600; easing.type: "OutQuint" } + } + } + + Image { + source: "Core/images/arrow.png"; rotation: 90; anchors.verticalCenter: parent.verticalCenter + MouseArea { + anchors { fill: parent; leftMargin: -10; topMargin: -10; rightMargin: -10; bottomMargin: -10 } + onClicked: window.state = "contextMenuOpen" + } + } + + ContextMenu { id: contextMenu; x: -265; width: 260; height: parent.height } + + states: State { + name: "contextMenuOpen"; when: !mainView.wantsFocus + PropertyChanges { target: contextMenu; x: 0; open: true } + PropertyChanges { target: mainView; x: 130 } + PropertyChanges { target: shade; opacity: 0.25 } + } + + transitions: Transition { + NumberAnimation { properties: "x,opacity"; duration: 600; easing.type: "OutQuint" } + } +} diff --git a/examples/declarative/focusscope/test.qml b/examples/declarative/focusscope/test.qml deleted file mode 100644 index e4332e7..0000000 --- a/examples/declarative/focusscope/test.qml +++ /dev/null @@ -1,76 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - Keys.onDigit9Pressed: console.log("Error - Root") - - FocusScope { - id: myScope - focus: true - - Keys.onDigit9Pressed: console.log("Error - FocusScope") - - Rectangle { - height: 120 - width: 420 - - color: "transparent" - border.width: 5 - border.color: myScope.wantsFocus?"blue":"black" - - Rectangle { - id: item1 - x: 10; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - Keys.onDigit9Pressed: console.log("Top Left"); - KeyNavigation.right: item2 - focus: true - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - - Rectangle { - id: item2 - x: 310; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - KeyNavigation.left: item1 - Keys.onDigit9Pressed: console.log("Top Right"); - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - } - KeyNavigation.down: item3 - } - - Text { x:100; y:170; text: "Blue border indicates scoped focus\nBlack border indicates NOT scoped focus\nRed box indicates active focus\nUse arrow keys to navigate\nPress \"9\" to print currently focused item" } - - Rectangle { - id: item3 - x: 10; y: 300 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - - Keys.onDigit9Pressed: console.log("Bottom Left"); - KeyNavigation.up: myScope - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - -} diff --git a/examples/declarative/focusscope/test2.qml b/examples/declarative/focusscope/test2.qml deleted file mode 100644 index 5b6971a..0000000 --- a/examples/declarative/focusscope/test2.qml +++ /dev/null @@ -1,40 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - Text { text: "All five rectangles should be red" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - - FocusScope { - y: 100 - focus: true - Rectangle { width: 50; height: 50; color: parent.wantsFocus?"red":"blue" } - } - } - } - } - } - -} diff --git a/examples/declarative/focusscope/test3.qml b/examples/declarative/focusscope/test3.qml deleted file mode 100644 index 9344d07..0000000 --- a/examples/declarative/focusscope/test3.qml +++ /dev/null @@ -1,52 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - ListModel { - id: model - ListElement { name: "1" } - ListElement { name: "2" } - ListElement { name: "3" } - ListElement { name: "4" } - ListElement { name: "5" } - ListElement { name: "6" } - ListElement { name: "6" } - ListElement { name: "8" } - ListElement { name: "9" } - } - - Component { - id: verticalDelegate - FocusScope { - id: root - width: 50; height: 50; - Keys.onDigit9Pressed: console.log("Error - " + name) - Rectangle { - focus: true - Keys.onDigit9Pressed: console.log(name) - width: 50; height: 50; - color: root.ListView.isCurrentItem?"red":"green" - Text { text: name; anchors.centerIn: parent } - } - } - } - - ListView { - width: 800; height: 50; orientation: "Horizontal" - focus: true - model: model - delegate: verticalDelegate - preferredHighlightBegin: 100 - preferredHighlightEnd: 100 - highlightRangeMode: "StrictlyEnforceRange" - } - - - Text { - y: 100; x: 50 - text: "Currently selected element should be red\nPressing \"9\" should print the number of the currently selected item\nBe sure to scroll all the way to the right, pause, and then all the way to the left." - } -} diff --git a/examples/declarative/focusscope/test4.qml b/examples/declarative/focusscope/test4.qml deleted file mode 100644 index cc96df9..0000000 --- a/examples/declarative/focusscope/test4.qml +++ /dev/null @@ -1,75 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - Keys.onDigit9Pressed: console.log("Error - Root") - - FocusScope { - id: myScope - - Keys.onDigit9Pressed: console.log("Error - FocusScope") - - Rectangle { - height: 120 - width: 420 - - color: "transparent" - border.width: 5 - border.color: myScope.wantsFocus?"blue":"black" - - Rectangle { - id: item1 - x: 10; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - Keys.onDigit9Pressed: console.log("Error - Top Left"); - KeyNavigation.right: item2 - focus: true - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - - Rectangle { - id: item2 - x: 310; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - KeyNavigation.left: item1 - Keys.onDigit9Pressed: console.log("Error - Top Right"); - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - } - KeyNavigation.down: item3 - } - - Text { x:100; y:170; text: "There should be no blue borders, or red squares.\nPressing \"9\" should do nothing.\nArrow keys should have no effect." } - - Rectangle { - id: item3 - x: 10; y: 300 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - - Keys.onDigit9Pressed: console.log("Error - Bottom Left"); - KeyNavigation.up: myScope - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - -} diff --git a/examples/declarative/focusscope/test5.qml b/examples/declarative/focusscope/test5.qml deleted file mode 100644 index da98350..0000000 --- a/examples/declarative/focusscope/test5.qml +++ /dev/null @@ -1,83 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "white" - width: 800 - height: 600 - - Keys.onReturnPressed: console.log("Error - Root") - - FocusScope { - id: myScope - focus: true - - Keys.onReturnPressed: console.log("Error - FocusScope") - - Rectangle { - height: 120 - width: 420 - - color: "transparent" - border.width: 5 - border.color: myScope.wantsFocus?"blue":"black" - - Rectangle { - x: 10; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: item1.wantsFocus?"blue":"black" - } - - TextEdit { - id: item1 - x: 20; y: 20 - width: 90; height: 90 - color: "white" - font.pixelSize: 20 - Keys.onReturnPressed: console.log("Top Left"); - KeyNavigation.right: item2 - focus: true - wrap: true - text: "Box 1" - } - - Rectangle { - id: item2 - x: 310; y: 10 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: wantsFocus?"blue":"black" - KeyNavigation.left: item1 - Keys.onReturnPressed: console.log("Top Right"); - - Rectangle { - width: 50; height: 50; anchors.centerIn: parent - color: parent.focus?"red":"transparent" - } - } - } - KeyNavigation.down: item3 - } - - Text { x:100; y:170; text: "Blue border indicates scoped focus\nBlack border indicates NOT scoped focus\nRed box or flashing cursor indicates active focus\nUse arrow keys to navigate\nPress Ctrl-Return to print currently focused item" } - - Rectangle { - x: 10; y: 300 - width: 100; height: 100; color: "green" - border.width: 5 - border.color: item3.wantsFocus?"blue":"black" - } - - TextEdit { - id: item3 - x: 20; y: 310 - width: 90; height: 90 - color: "white" - font.pixelSize: 20 - text: "Box 3" - - Keys.onReturnPressed: console.log("Bottom Left"); - KeyNavigation.up: myScope - wrap: true - } -} diff --git a/examples/declarative/imageprovider/imageprovider-example.qml b/examples/declarative/imageprovider/imageprovider-example.qml index a1f2794..a895821 100644 --- a/examples/declarative/imageprovider/imageprovider-example.qml +++ b/examples/declarative/imageprovider/imageprovider-example.qml @@ -1,5 +1,5 @@ import Qt 4.6 -import ImageProviderCore 1.0 +import "ImageProviderCore" //![0] ListView { width: 100 @@ -16,6 +16,7 @@ ListView { } Image { source: modelData + sourceSize: "50x25" } } } diff --git a/examples/declarative/imageprovider/imageprovider.cpp b/examples/declarative/imageprovider/imageprovider.cpp index 011a63b..4c4aa94 100644 --- a/examples/declarative/imageprovider/imageprovider.cpp +++ b/examples/declarative/imageprovider/imageprovider.cpp @@ -61,11 +61,21 @@ class ColorImageProvider : public QDeclarativeImageProvider { public: // This is run in a low priority thread. - QImage request(const QString &id) { - QImage image(100, 50, QImage::Format_RGB32); + QImage request(const QString &id, QSize *size, const QSize &req_size) + { + if (size) *size = QSize(100,50); + QImage image( + req_size.width() > 0 ? req_size.width() : 100, + req_size.height() > 0 ? req_size.height() : 50, + QImage::Format_RGB32); image.fill(QColor(id).rgba()); QPainter p(&image); + QFont f = p.font(); + f.setPixelSize(30); + p.setFont(f); p.setPen(Qt::black); + if (req_size.isValid()) + p.scale(req_size.width()/100.0, req_size.height()/50.0); p.drawText(QRectF(0,0,100,50),Qt::AlignCenter,id); return image; } diff --git a/examples/declarative/images/content/lemonade.jpg b/examples/declarative/images/content/lemonade.jpg Binary files differnew file mode 100644 index 0000000..db445c9 --- /dev/null +++ b/examples/declarative/images/content/lemonade.jpg diff --git a/examples/declarative/images/images.qml b/examples/declarative/images/images.qml new file mode 100644 index 0000000..35ce1ab --- /dev/null +++ b/examples/declarative/images/images.qml @@ -0,0 +1,69 @@ +import Qt 4.6 + +Rectangle { + color: "white" + width: grid.width + 50 + height: grid.height + 50 + + Grid { + x: 25; y: 25 + id: grid + columns: 3 + + Image { + source: "content/lemonade.jpg" + } + + Image { + sourceSize.width: 50 + sourceSize.height: 50 + source: "content/lemonade.jpg" + } + + Image { + sourceSize.width: 50 + sourceSize.height: 50 + smooth: true + source: "content/lemonade.jpg" + } + + Image { + scale: 1/3 + source: "content/lemonade.jpg" + } + + Image { + scale: 1/3 + sourceSize.width: 50 + sourceSize.height: 50 + source: "content/lemonade.jpg" + } + + Image { + scale: 1/3 + sourceSize.width: 50 + sourceSize.height: 50 + smooth: true + source: "content/lemonade.jpg" + } + + Image { + width: 50; height: 50; transform: Translate { x: 50 } + source: "content/lemonade.jpg" + } + + Image { + width: 50; height: 50; transform: Translate { x: 50 } + sourceSize.width: 50 + sourceSize.height: 50 + source: "content/lemonade.jpg" + } + + Image { + width: 50; height: 50; transform: Translate { x: 50 } + sourceSize: "50x50" // syntactic sugar + smooth: true + source: "content/lemonade.jpg" + } + } +} diff --git a/examples/declarative/progressbar/content/ProgressBar.qml b/examples/declarative/progressbar/content/ProgressBar.qml index 65c80b2..aafb12e 100644 --- a/examples/declarative/progressbar/content/ProgressBar.qml +++ b/examples/declarative/progressbar/content/ProgressBar.qml @@ -21,7 +21,8 @@ Item { id: highlight; radius: 1 anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom anchors.leftMargin: 3; anchors.topMargin: 3; anchors.bottomMargin: 3 - EaseFollow on width { source: highlight.widthDest; velocity: 1200 } + width: highlight.widthDest + Behavior on width { SmoothedAnimation { velocity: 1200 } } gradient: Gradient { GradientStop { id: g1; position: 0.0 } GradientStop { id: g2; position: 1.0 } diff --git a/examples/declarative/widgets/MyWidgets/qmldir b/examples/declarative/widgets/MyWidgets/qmldir new file mode 100644 index 0000000..dc1d10e --- /dev/null +++ b/examples/declarative/widgets/MyWidgets/qmldir @@ -0,0 +1 @@ +plugin mywidgetsplugin diff --git a/examples/declarative/widgets/README b/examples/declarative/widgets/README new file mode 100644 index 0000000..f85a1e8 --- /dev/null +++ b/examples/declarative/widgets/README @@ -0,0 +1,4 @@ +To run: + + make install + qml mywidgets.qml diff --git a/examples/declarative/widgets/mywidgets.cpp b/examples/declarative/widgets/mywidgets.cpp new file mode 100644 index 0000000..e17240d --- /dev/null +++ b/examples/declarative/widgets/mywidgets.cpp @@ -0,0 +1,99 @@ +/**************************************************************************** +** +** 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 examples 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 <QtDeclarative/QDeclarativeExtensionPlugin> +#include <QtDeclarative/qdeclarative.h> +#include <QtGui/QGraphicsProxyWidget> +#include <QtGui/QPushButton> +#include <QDebug> + +class MyPushButton : public QGraphicsProxyWidget +{ + Q_OBJECT + Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged) + +public: + MyPushButton(QGraphicsItem* parent = 0) + : QGraphicsProxyWidget(parent) + { + widget = new QPushButton("MyPushButton"); + widget->setAttribute(Qt::WA_NoSystemBackground); + setWidget(widget); + + QObject::connect(widget, SIGNAL(clicked(bool)), this, SIGNAL(clicked(bool))); + } + + QString text() const + { + return widget->text(); + } + + void setText(const QString& text) + { + if (text != widget->text()) { + widget->setText(text); + emit textChanged(); + } + } + +Q_SIGNALS: + void clicked(bool); + void textChanged(); + +private: + QPushButton *widget; +}; + +class MyWidgetsPlugin : public QDeclarativeExtensionPlugin +{ + Q_OBJECT +public: + void registerTypes(const char *uri) + { + qmlRegisterType<MyPushButton>(uri, 1, 0, "MyPushButton"); + } +}; + +#include "mywidgets.moc" + +QML_DECLARE_TYPE(MyPushButton) + +Q_EXPORT_PLUGIN2(mywidgetsplugin, MyWidgetsPlugin); diff --git a/examples/declarative/widgets/mywidgets.pro b/examples/declarative/widgets/mywidgets.pro new file mode 100644 index 0000000..258edb1 --- /dev/null +++ b/examples/declarative/widgets/mywidgets.pro @@ -0,0 +1,19 @@ +TEMPLATE = lib +DESTDIR = MyWidgets +TARGET = mywidgetsplugin +CONFIG += qt plugin +QT += declarative +VERSION = 1.0.0 + +SOURCES += mywidgets.cpp + +sources.files += mywidgets.pro mywidgets.cpp mywidgets.qml + +sources.path += $$[QT_INSTALL_EXAMPLES]/declarative/plugins + +target.path += $$[QT_INSTALL_EXAMPLES]/declarative/plugins + +INSTALLS += sources target + +symbian: include($$QT_SOURCE_TREE/examples/symbianpkgrules.pri) + diff --git a/examples/declarative/widgets/mywidgets.qml b/examples/declarative/widgets/mywidgets.qml new file mode 100644 index 0000000..b1efed4 --- /dev/null +++ b/examples/declarative/widgets/mywidgets.qml @@ -0,0 +1,53 @@ +import Qt 4.6 +import "MyWidgets" 1.0 + +Rectangle { + id: window + width: 640; height: 480; color: palette.window + + property int margin: 30 + + SystemPalette { id: palette } + + MyPushButton { + id: button1; x: margin; y: margin; text: "Right"; onClicked: window.state = "right" + transformOriginPoint: Qt.point(width / 2, height / 2) + } + + MyPushButton { + id: button2; x: margin; y: margin + 30; text: "Bottom"; onClicked: window.state = "bottom" + transformOriginPoint: Qt.point(width / 2, height / 2) + } + + MyPushButton { + id: button3; x: margin; y: margin + 60; text: "Quit"; onClicked: Qt.quit() + transformOriginPoint: Qt.point(width / 2, height / 2) + } + + states: [ + State { + name: "right" + PropertyChanges { target: button1; x: window.width - width - margin; text: "Left"; onClicked: window.state = "" } + PropertyChanges { target: button2; x: window.width - width - margin } + PropertyChanges { target: button3; x: window.width - width - margin } + PropertyChanges { target: window; color: Qt.darker(palette.window) } + }, + State { + name: "bottom" + PropertyChanges { target: button1; y: window.height - height - margin; rotation: 180 } + PropertyChanges { + target: button2; x: button1.x + button1.width + 10; y: window.height - height - margin; rotation: 180 + text: "Top"; onClicked: window.state = "" + } + PropertyChanges { target: button3; x: button2.x + button2.width + 10; y: window.height - height - margin; rotation: 180 } + PropertyChanges { target: window; color: Qt.lighter(palette.window) } + } + ] + + transitions: Transition { + ParallelAnimation { + NumberAnimation { properties: "x,y,rotation"; duration: 600; easing.type: "OutQuad" } + ColorAnimation { target: window; duration: 600 } + } + } +} |
