diff options
| author | Qt Continuous Integration System <qt-info@nokia.com> | 2010-05-17 05:15:57 (GMT) |
|---|---|---|
| committer | Qt Continuous Integration System <qt-info@nokia.com> | 2010-05-17 05:15:57 (GMT) |
| commit | f60eeb5c165d5b9e5998edae7785cc893a613bca (patch) | |
| tree | 13997c6ce889b1e51dd159c016437503a094a7e5 /examples/declarative/modelviews/webview | |
| parent | bdbe09ad2c01ae11d10511b51f8d7a3dfb27b17c (diff) | |
| parent | 7a738662838763e4828c6ac8957a2823b095f566 (diff) | |
| download | Qt-f60eeb5c165d5b9e5998edae7785cc893a613bca.zip Qt-f60eeb5c165d5b9e5998edae7785cc893a613bca.tar.gz Qt-f60eeb5c165d5b9e5998edae7785cc893a613bca.tar.bz2 | |
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7-integration
* '4.7' of scm.dev.nokia.troll.no:qt/qt-qml:
Focus should be applied to focus scopes all the way up the chain, not
Add focus docs snippets
Fix doc for status, add Image::onLoaded.
Don't crash due to recursive positioning.
ListModel::get() shouldn't print warnings for invalid indices since it
Add \brief to TextInput
Add missing .pro
Restructure the examples. They are now organized into various
graphicsWidgets doc example was previously removed
Doc fix
Add a "priority" property to Keys and KeyNavigation
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 " ] +} |
