summaryrefslogtreecommitdiffstats
path: root/examples/declarative/webview
diff options
context:
space:
mode:
Diffstat (limited to 'examples/declarative/webview')
-rw-r--r--examples/declarative/webview/autosize.qml101
-rw-r--r--examples/declarative/webview/content/SpinSquare.qml41
-rw-r--r--examples/declarative/webview/inline-html.qml25
-rw-r--r--examples/declarative/webview/inline-xhtml.qml14
-rw-r--r--examples/declarative/webview/qml-in-html.qml50
-rw-r--r--examples/declarative/webview/transparent.qml17
6 files changed, 141 insertions, 107 deletions
diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml
index fedd497..c32b752 100644
--- a/examples/declarative/webview/autosize.qml
+++ b/examples/declarative/webview/autosize.qml
@@ -1,42 +1,59 @@
-<!-- The WebView size is determined by the width, height,
- idealWidth, and idealHeight properties. -->
-<Rect id="Rect" color="white" width="200" height="{Layout.height}">
- <VerticalLayout id="Layout" spacing="2">
- <WebView>
- <html><![CDATA[
- No width defined.
- ]]></html>
- <Rect color="#10000000" anchors.fill="{parent}"/>
- </WebView>
- <WebView width="{Rect.width}">
- <html><![CDATA[
- The width is full.
- ]]></html>
- <Rect color="#10000000" anchors.fill="{parent}"/>
- </WebView>
- <WebView width="{Rect.width/2}">
- <html><![CDATA[
- The width is half.
- ]]></html>
- <Rect color="#10000000" anchors.fill="{parent}"/>
- </WebView>
- <WebView idealWidth="{Rect.width/2}">
- <html><![CDATA[
- The idealWidth is half.
- ]]></html>
- <Rect color="#10000000" anchors.fill="{parent}"/>
- </WebView>
- <WebView idealWidth="{Rect.width/2}">
- <html><![CDATA[
- The_idealWidth_is_half.
- ]]></html>
- <Rect color="#10000000" anchors.fill="{parent}"/>
- </WebView>
- <WebView width="{Rect.width/2}">
- <html><![CDATA[
- The_width_is_half.
- ]]></html>
- <Rect color="#10000000" anchors.fill="{parent}"/>
- </WebView>
- </VerticalLayout>
-</Rect>
+// The WebView size is determined by the width, height,
+// idealWidth, and idealHeight properties.
+Rect {
+ id: Rect
+ color: "white"
+ width: 200
+ height: Layout.height
+ VerticalLayout {
+ id: Layout
+ spacing: 2
+ WebView {
+ html: "No width defined."
+ Rect {
+ color: "#10000000"
+ anchors.fill: parent
+ }
+ }
+ WebView {
+ width: Rect.width
+ html: "The width is full."
+ Rect {
+ color: "#10000000"
+ anchors.fill: parent
+ }
+ }
+ WebView {
+ width: Rect.width/2
+ html: "The width is half."
+ Rect {
+ color: "#10000000"
+ anchors.fill: parent
+ }
+ }
+ WebView {
+ idealWidth: Rect.width/2
+ html: "The idealWidth is half."
+ Rect {
+ color: "#10000000"
+ anchors.fill: parent
+ }
+ }
+ WebView {
+ idealWidth: Rect.width/2
+ html: "The_idealWidth_is_half."
+ Rect {
+ color: "#10000000"
+ anchors.fill: parent
+ }
+ }
+ WebView {
+ width: Rect.width/2
+ html: "The_width_is_half."
+ Rect {
+ color: "#10000000"
+ anchors.fill: parent
+ }
+ }
+ }
+}
diff --git a/examples/declarative/webview/content/SpinSquare.qml b/examples/declarative/webview/content/SpinSquare.qml
index ced45d5..5c14506 100644
--- a/examples/declarative/webview/content/SpinSquare.qml
+++ b/examples/declarative/webview/content/SpinSquare.qml
@@ -1,12 +1,29 @@
-<Item id="Root">
- <properties>
- <Property name="period" value="250"/>
- <Property name="color" value="black"/>
- </properties>
- <Item x="{Root.width/2}" y="{Root.height/2}">
- <Rect color="{Root.color}" width="{Root.width}" height="{width}" x="{-width/2}" y="{-height/2}"/>
- <rotation>
- <NumericAnimation from="0" to="360" repeat="true" running="true" duration="{Root.period}"/>
- </rotation>
- </Item>
-</Item>
+Item {
+ id: Root
+ properties: Property {
+ name: "period"
+ value: 250
+ }
+ properties: Property {
+ name: "color"
+ value: "black"
+ }
+ Item {
+ x: Root.width/2
+ y: Root.height/2
+ Rect {
+ color: Root.color
+ x: -width/2
+ y: -height/2
+ width: Root.width
+ height: width
+ }
+ rotation: NumericAnimation {
+ from: 0
+ to: 360
+ repeat: true
+ running: true
+ duration: Root.period
+ }
+ }
+}
diff --git a/examples/declarative/webview/inline-html.qml b/examples/declarative/webview/inline-html.qml
index 701db41..5f6d410 100644
--- a/examples/declarative/webview/inline-html.qml
+++ b/examples/declarative/webview/inline-html.qml
@@ -1,13 +1,12 @@
-<!-- Inline HTML with loose formatting can be
- set on the html property by using CDATA. -->
-<WebView>
- <html><![CDATA[
- <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>
- ]]></html>
-</WebView>
+// 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/webview/inline-xhtml.qml b/examples/declarative/webview/inline-xhtml.qml
deleted file mode 100644
index 4acb417..0000000
--- a/examples/declarative/webview/inline-xhtml.qml
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- Inline xHTML (with strict XML formatting) can be
- set on the html property by giving it the appropriate namespace. -->
-<WebView>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <body bgcolor="white">
- <table border="1">
- <tr><th></th><th>One</th><th>Two</th><th>Three</th></tr>
- <tr><th>1</th><td>X</td><td>1</td><td>X</td></tr>
- <tr><th>2</th><td>0</td><td>X</td><td>0</td></tr>
- <tr><th>3</th><td>X</td><td>1</td><td>X</td></tr>
- </table>
- </body>
- </html>
-</WebView>
diff --git a/examples/declarative/webview/qml-in-html.qml b/examples/declarative/webview/qml-in-html.qml
index 8c1c06f..29dded5 100644
--- a/examples/declarative/webview/qml-in-html.qml
+++ b/examples/declarative/webview/qml-in-html.qml
@@ -1,20 +1,30 @@
-<!-- The WebView supports QML data through the HTML OBJECT tag -->
-<Flickable width="{250*.75}" height="240"
- viewportWidth="{Web.width*Web.scale}" viewportHeight="{Web.height*Web.scale}">
-<WebView id="Web" width="250" height="420" scale="0.75" settings.pluginsEnabled="true">
- <html><![CDATA[
- <html>
- <body bgcolor=white>
- These are QML plugins, shown in a QML WebView via HTML OBJECT tags, all scaled to 75%
- and placed in a Flickable area...
- <table border=1>
- <tr><th>Duration <th>Color <th>Plugin
- <tr><td>500 <td>red <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=500 color=red />
- <tr><td>2000 <td>blue <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=2000 color=blue />
- <tr><td>1000 <td>green <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=1000 color=green />
- </table>
- </body>
- </html>
- ]]></html>
-</WebView>
-</Flickable>
+// The WebView supports QML data through the HTML OBJECT tag
+Rect {
+ color:"blue"
+ Flickable {
+ width: parent.width
+ height: parent.height/2
+ viewportWidth: Web.width*Web.scale
+ viewportHeight: Web.height*Web.scale
+ WebView {
+ id: Web
+ width: 250
+ height: 420
+ scale: 0.75
+ smooth: true
+ settings.pluginsEnabled: true
+ html: "<html>\
+ <body bgcolor=white>\
+ These are QML plugins, shown in a QML WebView via HTML OBJECT tags, all scaled to 75%\
+ and placed in a Flickable area...\
+ <table border=1>\
+ <tr><th>Duration <th>Color <th>Plugin\
+ <tr><td>500 <td>red <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=500 color=red />\
+ <tr><td>2000 <td>blue <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=2000 color=blue />\
+ <tr><td>1000 <td>green <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=1000 color=green />\
+ </table>\
+ </body>\
+ </html>"
+ }
+ }
+}
diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml
index 71e1621..8614822 100644
--- a/examples/declarative/webview/transparent.qml
+++ b/examples/declarative/webview/transparent.qml
@@ -1,6 +1,11 @@
-<!-- The WebView background is transparent
- if the HTML does not specify a background -->
-
-<Rect color="green" width="{Web.width}" height="{Web.height}">
- <WebView id="Web" html="Hello &lt;b&gt;World!&lt;/b&gt;"/>
-</Rect>
+// The WebView background is transparent
+// if the HTML does not specify a background
+Rect {
+ color: "green"
+ width: Web.width
+ height: Web.height
+ WebView {
+ id: Web
+ html: "Hello <b>World!</b>"
+ }
+}
generated by cgit v0.12 at 2024-10-26 11:44:27 (GMT)