summaryrefslogtreecommitdiffstats
path: root/demos/declarative
diff options
context:
space:
mode:
Diffstat (limited to 'demos/declarative')
-rw-r--r--demos/declarative/webbrowser/content/FlickableWebView.qml162
-rw-r--r--demos/declarative/webbrowser/content/RectSoftShadow.qml2
-rw-r--r--demos/declarative/webbrowser/content/RetractingWebBrowserHeader.qml106
-rw-r--r--demos/declarative/webbrowser/content/fieldtext/FieldText.qml (renamed from demos/declarative/webbrowser/fieldtext/FieldText.qml)0
-rw-r--r--demos/declarative/webbrowser/content/fieldtext/pics/cancel.png (renamed from demos/declarative/webbrowser/fieldtext/pics/cancel.png)bin1038 -> 1038 bytes
-rw-r--r--demos/declarative/webbrowser/content/fieldtext/pics/ok.png (renamed from demos/declarative/webbrowser/fieldtext/pics/ok.png)bin655 -> 655 bytes
-rw-r--r--demos/declarative/webbrowser/webbrowser.qml284
7 files changed, 276 insertions, 278 deletions
diff --git a/demos/declarative/webbrowser/content/FlickableWebView.qml b/demos/declarative/webbrowser/content/FlickableWebView.qml
new file mode 100644
index 0000000..09a3c04
--- /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
+ preferredHeight: flickable.height
+ contentsScale: 1/zoomFactor
+ onContentsSizeChanged: {
+ // zoom out
+ contentsScale = 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
index 6bba98e..5b6d4ec 100644
--- a/demos/declarative/webbrowser/content/RectSoftShadow.qml
+++ b/demos/declarative/webbrowser/content/RectSoftShadow.qml
@@ -26,7 +26,7 @@ Item {
source: "pics/softshadow-bottom.png"
x: 0
y: parent.height
- width: webView.width*webView.scale
+ 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/fieldtext/FieldText.qml b/demos/declarative/webbrowser/content/fieldtext/FieldText.qml
index 6b1d271..6b1d271 100644
--- a/demos/declarative/webbrowser/fieldtext/FieldText.qml
+++ b/demos/declarative/webbrowser/content/fieldtext/FieldText.qml
diff --git a/demos/declarative/webbrowser/fieldtext/pics/cancel.png b/demos/declarative/webbrowser/content/fieldtext/pics/cancel.png
index ecc9533..ecc9533 100644
--- a/demos/declarative/webbrowser/fieldtext/pics/cancel.png
+++ b/demos/declarative/webbrowser/content/fieldtext/pics/cancel.png
Binary files differ
diff --git a/demos/declarative/webbrowser/fieldtext/pics/ok.png b/demos/declarative/webbrowser/content/fieldtext/pics/ok.png
index 5795f04..5795f04 100644
--- a/demos/declarative/webbrowser/fieldtext/pics/ok.png
+++ b/demos/declarative/webbrowser/content/fieldtext/pics/ok.png
Binary files differ
diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml
index 11776aa..3b3790c 100644
--- a/demos/declarative/webbrowser/webbrowser.qml
+++ b/demos/declarative/webbrowser/webbrowser.qml
@@ -1,15 +1,12 @@
import Qt 4.6
import "content"
-import "fieldtext"
Item {
id: webBrowser
property string urlString : "http://qt.nokia.com/"
- state: "Normal"
-
width: 640
height: 480
@@ -33,10 +30,10 @@ Item {
anchors.bottom: footer.top
}
RectSoftShadow {
- x: -flickable.viewportX
- y: -flickable.viewportY
- width: webView.width*webView.scale
- height: flickable.y+webView.height*webView.scale
+ x: -webView.viewportX
+ y: -webView.viewportY
+ width: webView.viewportWidth
+ height: webView.viewportHeight+headerSpace.height
}
Item {
id: headerSpace
@@ -44,282 +41,15 @@ Item {
height: 60
z: 1
- Rectangle {
- id: headerSpaceTint
- color: "black"
- opacity: 0
- anchors.fill: parent
- }
-
- Image {
- id: header
- source: "content/pics/header.png"
- width: parent.width
- height: 60
- state: "Normal"
- x: flickable.viewportX < 0 ? -flickable.viewportX : flickable.viewportX > flickable.viewportWidth-flickable.width
- ? -flickable.viewportX+flickable.viewportWidth-flickable.width : 0
- y: flickable.viewportY < 0 ? -flickable.viewportY : progressOff*
- (flickable.viewportY>height?-height:-flickable.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: "content/pics/addressbar.sci"
- anchors.fill: urlBox
- }
-
- BorderImage {
- id: urlBoxhl
- source: "content/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: "Normal"
- when: webView.progress == 1.0
- PropertyChanges { target: header; progressOff: 1 }
- },
- State {
- name: "ProgressShown"
- when: webView.progress < 1.0
- PropertyChanges { target: header; progressOff: 0; }
- }
- ]
- transitions: [
- Transition {
- NumberAnimation {
- matchTargets: header
- matchProperties: "progressOff"
- easing: "easeInOutQuad"
- duration: 300
- }
- }
- ]
- }
+ RetractingWebBrowserHeader { id: header }
}
- Flickable {
- id: flickable
+ FlickableWebView {
+ id: webView
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
- preferredHeight: flickable.height
- contentsScale: 1/zoomFactor
- onContentsSizeChanged: {
- // zoom out
- contentsScale = flickable.width / contentsSize.width
- }
- onUrlChanged: {
- // got to topleft
- flickable.viewportX = 0
- flickable.viewportY = 0
- if (url != null) { editUrl.text = 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)
- }
- Rectangle {
- id: webViewTint
- color: "black"
- opacity: 0
- anchors.fill: webView
- /*MouseRegion {
- anchors.fill: WebViewTint
- onClicked: { proxy.focus=false }
- }*/
- }
}
BorderImage {
id: footer
generated by cgit v0.12 at 2024-11-06 09:00:02 (GMT)