Start documenting coding conventions

Task-number: QT-2845

6 files changed, 136 insertions, 0 deletions

diff --git a/doc/src/snippets/declarative/codingconventions/dotproperties.qml b/doc/src/snippets/declarative/codingconventions/dotproperties.qml
new file mode 100644
index 0000000..211cac1
--- /dev/null
+++ b/doc/src/snippets/declarative/codingconventions/dotproperties.qml
@@ -0,0 +1,28 @@
+import Qt 4.6
+
+Item {
+
+//! [0]
+Rectangle {
+    anchors.left: parent.left; anchors.top: parent.top; anchors.right: parent.right; anchors.leftMargin: 20
+}
+
+Text {
+    text: "hello"
+    font.bold: true; font.italic: true; font.pixelSize: 20; font.capitalization: Font.AllUppercase
+}
+
+//! [0]
+
+//! [1]
+Rectangle {
+    anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 }
+}
+
+Text {
+    text: "hello"
+    font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase }
+}
+//! [1]
+
+}
diff --git a/doc/src/snippets/declarative/codingconventions/javascript-imports.qml b/doc/src/snippets/declarative/codingconventions/javascript-imports.qml
new file mode 100644
index 0000000..a216e1c
--- /dev/null
+++ b/doc/src/snippets/declarative/codingconventions/javascript-imports.qml
@@ -0,0 +1,7 @@
+import Qt 4.6
+
+//![0]
+import "myscript.js" as Script
+
+Rectangle { color: "blue"; width: Script.calculateWidth(parent) }
+//![0]
diff --git a/doc/src/snippets/declarative/codingconventions/javascript.qml b/doc/src/snippets/declarative/codingconventions/javascript.qml
new file mode 100644
index 0000000..ccb299b
--- /dev/null
+++ b/doc/src/snippets/declarative/codingconventions/javascript.qml
@@ -0,0 +1,33 @@
+import Qt 4.6
+
+Rectangle {
+
+//![0]
+Rectangle { color: "blue"; width: parent.width / 3 }
+//![0]
+
+//![1]
+Rectangle {
+    color: "blue"
+    width: {
+        var w = parent.width / 3
+        console.debug(w)
+        return w
+    }
+}
+//![1]
+
+//![2]
+function calculateWidth(object)
+{
+    var w = object.width / 3
+    // ...
+    // more javascript code
+    // ...
+    console.debug(w)
+    return w
+}
+
+Rectangle { color: "blue"; width: calculateWidth(parent) }
+//![2]
+}
diff --git a/doc/src/snippets/declarative/codingconventions/lists.qml b/doc/src/snippets/declarative/codingconventions/lists.qml
new file mode 100644
index 0000000..a08b61c
--- /dev/null
+++ b/doc/src/snippets/declarative/codingconventions/lists.qml
@@ -0,0 +1,22 @@
+import Qt 4.6
+
+Item {
+    Item {
+//! [0]
+states: [
+    State {
+        name: "open"
+        PropertyChanges { target: container; width: 200 }
+    }
+]
+//! [0]
+    }
+    Item {
+//! [1]
+ states: State {
+    name: "open"
+    PropertyChanges { target: container; width: 200 }
+}
+//! [1]
+    }
+}
diff --git a/doc/src/snippets/declarative/codingconventions/myscript.js b/doc/src/snippets/declarative/codingconventions/myscript.js
new file mode 100644
index 0000000..cfa6462
--- /dev/null
+++ b/doc/src/snippets/declarative/codingconventions/myscript.js
@@ -0,0 +1,9 @@
+function calculateWidth(parent)
+{
+    var w = parent.width / 3
+    // ...
+    // more javascript code
+    // ...
+    console.debug(w)
+    return w
+}
diff --git a/doc/src/snippets/declarative/codingconventions/photo.qml b/doc/src/snippets/declarative/codingconventions/photo.qml
new file mode 100644
index 0000000..3a59e1f
--- /dev/null
+++ b/doc/src/snippets/declarative/codingconventions/photo.qml
@@ -0,0 +1,37 @@
+import Qt 4.6
+
+//! [0]
+Rectangle {
+    id: photo                                               // id on the first line makes it easy to find an object
+
+    property bool thumbnail: false                          // property declarations
+    property alias image: photoImage.source
+
+    signal clicked                                          // signal declarations
+
+    function doSomething(x) {                               // javascript functions
+        return x + photoImage.width
+    }
+
+    x: 20; y: 20; width: 200; height: 150                   // object properties
+    color: "gray"                                           // try to group related properties together
+
+    Rectangle {                                             // child objects
+        id: border
+        anchors.centerIn: parent; color: "white"
+
+        Image { id: photoImage; anchors.centerIn: parent }
+    }
+
+    states: State {                                         // states
+        name: "selected"
+        PropertyChanges { target: border; color: "red" }
+    }
+
+    transitions: Transition {                               // transitions
+        from: ""; to: "selected"
+        ColorAnimation { target: border; duration: 200 }
+    }
+}
+//! [0]
+