diff options
author | Michael Brasser <michael.brasser@nokia.com> | 2009-05-01 01:22:38 (GMT) |
---|---|---|
committer | Michael Brasser <michael.brasser@nokia.com> | 2009-05-01 01:22:38 (GMT) |
commit | e93e5076e11a7a9cfdd4b9cb1a2d4dbf1f579177 (patch) | |
tree | 9a214273e5ec3b0eb3f4a0bc0f8ecd7f3762eb28 /examples/declarative | |
parent | 1206e9fb0c9a21e60b1e6841bb3071daa1f0da8a (diff) | |
parent | 4eb455e6e109052ec39b10bfe36f7649c3c7cf0b (diff) | |
download | Qt-e93e5076e11a7a9cfdd4b9cb1a2d4dbf1f579177.zip Qt-e93e5076e11a7a9cfdd4b9cb1a2d4dbf1f579177.tar.gz Qt-e93e5076e11a7a9cfdd4b9cb1a2d4dbf1f579177.tar.bz2 |
Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui
Diffstat (limited to 'examples/declarative')
-rw-r--r-- | examples/declarative/aspectratio/face_fit.qml | 26 | ||||
-rw-r--r-- | examples/declarative/aspectratio/face_fit_animated.qml | 28 | ||||
-rw-r--r-- | examples/declarative/aspectratio/pics/face.png | bin | 0 -> 905 bytes | |||
-rw-r--r-- | examples/declarative/aspectratio/scale_and_crop.qml | 21 | ||||
-rw-r--r-- | examples/declarative/aspectratio/scale_and_sidecrop.qml | 22 | ||||
-rw-r--r-- | examples/declarative/aspectratio/scale_to_fit.qml | 21 | ||||
-rw-r--r-- | examples/declarative/listview/dummydata/Recipies.qml | 125 |
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 Binary files differnew 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>" } } |