diff options
| author | Martin Jones <martin.jones@nokia.com> | 2010-05-17 03:19:13 (GMT) |
|---|---|---|
| committer | Martin Jones <martin.jones@nokia.com> | 2010-05-17 03:19:13 (GMT) |
| commit | 414edec537821711e22a3bb2729e189aa501bfbb (patch) | |
| tree | caa1c3b4a3aa22c5670466a570f380bc3bd29355 /examples/declarative/modelviews/webview | |
| parent | cef452a2792cc15705f677c9b9c689496eeb500f (diff) | |
| parent | 029f98ee0176b34279e7cc944cca17f027fe5a0a (diff) | |
| download | Qt-414edec537821711e22a3bb2729e189aa501bfbb.zip Qt-414edec537821711e22a3bb2729e189aa501bfbb.tar.gz Qt-414edec537821711e22a3bb2729e189aa501bfbb.tar.bz2 | |
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7
Diffstat (limited to 'examples/declarative/modelviews/webview')
15 files changed, 508 insertions, 0 deletions
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 " ] +} |
