Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui

7 files changed, 181 insertions, 62 deletions

diff --git a/examples/declarative/aspectratio/face_fit.qml b/examples/declarative/aspectratio/face_fit.qml
new file mode 100644
index 0000000..35c63ce
--- /dev/null
+++ b/examples/declarative/aspectratio/face_fit.qml
@@ -0,0 +1,26 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we implement a hybrid of the "scale to fit" and "scale and crop"
+// behaviours which will crop up to 25% from *one* dimension if necessary
+// to fully scale the other. This is a realistic algorithm, for example
+// when the edges of the image contain less vital information than the
+// center - such as a face.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.max(Math.min(parent.width/width*1.333,parent.height/height),
+                        Math.min(parent.width/width,parent.height/height*1.333))
+    }
+}
diff --git a/examples/declarative/aspectratio/face_fit_animated.qml b/examples/declarative/aspectratio/face_fit_animated.qml
new file mode 100644
index 0000000..366d27b
--- /dev/null
+++ b/examples/declarative/aspectratio/face_fit_animated.qml
@@ -0,0 +1,28 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we extend the "face_fit" example with animation to show how truly
+// diverse and usage-specific behaviours are made possible by NOT putting a
+// hard-coded aspect ratio feature into the Image primitive.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Follow {
+            source: Math.max(Math.min(Image.parent.width/Image.width*1.333,Image.parent.height/Image.height),
+                        Math.min(Image.parent.width/Image.width,Image.parent.height/Image.height*1.333))
+            spring: 1
+            damping: 0.05
+        }
+    }
+}
diff --git a/examples/declarative/aspectratio/pics/face.png b/examples/declarative/aspectratio/pics/face.png
new file mode 100644
index 0000000..9623b1a
--- /dev/null
+++ b/examples/declarative/aspectratio/pics/face.png
diff --git a/examples/declarative/aspectratio/scale_and_crop.qml b/examples/declarative/aspectratio/scale_and_crop.qml
new file mode 100644
index 0000000..a5409f9
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_and_crop.qml
@@ -0,0 +1,21 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we implement "Scale and Crop" behaviour.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.max(parent.width/width,parent.height/height)
+    }
+}
diff --git a/examples/declarative/aspectratio/scale_and_sidecrop.qml b/examples/declarative/aspectratio/scale_and_sidecrop.qml
new file mode 100644
index 0000000..e076735
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_and_sidecrop.qml
@@ -0,0 +1,22 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we implement a variant of "Scale and Crop" behaviour, where we
+// crop the sides if necessary to fully fit vertically, but not the reverse.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: parent.height/height
+    }
+}
diff --git a/examples/declarative/aspectratio/scale_to_fit.qml b/examples/declarative/aspectratio/scale_to_fit.qml
new file mode 100644
index 0000000..61a4082
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_to_fit.qml
@@ -0,0 +1,21 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we implement "Scale to Fit" behaviour.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.min(parent.width/width,parent.height/height)
+    }
+}
diff --git a/examples/declarative/listview/dummydata/Recipies.qml b/examples/declarative/listview/dummydata/Recipies.qml
index 6b20409..8f464da 100644
--- a/examples/declarative/listview/dummydata/Recipies.qml
+++ b/examples/declarative/listview/dummydata/Recipies.qml
@@ -3,21 +3,22 @@ ListModel2 {
     ListElement {
         title: "Pancakes"
         picture: "content/pics/pancakes.jpg"
-        ingredients: "<html> \
-                <ul> \
-                    <li> 1 cup (150g) self-raising flour \
-                    <li> 1 tbs caster sugar \
-                    <li> 3/4 cup (185ml) milk \
-                    <li> 1 egg \
-                </ul> \
-            </html>"
-        method: "<html> \
-                <ol> \
-                    <li> Sift flour and sugar together into a bowl. Add a pinch of salt. \
-                    <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth. \
-                    <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface. \
-                    <li> Turn over and cook other side until golden.  \
-                </ol>"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 1 cup (150g) self-raising flour 
+                        <li> 1 tbs caster sugar 
+                        <li> 3/4 cup (185ml) milk 
+                        <li> 1 egg 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Sift flour and sugar together into a bowl. Add a pinch of salt. 
+                   <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth. 
+                   <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface. 
+                   <li> Turn over and cook other side until golden.  
+                  </ol>
+                 </html>"
     }
     ListElement {
         title: "Fruit Salad"
@@ -28,60 +29,60 @@ ListModel2 {
     ListElement {
         title: "Vegetable Soup"
         picture: "content/pics/vegetable-soup.jpg"
-        ingredients: "<html> \
-                <ul> \
-                    <li> 1 onion \
-                    <li> 1 turnip \
-                    <li> 1 potato \
-                    <li> 1 carrot \
-                    <li> 1 head of celery \
-                    <li> 1 1/2 litres of water \
-                </ul> \
-            </html>"
-        method: "<html> \
-                <ol> \
-                    <li> Chop vegetables. \
-                    <li> Boil in water until vegetables soften. \
-                    <li> Season with salt and pepper to taste. \
-                </ol> \
-            </html>"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 1 onion 
+                        <li> 1 turnip 
+                        <li> 1 potato 
+                        <li> 1 carrot 
+                        <li> 1 head of celery 
+                        <li> 1 1/2 litres of water 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Chop vegetables. 
+                   <li> Boil in water until vegetables soften. 
+                   <li> Season with salt and pepper to taste. 
+                  </ol> 
+                 </html>"
     }
     ListElement {
         title: "Hamburger"
         picture: "content/pics/hamburger.jpg"
-        ingredients: "<html> \
-                <ul> \
-                    <li> 500g minced beef \
-                    <li> Seasoning \
-                    <li> lettuce, tomato, onion, cheese \
-                    <li> 1 hamburger bun for each burger \
-                </ul> \
-            </html>"
-        method: "<html> \
-                <ol> \
-                    <li> Mix the beef, together with seasoning, in a food processor. \
-                    <li> Shape the beef into burgers. \
-                    <li> Grill the burgers for about 5 mins on each side (until cooked through) \
-                    <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion. \
-                </ol> \
-            </html>"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 500g minced beef 
+                        <li> Seasoning 
+                        <li> lettuce, tomato, onion, cheese 
+                        <li> 1 hamburger bun for each burger 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Mix the beef, together with seasoning, in a food processor. 
+                   <li> Shape the beef into burgers. 
+                   <li> Grill the burgers for about 5 mins on each side (until cooked through) 
+                   <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion. 
+                  </ol> 
+                 </html>"
     }
     ListElement {
         title: "Lemonade"
         picture: "content/pics/lemonade.jpg"
-        ingredients: "<html> \
-                <ul> \
-                    <li> 1 cup Lemon Juice \
-                    <li> 1 cup Sugar \
-                    <li> 6 Cups of Water (2 cups warm water, 4 cups cold water) \
-                </ul> \
-            </html>"
-        method: "<html> \
-                <ol> \
-                    <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves. \
-                    <li> Pour in lemon juice, stir again, and add 4 cups of cold water. \
-                    <li> Chill or serve over ice cubes. \
-                </ol> \
-            </html>"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 1 cup Lemon Juice 
+                        <li> 1 cup Sugar 
+                        <li> 6 Cups of Water (2 cups warm water, 4 cups cold water) 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves. 
+                   <li> Pour in lemon juice, stir again, and add 4 cups of cold water. 
+                   <li> Chill or serve over ice cubes. 
+                  </ol> 
+                 </html>"
     }
 }