From ac7e5eb6c5fff0ea87f1af0681ab1881b8bf8eb2 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Wed, 6 May 2009 12:48:23 +1000 Subject: Documentation. --- doc/src/declarative/animation.qdoc | 6 +- doc/src/declarative/components.qdoc | 4 +- doc/src/declarative/cppitem.qdoc | 4 +- doc/src/declarative/focus.qdoc | 176 +++++++++++---------- doc/src/declarative/qmlforcpp.qdoc | 25 ++- .../snippets/declarative/listview/highlight.qml | 28 ++-- doc/src/snippets/declarative/listview/listview.qml | 19 +-- 7 files changed, 136 insertions(+), 126 deletions(-) diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc index fb14fdc..f7e03ee 100644 --- a/doc/src/declarative/animation.qdoc +++ b/doc/src/declarative/animation.qdoc @@ -25,15 +25,13 @@ Other Features: \o Animation synchronization \endlist -The simplest form of animation is using \c <NumericAnimation/> +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" + width: 120; height: 200; color: "white" Image { id: img source: "pics/qtlogo.png" diff --git a/doc/src/declarative/components.qdoc b/doc/src/declarative/components.qdoc index db59b61..6564375 100644 --- a/doc/src/declarative/components.qdoc +++ b/doc/src/declarative/components.qdoc @@ -12,7 +12,9 @@ Writing and using components allows you to: \o Create new Qml elements without writing a new C++ class. (See \l {cppitem}{Creating Qml elements in C++}) \endlist -Components are placed in \e .qml files, allowing \e to then be used as a tag elsewhere. For example, if you have a Slider.qml file, you can then use \c to place a slider. +Components are placed in \e .qml files, allowing \e to then be used as a tag +elsewhere. For example, if you have a Slider.qml file, you can then use \c {Slider \{\}} to +place a slider. Components may be collected into \l {qmlmodules}{modules}. diff --git a/doc/src/declarative/cppitem.qdoc b/doc/src/declarative/cppitem.qdoc index 534b32b..d212a5e 100644 --- a/doc/src/declarative/cppitem.qdoc +++ b/doc/src/declarative/cppitem.qdoc @@ -5,8 +5,8 @@ \section1 Making a C++ object available in QML -In QML, XML tags and attributes correspond to Qt objects and properties. Thus, any Qt object -can potentially be used as an element in QML. More specifically, to make an object available in QML, +In QML, the item types and properties correspond to Qt objects and properties. Thus, any Qt object +can potentially be used as an item in QML. More specifically, to make an object available in QML, it should: \list \o Be a subclass of QObject. diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc index fc747a9..bb54852 100644 --- a/doc/src/declarative/focus.qdoc +++ b/doc/src/declarative/focus.qdoc @@ -17,14 +17,15 @@ When the user presses or releases a key, the following occurs: \o The key event is delivered by the scene to the fluid UI \l Item with \e {active focus}. If no fluid UI \l Item has \e {active focus}, the key event is \l {QEvent::ignore()}{ignored} and regular Qt key handling continues. \o If the fluid UI \l Item with \e {active focus} accepts the key event, propagation stops. Otherwise the event is "bubbled up", by recursively passing it to each \l Item's parent until either the event is accepted, or the root \l Item is reached. -If the \c {} element in the following example has active focus and the \e A key is pressed, it will bubble up to the \c {}. However, pressing the \e B key will bubble up to the root item and thus subsequently be \l {QEvent::ignore()}{ignored}. +If the \c {Rect} element in the following example has active focus and the \e A key is pressed, it will bubble up to the \c {KeyActions}. However, pressing the \e B key will bubble up to the root item and thus subsequently be \l {QEvent::ignore()}{ignored}. \code - - - - - +Item { + KeyActions { + keyA: "print('Key A was pressed')" + Rect {} + } +} \endcode \o If the root \l Item is reached, the key event is \l {QEvent::ignore()}{ignored} and regular Qt key handling continues. @@ -38,9 +39,9 @@ read-only property \c {Item::activeFocus}. For example, here we have a \l Text element whose text is determined by whether or not it has \e {active focus}. \code - - {activeFocus?"I have active focus!":"I do not have active focus"} - +Text { + text: activeFocus ? "I have active focus!" : "I do not have active focus" +} \endcode \section1 Acquiring Focus and Focus Realms @@ -55,14 +56,16 @@ the \c {} element has \e {active focus} and pressing the \table \row \o \code - - - - MyText.text = "Key A was pressed" - MyText.text = "Key B was pressed" - MyText.text = "Key C was pressed" - - + Rect { + color: "lightsteelblue"; width: 240; height: 25 + Text { id: MyText } + KeyActions { + focus: true + keyA: "MyText.text = 'Key A was pressed'" + keyB: "MyText.text = 'Key B was pressed'" + keyC: "MyText.text = 'Key C was pressed'" + } + } \endcode \o \image declarative-qmlfocus1.png \endtable @@ -78,34 +81,42 @@ reponds accordingly. \table \row \o \code - - - - +Rect { + color: "red"; width: 240; height: 55 + MyWidget {} + MyWidget { y: 30; focus: true } +} \endcode \o \code - - - - - MyText.text = "Key A was pressed" - MyText.text = "Key B was pressed" - MyText.text = "Key C was pressed" - - - - - - MyText.text = "Key A was pressed" - MyText.text = "Key B was pressed" - MyText.text = "Key C was pressed" - - +Rect { + color: "red"; width: 240; height: 55 + Rect { + color: "lightsteelblue"; width: 240; height: 25 + Text { id: MyText } + KeyActions { + focus: true + keyA: "MyText.text = 'Key A was pressed'" + keyB: "MyText.text = 'Key B was pressed'" + keyC: "MyText.text = 'Key C was pressed'" + } + } + Rect { + y: 30; focus: true + color: "lightsteelblue"; width: 240; height: 25 + Text { id: MyText } + KeyActions { + focus: true + keyA: "MyText.text = 'Key A was pressed'" + keyB: "MyText.text = 'Key B was pressed'" + keyC: "MyText.text = 'Key C was pressed'" + } + } +} \endcode \endtable The right hand side of the example shows the expanded code - the equivalent QML -without the use of the component \c {}. From this, the problem is +without the use of the component \c {MyWidget}. From this, the problem is evident - there are no less than three elements that have the \c {Item::focus} property set to true. Ultimately only one element can have focus, and the system has to decide which on. In this case the first appearance of the @@ -113,12 +124,12 @@ system has to decide which on. In this case the first appearance of the of \c {Item::focus} in the other two instances is reverted back to false. This is exactly the opposite of what was wanted! -This problem is fundamentally one of visibility. The \c {} -components each set their \c {} as focused as that is all they can +This problem is fundamentally one of visibility. The \c {MyWidget} +components each set their \c {KeyActions} as focused as that is all they can do - they don't know how they are going to be used, but they do know that when -they're in use their \c {} element is what needs focus. Likewise -the code that uses the \c {}'s sets the second \c {} as -focused because, while it doesn't know exactly how the \c {} is +they're in use their \c {KeyActions} element is what needs focus. Likewise +the code that uses the \c {MyWidget}'s sets the second \c {MyWidget} as +focused because, while it doesn't know exactly how the \c {MyWidget} is implemented, it knows that it wants the second one to be focused. No one piece of code knows everything about the other, which is exactly how it should be. @@ -134,16 +145,19 @@ result shown. \table \row \o \code - - - - - MyText.text = "Key A was pressed" - MyText.text = "Key B was pressed" - MyText.text = "Key C was pressed" - - - +FocusRealm { + width: 240; height: 25 + Rect { + color: "lightsteelblue"; width: 240; height: 25 + Text { id: MyText } + KeyActions { + focus: true + keyA: "MyText.text = 'Key A was pressed'" + keyB: "MyText.text = 'Key B was pressed'" + keyC: "MyText.text = 'Key C was pressed'" + } + } +} \endcode \o \image declarative-qmlfocus2.png \endtable @@ -164,16 +178,18 @@ then on clicking the either one gives it focus. \table \row \o \code - - - - +Rect { + color: "red"; width: 240; height: 55 + MyClickableWidget {} + MyClickableWidget { y: 30; focus: true } +} \endcode \o \code - - - - +FocusRealm { + id: Page; width: 240; height: 25 + MyWidget { focus: true } + MouseRegion { anchors.fill: parent; onClicked: { Page.focus = true } } +} \endcode \endtable @@ -201,25 +217,23 @@ print the name of the current list item. \table \row \o \code - - - - - - Bob - John - Michael - - - - - - - - - - - +Rect { + color: "lightsteelblue"; width: 240; height: 320 + + ListView { + id: MyView; anchors.fill: parent; focus: true + model: ListModel { + ListElement { name: "Bob" } + ListElement { name: "John" } + ListElement { name: "Michael" } + } + delegate: FocusRealm { + width: contents.width; height: contents.height + Text { text: name } + KeyActions { return: "print(name)"; focus: true } + } + } +} \endcode \o \image declarative-qmlfocus4.png \endtable diff --git a/doc/src/declarative/qmlforcpp.qdoc b/doc/src/declarative/qmlforcpp.qdoc index 282f261..e29b962 100644 --- a/doc/src/declarative/qmlforcpp.qdoc +++ b/doc/src/declarative/qmlforcpp.qdoc @@ -8,7 +8,7 @@ The QML syntax declaratively describes how to construct an in memory object tree. QML is usually used to describe a visual scene graph but it is not conceptually limited to this: the QML format is an abstract - description of \b any object tree. + description of \bold any object tree. QML also includes property bindings. Bindings are ECMAScript expressions of a properties value. Whenever the value of the expression changes - @@ -49,7 +49,7 @@ y: 10 width: 100 height: 100 - src: "background.png" + source: "background.png" Text { height: 50 @@ -62,11 +62,24 @@ \endcode The QML snippet shown above instantiates one \c Image instance and one - \c Text instance and sets properties on both. \b Everything in QML + \c Text instance and sets properties on both. \bold Everything in QML ultimately comes down to either instantiating an object instance, or assigning a property a value. QML relies heavily on Qt's meta object system and can only instantiate classes that derive from QObject. + In the above example, each property is placed on its own line. You can + also place multiple properties on one line by separating them with a + semi-colon. The code below is equivalent to the example above. + + \code + Image { + id: myRect + x: 10; y: 10; width: 100; height: 100 + source: "background.png" + Text { height: 50; width: 100; color: "white"; font.fontSize: 16; text: "Hello world!" } + } + \endcode + QML can set properties that are more complex than just simple types like integers and strings. Properties can be object pointers or Qt interface pointers or even lists of object or Qt interface pointers! QML is typesafe, @@ -251,9 +264,9 @@ \code Image { - src: "background.png" + source: "background.png" Text { - text: src + text: source } } \endcode @@ -505,7 +518,7 @@ objects are not associated with any particular instance. How the values of the attached properties apply to the behaviour they are controlling is entirely implementation dependent. An additional consequence of this is - that \b any object can attach \b any attached property. The following is + that \bold any object can attach \bold any attached property. The following is perfectly valid, although the attached property has no actual effect: \code diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml index d8bbb22..e3c948e 100644 --- a/doc/src/snippets/declarative/listview/highlight.qml +++ b/doc/src/snippets/declarative/listview/highlight.qml @@ -1,7 +1,6 @@ Rect { - width: 180 - height: 200 - color: "white" + width: 180; height: 200; color: "white" + // ContactModel model is defined in dummydata/ContactModel.qml // The viewer automatically loads files in dummydata/* to assist // development without a real data source. @@ -13,16 +12,11 @@ Rect { id: Delegate Item { id: Wrapper - width: 180 - height: 40 + width: 180; height: 40 VerticalLayout { x: 5; y: 5 - Text { - text: 'Name: ' + name - } - Text { - text: 'Number: ' + number - } + Text { text: 'Name: ' + name } + Text { text: 'Number: ' + number } } } } @@ -34,10 +28,8 @@ Rect { Component { id: Highlight Rect { - width: 180 - height: 40 - color: "lightsteelblue" - radius: 5 + width: 180; height: 40 + color: "lightsteelblue"; radius: 5 y: Follow { source: List.current.y spring: 3 @@ -47,10 +39,8 @@ Rect { } ListView { id: List - width: 180 - height: parent.height - model: ContactModel - delegate: Delegate + width: parent.height; height: parent.height + model: ContactModel; delegate: Delegate highlight: Highlight autoHighlight: false focus: true diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml index 3596af1..21a5fce 100644 --- a/doc/src/snippets/declarative/listview/listview.qml +++ b/doc/src/snippets/declarative/listview/listview.qml @@ -1,8 +1,7 @@ //! [3] Rect { - width: 180 - height: 200 - color: "white" + width: 180; height: 200; color: "white" + // ContactModel model is defined in dummydata/ContactModel.qml // The viewer automatically loads files in dummydata/* to assist // development without a real data source. @@ -14,16 +13,11 @@ Rect { id: Delegate Item { id: Wrapper - width: 180 - height: 40 + width: 180; height: 40 VerticalLayout { x: 5; y: 5 - Text { - text: 'Name: ' + name - } - Text { - text: 'Number: ' + number - } + Text { text: 'Name: ' + name } + Text { text: 'Number: ' + number } } } } @@ -42,8 +36,7 @@ Rect { // The actual list //! [2] ListView { - width: 480 - height: parent.height + width: parent.width; height: parent.height model: ContactModel delegate: Delegate highlight: Highlight -- cgit v0.12