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: (21 commits)
  Fix bug when adding import paths manually
  Update Comment
  Optimize QDeclarativeEngine::importExtension
  QGraphicsEffect : Don't rely on the exposedArea when rendering the item into the cache.
  Fix snapping in listview.
  Minor cleanup.
  Improve flipable example.
  Minor cleanup for visual test framework.
  VisibleArea is not a creatable type.
  More testing.
  Test openUrlExternally
  doc
  example of WebView onAlert, and of popups in general.
  Update examples/declarative.pro
  Update mouseX(Y) when clicking on a mouse area
  Declarative examples cleanup.
  Add test.
  doc
  Move gitignore to right level, update for Linux.
  Cleanup MouseArea visual tests.
  ...

15 files changed, 146 insertions, 64 deletions

diff --git a/examples/declarative/animations/property-animation.qml b/examples/declarative/animations/property-animation.qml
index 401feb5..fd5eb3c 100644
--- a/examples/declarative/animations/property-animation.qml
+++ b/examples/declarative/animations/property-animation.qml
@@ -40,7 +40,7 @@ Item {
         anchors.horizontalCenter: parent.horizontalCenter
         source: "images/face-smile.png"; y: minHeight
 
-        // Animate the y property. Setting repeat to true makes the
+        // Animate the y property. Setting loops to Animation.Infinite makes the
         // animation repeat indefinitely, otherwise it would only run once.
         SequentialAnimation on y {
             loops: Animation.Infinite
@@ -50,7 +50,7 @@ Item {
                 from: smiley.minHeight; to: smiley.maxHeight
                 easing.type: "OutExpo"; duration: 300
             }
-            
+
             // Then move back to minHeight in 1 second, using the OutBounce easing function
             NumberAnimation {
                 from: smiley.maxHeight; to: smiley.minHeight
diff --git a/examples/declarative/behaviours/SideRect.qml b/examples/declarative/behaviors/SideRect.qml
index 63b7db2..7caac45 100644
--- a/examples/declarative/behaviours/SideRect.qml
+++ b/examples/declarative/behaviors/SideRect.qml
@@ -5,10 +5,9 @@ Rectangle {
 
     property string text
 
-    color: "black"
-    width: 75; height: 50
-    radius: 5
-    border.width: 10; border.color: "white";
+    width: 75; height: 50; radius: 6
+    color: "#646464"; border.width: 4; border.color: "white"
+
     MouseArea {
         anchors.fill: parent
         hoverEnabled: true
diff --git a/examples/declarative/behaviours/behavior-example.qml b/examples/declarative/behaviors/behavior-example.qml
index c84bf62..8da1ada 100644
--- a/examples/declarative/behaviours/behavior-example.qml
+++ b/examples/declarative/behaviors/behavior-example.qml
@@ -1,15 +1,14 @@
 import Qt 4.6
 
 Rectangle {
-    color: "black"
-    width: 400; height: 400
+    color: "#343434"
+    width: 600; height: 400
 
     Rectangle {
-        color: "transparent"
         anchors.centerIn: parent
-        width: 200; height: 200
-        radius: 30
-        border.width: 10; border.color: "white";
+        width: 200; height: 200; radius: 30
+        color: "transparent"; border.width: 4; border.color: "white"
+
 
         SideRect {
             id: leftRect
@@ -45,27 +44,35 @@ Rectangle {
 
             property string text
 
-            color: "red"
-            width: 75; height: 50
-            radius: 5
-            border.width: 10; border.color: "white";
-            x: 100-37; y: 100-25
-            Behavior on x { NumberAnimation { duration: 300 } }
-            Behavior on y { NumberAnimation { duration: 300 } }
+            color: "firebrick"
+            x: 62.5; y: 75; width: 75; height: 50
+            radius: 6; border.width: 4; border.color: "white"
+
+            // Setting an 'elastic' behavior on the focusRect's x property.
+            Behavior on x {
+                NumberAnimation { easing.type: "OutElastic"; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
+            }
+
+            // Setting an 'elastic' behavior on the focusRect's y property.
+            Behavior on y {
+                NumberAnimation { easing.type: "OutElastic"; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
+            }
+
             Text {
                 id: focusText
-                text: focusRect.text;
+                text: focusRect.text
+                anchors.centerIn: parent
+                color: "white"; font.pixelSize: 16; font.bold: true
+
+                // Setting a behavior on the focusText's x property:
+                // Set the opacity to 0, set the new text value, then set the opacity back to 1.
                 Behavior on text {
                     SequentialAnimation {
                         NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 }
-                        PropertyAction {}
+                        PropertyAction { }
                         NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 150 }
                     }
                 }
-                anchors.centerIn: parent;
-                color: "white";
-                font.pixelSize: 16
-                font.bold: true
             }
         }
     }
diff --git a/examples/declarative/clocks/clocks.qml b/examples/declarative/clocks/clocks.qml
index 624748a..c5aa1dc 100644
--- a/examples/declarative/clocks/clocks.qml
+++ b/examples/declarative/clocks/clocks.qml
@@ -2,12 +2,11 @@ import Qt 4.6
 import "content"
 
 Rectangle {
-    width: childrenRect.width
-    height: childrenRect.height
+    width: 640; height: 240
     color: "#646464"
 
-    Grid {
-        columns: 3
+    Row {
+        anchors.centerIn: parent
         Clock { city: "New York"; shift: -4 }
         Clock { city: "Mumbai"; shift: 5.5 }
         Clock { city: "Tokyo"; shift: 9 }
diff --git a/examples/declarative/clocks/content/Clock.qml b/examples/declarative/clocks/content/Clock.qml
index 75a1cf5..90c6be8 100644
--- a/examples/declarative/clocks/content/Clock.qml
+++ b/examples/declarative/clocks/content/Clock.qml
@@ -74,7 +74,7 @@ Item {
     }
 
     Text {
-        id: cityLabel; font.bold: true; font.pixelSize: 14; y:200; color: "white"
-        anchors.horizontalCenter: parent.horizontalCenter
+        id: cityLabel; font.bold: true; font.pixelSize: 14; y: 200; color: "white"
+        anchors.horizontalCenter: parent.horizontalCenter; style: Text.Raised; styleColor: "black"
     }
 }
diff --git a/examples/declarative/declarative.pro b/examples/declarative/declarative.pro
index 0f58738..5fc1cf0 100644
--- a/examples/declarative/declarative.pro
+++ b/examples/declarative/declarative.pro
@@ -12,7 +12,7 @@ SUBDIRS = \
 sources.files = \
    animations \
    aspectratio \
-   behaviours \
+   behaviors \
    border-image \
    clocks \
    connections \
diff --git a/examples/declarative/flipable/back.png b/examples/declarative/flipable/back.png
deleted file mode 100644
index 0b4cafc..0000000
--- a/examples/declarative/flipable/back.png
+++ /dev/null
diff --git a/examples/declarative/flipable/content/5_heart.png b/examples/declarative/flipable/content/5_heart.png
new file mode 100644
index 0000000..fb59d81
--- /dev/null
+++ b/examples/declarative/flipable/content/5_heart.png
diff --git a/examples/declarative/flipable/content/9_club.png b/examples/declarative/flipable/content/9_club.png
new file mode 100644
index 0000000..2545001
--- /dev/null
+++ b/examples/declarative/flipable/content/9_club.png
diff --git a/examples/declarative/flipable/content/Card.qml b/examples/declarative/flipable/content/Card.qml
new file mode 100644
index 0000000..6b8fa69
--- /dev/null
+++ b/examples/declarative/flipable/content/Card.qml
@@ -0,0 +1,38 @@
+import Qt 4.6
+
+Flipable {
+    id: container
+
+    property alias image: frontImage.source
+    property bool flipped: true
+    property int xAxis: 0
+    property int yAxis: 0
+    property int angle: 0
+
+    width: front.width; height: front.height; state: "back"
+
+    front: Image { id: frontImage; smooth: true }
+    back: Image { source: "back.png"; smooth: true }
+
+    MouseArea { anchors.fill: parent; onClicked: container.flipped = !container.flipped }
+
+    transform: Rotation {
+        id: rotation; origin.x: container.width / 2; origin.y: container.height / 2
+        axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0
+    }
+
+    states: State {
+        name: "back"; when: container.flipped
+        PropertyChanges { target: rotation; angle: container.angle }
+    }
+
+    transitions: Transition {
+        ParallelAnimation {
+            NumberAnimation { target: rotation; properties: "angle"; duration: 600 }
+            SequentialAnimation {
+                NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 }
+                NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/flipable/content/back.png b/examples/declarative/flipable/content/back.png
new file mode 100644
index 0000000..f715d74
--- /dev/null
+++ b/examples/declarative/flipable/content/back.png
diff --git a/examples/declarative/flipable/flipable-example.qml b/examples/declarative/flipable/flipable-example.qml
index c837ebc..eebc721 100644
--- a/examples/declarative/flipable/flipable-example.qml
+++ b/examples/declarative/flipable/flipable-example.qml
@@ -1,37 +1,13 @@
-//! [0]
 import Qt 4.6
+import "content"
 
-Flipable {
-    id: flipable
-    width: 240
-    height: 240
+Rectangle {
+    id: window; width: 480; height: 320
+    color: "darkgreen"
 
-    property int angle: 0
-    property bool flipped: false
-
-    front: Image { source: "front.png" }
-    back: Image { source: "back.png" }
-
-    transform: Rotation {
-        origin.x: flipable.width/2; origin.y: flipable.height/2
-        axis.x: 0; axis.y: 1; axis.z: 0     // rotate around y-axis
-        angle: flipable.angle
-    }
-
-    states: State {
-        name: "back"
-        PropertyChanges { target: flipable; angle: 180 }
-        when: flipable.flipped
-    }
-
-    transitions: Transition {
-        NumberAnimation { properties: "angle"; duration: 1000 }
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: flipable.flipped = !flipable.flipped
+    Row {
+        anchors.centerIn: parent; spacing: 30
+        Card { image: "content/9_club.png"; angle: 180; yAxis: 1 }
+        Card { image: "content/5_heart.png"; angle: 540; xAxis: 1 }
     }
 }
-//! [0]
-
diff --git a/examples/declarative/flipable/front.png b/examples/declarative/flipable/front.png
deleted file mode 100644
index 796b605..0000000
--- a/examples/declarative/flipable/front.png
+++ /dev/null
diff --git a/examples/declarative/webview/alerts.html b/examples/declarative/webview/alerts.html
new file mode 100644
index 0000000..82caddf
--- /dev/null
+++ b/examples/declarative/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/webview/alerts.qml b/examples/declarative/webview/alerts.qml
new file mode 100644
index 0000000..ab2e860
--- /dev/null
+++ b/examples/declarative/webview/alerts.qml
@@ -0,0 +1,58 @@
+import Qt 4.6
+import org.webkit 1.0
+
+WebView {
+    id: webView
+    onAlert: popup.show(message)
+    width: 120
+    height: 150
+    url: "alerts.html"
+
+    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
+            wrap: true
+            horizontalAlignment: "AlignHCenter"
+        }
+    }
+}