Examples: Adjust styles example for designer

* Do not define Components as properties (not supported)
* Define the binding on columnWidth as a Binding object so
  it can be ignored by the designer and we have a static default.

Change-Id: I97620d07b12c5b1203c90da0fdd4937d50bbde1c
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

1 files changed, 168 insertions, 149 deletions

diff --git a/examples/quick/controls/styles/main.qml b/examples/quick/controls/styles/main.qml
index 29257183..7e7971e3 100644
--- a/examples/quick/controls/styles/main.qml
+++ b/examples/quick/controls/styles/main.qml
@@ -52,7 +52,7 @@ Window {
     visible: true
     title: qsTr("Styles Example")
 
-    property int columnWidth: window.width / 5
+    property int columnFactor: 5
 
     GridLayout {
         rowSpacing: 12
@@ -63,7 +63,7 @@ Window {
 
         Button {
             text: "Button"
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
         Button {
             text: "Button"
@@ -73,17 +73,17 @@ Window {
                     border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
                 }
             }
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
         Button {
             text: "Button"
             style: buttonStyle
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
 
         TextField {
             Layout.row: 1
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
         TextField {
             style: TextFieldStyle {
@@ -92,18 +92,18 @@ Window {
                     border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
                 }
             }
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
         TextField {
             style: textFieldStyle
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
 
         Slider {
             id: slider1
             Layout.row: 2
             value: 0.5
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
         Slider {
             id: slider2
@@ -139,35 +139,35 @@ Window {
         Slider {
             id: slider3
             value: 0.5
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
             style: sliderStyle
         }
 
         ProgressBar {
             Layout.row: 3
             value: slider1.value
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
         ProgressBar {
             value: slider2.value
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
             style: progressBarStyle
         }
         ProgressBar {
             value: slider3.value
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
             style: progressBarStyle2
         }
 
         CheckBox {
             text: "CheckBox"
             Layout.row: 4
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
 
         RadioButton {
             text: "RadioButton"
-            implicitWidth: columnWidth
+            implicitWidth: window.width / columnFactor
         }
 
         ComboBox {
@@ -201,178 +201,197 @@ Window {
 
     // Style delegates:
 
-    property Component buttonStyle: ButtonStyle {
-        background: Rectangle {
-            implicitHeight: 22
-            implicitWidth: columnWidth
-            color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
-            antialiasing: true
-            border.color: "gray"
-            radius: height/2
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: 1
-                color: "transparent"
+    Component {
+        id: buttonStyle
+        ButtonStyle {
+
+            background: Rectangle {
+                implicitHeight: 22
+                implicitWidth: window.width / columnFactor
+                color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
                 antialiasing: true
-                visible: !control.pressed
-                border.color: "#aaffffff"
+                border.color: "gray"
                 radius: height/2
+                Rectangle {
+                    anchors.fill: parent
+                    anchors.margins: 1
+                    color: "transparent"
+                    antialiasing: true
+                    visible: !control.pressed
+                    border.color: "#aaffffff"
+                    radius: height/2
+                }
             }
         }
     }
 
-    property Component textFieldStyle: TextFieldStyle {
-        background: Rectangle {
-            implicitWidth: columnWidth
-            color: "#f0f0f0"
-            antialiasing: true
-            border.color: "gray"
-            radius: height/2
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: 1
-                color: "transparent"
+    Component {
+        id: textFieldStyle
+        TextFieldStyle {
+            background: Rectangle {
+                implicitWidth: window.width / columnFactor
+                color: "#f0f0f0"
                 antialiasing: true
-                border.color: "#aaffffff"
+                border.color: "gray"
                 radius: height/2
+                Rectangle {
+                    anchors.fill: parent
+                    anchors.margins: 1
+                    color: "transparent"
+                    antialiasing: true
+                    border.color: "#aaffffff"
+                    radius: height/2
+                }
             }
         }
     }
 
-    property Component sliderStyle: SliderStyle {
-        handle: Rectangle {
-            width: 18
-            height: 18
-            color: control.pressed ? "darkGray" : "lightGray"
-            border.color: "gray"
-            antialiasing: true
-            radius: height/2
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: 1
-                color: "transparent"
+    Component {
+        id: sliderStyle
+        SliderStyle {
+            handle: Rectangle {
+                width: 18
+                height: 18
+                color: control.pressed ? "darkGray" : "lightGray"
+                border.color: "gray"
                 antialiasing: true
-                border.color: "#eee"
                 radius: height/2
+                Rectangle {
+                    anchors.fill: parent
+                    anchors.margins: 1
+                    color: "transparent"
+                    antialiasing: true
+                    border.color: "#eee"
+                    radius: height/2
+                }
             }
-        }
 
-        groove: Rectangle {
-            height: 8
-            implicitWidth: columnWidth
-            implicitHeight: 22
+            groove: Rectangle {
+                height: 8
+                implicitWidth: window.width / columnFactor
+                implicitHeight: 22
 
-            antialiasing: true
-            color: "#ccc"
-            border.color: "#777"
-            radius: height/2
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: 1
-                color: "transparent"
                 antialiasing: true
-                border.color: "#66ffffff"
+                color: "#ccc"
+                border.color: "#777"
                 radius: height/2
+                Rectangle {
+                    anchors.fill: parent
+                    anchors.margins: 1
+                    color: "transparent"
+                    antialiasing: true
+                    border.color: "#66ffffff"
+                    radius: height/2
+                }
             }
         }
     }
 
-    property Component progressBarStyle: ProgressBarStyle {
-        background: BorderImage {
-            source: "images/progress-background.png"
-            border.left: 2 ; border.right: 2 ; border.top: 2 ; border.bottom: 2
-        }
-        progress: Item {
-            clip: true
-            BorderImage {
-                anchors.fill: parent
-                anchors.rightMargin: (control.value < control.maximumValue) ? -4 : 0
-                source: "images/progress-fill.png"
-                border.left: 10 ; border.right: 10
-                Rectangle {
-                    width: 1
-                    color: "#a70"
-                    opacity: 0.8
-                    anchors.top: parent.top
+    Component {
+        id: progressBarStyle
+        ProgressBarStyle {
+            background: BorderImage {
+                source: "images/progress-background.png"
+                border.left: 2 ; border.right: 2 ; border.top: 2 ; border.bottom: 2
+            }
+            progress: Item {
+                clip: true
+                BorderImage {
+                    anchors.fill: parent
+                    anchors.rightMargin: (control.value < control.maximumValue) ? -4 : 0
+                    source: "images/progress-fill.png"
+                    border.left: 10 ; border.right: 10
+                    Rectangle {
+                        width: 1
+                        color: "#a70"
+                        opacity: 0.8
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        anchors.bottomMargin: 1
+                        anchors.right: parent.right
+                        visible: control.value < control.maximumValue
+                        anchors.rightMargin: -parent.anchors.rightMargin
+                    }
+                }
+                ParticleSystem { id: bubbles; running: visible }
+                ImageParticle {
+                    id: fireball
+                    system: bubbles
+                    source: "images/bubble.png"
+                    opacity: 0.7
+                }
+                Emitter {
+                    system: bubbles
                     anchors.bottom: parent.bottom
-                    anchors.bottomMargin: 1
+                    anchors.margins: 4
+                    anchors.bottomMargin: -4
+                    anchors.left: parent.left
                     anchors.right: parent.right
-                    visible: control.value < control.maximumValue
-                    anchors.rightMargin: -parent.anchors.rightMargin
+                    size: 4
+                    sizeVariation: 4
+                    acceleration: PointDirection { y: -6; xVariation: 3 }
+                    emitRate: 6 * control.value
+                    lifeSpan: 3000
                 }
             }
-            ParticleSystem { id: bubbles; running: visible }
-            ImageParticle {
-                id: fireball
-                system: bubbles
-                source: "images/bubble.png"
-                opacity: 0.7
-            }
-            Emitter {
-                system: bubbles
-                anchors.bottom: parent.bottom
-                anchors.margins: 4
-                anchors.bottomMargin: -4
-                anchors.left: parent.left
-                anchors.right: parent.right
-                size: 4
-                sizeVariation: 4
-                acceleration: PointDirection { y: -6; xVariation: 3 }
-                emitRate: 6 * control.value
-                lifeSpan: 3000
-            }
         }
     }
 
-    property Component progressBarStyle2: ProgressBarStyle {
-        background: Rectangle {
-            implicitWidth: columnWidth
-            implicitHeight: 24
-            color: "#f0f0f0"
-            border.color: "gray"
-        }
-        progress: Rectangle {
-            color: "#ccc"
-            border.color: "gray"
-            Rectangle {
-                color: "transparent"
-                border.color: "#44ffffff"
-                anchors.fill: parent
-                anchors.margins: 1
+    Component {
+        id: progressBarStyle2
+        ProgressBarStyle {
+            background: Rectangle {
+                implicitWidth: window.width / columnFactor
+                implicitHeight: 24
+                color: "#f0f0f0"
+                border.color: "gray"
+            }
+            progress: Rectangle {
+                color: "#ccc"
+                border.color: "gray"
+                Rectangle {
+                    color: "transparent"
+                    border.color: "#44ffffff"
+                    anchors.fill: parent
+                    anchors.margins: 1
+                }
             }
         }
     }
 
-    property Component tabViewStyle: TabViewStyle {
-        tabOverlap: 16
-        frameOverlap: 4
-        tabsMovable: true
+    Component {
+        id: tabViewStyle
+        TabViewStyle {
+            tabOverlap: 16
+            frameOverlap: 4
+            tabsMovable: true
 
-        frame: Rectangle {
-            gradient: Gradient {
-                GradientStop { color: "#e5e5e5" ; position: 0 }
-                GradientStop { color: "#e0e0e0" ; position: 1 }
-            }
-            border.color: "#898989"
-            Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
-        }
-        tab: Item {
-            property int totalOverlap: tabOverlap * (control.count - 1)
-            implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
-            implicitHeight: image.sourceSize.height
-            BorderImage {
-                id: image
-                anchors.fill: parent
-                source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
-                border.left: 30
-                smooth: false
-                border.right: 30
+            frame: Rectangle {
+                gradient: Gradient {
+                    GradientStop { color: "#e5e5e5" ; position: 0 }
+                    GradientStop { color: "#e0e0e0" ; position: 1 }
+                }
+                border.color: "#898989"
+                Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
             }
-            Text {
-                text: styleData.title
-                anchors.centerIn: parent
+            tab: Item {
+                property int totalOverlap: tabOverlap * (control.count - 1)
+                implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
+                implicitHeight: image.sourceSize.height
+                BorderImage {
+                    id: image
+                    anchors.fill: parent
+                    source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
+                    border.left: 30
+                    smooth: false
+                    border.right: 30
+                }
+                Text {
+                    text: styleData.title
+                    anchors.centerIn: parent
+                }
             }
+            leftCorner: Item { implicitWidth: 12 }
         }
-        leftCorner: Item { implicitWidth: 12 }
     }
 }