Clean up

8 files changed, 277 insertions, 98 deletions

diff --git a/examples/declarative/animation/animation.qml b/examples/declarative/animation/animation.qml
index ccfe164..31c75e1 100644
--- a/examples/declarative/animation/animation.qml
+++ b/examples/declarative/animation/animation.qml
@@ -4,17 +4,20 @@ Rectangle {
     width: 400
     height: 200
     color: "white"
+
     Rectangle {
         width: 40
         height: 40
         y: 80
         color: "#FF0000"
         radius: 10
+
         // Animate the x property.  Setting repeat to true makes the
         // animation repeat indefinitely, otherwise it would only run once.
         x: SequentialAnimation {
             running: true
             repeat: true
+
             // Move from 0 to 360 in 500ms, using the easeInOutQuad easing function
             NumberAnimation {
                 from: 0
@@ -22,10 +25,12 @@ Rectangle {
                 easing: "easeInOutQuad"
                 duration: 500
             }
+            
             // Then pause for 200ms
             PauseAnimation {
                 duration: 200
             }
+
             // Then move back to 0 in 2 seconds, using the easeInOutElastic easing function
             NumberAnimation {
                 from: 360
@@ -34,16 +39,19 @@ Rectangle {
                 duration: 2000
             }
         }
+
         // Alternate color between red and green
         color: SequentialAnimation {
             running: true
             repeat: true
+
             ColorAnimation {
                 property: "color"
                 from: "#FF0000"
                 to: "#00FF00"
                 duration: 5000
             }
+
             ColorAnimation {
                 property: "color"
                 from: "#00FF00"
diff --git a/examples/declarative/connections/connections.qml b/examples/declarative/connections/connections.qml
index 521cc01..b693b7e 100644
--- a/examples/declarative/connections/connections.qml
+++ b/examples/declarative/connections/connections.qml
@@ -5,6 +5,7 @@ Rectangle {
     color: "blue"
     width: 40
     height: 30
+
     Rectangle {
         id: dot
         color: "red"
@@ -13,19 +14,19 @@ Rectangle {
         x: rect.width/2
         y: rect.height/2
     }
+
     MouseRegion {
         id: mr
         anchors.fill: rect
     }
+
     Connection {
         sender: mr
         signal: "clicked(mouse)"
         script: { 
-        
-                color="green";
-                dot.x = mouse.x-1;
-                dot.y = mouse.y-1;
-            
+            color = "green";
+            dot.x = mouse.x-1;
+            dot.y = mouse.y-1;
         }
     }
 }
diff --git a/examples/declarative/dynamic/dynamic.js b/examples/declarative/dynamic/dynamic.js
index 8f1e138..8bfdba3 100644
--- a/examples/declarative/dynamic/dynamic.js
+++ b/examples/declarative/dynamic/dynamic.js
@@ -2,54 +2,56 @@ var dynamicObject = null;
 var fourthBox = null;
 var component = null;
 var started = false;
+
 function createQml(p) {
-    return createQmlObject('DynRect {}',p,'DynPart.qml');
+    return createQmlObject('DynRect {}', p, 'DynPart.qml');
 }
 
 function destroyDynamicObject() {
-    if(!(dynamicObject==null)){
+    if (!(dynamicObject == null)) {
         dynamicObject.destroy();
         dynamicObject = null;
     }
 }
 
 function instantCreateWithComponent() {//Like create, but assumes instant readyness
-    if(dynamicObject!=null)//Already made
+    if (dynamicObject != null)//Already made
         return null;
     component = createComponent("dynamic.qml");
     dynamicObject = component.createObject();
-    if(dynamicObject == null){
+
+    if (dynamicObject == null) {
         print("error creating component");
-    }else{
+    } else {
         dynamicObject.parent = targetItem;
         return dynamicObject;
     }
     return null;
 }
 
-function finishCreation(){
-    if(component.isReady && dynamicObject == null){
+function finishCreation() {
+    if (component.isReady && dynamicObject == null) {
         dynamicObject = component.createObject();
         dynamicObject.parent = targetItem;
-    }else if(component.isError){
+    } else if (component.isError) {
         dynamicObject = null;
         print("error creating component");
         print(component.errorsString());
     }
 }
 
-function createWithComponent(){
-    if(component!=null){
+function createWithComponent() {
+    if (component != null) {
         return finishCreation();
     }
-    if(started!=false){
+    if (started != false) {
         finishCreation();//Remakes if destroyed
         return dynamicObject;
     }
     started = true;
     component = createComponent("dynamic.qml");
     finishCreation();
-    if(dynamicObject != null){
+    if (dynamicObject != null) {
         return dynamicObject;
     }
     component.statusChanged.connect(finishCreation);
diff --git a/examples/declarative/dynamic/dynamic.qml b/examples/declarative/dynamic/dynamic.qml
index 6ea7ab8..66fdf87 100644
--- a/examples/declarative/dynamic/dynamic.qml
+++ b/examples/declarative/dynamic/dynamic.qml
@@ -1,22 +1,55 @@
 import Qt 4.6
 
-Rectangle { id: page; width: 800; height: 800; color:"black"
+Rectangle {
+    id: page
+    width: 800
+    height: 800 
+    color: "black"
     Script { source: "dynamic.js" }
-    property bool extendStars: false;
+
+    property bool extendStars: false
+
     Item { id: targetItem; x: 100; y: 100; }
     Item { id: targetItem2; x: 0; y: 300; }
-    Rectangle { width: 100; height: 100; color: "green"; id: rect
-        MouseRegion { anchors.fill:parent; onClicked: {a = createWithComponent();}}
+
+    Rectangle {
+        id: rect
+        width: 100
+        height: 100
+        color: "green"
+
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { a = createWithComponent(); }
+        }
     }
-    Rectangle { width: 100; height: 100; color: "red"; id: rect2; y:100;
-        MouseRegion { anchors.fill:parent; onClicked: {destroyDynamicObject();}}
+
+    Rectangle {
+        id: rect2
+        width: 100
+        height: 100
+        y: 100
+        color: "red"
+
+        MouseRegion {
+            anchors.fill:parent
+            onClicked: { destroyDynamicObject(); }
+        }
     }
-    Rectangle { width: 100; height: 100; color: "blue"; id: rect3; y:200;
-        MouseRegion { anchors.fill:parent; onClicked: 
-            { 
-                if(fourthBox == null) {
+
+    Rectangle {
+        id: rect3
+        width: 100
+        height: 100
+        y: 200
+        color: "blue"
+
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { 
+                if (fourthBox == null) {
                     a = createQml(targetItem2);
-                    if(a!=null) {
+                    if (a != null) {
                         a.parent = targetItem2;//BUG: this should happen automatically
                         fourthBox = a;
                         print(a.toStr());
@@ -31,5 +64,14 @@ Rectangle { id: page; width: 800; height: 800; color:"black"
             }
         }
     }
-    Particles { x:0; y:0; count:20; lifeSpan:500; width:100; height: if(extendStars){400;}else{300;} source:"star.png"}
+
+    Particles {
+        x: 0 
+        y: 0
+        count: 20
+        lifeSpan: 500
+        width: 100
+        height: if (extendStars) { 400; } else { 300; }
+        source: "star.png"
+    }
 }
diff --git a/examples/declarative/effects/test.qml b/examples/declarative/effects/test.qml
index 83bfde2..73c6839 100644
--- a/examples/declarative/effects/test.qml
+++ b/examples/declarative/effects/test.qml
@@ -2,89 +2,108 @@ import Qt 4.6
 
 Rectangle {
     color: "white"
-    width: 800
+    width: 600
     height: 600
 
     Image {
+        id: blur
         source: "pic.jpg"
 
         effect: Blur {
-            blurRadius: NumberAnimation { id: blur; from: 0; to: 10; duration: 200; repeat: true }
+            blurRadius: NumberAnimation {
+                id: blurEffect
+                from: 0; to: 10
+                duration: 200
+                repeat: true
+            }
         }
 
-        MouseRegion { anchors.fill: parent; onClicked: blur.running = !blur.running }
-
-        Text { color: "white"; text: "Blur" }
+        MouseRegion { anchors.fill: parent; onClicked: blurEffect.running = !blurEffect.running }
     }
 
+    Text { text: "Blur"; anchors.top: blur.bottom; anchors.horizontalCenter: blur.horizontalCenter }
+
     Image {
+        id: grayscale
         source: "pic.jpg"
-
         x: 200
-        effect: Grayscale {}
 
-        Text { color: "white"; text: "Grayscale" }
+        effect: Grayscale {}
     }
 
+    Text { text: "Grayscale"; anchors.top: grayscale.bottom; anchors.horizontalCenter: grayscale.horizontalCenter }
+
     Image {
+        id: colorize
         source: "pic.jpg"
-
         x: 400
-        effect: Colorize { color: "blue" }
 
-        Text { color: "white"; text: "Colorize" }
+        effect: Colorize { color: "blue" }
     }
 
+    Text { text: "Colorize"; anchors.top: colorize.bottom; anchors.horizontalCenter: colorize.horizontalCenter }
+
     Image {
+        id: pixelize
         source: "pic.jpg"
-
         y: 300
+
         effect: Pixelize {
-            pixelSize: NumberAnimation { id: pixelize; from: 0; to: 10; duration: 200; repeat: true }
+            pixelSize: NumberAnimation {
+                id: pixelizeEffect
+                from: 0; to: 10
+                duration: 200
+                repeat: true
+            }
         }
 
-        MouseRegion { anchors.fill: parent; onClicked: pixelize.running = !pixelize.running }
-
-        Text { color: "white"; text: "Pixelize" }
+        MouseRegion { anchors.fill: parent; onClicked: pixelizeEffect.running = !pixelizeEffect.running }
     }
 
+    Text { text: "Pixelize"; anchors.top: pixelize.bottom; anchors.horizontalCenter: pixelize.horizontalCenter }
 
     Image {
+        id: dropShadow
         source: "pic.jpg"
-
         x: 200
         y: 300
+
         effect: DropShadow {
             blurRadius: 3
             offset.x: 3
-            offset.y: NumberAnimation { id: dropShadow; from: 0; to: 10; duration: 200; repeat: true; }
+            offset.y: NumberAnimation { id: dropShadowEffect; from: 0; to: 10; duration: 200; repeat: true; }
         }
 
-        MouseRegion { anchors.fill: parent; onClicked: dropShadow.running = !dropShadow.running }
-
-        Text { color: "white"; text: "DropShadow" }
+        MouseRegion { anchors.fill: parent; onClicked: dropShadowEffect.running = !dropShadowEffect.running }
     }
 
+    Text { text: "Drop Shadow"; anchors.top: dropShadow.bottom; anchors.horizontalCenter: dropShadow.horizontalCenter }
 
     Image {
+        id: bloom
         source: "pic.jpg"
-
         x: 400
         y: 300
+
         effect: Bloom {
             blurRadius: 3
             brightness: 128
-            strength: NumberAnimation { id: bloom; from: 0; to: 1; duration: 200; repeat: true; }
+            strength: NumberAnimation {
+                id: bloomEffect
+                from: 0; to: 1
+                duration: 200
+                repeat: true
+            }
         }
 
-        MouseRegion { anchors.fill: parent; onClicked: bloom.running = !bloom.running }
-
-        Text { color: "white"; text: "Bloom" }
+        MouseRegion { anchors.fill: parent; onClicked: bloomEffect.running = !bloomEffect.running }
     }
 
+    Text { text: "Bloom"; anchors.top: bloom.bottom; anchors.horizontalCenter: bloom.horizontalCenter }
+
     Text {
         x: 100; y: 250
-        text: "Clicking Blur, Pixelize or DropShadow will \ntoggle animation."
+        text: "Clicking Blur, Pixelize, Drop Shadow or Bloom will \ntoggle animation."
         color: "black"
     }
 
diff --git a/examples/declarative/layouts/Button.qml b/examples/declarative/layouts/Button.qml
index 6c2fd8d..186512b 100644
--- a/examples/declarative/layouts/Button.qml
+++ b/examples/declarative/layouts/Button.qml
@@ -1,20 +1,35 @@
 import Qt 4.6
-Rectangle { border.color: "black"; color: "steelblue"; radius: 5; width: pix.width + text.width + 13; height: pix.height + 10; id: page
+Rectangle {
+    id: page
+    border.color: "black"
+    color: "steelblue"
+    radius: 5
+    width: pix.width + text.width + 13
+    height: pix.height + 10
+
     property string text
     property string icon
     signal clicked
+
     Image { id: pix; x: 5; y:5; source: parent.icon}
+
     Text { id: text; text: page.text; color: "white"; x:pix.width+pix.x+3; anchors.verticalCenter: pix.verticalCenter;}
-    MouseRegion{ id:mr; anchors.fill: parent; onClicked: {parent.focus = true; page.clicked()}}
+
+    MouseRegion {
+        id: mr
+        anchors.fill: parent
+        onClicked: { parent.focus = true; page.clicked() }
+    }
 
     states:
-        State{ name:"pressed"; when:mr.pressed
-            PropertyChanges {target:text; x: 5}
-            PropertyChanges {target:pix; x:text.x+text.width + 3}
+        State {
+            name: "pressed"; when: mr.pressed
+            PropertyChanges { target:text; x: 5 }
+            PropertyChanges { target:pix; x:text.x+text.width + 3 }
         }
 
     transitions:
         Transition{
-            NumberAnimation{ properties:"x,left"; easing:"easeInOutQuad"; duration:200 }
+            NumberAnimation { properties:"x,left"; easing:"easeInOutQuad"; duration:200 }
         }
 }
diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml
index b54a7f3..accd969 100644
--- a/examples/declarative/layouts/layouts.qml
+++ b/examples/declarative/layouts/layouts.qml
@@ -1,20 +1,25 @@
 import Qt 4.6
 
-Item { id: resizable
-    width:400; height:400;
-    GraphicsObjectContainer{
+Item {
+    id: resizable
+    width:400
+    height:400
+
+    GraphicsObjectContainer {
         anchors.fill:parent
-        QGraphicsWidget{
+
+        QGraphicsWidget {
             size.width:parent.width
             size.height:parent.height
-            layout: QGraphicsLinearLayout{   
-                LayoutItem{
+
+            layout: QGraphicsLinearLayout {
+                LayoutItem {
                     minimumSize: "100x100"
                     maximumSize: "300x300"
                     preferredSize: "100x100"
                     Rectangle { color: "yellow"; anchors.fill: parent }
                 }
-                LayoutItem{
+                LayoutItem {
                     minimumSize: "100x100"
                     maximumSize: "400x400"
                     preferredSize: "200x200"
diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml
index fe28105..90efde2 100644
--- a/examples/declarative/layouts/positioners.qml
+++ b/examples/declarative/layouts/positioners.qml
@@ -1,43 +1,130 @@
 import Qt 4.6
-Rectangle { width: 420; height: 420; id:page; color:"white"
-    Column { id: layout1; y:0; //width: 100; height:250;
-        move: Transition{ NumberAnimation {properties: "y"; easing: "easeOutBounce" }}
-        add: Transition{ NumberAnimation { properties: "y"; from: 500; duration:500; easing: "easeOutQuad"}}
-        remove: Transition { NumberAnimation { properties:"y"; to: 500; duration:500; easing: "easeInQuad"}}
-        Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
-        Rectangle { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 
-            //opacity: Behavior{ NumberAnimation {}}
+
+Rectangle {
+    id: page
+    width: 420
+    height: 420
+    color: "white"
+
+    Column {
+        id: layout1
+        y: 0
+        move: Transition {
+            NumberAnimation {
+                properties: "y"; easing: "easeOutBounce"
+            }
         }
-        Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 }
-        Rectangle { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 
-            //opacity: Behavior{ NumberAnimation {}}
+        add: Transition {
+            NumberAnimation {
+                properties: "y"; from: 500; duration:500; easing: "easeOutQuad"
+            }
         }
+        remove: Transition {
+            NumberAnimation {
+                properties:"y"; to: 500; duration:500; easing: "easeInQuad"
+            }
+        }
+        Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
+        Rectangle { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 }
+        Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 }
+        Rectangle { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 }
         Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 }
     }
-    Row { id: layout2; y:300; 
-        move: Transition{ NumberAnimation {properties: "x"; easing: "easeOutBounce" }}
-        add: Transition{ NumberAnimation {  properties: "x"; from: 500; duration:500; easing: "easeOutQuad"}
-                    NumberAnimation {  properties: "opacity"; from: 0;  duration: 500;}}
-        remove: Transition { NumberAnimation { properties: "x"; to: 500; duration:500; easing: "easeInQuad"}
-                    NumberAnimation {  properties: "opacity"; from: 1; duration: 500}}
+
+    Row {
+        id: layout2
+        y: 300 
+        move: Transition {
+            NumberAnimation {
+                properties: "x"; easing: "easeOutBounce"
+            }
+        }
+        add: Transition {
+            NumberAnimation {
+                properties: "x"; from: 500; duration:500; easing: "easeOutQuad"
+            }
+            NumberAnimation {
+                properties: "opacity"; from: 0;  duration: 500;
+            }
+        }
+        remove: Transition {
+            NumberAnimation {
+                properties: "x"; to: 500; duration:500; easing: "easeInQuad"
+            }
+            NumberAnimation {
+                properties: "opacity"; from: 1; duration: 500
+            }
+        }
         Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
         Rectangle { id: blueH1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
         Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
         Rectangle { id: blueH2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
         Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
     }
-    Button { text: "Remove"; icon: "del.png"; x: 135; y:90;
-        onClicked: {blueH2.opacity=0; blueH1.opacity=0; blueV1.opacity=0; blueV2.opacity=0; blueG1.opacity=0; blueG2.opacity=0; blueG3.opacity=0;}
-        }
-    Button { text: "Add"; icon: "add.png"; x: 145; y:140;
-        onClicked: {blueH2.opacity=1; blueH1.opacity=1; blueV1.opacity=1; blueV2.opacity=1; blueG1.opacity=1; blueG2.opacity=1; blueG3.opacity=1;}
-        }
-    Grid { x:260; y:0; columns:3
-        remove: Transition { NumberAnimation{ properties: "opacity"; from: 1; to: 0; duration: 500}
-           NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} }
-        move: Transition { NumberAnimation{ properties: "x,y"; easing: "easeOutBounce" }}
-        add: Transition { NumberAnimation{ properties: "opacity"; from: 0; to: 1; duration: 500}
-           NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} }
+
+    Button {
+        text: "Remove"
+        icon: "del.png"
+        x: 135
+        y: 90
+
+        onClicked: {
+            blueH2.opacity = 0
+            blueH1.opacity = 0
+            blueV1.opacity = 0
+            blueV2.opacity = 0
+            blueG1.opacity = 0
+            blueG2.opacity = 0
+            blueG3.opacity = 0
+        }
+    }
+
+    Button {
+        text: "Add"
+        icon: "add.png"
+        x: 145
+        y: 140
+
+        onClicked: {
+            blueH2.opacity = 1
+            blueH1.opacity = 1
+            blueV1.opacity = 1
+            blueV2.opacity = 1
+            blueG1.opacity = 1
+            blueG2.opacity = 1
+            blueG3.opacity = 1
+        }
+    }
+
+    Grid {
+        x: 260
+        y: 0
+        columns: 3
+
+        remove: Transition {
+            NumberAnimation {
+                properties: "opacity"; from: 1; to: 0; duration: 500
+            }
+            NumberAnimation {
+                properties: "x,y"; easing: "easeOutBounce"
+            }
+        }
+
+        move: Transition {
+            NumberAnimation {
+                properties: "x,y"; easing: "easeOutBounce"
+            }
+        }
+
+        add: Transition {
+            NumberAnimation {
+                properties: "opacity"; from: 0; to: 1; duration: 500
+            }
+            NumberAnimation {
+                properties: "x,y"; easing: "easeOutBounce"
+            }
+        }
+
         Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
         Rectangle { id: blueG1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
         Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }