summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--examples/declarative/animation/animation.qml8
-rw-r--r--examples/declarative/connections/connections.qml11
-rw-r--r--examples/declarative/dynamic/dynamic.js26
-rw-r--r--examples/declarative/dynamic/dynamic.qml66
-rw-r--r--examples/declarative/effects/test.qml73
-rw-r--r--examples/declarative/layouts/Button.qml27
-rw-r--r--examples/declarative/layouts/layouts.qml19
-rw-r--r--examples/declarative/layouts/positioners.qml145
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 }
generated by cgit v0.12 at 2024-10-06 02:27:24 (GMT)