diff options
Diffstat (limited to 'examples/declarative')
| -rw-r--r-- | examples/declarative/webview/autosize.qml | 101 | ||||
| -rw-r--r-- | examples/declarative/webview/inline-html.qml | 25 | ||||
| -rw-r--r-- | examples/declarative/webview/inline-xhtml.qml | 14 | ||||
| -rw-r--r-- | examples/declarative/webview/qml-in-html.qml | 50 | ||||
| -rw-r--r-- | examples/declarative/webview/transparent.qml | 17 |
5 files changed, 112 insertions, 95 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/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 <b>World!</b>"/> -</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>" + } +} |