summaryrefslogtreecommitdiffstats
path: root/demos/declarative
diff options
context:
space:
mode:
authorWarwick Allison <warwick.allison@nokia.com>2009-04-30 04:26:37 (GMT)
committerWarwick Allison <warwick.allison@nokia.com>2009-04-30 04:26:37 (GMT)
commit4eefc8ada9e6849bb9383d75b04cad835f2f9cbf (patch)
treec9b1aabc27f7f5aabf6c80dec3d5ebb95fa774ef /demos/declarative
parent7e95bf13d72b28c87dab4b346fd96de6e8a4c046 (diff)
downloadQt-4eefc8ada9e6849bb9383d75b04cad835f2f9cbf.zip
Qt-4eefc8ada9e6849bb9383d75b04cad835f2f9cbf.tar.gz
Qt-4eefc8ada9e6849bb9383d75b04cad835f2f9cbf.tar.bz2
Port syntax
Diffstat (limited to 'demos/declarative')
-rw-r--r--demos/declarative/webbrowser/content/RectSoftShadow.qml40
-rw-r--r--demos/declarative/webbrowser/webbrowser.qml612
2 files changed, 479 insertions, 173 deletions
diff --git a/demos/declarative/webbrowser/content/RectSoftShadow.qml b/demos/declarative/webbrowser/content/RectSoftShadow.qml
index 2b39422..5817f00 100644
--- a/demos/declarative/webbrowser/content/RectSoftShadow.qml
+++ b/demos/declarative/webbrowser/content/RectSoftShadow.qml
@@ -1,10 +1,30 @@
-<Item>
- <Image source="pics/softshadow-left.sci" x="-16" y="-16"
- width="16" height="{parent.height+32}" />
- <Image source="pics/softshadow-right.sci" x="{parent.width}" y="-16"
- width="16" height="{parent.height+32}" />
- <Image source="pics/softshadow-top.png" x="0" y="-16"
- width="{parent.width}" height="16" />
- <Image source="pics/softshadow-bottom.png" x="0" y="{parent.height}"
- width="{webview.width*webview.scale}" height="16" />
-</Item>
+Item {
+ Image {
+ source: "pics/softshadow-left.sci"
+ x: -16
+ y: -16
+ width: 16
+ height: parent.height+32
+ }
+ Image {
+ source: "pics/softshadow-right.sci"
+ x: parent.width
+ y: -16
+ width: 16
+ height: parent.height+32
+ }
+ Image {
+ source: "pics/softshadow-top.png"
+ x: 0
+ y: -16
+ width: parent.width
+ height: 16
+ }
+ Image {
+ source: "pics/softshadow-bottom.png"
+ x: 0
+ y: parent.height
+ width: webview.width*webview.scale
+ height: 16
+ }
+}
diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml
index cf96b3f..79fd1cd 100644
--- a/demos/declarative/webbrowser/webbrowser.qml
+++ b/demos/declarative/webbrowser/webbrowser.qml
@@ -1,7 +1,17 @@
-<?qtfx namespacepath:=content?>
-<Item width="640" height="480" id="WebBrowser" state="Normal">
- <properties><Property name="url" value="http://www.qtsoftware.com"/></properties>
- <Script>
+import "content"
+Item {
+ id: WebBrowser
+
+ properties: Property {
+ name: "url"
+ value: "http://www.qtsoftware.com"
+ }
+
+ width: 640
+ height: 480
+ state: "Normal"
+
+ Script {
function zoomOut() {
WebBrowser.state = "ZoomedOut";
}
@@ -14,162 +24,438 @@
zoomOut();
}
}
- </Script>
-
- <Item id="WebPanel" anchors.fill="{parent}" clip="true">
- <Rect color="#555555" anchors.fill="{parent}"/>
- <Image source="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" />
- <Image source="content/pics/softshadow-top.png" width="{WebPanel.width}" anchors.bottom="{Footer.top}" height="16" />
- <RectSoftShadow x="{-Flick.xPosition}" y="{-Flick.yPosition}"
- width="{WebView.width*WebView.scale}" height="{Flick.y+WebView.height*WebView.scale}"/>
- <Item id="HeaderSpace" width="{parent.width}" height="60" z="1">
- <Image id="Header" width="{parent.width}" state="Normal"
- x="{Flick.xPosition &lt; 0
- ? -Flick.xPosition
- : Flick.xPosition &gt; Flick.viewportWidth-Flick.width
- ? -Flick.xPosition+Flick.viewportWidth-Flick.width
- : 0}"
- y="{Flick.yPosition &lt; 0 ? -Flick.yPosition : progressOff*(Flick.yPosition>height?-height:-Flick.yPosition)}"
- height="64" source="content/pics/header.png">
- <Text id="HeaderText" text="{WebView.title!='' || WebView.progress == 1.0 ? WebView.title : 'Loading...'}"
- color="white" styleColor="black" style="Raised"
- font.family="Helvetica" font.size="10" font.bold="true" elide="ElideRight"
- anchors.left="{Header.left}" anchors.right="{Header.right}"
- anchors.leftMargin="4" anchors.rightMargin="4"
- anchors.top="{Header.top}" anchors.topMargin="4" hAlign="AlignHCenter"/>
- <Item anchors.top="{HeaderText.bottom}" anchors.topMargin="2" anchors.bottom="{parent.bottom}" width="{parent.width}">
- <Item id="UrlBox" anchors.left="{parent.left}" anchors.leftMargin="12" anchors.right="{parent.right}" anchors.rightMargin="12" height="31" anchors.top="{parent.top}" clip="true">
- <Image source="content/pics/addressbar.sci" anchors.fill="{UrlBox}"/>
- <Image id="UrlBoxhl" source="content/pics/addressbar-filled.sci" opacity="{1-Header.progressOff}" clip="true" width="{parent.width*WebView.progress}" height="{parent.height}"/>
- <KeyProxy id="proxy" anchors.left="{UrlBox.left}" anchors.fill="{UrlBox}" focusable="true" targets="{[keyActions,EditUrl]}"/>
- <KeyActions id="keyActions" return="WebBrowser.url = EditUrl.text; proxy.focus=false;"/>
- <TextEdit id="EditUrl" color="#555555" text="{WebView.url == '' ? ' ' : WebView.url}"
- anchors.left="{UrlBox.left}" anchors.right="{UrlBox.right}" anchors.leftMargin="6"
- anchors.verticalCenter="{UrlBox.verticalCenter}" anchors.verticalCenterOffset="1"
- font.size="11" wrap="false" opacity="0"/>
- <Text id="ShowUrl" color="#555555" text="{WebView.url == '' ? ' ' : WebView.url}"
- anchors.left="{UrlBox.left}" anchors.right="{UrlBox.right}" anchors.leftMargin="6"
- anchors.verticalCenter="{UrlBox.verticalCenter}" anchors.verticalCenterOffset="1"
- font.size="11" />
- </Item>
- <MouseRegion anchors.fill="{UrlBox}" onClicked="proxy.focus=true"/>
- </Item>
- <properties>
- <Property name="progressOff" value="1" type="Real"/>
- </properties>
- <states>
- <State name="Normal" when="{WebView.progress == 1.0}">
- <SetProperty target="{Header}" property="progressOff" value="1"/>
- </State>
- <State name="ProgressShown" when="{WebView.progress &lt; 1.0}">
- <SetProperty target="{Header}" property="progressOff" value="0"/>
- </State>
- </states>
- <transitions>
- <Transition>
- <NumericAnimation target="{Header}" properties="progressOff" easing="easeInOutQuad" duration="300"/>
- </Transition>
- </transitions>
- </Image>
- </Item>
- <Flickable id="Flick"
- anchors.top="{HeaderSpace.bottom}" anchors.bottom="{Footer.top}"
- anchors.left="{parent.left}" anchors.right="{parent.right}"
- width="{parent.width}"
- viewportWidth="{Math.max(parent.width,WebView.width*WebView.scale)}"
- viewportHeight="{Math.max(parent.height,WebView.height*WebView.scale)}"
- >
- <properties>
- <Property name="centerX" value="0" type="Real"/>
- <Property name="centerY" value="0" type="Real"/>
- </properties>
- <WebView id="WebView"
- cacheSize="4000000"
- smooth="true"
- url="{WebBrowser.url}"
- onDoubleClick="toggleZoom()"
- focusable="true"
- focus="true"
- idealWidth="{Flick.width}"
- idealHeight="{Flick.height/scale}"
- onUrlChanged="Flick.xPosition=0; Flick.yPosition=0; zoomOut()"
- scale="{(width > 0) ? Flick.width/width*zoomedOut+(1-zoomedOut) : 1}"
- >
- <properties>
- <Property name="zoomedOut" type="real" value="1"/>
- </properties>
- </WebView>
- <Rect id="WebViewTint" anchors.fill="{WebView}" color="black" opacity="0">
- <MouseRegion anchors.fill="{WebViewTint}" onClicked="proxy.focus=false"/>
- </Rect>
- </Flickable>
- <Image id="Footer" width="{parent.width}" anchors.bottom="{parent.bottom}"
- height="43" source="content/pics/footer.sci">
- <Rect y="-1" width="{parent.width}" height="1" color="#555555"/>
- <Item id="backbutton" anchors.right="{reload.left}" anchors.rightMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{back_e.width}" height="{back_e.height}">
- <Image anchors.fill="{parent}" id="back_e" source="content/pics/back.png" />
- <Image anchors.fill="{parent}" id="back_d" source="content/pics/back-disabled.png" />
- <states>
- <State name="Enabled" when="{WebView.back.enabled==true}">
- <SetProperty target="{back_e}" property="opacity" value="1"/>
- <SetProperty target="{back_d}" property="opacity" value="0"/>
- </State>
- <State name="Disabled" when="{WebView.back.enabled==false}">
- <SetProperty target="{back_e}" property="opacity" value="0"/>
- <SetProperty target="{back_d}" property="opacity" value="1"/>
- </State>
- </states>
- <transitions>
- <Transition>
- <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="300"/>
- </Transition>
- </transitions>
- <MouseRegion anchors.fill="{back_e}" onClicked="if (WebView.back.enabled) WebView.back.trigger()"/>
- </Item>
- <Image id="reload" source="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
- <MouseRegion anchors.fill="{reload}" onClicked="WebView.reload.trigger()"/>
- <Item id="forwardbutton" anchors.left="{reload.right}" anchors.leftMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{forward_e.width}" height="{forward_e.height}">
- <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" source="content/pics/forward.png" />
- <Image anchors.fill="{parent}" id="forward_d" source="content/pics/forward-disabled.png" />
- <states>
- <State name="Enabled" when="{WebView.forward.enabled==true}">
- <SetProperty target="{forward_e}" property="opacity" value="1"/>
- <SetProperty target="{forward_d}" property="opacity" value="0"/>
- </State>
- <State name="Disabled" when="{WebView.forward.enabled==false}">
- <SetProperty target="{forward_e}" property="opacity" value="0"/>
- <SetProperty target="{forward_d}" property="opacity" value="1"/>
- </State>
- </states>
- <transitions>
- <Transition>
- <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="320"/>
- </Transition>
- </transitions>
- <MouseRegion anchors.fill="{parent}" onClicked="if (WebView.forward.enabled) WebView.forward.trigger()"/>
- </Item>
- </Image>
- </Item>
- <states>
- <State name="Normal">
- <SetProperty target="{WebView}" property="zoomedOut" value="0"/>
- <SetProperty target="{Flick}" property="xPosition" value="{Math.min(WebView.width-Flick.width,Math.max(0,Flick.centerX-Flick.width/2))}"/>
- <SetProperty target="{Flick}" property="yPosition" value="{Math.min(WebView.height-Flick.height,Math.max(0,Flick.centerY-Flick.height/2))}"/>
- </State>
- <State name="ZoomedOut">
- <SetProperty target="{WebView}" property="zoomedOut" value="1"/>
- </State>
- </states>
- <transitions>
- <Transition>
- <SequentialAnimation>
- <SetPropertyAction target="{WebView}" property="smooth" value="false" />
- <ParallelAnimation>
- <NumericAnimation target="{WebView}" properties="zoomedOut" easing="easeInOutQuad" duration="200"/>
- <NumericAnimation target="{Flick}" properties="xPosition,yPosition" easing="easeInOutQuad" duration="200"/>
- </ParallelAnimation>
- <SetPropertyAction target="{WebView}" property="smooth" value="true" />
- </SequentialAnimation>
- </Transition>
- </transitions>
-</Item>
+ }
+
+ Item {
+ id: WebPanel
+ anchors.fill: parent
+ clip: true
+ Rect {
+ color: "#555555"
+ anchors.fill: parent
+ }
+ Image {
+ source: "content/pics/softshadow-bottom.png"
+ width: WebPanel.width
+ height: 16
+ }
+ Image {
+ source: "content/pics/softshadow-top.png"
+ width: WebPanel.width
+ height: 16
+ anchors.bottom: Footer.top
+ }
+ RectSoftShadow {
+ x: -Flick.xPosition
+ y: -Flick.yPosition
+ width: WebView.width*WebView.scale
+ height: Flick.y+WebView.height*WebView.scale
+ }
+ Item {
+ id: HeaderSpace
+ width: parent.width
+ height: 60
+ z: 1
+
+ Image {
+ id: Header
+ source: "content/pics/header.png"
+ width: parent.width
+ height: 64
+ state: "Normal"
+ x: Flick.xPosition < 0 ? -Flick.xPosition : Flick.xPosition > Flick.viewportWidth-Flick.width
+ ? -Flick.xPosition+Flick.viewportWidth-Flick.width : 0
+ y: Flick.yPosition < 0 ? -Flick.yPosition : progressOff*
+ (Flick.yPosition>height?-height:-Flick.yPosition)
+ Text {
+ id: HeaderText
+
+ text: WebView.title!='' || WebView.progress == 1.0 ? WebView.title : 'Loading...'
+ elide: "ElideRight"
+
+ color: "white"
+ styleColor: "black"
+ style: Raised
+
+ font.family: "Helvetica"
+ font.size: 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
+ hAlign: 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
+ Image {
+ source: "content/pics/addressbar.sci"
+ anchors.fill: UrlBox
+ }
+ Image {
+ id: UrlBoxhl
+ source: "content/pics/addressbar-filled.sci"
+ width: parent.width*WebView.progress
+ height: parent.height
+ opacity: 1-Header.progressOff
+ clip: true
+ }
+ /*
+ KeyProxy {
+ id: proxy
+ anchors.left: UrlBox.left
+ anchors.fill: UrlBox
+ focusable: true
+ targets: [keyActions,EditUrl]
+ }
+ KeyActions {
+ id: keyActions
+ return: "WebBrowser.url = EditUrl.text; proxy.focus=false;"
+ }
+ */
+ TextEdit {
+ id: EditUrl
+
+ text: WebView.url == '' ? ' ' : WebView.url
+ wrap: false
+ font.size: 11
+ color: "#555555"
+
+ anchors.left: UrlBox.left
+ anchors.right: UrlBox.right
+ anchors.leftMargin: 6
+ anchors.verticalCenter: UrlBox.verticalCenter
+ anchors.verticalCenterOffset: 1
+
+ opacity: 0
+ }
+ Text {
+ id: ShowUrl
+ text: WebView.url == '' ? ' ' : WebView.url
+ font.size: 11
+ color: "#555555"
+ anchors.left: UrlBox.left
+ anchors.right: UrlBox.right
+ anchors.leftMargin: 6
+ anchors.verticalCenter: UrlBox.verticalCenter
+ anchors.verticalCenterOffset: 1
+ }
+ }
+ MouseRegion {
+ anchors.fill: UrlBox
+ onClicked: { proxy.focus=true }
+ }
+ }
+ properties: Property {
+ name: "progressOff"
+ value: 1
+ type: "Real"
+ }
+ states: [
+ State {
+ name: "Normal"
+ when: WebView.progress == 1.0
+ SetProperty {
+ target: Header
+ property: "progressOff"
+ value: 1
+ }
+ },
+ State {
+ name: "ProgressShown"
+ when: WebView.progress < 1.0
+ SetProperty {
+ target: Header
+ property: "progressOff"
+ value: 0
+ }
+ }
+ ]
+ transitions: [
+ Transition {
+ NumericAnimation {
+ target: Header
+ properties: "progressOff"
+ easing: "easeInOutQuad"
+ duration: 300
+ }
+ }
+ ]
+ }
+ }
+ Flickable {
+ id: Flick
+ 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
+
+ properties: Property {
+ name: "centerX"
+ value: 0
+ type: "Real"
+ }
+ properties: Property {
+ name: "centerY"
+ value: 0
+ type: "Real"
+ }
+
+ WebView {
+ id: WebView
+ cacheSize: 4000000
+
+ url: WebBrowser.url
+ smooth: true
+ focusable: true
+ focus: true
+
+ idealWidth: Flick.width
+ idealHeight: Flick.height/scale
+ scale: (width > 0) ? Flick.width/width*zoomedOut+(1-zoomedOut) : 1
+
+ onUrlChanged: { Flick.xPosition=0; Flick.yPosition=0; zoomOut() }
+ onDoubleClick: { toggleZoom() }
+
+ properties: Property {
+ name: "zoomedOut"
+ type: "real"
+ value: 1
+ }
+ }
+ Rect {
+ id: WebViewTint
+ color: "black"
+ opacity: 0
+ anchors.fill: WebView
+ MouseRegion {
+ anchors.fill: WebViewTint
+ onClicked: { proxy.focus=false }
+ }
+ }
+ }
+ Image {
+ id: Footer
+ source: "content/pics/footer.sci"
+ width: parent.width
+ height: 43
+ anchors.bottom: parent.bottom
+ Rect {
+ y: -1
+ width: parent.width
+ height: 1
+ color: "#555555"
+ }
+ Item {
+ id: backbutton
+ width: back_e.width
+ height: back_e.height
+ anchors.right: reload.left
+ anchors.rightMargin: 10
+ anchors.verticalCenter: parent.verticalCenter
+ Image {
+ id: back_e
+ source: "content/pics/back.png"
+ anchors.fill: parent
+ }
+ Image {
+ id: back_d
+ source: "content/pics/back-disabled.png"
+ anchors.fill: parent
+ }
+ states: [
+ State {
+ name: "Enabled"
+ when: WebView.back.enabled==true
+ SetProperty {
+ target: back_e
+ property: "opacity"
+ value: 1
+ }
+ SetProperty {
+ target: back_d
+ property: "opacity"
+ value: 0
+ }
+ },
+ State {
+ name: "Disabled"
+ when: WebView.back.enabled==false
+ SetProperty {
+ target: back_e
+ property: "opacity"
+ value: 0
+ }
+ SetProperty {
+ target: back_d
+ property: "opacity"
+ value: 1
+ }
+ }
+ ]
+ transitions: [
+ Transition {
+ NumericAnimation {
+ properties: "opacity"
+ easing: "easeInOutQuad"
+ duration: 300
+ }
+ }
+ ]
+ MouseRegion {
+ anchors.fill: back_e
+ onClicked: { if (WebView.back.enabled) WebView.back.trigger() }
+ }
+ }
+ Image {
+ id: reload
+ source: "content/pics/reload.png"
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.verticalCenter: parent.verticalCenter
+ }
+ MouseRegion {
+ anchors.fill: reload
+ onClicked: { WebView.reload.trigger() }
+ }
+ Item {
+ id: forwardbutton
+ width: forward_e.width
+ height: forward_e.height
+ anchors.left: reload.right
+ anchors.leftMargin: 10
+ anchors.verticalCenter: parent.verticalCenter
+ Image {
+ id: forward_e
+ source: "content/pics/forward.png"
+ anchors.fill: parent
+ anchors.verticalCenter: parent.verticalCenter
+ }
+ Image {
+ id: forward_d
+ source: "content/pics/forward-disabled.png"
+ anchors.fill: parent
+ }
+ states: [
+ State {
+ name: "Enabled"
+ when: WebView.forward.enabled==true
+ SetProperty {
+ target: forward_e
+ property: "opacity"
+ value: 1
+ }
+ SetProperty {
+ target: forward_d
+ property: "opacity"
+ value: 0
+ }
+ },
+ State {
+ name: "Disabled"
+ when: WebView.forward.enabled==false
+ SetProperty {
+ target: forward_e
+ property: "opacity"
+ value: 0
+ }
+ SetProperty {
+ target: forward_d
+ property: "opacity"
+ value: 1
+ }
+ }
+ ]
+ transitions: [
+ Transition {
+ NumericAnimation {
+ properties: "opacity"
+ easing: "easeInOutQuad"
+ duration: 320
+ }
+ }
+ ]
+ MouseRegion {
+ anchors.fill: parent
+ onClicked: { if (WebView.forward.enabled) WebView.forward.trigger() }
+ }
+ }
+ }
+ }
+ states: [
+ State {
+ name: "Normal"
+ SetProperty {
+ target: WebView
+ property: "zoomedOut"
+ value: 0
+ }
+ SetProperty {
+ target: Flick
+ property: "xPosition"
+ value: Math.min(WebView.width-Flick.width,Math.max(0,Flick.centerX-Flick.width/2))
+ }
+ SetProperty {
+ target: Flick
+ property: "yPosition"
+ value: Math.min(WebView.height-Flick.height,Math.max(0,Flick.centerY-Flick.height/2))
+ }
+ },
+ State {
+ name: "ZoomedOut"
+ SetProperty {
+ target: WebView
+ property: "zoomedOut"
+ value: 1
+ }
+ }
+ ]
+ transitions: [
+ Transition {
+ SequentialAnimation {
+ SetPropertyAction {
+ target: WebView
+ property: "smooth"
+ value: false
+ }
+ ParallelAnimation {
+ NumericAnimation {
+ target: WebView
+ properties: "zoomedOut"
+ easing: "easeInOutQuad"
+ duration: 200
+ }
+ NumericAnimation {
+ target: Flick
+ properties: "xPosition,yPosition"
+ easing: "easeInOutQuad"
+ duration: 200
+ }
+ }
+ SetPropertyAction {
+ target: WebView
+ property: "smooth"
+ value: true
+ }
+ }
+ }
+ ]
+}