diff options
| -rw-r--r-- | doc/src/declarative/anchor-layout.qdoc | 30 | ||||
| -rw-r--r-- | doc/src/declarative/animation.qdoc | 126 | ||||
| -rw-r--r-- | doc/src/declarative/basictypes.qdoc | 46 | ||||
| -rw-r--r-- | doc/src/declarative/binding.qdoc | 20 | ||||
| -rw-r--r-- | doc/src/declarative/components.qdoc | 42 | ||||
| -rw-r--r-- | doc/src/declarative/cppitem.qdoc | 2 | ||||
| -rw-r--r-- | src/declarative/fx/qfxflipable.cpp | 4 | ||||
| -rw-r--r-- | src/declarative/fx/qfximage.cpp | 4 | ||||
| -rw-r--r-- | src/declarative/fx/qfxitem.cpp | 2 | ||||
| -rw-r--r-- | src/declarative/fx/qfxparticles.cpp | 18 | ||||
| -rw-r--r-- | src/declarative/fx/qfxreflectionfilter.cpp | 12 | ||||
| -rw-r--r-- | src/declarative/fx/qfxshadowfilter.cpp | 2 | ||||
| -rw-r--r-- | src/declarative/fx/qfxtransform.cpp | 12 |
13 files changed, 191 insertions, 129 deletions
diff --git a/doc/src/declarative/anchor-layout.qdoc b/doc/src/declarative/anchor-layout.qdoc index 2b1f081..9ff902ee 100644 --- a/doc/src/declarative/anchor-layout.qdoc +++ b/doc/src/declarative/anchor-layout.qdoc @@ -10,8 +10,8 @@ In additional to the more traditional Fx layouts GridLayout, HorizontalLayout, a The Fx anchoring system allows you to define relationships between the anchor lines of different items. For example, you can write: \code -<Rect id="rect1" .../> -<Rect id="rect2" anchors.left="{rect1.right}" .../> +Rect { id: rect1; ... } +Rect { id: rect2; anchors.left: rect1.right; ... } \endcode In this case, the left edge of \e rect2 is bound to the right edge of rect1, producing the following: @@ -25,8 +25,8 @@ The anchoring system also allows you to specify margins and offsets. Margins spe The following example specifies a left margin: \code -<Rect id="rect1" .../> -<Rect id="rect2" anchors.left="{rect1.right}" anchors.leftMargin="5".../> +Rect { id: rect1; ... } +Rect { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... } \endcode In this case, a margin of 5 pixels is reserved to the left of \e rect2, producing the following: @@ -36,8 +36,8 @@ In this case, a margin of 5 pixels is reserved to the left of \e rect2, producin You can specify multiple anchors. For example: \code -<Rect id="rect1" .../> -<Rect id="rect2" anchors.left="{rect1.right}" anchors.top="{rect1.bottom}".../> +Rect { id: rect1; ... } +Rect { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... } \endcode \image edge3.png @@ -45,9 +45,9 @@ You can specify multiple anchors. For example: By specifying multiple horizontal or vertical anchors you can control the size of an item. For example: \code -<Rect id="rect1" x="0" .../> -<Rect id="rect2" anchors.left="{rect1.right}" anchors.right="{rect3.left}".../> -<Rect id="rect3" x="150" .../> +Rect { id: rect1; x: 0; ... } +Rect { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... } +Rect { id: rect3; x: 150; ... } \endcode \image edge4.png @@ -57,12 +57,12 @@ By specifying multiple horizontal or vertical anchors you can control the size o For performance reasons, you can only anchor an item to its siblings and direct parent. For example, the following anchor would be considered invalid and would produce a warning: \code -<Item id="group1"> - <Rect id="rect1" .../> -</Item> -<Item id="group2"> - <Rect id="rect2" anchors.left="{rect1.right}".../> <!-- invalid anchor! --> -</Item> +Item { id: group1 } + Rect { id: rect1; ... } +} +Item id: group2"> + Rect { id: rect2; anchors.left: rect1.right; ... } // invalid anchor! +} \endcode */ diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc index cd7d1b9..fb14fdc 100644 --- a/doc/src/declarative/animation.qdoc +++ b/doc/src/declarative/animation.qdoc @@ -29,19 +29,30 @@ The simplest form of animation is using \c <NumericAnimation/> The following example creates a bouncing effect: \code -<Rect id="rect" width="120" height="200" color="white"> - <Image id="img" file="pics/qtlogo.png" - x="{60-img.width/2}" y="{200-img.height}"> - <y> - <SequentialAnimation running="true" repeat="true"> - <NumericAnimation to="{200-img.height}" - easing="easeOutBounce(amplitude:100)" - duration="2000" /> - <PauseAnimation duration="1000" /> - </SequentialAnimation> - </y> - </Image> -</Rect> +Rect { + id: rect + width: 120 + height: 200 + color: "white" + Image { + id: img + source: "pics/qtlogo.png" + x: 60-img.width/2 + y: 200-img.height + y: SequentialAnimation { + running: true + repeat: true + NumericAnimation { + to: 200-img.height + easing: "easeOutBounce(amplitude:100)" + duration: 2000 + } + PauseAnimation { + duration: 1000 + } + } + } +} \endcode \image propanim.gif @@ -76,15 +87,28 @@ In QML: The following example shows a simple use of states. In the default state \c myrect is positioned at 0,0. In the 'moved' state it is positioned at 50,50. \code -<Item> - <Rect id="myrect" width="100" height="100"/> - <states> - <State name="moved"> - <SetProperty target="{myrect}" property="x" value="50"/> - <SetProperty target="{myrect}" property="y" value="50"/> - </State> - </states> -</Item> +Item { + Rect { + id: myrect + width: 100 + height: 100 + } + states: [ + State { + name: "moved" + SetProperty { + target: myrect + property: "x" + value: 50 + } + SetProperty { + target: myrect + property: "y" + value: 50 + } + } + ] +} \endcode \section2 Transitions @@ -94,34 +118,56 @@ QML transitions describe animations to perform when state changes occur. For the previous example, a transition could describe how \c myrect moved from its initial position to its new position: \code -<transitions> - <Transition> - <NumericAnimation properties="x,y" easing="easeOutBounce" duration="200" /> - </Transition> -</transitions> +transitions: [ + Transition { + NumericAnimation { + properties: "x,y" + easing: "easeOutBounce" + duration: 200 + } + } +] \endcode QML transitions can use selectors to determine which state changes a transition should apply to: \code -<Transition fromState="*" toState="Details"> -... -</Transition> +Transition { + fromState: "*" + toState: "Details" + ... +} \endcode Transitions can happen in parallel, in sequence, or in any combination of the two:; \code -<Transition fromState="*" toState="MyState" reversible="true" > - <SequentialAnimation> - <ColorAnimation duration="1000" /> - <PauseAnimation duration="1000" /> - <ParallelAnimation> - <NumericAnimation duration="1000" easing="easeOutBounce" target="{box1}" properties="x,y" /> - <NumericAnimation duration="1000" target="{box2}" properties="x,y" /> - </ParallelAnimation> - </SequentialAnimation> -</Transition> +Transition { + fromState: "*" + toState: "MyState" + reversible: true + SequentialAnimation { + ColorAnimation { + duration: 1000 + } + PauseAnimation { + duration: 1000 + } + ParallelAnimation { + NumericAnimation { + duration: 1000 + easing: "easeOutBounce" + target: box1 + properties: "x,y" + } + NumericAnimation { + duration: 1000 + target: box2 + properties: "x,y" + } + } + } +} \endcode \section1 Property Behaviors diff --git a/doc/src/declarative/basictypes.qdoc b/doc/src/declarative/basictypes.qdoc index 0000c37..f7eee50 100644 --- a/doc/src/declarative/basictypes.qdoc +++ b/doc/src/declarative/basictypes.qdoc @@ -23,7 +23,7 @@ Setting ints looks like this: \code - <Item width="100" height="200" /> + Item { width: 100; height:200 } \endcode \target basicqmlbool @@ -39,7 +39,7 @@ Setting bools looks like this: \code - <Item focusable="true" clip="false" /> + Item { focusable: true; clip: false } \endcode \note Technically bool treats an empty string, "false" and "0" as false and @@ -58,7 +58,7 @@ Setting reals looks like this: \code - <Item x="-10" y="100.8" /> + Item { x: -10; y: 100.8 } \endcode \note In QML all reals are stored in single precision, \l {http://en.wikipedia.org/wiki/IEEE_754}{IEEE floating point} format. @@ -76,7 +76,7 @@ Setting a string looks like this: \code - <Text text="Hello world!" /> + Text { text: "Hello world!" } \endcode \raw HTML @@ -101,9 +101,9 @@ Setting a color looks like this: \code - <Rect color="steelblue" /> - <Rect color="#FF0000" /> - <Rect color="#800000FF" /> + Rect { color: "steelblue" } + Rect { color: "#FF0000" } + Rect { color: "#800000FF" } \endcode \target basicqmlpoint @@ -118,7 +118,7 @@ Setting a point looks like this: \code - <Widget pos="50,50"/> + Widget { pos: "50,50" } \endcode \target basicqmlsize @@ -133,7 +133,7 @@ Setting a size looks like this: \code - <Widget size="50x50"/> + Widget { size: "50x50" } \endcode \target basicqmlrectangle @@ -148,7 +148,7 @@ Setting a rectangle looks like this: \code - <Widget geometry="50,50,100x100"/> + Widget { geometry: "50,50,100x100" } \endcode \target basicqmldate @@ -163,7 +163,7 @@ Setting a date looks like this: \code - <DatePicker minDate="2000-01-01" maxDate="2020-12-31"/> + DatePicker { minDate: "2000-01-01"; maxDate: "2020-12-31" } \endcode \target basicqmltime @@ -178,7 +178,7 @@ Setting a time looks like this: \code - <TimePicker time="14:22:15"/> + TimePicker { time: "14:22:15" } \endcode \target basicqmlfont @@ -199,7 +199,7 @@ Setting a font looks like this: \code - <Text font.family="Helvetica" font.size="13" font.bold="true"> + Text { font.family: "Helvetica"; font.size: 13; font.bold: true } \endcode \target basicqmlaction @@ -220,9 +220,9 @@ Actions are used like this: \code - <MouseRegion onClick="{someitem.someaction.trigger()}"> - <State name="enabled" when="{someitem.someaction.enabled=='true'}"> - <Text text="{someitem.someaction.text}"> + MouseRegion { onClicked: someitem.someaction.trigger() } + State { name: "enabled"; when: someitem.someaction.enabled=='true' } + Text { text: someitem.someaction.text } \endcode \target basicqmlany @@ -252,13 +252,13 @@ For example, the \l Item class has a children list property that can be used like this: \code - <Item> - <children> - <Item id="child1" /> - <Rect id="child2" /> - <Text id="child3" /> - </children> - </Item> + Item { + children [ + Item { id: child1 }, + Rect { id: child2 }, + Text { id: child3 } + ] + } \endcode \c child1, \c child2 and \c child3 will all be added to the children list in the order in which they appear. diff --git a/doc/src/declarative/binding.qdoc b/doc/src/declarative/binding.qdoc index 1d4f9a1..2920d51 100644 --- a/doc/src/declarative/binding.qdoc +++ b/doc/src/declarative/binding.qdoc @@ -5,23 +5,23 @@ Data binding provides a declarative way of specifying the data associated with objects, as well as the relationship between data of different objects. For example, you could bind the text of a label to the value of a slider: as the value of the slider changed, the label would be automatically updated with the new value. -Bindings are indicated in Qml through the use of brackets: \c {}. For example, the following produces two Rects of equal size (\c rect2 is bound to the size of \c rect1): +Bindings are created in Qml when an expression is assigned to a property. For example, the following produces two Rects of equal size (\c rect2 is bound to the size of \c rect1): \code -<Rect id="rect1" width="100" height="100"> -<Rect id="rect2" width="{rect1.width}" height="{rect1.height}"> +Rect { id: rect1; width: 100; height: 100 } +Rect { id: rect2; width: rect1.width; height: rect1.height } \endcode -There is also a special \c <Bind> element, which is typically used to bind from the UI to the underlying UI model (see \l {Passing Data Between C++ and Qml} for an example of this). The bindings above could be expressed using the \c <Bind> element as: +There is also a special \l Bind element, which is typically used to bind from the UI to the underlying UI model (see \l {Passing Data Between C++ and Qml} for an example of this). The bindings above could be expressed using the \l Bind element as: \code -<Bind target="{rect2}" property="width" value="{rect1.width}"/> -<Bind target="{rect2}" property="height" value="{rect1.height}"/> +Bind { target: rect2; property: "width"; value: rect1.width } +Bind { target: rect2; property: "height"; value: rect1.height } \endcode In addition to binding directly to a property, you can also bind to the results of expressions involving properties. For example: \code -<Text text="{contact.firstname + ' ' + contact.lastname}"> -<Image file="{if (contact.gender == 'female') {'pics/female.png'} else {'pics/male.png'}}"> +Text { text: contact.firstname + ' ' + contact.lastname } +Image { source: if (contact.gender == "female") {"pics/female.png"} else {"pics/male.png"} } \endcode Relevant items can also be bound to the contents of a model - see \l ListView for an example of this. @@ -101,8 +101,8 @@ view->execute(); Finally, in Qml you can make the appropriate bindings, so in \c "MyUI.qml": \code -<Slider value="{screen.brightness}"/> -<Bind target="{screen}" property="brightness" value="{slider.value}" /> +Slider { value: screen.brightness } +Bind { target: screen; property: "brightness"; value: slider.value } \endcode The \l QBindableMap class provides a convenient way to make data visible to the bind engine. diff --git a/doc/src/declarative/components.qdoc b/doc/src/declarative/components.qdoc index 9a6f2dd..db59b61 100644 --- a/doc/src/declarative/components.qdoc +++ b/doc/src/declarative/components.qdoc @@ -23,10 +23,18 @@ This example describes how to create a component from an existing snippet of Qml Assume you have an existing UI with a single 'Save' button, defined as follows: \code -<Image file="pics/button-background.png"> - <Text text="Save" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/> - <MouseRegion anchors.fill="{parent}" onClick="saveData()"/> -</Image> +Image { + source: "pics/button-background.png" + Text { + text: "Save" + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + MouseRegion { + anchors.fill: parent + onClick: { saveData() } + } +} \endcode For the next release, you plan to add 'Cancel' and 'Reset' buttons. Rather than copying and pasting the above markup, you can create a component: @@ -36,12 +44,20 @@ For the next release, you plan to add 'Cancel' and 'Reset' buttons. Rather than \o Make some minor changes to define the component's interface: \code -<Image file="pics/button-background.png"> - <properties><Property name="label"/></properties> - <signals><Signal name="click"/></signals> - <Text text="{parent.label}" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/> - <MouseRegion anchors.fill="{parent}" onClick="parent.click.emit()"/> -</Image> +Image { + property string label + signal clicked + source: "pics/button-background.png" + Text { + text: parent.label + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + MouseRegion { + anchors.fill: parent + onClick: { parent.click.emit() } + } +} \endcode The \a label property and \a click signal that were added effectively become part of the 'public API' of the MyButton component. In a similar manner, the Text and MouseRegion elements become invisible to anyone using the component. Note that the Text element now binds in its data from \a label, and the MouseRegion emits a generic signal. @@ -49,11 +65,11 @@ The \a label property and \a click signal that were added effectively become par \o The component can now be used elsewhere as MyButton: \code -<MyButton label="Save" onClick="saveData()"/> +MyButton { label: "Save"; onClicked: saveData() } ... -<MyButton label="Cancel" onClick="cancelData()"/> +MyButton { label: "Cancel"; onClicked: cancelData() } ... -<MyButton label="Reset" onClick="resetData()"/> +MyButton { label: "Reset"; onClicked: resetData() } \endcode \endlist diff --git a/doc/src/declarative/cppitem.qdoc b/doc/src/declarative/cppitem.qdoc index 959bc6d..534b32b 100644 --- a/doc/src/declarative/cppitem.qdoc +++ b/doc/src/declarative/cppitem.qdoc @@ -76,7 +76,7 @@ For example: QML_DECLARE_TYPE(MyCircle); QML_DEFINE_TYPE(MyCircle,Circle); \endcode -would make the \e MyCircle class accessable though the \c <Circle/> tag in QML. +would make the \e MyCircle class accessable though the \c Circle type in QML. \section1 Creating a new 'Fx' item in C++ diff --git a/src/declarative/fx/qfxflipable.cpp b/src/declarative/fx/qfxflipable.cpp index db390d2..24ae428 100644 --- a/src/declarative/fx/qfxflipable.cpp +++ b/src/declarative/fx/qfxflipable.cpp @@ -80,8 +80,8 @@ Flipable { endX: 20 endY: 40 } - front: Image { src: "front.png" } - back: Image { src: "back.png" } + front: Image { source: "front.png" } + back: Image { source: "back.png" } states: [ State { name: "back" diff --git a/src/declarative/fx/qfximage.cpp b/src/declarative/fx/qfximage.cpp index 53c6137..838da30 100644 --- a/src/declarative/fx/qfximage.cpp +++ b/src/declarative/fx/qfximage.cpp @@ -203,8 +203,8 @@ QFxScaleGrid *QFxImage::scaleGrid() \qml Item { Image { source: "tile.png" } - Image { x: 80; width: 100; height: 100; src: "tile.png" } - Image { x: 190; width: 100; height: 100; tile: true; src: "tile.png" } + Image { x: 80; width: 100; height: 100; source: "tile.png" } + Image { x: 190; width: 100; height: 100; tile: true; source: "tile.png" } } \endqml \image declarative-image_tile.png diff --git a/src/declarative/fx/qfxitem.cpp b/src/declarative/fx/qfxitem.cpp index 84dc484..ecc2d65 100644 --- a/src/declarative/fx/qfxitem.cpp +++ b/src/declarative/fx/qfxitem.cpp @@ -448,7 +448,7 @@ QFxItem::~QFxItem() This example scales an image about its center. \qml Image { - src: "myimage.png" + source: "myimage.png" transformOrigin: "Center" scale: 4 } diff --git a/src/declarative/fx/qfxparticles.cpp b/src/declarative/fx/qfxparticles.cpp index 45de1a3..0ac537a 100644 --- a/src/declarative/fx/qfxparticles.cpp +++ b/src/declarative/fx/qfxparticles.cpp @@ -251,7 +251,7 @@ Rect { y: 0 width: parent.width height: 30 - src: "star.png" + source: "star.png" lifeSpan: 5000 count: 50 angle: 70 @@ -543,7 +543,7 @@ Rect { y: 0 width: parent.width height: 30 - src: "star.png" + source: "star.png" lifeSpan: 5000 count: 50 angle: 70 @@ -560,7 +560,7 @@ Rect { x: 120 width: 1 height: 1 - src: "star.png" + source: "star.png" lifeSpan: 5000 count: 200 angle: 270 @@ -698,7 +698,7 @@ void QFxParticles::setCount(int cnt) \qml Particles { - src: "star.png" + source: "star.png" lifeSpan: 200 lifeSpanDeviation: 100 } @@ -735,7 +735,7 @@ void QFxParticles::setLifeSpan(int ls) \qml Particles { - src: "star.png" + source: "star.png" lifeSpan: 200 lifeSpanDeviation: 100 } @@ -813,7 +813,7 @@ void QFxParticles::setFadeOutDuration(int dur) \qml Particles { - src: "star.png" + source: "star.png" angle: 60 angleDeviation: 90 } @@ -848,7 +848,7 @@ void QFxParticles::setAngle(qreal angle) \qml Particles { - src: "star.png" + source: "star.png" angle: 60 angleDeviation: 90 } @@ -880,7 +880,7 @@ void QFxParticles::setAngleDeviation(qreal dev) \qml Particles { - src: "star.png" + source: "star.png" velocity: 50 velocityDeviation: 20 } @@ -915,7 +915,7 @@ void QFxParticles::setVelocity(qreal velocity) \qml Particles { - src: "star.png" + source: "star.png" velocity: 50 velocityDeviation: 20 } diff --git a/src/declarative/fx/qfxreflectionfilter.cpp b/src/declarative/fx/qfxreflectionfilter.cpp index a55f374..0bc01a7 100644 --- a/src/declarative/fx/qfxreflectionfilter.cpp +++ b/src/declarative/fx/qfxreflectionfilter.cpp @@ -72,23 +72,23 @@ public: \qml HorizontalLayout { Image { - src: "icon.png" + source: "icon.png" filter: Reflection { } } Image { - src: "icon.png" + source: "icon.png" filter: Reflection { offset: 1 } } Image { - src: "icon.png" + source: "icon.png" filter: Reflection { offset: 1; alpha: 0.5 } } Image { - src: "icon.png" + source: "icon.png" filter: Reflection { offset: 1; alpha: 0.5; height: 50 } } Image { - src: "icon.png" + source: "icon.png" filter: Reflection { offset: 1; alpha: 0.5; height: 50; scale: 0.5 } } } @@ -147,7 +147,7 @@ void QFxReflectionFilter::setAlpha(qreal a) \qml Image { id: myImage - src: "album.png" + source: "album.png" filter: Reflection { height: myImage.height * 0.5 } diff --git a/src/declarative/fx/qfxshadowfilter.cpp b/src/declarative/fx/qfxshadowfilter.cpp index 4d34f74..83c1b47 100644 --- a/src/declarative/fx/qfxshadowfilter.cpp +++ b/src/declarative/fx/qfxshadowfilter.cpp @@ -86,7 +86,7 @@ Rect { } Image { - src: "pics/qtlogo.png" + source: "pics/qtlogo.png" filter: Shadow { yOffset: 8 xOffset: 8 diff --git a/src/declarative/fx/qfxtransform.cpp b/src/declarative/fx/qfxtransform.cpp index 1fe02d1..71ca716 100644 --- a/src/declarative/fx/qfxtransform.cpp +++ b/src/declarative/fx/qfxtransform.cpp @@ -322,7 +322,7 @@ void QFxRotation3D::update() The following example translates the image to 10, 3. \qml Image { - src: "logo.png" + source: "logo.png" transform: [ Translation3D { axis.startX: 0 @@ -520,9 +520,9 @@ QMatrix4x4 QFxPerspective::transform() const HorizontalLayout { margin: 10 spacing: 10 - Image { src: "qt.png" } + Image { source: "qt.png" } Image { - src: "qt.png" + source: "qt.png" transform: Squish { x:0; y:0; width:60; height:60 topLeftX:0; topLeftY:0 @@ -532,7 +532,7 @@ QMatrix4x4 QFxPerspective::transform() const } } Image { - src: "qt.png" + source: "qt.png" transform: Squish { x:0; y:0; width:60; height:60 topLeftX:0; topLeftY:0 @@ -542,7 +542,7 @@ QMatrix4x4 QFxPerspective::transform() const } } Image { - src: "qt.png" + source: "qt.png" transform: Squish { x:0; y:0; width:60; height:60 topLeftX:0; topLeftY:10 @@ -552,7 +552,7 @@ QMatrix4x4 QFxPerspective::transform() const } } Image { - src: "qt.png" + source: "qt.png" transform: Squish { x:0; y:0; width:60; height:60 topLeftX:10; topLeftY:0 |