Update dynamic example

The start of a prettier version. Not yet complete, does not full resolve
the task.

Task-number: QT-2270

9 files changed, 188 insertions, 128 deletions

diff --git a/examples/declarative/dynamic/DynRect.qml b/examples/declarative/dynamic/DynRect.qml
deleted file mode 100644
index 06141ea..0000000
--- a/examples/declarative/dynamic/DynRect.qml
+++ /dev/null
@@ -1,9 +0,0 @@
-import Qt 4.6
-
-Item {
-    states: State{ name: "dying"; PropertyChanges{ target: newRect; opacity: 0 } }
-    transitions: Transition{ 
-        NumberAnimation{ properties: "opacity"; target: newRect; duration:500 } 
-    }
-    Rectangle {color: "steelblue"; width: 100; height: 100; id: newRect }
-}
diff --git a/examples/declarative/dynamic/Sun.qml b/examples/declarative/dynamic/Sun.qml
new file mode 100644
index 0000000..16d9907
--- /dev/null
+++ b/examples/declarative/dynamic/Sun.qml
@@ -0,0 +1,22 @@
+import Qt 4.6
+
+Image {
+    id: sun
+    property bool created: false
+    onCreatedChanged: if(created){window.activeSuns++;}else{window.activeSuns--;}
+
+    source: "images/sun.png"; 
+
+    //x and y get set when instantiated
+    //head offscreen
+    y: NumberAnimation {
+        to: parent.height;
+        duration: 10000;
+        running: created
+    }
+
+    states: State {
+        name: "OffScreen"; when: created && y > window.height/2;//Below the ground
+        StateChangeScript { script: { sun.created = false; sun.destroy() } }
+    }
+}
diff --git a/examples/declarative/dynamic/dynamic.js b/examples/declarative/dynamic/dynamic.js
deleted file mode 100644
index 8bfdba3..0000000
--- a/examples/declarative/dynamic/dynamic.js
+++ /dev/null
@@ -1,59 +0,0 @@
-var dynamicObject = null;
-var fourthBox = null;
-var component = null;
-var started = false;
-
-function createQml(p) {
-    return createQmlObject('DynRect {}', p, 'DynPart.qml');
-}
-
-function destroyDynamicObject() {
-    if (!(dynamicObject == null)) {
-        dynamicObject.destroy();
-        dynamicObject = null;
-    }
-}
-
-function instantCreateWithComponent() {//Like create, but assumes instant readyness
-    if (dynamicObject != null)//Already made
-        return null;
-    component = createComponent("dynamic.qml");
-    dynamicObject = component.createObject();
-
-    if (dynamicObject == null) {
-        print("error creating component");
-    } else {
-        dynamicObject.parent = targetItem;
-        return dynamicObject;
-    }
-    return null;
-}
-
-function finishCreation() {
-    if (component.isReady && dynamicObject == null) {
-        dynamicObject = component.createObject();
-        dynamicObject.parent = targetItem;
-    } else if (component.isError) {
-        dynamicObject = null;
-        print("error creating component");
-        print(component.errorsString());
-    }
-}
-
-function createWithComponent() {
-    if (component != null) {
-        return finishCreation();
-    }
-    if (started != false) {
-        finishCreation();//Remakes if destroyed
-        return dynamicObject;
-    }
-    started = true;
-    component = createComponent("dynamic.qml");
-    finishCreation();
-    if (dynamicObject != null) {
-        return dynamicObject;
-    }
-    component.statusChanged.connect(finishCreation);
-    return null;
-}
diff --git a/examples/declarative/dynamic/dynamic.qml b/examples/declarative/dynamic/dynamic.qml
index 2c6a8e0..aea9b0f 100644
--- a/examples/declarative/dynamic/dynamic.qml
+++ b/examples/declarative/dynamic/dynamic.qml
@@ -1,79 +1,116 @@
 import Qt 4.6
 
-Rectangle {
-    id: page
-    width: 800
-    height: 800 
-    color: "black"
-    Script { source: "dynamic.js" }
+Item {
+    id: window
+    //This is a desktop example
+    width: 1024; height: 480
+    property int activeSuns: 0
 
-    property bool extendStars: false
-    property var fourthBox: undefined
-
-    Item { id: targetItem; x: 100; y: 100; }
-    Item { id: targetItem2; x: 0; y: 300; }
+    // sky
+    Rectangle { id: sky
+        anchors { left: parent.left; top: parent.top; right: toolbox.right; bottom: parent.verticalCenter }
+        gradient: Gradient {
+            GradientStop { id: stopA; position: 0.0; color: "#0E1533" }
+            GradientStop { id: stopB; position: 1.0; color: "#437284" }
+        }
+    }
 
-    Rectangle {
-        id: rect
-        width: 100
-        height: 100
-        color: "green"
+    // stars (when there's no sun)
+    Particles { id: stars
+        x: 0; y: 0; width: parent.width; height: parent.height/2
+        source: "images/star.png"; angleDeviation: 360; velocity: 0
+        velocityDeviation: 0; count: parent.width / 10; fadeInDuration: 2800
+        opacity: 1
+    }
 
-        MouseRegion {
-            anchors.fill: parent
-            onClicked: { var a = createWithComponent(); }
+    // ground, which has a z such that the sun can set behind it
+    Rectangle { id: ground
+        z: 2
+        anchors { left: parent.left; top: parent.verticalCenter; right: toolbox.right; bottom: parent.bottom }
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "ForestGreen" }
+            GradientStop { position: 1.0; color: "DarkGreen" }
         }
     }
 
-    Rectangle {
-        id: rect2
-        width: 100
-        height: 100
-        y: 100
-        color: "red"
+    states: State { name: "Day"; when: window.activeSuns > 0
+        PropertyChanges { target: stopA; color: "DeepSkyBlue"}
+        PropertyChanges { target: stopB; color: "SkyBlue"}
+        PropertyChanges { target: stars; opacity: 0 }
+    }
 
-        MouseRegion {
-            anchors.fill:parent
-            onClicked: { destroyDynamicObject(); }
-        }
+    transitions: Transition {
+        PropertyAnimation { duration: 3000 }
+        ColorAnimation { duration: 3000 }
     }
 
+    //TODO: Below feature needs beautification to meet minimum standards
+    // toolbox
     Rectangle {
-        id: rect3
-        width: 100
-        height: 100
-        y: 200
-        color: "blue"
+        id: toolbox
+        z: 3 //Above ground
+        color: "white"
+        width: 480
+        anchors { right: parent.right; top:parent.top; bottom: parent.bottom }
+        Column{
+            id: toolboxPositioner
+            anchors.centerIn: parent
+            spacing: 1
+            Sun {
+                id: sunButton
+                Script { source: "sunCreation.js" }
+                MouseRegion { 
+                    anchors.fill: parent; 
+                    onPressed: startDrag(mouse);
+                    onPositionChanged: moveDrag(mouse);
+                    onReleased: endDrag(mouse);
+                }
+            }
+            Text{ text: "Active Suns: " + activeSuns }
+            Rectangle { width: 440; height: 1; color: "black" }
+            Text{ text: "Arbitrary Javascript: " }
+            TextEdit {
+                id: jsText
+                width: 460
+                height: 80
+                readOnly: false
+                focusOnPress: true
+                
+                text: "window.activeSuns++;"
+            }
+            Rectangle {
+                width: 80
+                height: 20
+                color: "lightsteelblue"
+                Text{ anchors.centerIn: parent; text: "Execute" }
+                MouseRegion { 
+                    anchors.fill: parent; 
+                    onClicked: eval(jsText.text.toString()); 
+                }
+            }
 
-        MouseRegion {
-            anchors.fill: parent
-            onClicked: { 
-                if (fourthBox == null || fourthBox == undefined) {
-                    var a = createQml(targetItem2);
-                    if (a != null) {
-                        a.parent = targetItem2;//BUG: this should happen automatically
-                        fourthBox = a;
-                        print(a.toStr());
-                        extendStars = true;
-                    }
-                } else {
-                    fourthBox.state = 'dying';
-                    fourthBox.destroy(500);
-                    fourthBox = null;
-                    extendStars = false;
+            Rectangle { width: 440; height: 1; color: "black" }
+            Text{ text: "Arbitrary QML: " }
+            TextEdit {
+                id: qmlText
+                width: 460
+                height: 180
+                readOnly: false
+                focusOnPress: true
+                
+                text: "import Qt 4.6\nImage { id: smile; x: 10; y: 10; \n  source: 'images/face-smile.png';\n  opacity: NumberAnimation{ \n    running:true; to: 0; duration: 1500;\n  }\n   Component.onCompleted: smile.destroy(1500);\n}"
+            }
+            Rectangle {
+                width: 80
+                height: 20
+                color: "lightsteelblue"
+                Text{ anchors.centerIn: parent; text: "Create" }
+                MouseRegion { 
+                    anchors.fill: parent; 
+                    onClicked: {var obj=createQmlObject(qmlText.text, window, 'CustomObject'); obj.parent=window;}
                 }
             }
         }
     }
 
-    Particles {
-        x: 0 
-        y: 0
-        z: 10
-        count: 20
-        lifeSpan: 500
-        width: 100
-        height: if (extendStars) { 400; } else { 300; }
-        source: "star.png"
-    }
 }
diff --git a/examples/declarative/dynamic/images/face-smile.png b/examples/declarative/dynamic/images/face-smile.png
new file mode 100644
index 0000000..3d66d72
--- /dev/null
+++ b/examples/declarative/dynamic/images/face-smile.png
diff --git a/examples/declarative/dynamic/images/star.png b/examples/declarative/dynamic/images/star.png
new file mode 100644
index 0000000..27ef924
--- /dev/null
+++ b/examples/declarative/dynamic/images/star.png
diff --git a/examples/declarative/dynamic/images/sun.png b/examples/declarative/dynamic/images/sun.png
new file mode 100644
index 0000000..7713ca5
--- /dev/null
+++ b/examples/declarative/dynamic/images/sun.png
diff --git a/examples/declarative/dynamic/star.png b/examples/declarative/dynamic/star.png
deleted file mode 100644
index defbde5..0000000
--- a/examples/declarative/dynamic/star.png
+++ /dev/null
diff --git a/examples/declarative/dynamic/sunCreation.js b/examples/declarative/dynamic/sunCreation.js
new file mode 100644
index 0000000..d9e5dce
--- /dev/null
+++ b/examples/declarative/dynamic/sunCreation.js
@@ -0,0 +1,69 @@
+var sunComponent = null;
+var draggedItem = null;
+var startingMouse;
+//Until QT-2385 is resolved we need to convert to scene coordinates manually
+var xOffset;
+var yOffset;
+
+function startDrag(mouse)
+{
+    xOffset = toolbox.x + toolboxPositioner.x;
+    yOffset = toolbox.y + toolboxPositioner.y;
+    startingMouse = mouse;
+    loadComponent();
+}
+
+//Creation is split into two functions due to an asyncronous wait while
+//possible external files are loaded.
+
+function loadComponent() {
+    if (sunComponent != null) //Already loaded the component
+        createSun();
+
+    sunComponent = createComponent("Sun.qml");
+    if(sunComponent.isLoading){
+        component.statusChanged.connect(finishCreation);
+    }else{//Depending on the content, it can be ready or error immediately
+        createSun();
+    }
+}
+
+function createSun() {
+    if (sunComponent.isReady && draggedItem == null) {
+        draggedItem = sunComponent.createObject();
+        draggedItem.parent = window;
+        draggedItem.x = startingMouse.x + xOffset;
+        draggedItem.y = startingMouse.y + yOffset;
+        draggedItem.z = 4;//On top
+    } else if (sunComponent.isError) {
+        draggedItem = null;
+        print("error creating component");
+        print(component.errorsString());
+    }
+}
+
+function moveDrag(mouse)
+{
+    if(draggedItem == null)
+        return;
+
+    draggedItem.x = mouse.x + xOffset;
+    draggedItem.y = mouse.y + yOffset;
+}
+
+function endDrag(mouse)
+{
+    if(draggedItem == null)
+        return;
+
+    if(draggedItem.x + draggedItem.width > toolbox.x //Don't drop it in the toolbox
+        || draggedItem.y > ground.y){//Don't drop it on the ground
+        draggedItem.destroy();
+        draggedItem = null;
+    }else{
+        draggedItem.z = 1;
+        draggedItem.created = true;
+        draggedItem = null;
+    }
+}
+