diff options
Diffstat (limited to 'demos/declarative/webbrowser')
25 files changed, 658 insertions, 0 deletions
diff --git a/demos/declarative/webbrowser/content/FlickableWebView.qml b/demos/declarative/webbrowser/content/FlickableWebView.qml new file mode 100644 index 0000000..7c46d4c --- /dev/null +++ b/demos/declarative/webbrowser/content/FlickableWebView.qml @@ -0,0 +1,162 @@ +import Qt 4.6 + +Flickable { + property alias title: webView.title + property alias progress: webView.progress + property alias url: webView.url + property alias back: webView.back + property alias reload: webView.reload + property alias forward: webView.forward + + id: flickable + width: parent.width + viewportWidth: Math.max(parent.width,webView.width*webView.scale) + viewportHeight: Math.max(parent.height,webView.height*webView.scale) + anchors.top: headerSpace.bottom + anchors.bottom: footer.top + anchors.left: parent.left + anchors.right: parent.right + pressDelay: 200 + + WebView { + id: webView + pixelCacheSize: 4000000 + + Script { + function fixUrl(url) + { + if (url == "") return url + if (url[0] == "/") return "file://"+url + if (url.indexOf(":")<0) { + if (url.indexOf(".")<0 || url.indexOf(" ")>=0) { + // Fall back to a search engine; hard-code Wikipedia + return "http://en.wikipedia.org/w/index.php?search="+url + } else { + return "http://"+url + } + } + return url + } + } + + url: fixUrl(webBrowser.urlString) + smooth: false // We don't want smooth scaling, since we only scale during (fast) transitions + smoothCache: true // We do want smooth rendering + fillColor: "white" + focus: true + zoomFactor: 4 + + onAlert: console.log(message) + + function doZoom(zoom,centerX,centerY) + { + if (centerX) { + var sc = zoom/contentsScale; + scaleAnim.to = sc; + flickVX.from = flickable.viewportX + flickVX.to = Math.max(0,Math.min(centerX-flickable.width/2,webView.width*sc-flickable.width)) + finalX.value = flickVX.to + flickVY.from = flickable.viewportY + flickVY.to = Math.max(0,Math.min(centerY-flickable.height/2,webView.height*sc-flickable.height)) + finalY.value = flickVY.to + finalZoom.value = zoom + quickZoom.start() + } + } + + Keys.onLeftPressed: webView.contentsScale -= 0.1 + Keys.onRightPressed: webView.contentsScale += 0.1 + + preferredWidth: flickable.width*zoomFactor + preferredHeight: flickable.height*zoomFactor + contentsScale: 1/zoomFactor + onContentsSizeChanged: { + // zoom out + contentsScale = Math.min(0.25,flickable.width / contentsSize.width) + } + onUrlChanged: { + // got to topleft + flickable.viewportX = 0 + flickable.viewportY = 0 + if (url != null) { header.editUrl = url.toString(); } + } + onDoubleClick: { + if (!heuristicZoom(clickX,clickY,2.5)) { + var zf = flickable.width / contentsSize.width + if (zf >= contentsScale) + zf = 2.0/zoomFactor // zoom in (else zooming out) + doZoom(zf,clickX*zf,clickY*zf) + } + } + + SequentialAnimation { + id: quickZoom + + PropertyAction { + target: webView + property: "renderingEnabled" + value: false + } + ParallelAnimation { + NumberAnimation { + id: scaleAnim + target: webView + property: "scale" + from: 1 + to: 0 // set before calling + easing: "easeLinear" + duration: 200 + } + NumberAnimation { + id: flickVX + target: flickable + property: "viewportX" + easing: "easeLinear" + duration: 200 + from: 0 // set before calling + to: 0 // set before calling + } + NumberAnimation { + id: flickVY + target: flickable + property: "viewportY" + easing: "easeLinear" + duration: 200 + from: 0 // set before calling + to: 0 // set before calling + } + } + PropertyAction { + id: finalZoom + target: webView + property: "contentsScale" + } + PropertyAction { + target: webView + property: "scale" + value: 1.0 + } + // Have to set the viewportXY, since the above 2 + // size changes may have started a correction if + // contentsScale < 1.0. + PropertyAction { + id: finalX + target: flickable + property: "viewportX" + value: 0 // set before calling + } + PropertyAction { + id: finalY + target: flickable + property: "viewportY" + value: 0 // set before calling + } + PropertyAction { + target: webView + property: "renderingEnabled" + value: true + } + } + onZoomTo: doZoom(zoom,centerX,centerY) + } +} diff --git a/demos/declarative/webbrowser/content/RectSoftShadow.qml b/demos/declarative/webbrowser/content/RectSoftShadow.qml new file mode 100644 index 0000000..5b6d4ec --- /dev/null +++ b/demos/declarative/webbrowser/content/RectSoftShadow.qml @@ -0,0 +1,32 @@ +import Qt 4.6 + +Item { + BorderImage { + source: "pics/softshadow-left.sci" + x: -16 + y: -16 + width: 16 + height: parent.height+32 + } + BorderImage { + source: "pics/softshadow-right.sci" + x: parent.width + y: -16 + width: 16 + height: parent.height+32 + } + Image { + source: "pics/softshadow-top.png" + x: 0 + y: -16 + width: parent.width + height: 16 + } + Image { + source: "pics/softshadow-bottom.png" + x: 0 + y: parent.height + width: parent.width + height: 16 + } +} diff --git a/demos/declarative/webbrowser/content/RetractingWebBrowserHeader.qml b/demos/declarative/webbrowser/content/RetractingWebBrowserHeader.qml new file mode 100644 index 0000000..a7e6a97 --- /dev/null +++ b/demos/declarative/webbrowser/content/RetractingWebBrowserHeader.qml @@ -0,0 +1,106 @@ +import Qt 4.6 + +import "fieldtext" + +Image { + property alias editUrl: editUrl.text + + id: header + source: "pics/header.png" + width: parent.width + height: 60 + x: webView.viewportX < 0 ? -webView.viewportX : webView.viewportX > webView.viewportWidth-webView.width + ? -webView.viewportX+webView.viewportWidth-webView.width : 0 + y: webView.viewportY < 0 ? -webView.viewportY : progressOff* + (webView.viewportY>height?-height:-webView.viewportY) + Text { + id: headerText + + text: webView.title!='' || webView.progress == 1.0 ? webView.title : 'Loading...' + elide: Text.ElideRight + + color: "white" + styleColor: "black" + style: Text.Raised + + font.family: "Helvetica" + font.pointSize: 10 + font.bold: true + + anchors.left: header.left + anchors.right: header.right + anchors.leftMargin: 4 + anchors.rightMargin: 4 + anchors.top: header.top + anchors.topMargin: 4 + horizontalAlignment: Text.AlignHCenter + } + Item { + width: parent.width + anchors.top: headerText.bottom + anchors.topMargin: 2 + anchors.bottom: parent.bottom + + Item { + id: urlBox + height: 31 + anchors.left: parent.left + anchors.leftMargin: 12 + anchors.right: parent.right + anchors.rightMargin: 12 + anchors.top: parent.top + clip: true + property bool mouseGrabbed: false + + BorderImage { + source: "pics/addressbar.sci" + anchors.fill: urlBox + } + + BorderImage { + id: urlBoxhl + source: "pics/addressbar-filled.sci" + width: parent.width*webView.progress + height: parent.height + opacity: 1-header.progressOff + clip: true + } + + FieldText { + id: editUrl + mouseGrabbed: parent.mouseGrabbed + + text: webBrowser.urlString + label: "url:" + onConfirmed: { webBrowser.urlString = editUrl.text; webView.focus=true } + onCancelled: { webView.focus=true } + onStartEdit: { webView.focus=false } + + anchors.left: urlBox.left + anchors.right: urlBox.right + anchors.leftMargin: 6 + anchors.verticalCenter: urlBox.verticalCenter + anchors.verticalCenterOffset: 1 + } + } + } + + property real progressOff : 1 + states: [ + State { + name: "ProgressShown" + when: webView.progress < 1.0 + PropertyChanges { target: header; progressOff: 0; } + } + ] + transitions: [ + Transition { + NumberAnimation { + matchTargets: header + matchProperties: "progressOff" + easing: "easeInOutQuad" + duration: 300 + } + } + ] +} diff --git a/demos/declarative/webbrowser/content/fieldtext/FieldText.qml b/demos/declarative/webbrowser/content/fieldtext/FieldText.qml new file mode 100644 index 0000000..6b1d271 --- /dev/null +++ b/demos/declarative/webbrowser/content/fieldtext/FieldText.qml @@ -0,0 +1,161 @@ +import Qt 4.6 + +Item { + id: fieldText + height: 30 + property string text: "" + property string label: "" + property bool mouseGrabbed: false + signal confirmed + signal cancelled + signal startEdit + + Script { + + 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 + opacity: Behavior { + NumberAnimation { + property: "opacity" + duration: 250 + } + } + } + + MouseRegion { + anchors.fill: cancelIcon + onClicked: { reset() } + } + + MouseRegion { + anchors.fill: confirmIcon + onClicked: { confirm() } + } + + MouseRegion { + 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 { + matchProperties: "opacity,leftMargin,rightMargin" + duration: 200 + } + ColorAnimation { + property: "color" + duration: 150 + } + } + ] +} diff --git a/demos/declarative/webbrowser/content/fieldtext/pics/cancel.png b/demos/declarative/webbrowser/content/fieldtext/pics/cancel.png Binary files differnew file mode 100644 index 0000000..ecc9533 --- /dev/null +++ b/demos/declarative/webbrowser/content/fieldtext/pics/cancel.png diff --git a/demos/declarative/webbrowser/content/fieldtext/pics/ok.png b/demos/declarative/webbrowser/content/fieldtext/pics/ok.png Binary files differnew file mode 100644 index 0000000..5795f04 --- /dev/null +++ b/demos/declarative/webbrowser/content/fieldtext/pics/ok.png diff --git a/demos/declarative/webbrowser/content/pics/addressbar-filled.png b/demos/declarative/webbrowser/content/pics/addressbar-filled.png Binary files differnew file mode 100644 index 0000000..d8452ec --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/addressbar-filled.png diff --git a/demos/declarative/webbrowser/content/pics/addressbar-filled.sci b/demos/declarative/webbrowser/content/pics/addressbar-filled.sci new file mode 100644 index 0000000..96c5efb --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/addressbar-filled.sci @@ -0,0 +1,6 @@ +border.left: 7 +border.top: 7 +border.bottom: 7 +border.right: 7 +source: addressbar-filled.png + diff --git a/demos/declarative/webbrowser/content/pics/addressbar.png b/demos/declarative/webbrowser/content/pics/addressbar.png Binary files differnew file mode 100644 index 0000000..3278f58 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/addressbar.png diff --git a/demos/declarative/webbrowser/content/pics/addressbar.sci b/demos/declarative/webbrowser/content/pics/addressbar.sci new file mode 100644 index 0000000..8f1cd18 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/addressbar.sci @@ -0,0 +1,6 @@ +border.left: 7 +border.top: 7 +border.bottom: 7 +border.right: 7 +source: addressbar.png + diff --git a/demos/declarative/webbrowser/content/pics/back-disabled.png b/demos/declarative/webbrowser/content/pics/back-disabled.png Binary files differnew file mode 100644 index 0000000..91b9e76 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/back-disabled.png diff --git a/demos/declarative/webbrowser/content/pics/back.png b/demos/declarative/webbrowser/content/pics/back.png Binary files differnew file mode 100644 index 0000000..9988dd3 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/back.png diff --git a/demos/declarative/webbrowser/content/pics/footer.png b/demos/declarative/webbrowser/content/pics/footer.png Binary files differnew file mode 100644 index 0000000..8391a93 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/footer.png diff --git a/demos/declarative/webbrowser/content/pics/footer.sci b/demos/declarative/webbrowser/content/pics/footer.sci new file mode 100644 index 0000000..7be58f1 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/footer.sci @@ -0,0 +1,6 @@ +border.left: 5 +border.top: 0 +border.bottom: 0 +border.right: 5 +source: footer.png + diff --git a/demos/declarative/webbrowser/content/pics/forward-disabled.png b/demos/declarative/webbrowser/content/pics/forward-disabled.png Binary files differnew file mode 100644 index 0000000..cb87f4f --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/forward-disabled.png diff --git a/demos/declarative/webbrowser/content/pics/forward.png b/demos/declarative/webbrowser/content/pics/forward.png Binary files differnew file mode 100644 index 0000000..83870ee --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/forward.png diff --git a/demos/declarative/webbrowser/content/pics/header.png b/demos/declarative/webbrowser/content/pics/header.png Binary files differnew file mode 100644 index 0000000..26588c3 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/header.png diff --git a/demos/declarative/webbrowser/content/pics/reload.png b/demos/declarative/webbrowser/content/pics/reload.png Binary files differnew file mode 100644 index 0000000..45b5535 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/reload.png diff --git a/demos/declarative/webbrowser/content/pics/softshadow-bottom.png b/demos/declarative/webbrowser/content/pics/softshadow-bottom.png Binary files differnew file mode 100644 index 0000000..85b0b44 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/softshadow-bottom.png diff --git a/demos/declarative/webbrowser/content/pics/softshadow-left.png b/demos/declarative/webbrowser/content/pics/softshadow-left.png Binary files differnew file mode 100644 index 0000000..02926d1 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/softshadow-left.png diff --git a/demos/declarative/webbrowser/content/pics/softshadow-left.sci b/demos/declarative/webbrowser/content/pics/softshadow-left.sci new file mode 100644 index 0000000..45c88d5 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/softshadow-left.sci @@ -0,0 +1,5 @@ +border.left: 0 +border.top: 16 +border.bottom: 16 +border.right: 0 +source: softshadow-left.png diff --git a/demos/declarative/webbrowser/content/pics/softshadow-right.png b/demos/declarative/webbrowser/content/pics/softshadow-right.png Binary files differnew file mode 100644 index 0000000..e459f4f --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/softshadow-right.png diff --git a/demos/declarative/webbrowser/content/pics/softshadow-right.sci b/demos/declarative/webbrowser/content/pics/softshadow-right.sci new file mode 100644 index 0000000..4d459c0 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/softshadow-right.sci @@ -0,0 +1,5 @@ +border.left: 0 +border.top: 16 +border.bottom: 16 +border.right: 0 +source: softshadow-right.png diff --git a/demos/declarative/webbrowser/content/pics/softshadow-top.png b/demos/declarative/webbrowser/content/pics/softshadow-top.png Binary files differnew file mode 100644 index 0000000..9a9e232 --- /dev/null +++ b/demos/declarative/webbrowser/content/pics/softshadow-top.png diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml new file mode 100644 index 0000000..3b3790c --- /dev/null +++ b/demos/declarative/webbrowser/webbrowser.qml @@ -0,0 +1,169 @@ +import Qt 4.6 + +import "content" + +Item { + id: webBrowser + + property string urlString : "http://qt.nokia.com/" + + width: 640 + height: 480 + + Item { + id: webPanel + anchors.fill: parent + clip: true + Rectangle { + color: "#555555" + anchors.fill: parent + } + Image { + source: "content/pics/softshadow-bottom.png" + width: webPanel.width + height: 16 + } + Image { + source: "content/pics/softshadow-top.png" + width: webPanel.width + height: 16 + anchors.bottom: footer.top + } + RectSoftShadow { + x: -webView.viewportX + y: -webView.viewportY + width: webView.viewportWidth + height: webView.viewportHeight+headerSpace.height + } + Item { + id: headerSpace + width: parent.width + height: 60 + z: 1 + + RetractingWebBrowserHeader { id: header } + } + FlickableWebView { + id: webView + width: parent.width + anchors.top: headerSpace.bottom + anchors.bottom: footer.top + anchors.left: parent.left + anchors.right: parent.right + } + BorderImage { + id: footer + source: "content/pics/footer.sci" + width: parent.width + height: 43 + anchors.bottom: parent.bottom + Rectangle { + y: -1 + width: parent.width + height: 1 + color: "#555555" + } + Item { + id: backbutton + width: back_e.width + height: back_e.height + anchors.right: reload.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + Image { + id: back_e + source: "content/pics/back.png" + anchors.fill: parent + } + Image { + id: back_d + source: "content/pics/back-disabled.png" + anchors.fill: parent + } + states: [ + State { + name: "Enabled" + when: webView.back.enabled==true + PropertyChanges { target: back_e; opacity: 1 } + PropertyChanges { target: back_d; opacity: 0 } + }, + State { + name: "Disabled" + when: webView.back.enabled==false + PropertyChanges { target: back_e; opacity: 0 } + PropertyChanges { target: back_d; opacity: 1 } + } + ] + transitions: [ + Transition { + NumberAnimation { + matchProperties: "opacity" + easing: "easeInOutQuad" + duration: 300 + } + } + ] + MouseRegion { + anchors.fill: back_e + onClicked: { if (webView.back.enabled) webView.back.trigger() } + } + } + Image { + id: reload + source: "content/pics/reload.png" + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + MouseRegion { + anchors.fill: reload + onClicked: { webView.reload.trigger() } + } + Item { + id: forwardbutton + width: forward_e.width + height: forward_e.height + anchors.left: reload.right + anchors.leftMargin: 10 + anchors.verticalCenter: parent.verticalCenter + Image { + id: forward_e + source: "content/pics/forward.png" + anchors.fill: parent + anchors.verticalCenter: parent.verticalCenter + } + Image { + id: forward_d + source: "content/pics/forward-disabled.png" + anchors.fill: parent + } + states: [ + State { + name: "Enabled" + when: webView.forward.enabled==true + PropertyChanges { target: forward_e; opacity: 1 } + PropertyChanges { target: forward_d; opacity: 0 } + }, + State { + name: "Disabled" + when: webView.forward.enabled==false + PropertyChanges { target: forward_e; opacity: 0 } + PropertyChanges { target: forward_d; opacity: 1 } + } + ] + transitions: [ + Transition { + NumberAnimation { + matchProperties: "opacity" + easing: "easeInOutQuad" + duration: 320 + } + } + ] + MouseRegion { + anchors.fill: parent + onClicked: { if (webView.forward.enabled) webView.forward.trigger() } + } + } + } + } +} |
