diff options
| -rw-r--r-- | doc/src/declarative/animation.qdoc | 2 | ||||
| -rw-r--r-- | doc/src/declarative/basicelements.qdoc | 1 | ||||
| -rw-r--r-- | doc/src/declarative/basictypes.qdoc | 4 | ||||
| -rw-r--r-- | doc/src/declarative/declarativeui.qdoc | 2 | ||||
| -rw-r--r-- | doc/src/declarative/mouseevents.qdoc | 76 | ||||
| -rw-r--r-- | doc/src/declarative/propertybinding.qdoc | 14 | ||||
| -rw-r--r-- | doc/src/declarative/qdeclarativedocument.qdoc | 50 | ||||
| -rw-r--r-- | doc/src/declarative/qdeclarativemodels.qdoc | 3 | ||||
| -rw-r--r-- | doc/src/declarative/qdeclarativestates.qdoc | 229 | ||||
| -rw-r--r-- | doc/src/declarative/qmlevents.qdoc | 110 | ||||
| -rw-r--r-- | doc/src/declarative/qmlreusablecomponents.qdoc | 441 | ||||
| -rw-r--r-- | doc/src/declarative/qmlsyntax.qdoc | 2 | ||||
| -rw-r--r-- | doc/src/declarative/qmltexthandling.qdoc | 23 | ||||
| -rw-r--r-- | doc/src/declarative/qmlviews.qdoc | 27 |
14 files changed, 335 insertions, 649 deletions
diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc index 77900ee..bd6813c 100644 --- a/doc/src/declarative/animation.qdoc +++ b/doc/src/declarative/animation.qdoc @@ -151,7 +151,7 @@ demonstration of behavioral animations. Animations can run \e {in parallel} or \e {in sequence}. Parallel animations will play a group of animations at the same time while sequential animations play a group of animations in order: one after the other. Grouping animations in -\l{SequentialAnimation} and \{ParallelAnimation} will play the animations in +\l{SequentialAnimation} and \l{ParallelAnimation} will play the animations in sequence or in parallel. A banner component may have several icons or slogans to display, one after the diff --git a/doc/src/declarative/basicelements.qdoc b/doc/src/declarative/basicelements.qdoc index 4253e4c..5997998 100644 --- a/doc/src/declarative/basicelements.qdoc +++ b/doc/src/declarative/basicelements.qdoc @@ -91,6 +91,7 @@ The \l Text and \l TextEdit elements display formatted text onto the screen. \c TextEdit features multi-line editing while the \l TextInput element is for single line text input. +\keyword qml-top-level-component \section1 Using Elements as the Top-Level Component For creating components (or displaying a simple scene), there are different diff --git a/doc/src/declarative/basictypes.qdoc b/doc/src/declarative/basictypes.qdoc index 948bdef..1be648e 100644 --- a/doc/src/declarative/basictypes.qdoc +++ b/doc/src/declarative/basictypes.qdoc @@ -29,8 +29,8 @@ \page qdeclarativebasictypes.html \ingroup qml-features \contentspage QML Features - \previouspage {Property Binding} - \nextpage {QML Basic Elements}{Basic Elements} + \previouspage {QML Basic Elements} + \nextpage Property Binding \title QML Basic Types QML has a set of primitive types, as listed below, that are used throughout diff --git a/doc/src/declarative/declarativeui.qdoc b/doc/src/declarative/declarativeui.qdoc index ae11559..aa4006b 100644 --- a/doc/src/declarative/declarativeui.qdoc +++ b/doc/src/declarative/declarativeui.qdoc @@ -81,7 +81,7 @@ QML and the Qt Declarative Module separate the frontend UI logic from the backen \o \l{QML Basic Elements}{Basic Elements} \o \l{Using QML Positioner and Repeater Items}{Component Layouts} \o \l{Anchor-based Layout in QML}{Layouts using Anchors} -\o \l{Mouse Events} +\o \l{QML Mouse Events}{Mouse Events} \o \l{QML Text Handling and Validators}{Text Handling and Validators} \o \l{Keyboard Focus in QML}{Keyboard Focus} \o \l{Importing Reusable Components} diff --git a/doc/src/declarative/mouseevents.qdoc b/doc/src/declarative/mouseevents.qdoc index f6512a7..eed3a3a 100644 --- a/doc/src/declarative/mouseevents.qdoc +++ b/doc/src/declarative/mouseevents.qdoc @@ -35,9 +35,7 @@ \tableofcontents -\section1 Introduction - -\section1 Mouse Events +\section1 Mouse Elements \list \o \l{MouseArea} Element @@ -45,7 +43,77 @@ \endlist \section1 Mouse Event Handling -go over the slots and signals feature (without the C++) + +QML uses \l{QML Signal and Handler Event System}{signals and handlers} to +deliver mouse interactions. Specifically, the \l MouseArea and \l MouseEvent +elements provide QML components with signal handlers to accept mouse events +within a defined area. + +\section1 Defining a Mouse Area + +The \l MouseArea element receives events within a defined area. One quick way +to define this area is to anchor the \c MouseArea to its parent's area using the +\c anchors.fill property. If the parent is a \l Rectangle (or any \l Item +component), then the MouseArea will fill the area defined by the parent's +dimensions. Alternatively, an area smaller or larger than the parent is +definable. +\snippet doc/src/snippets/declarative/mouse.qml anchor fill + +\section1 Receiving Events + +The MouseArea element provides +\l{QML Signal and Handler Event System}{signals and handlers} to detect different +mouse events. The \l MouseArea element documentation describes these +gestures in greater detail. + +\list Mouse Gestures +\o canceled +\o clicked +\o doubleClicked +\o entered +\o exited +\o positionChanged +\o pressAndHold +\o pressed +\o released +\endlist + +These signals have signal handlers that are invoked when the signals are emitted. +\snippet doc/src/snippets/declarative/mouse.qml mouse handlers + +\section1 Enabling Gestures +Some mouse gestures and button clicks need to be enabled before they send or +receive events. Certain \l MouseArea and \l MouseEvent properties enable these +gestures. + +To listen to (or explicitly ignore) a certain mouse button, set the appropriate +mouse button to the \l {MouseArea::acceptedButtons}{acceptedButtons} property. + +Naturally, the mouse events, such as button presses and mouse positions, are +sent during a mouse click. For example, the \c containsMouse property will only +retrieve its correct value during a mouse press. The +\l {MouseArea::hoverEnabled}{hoverEnabled} will enable mouse events and +positioning even when there are no mouse button presses. Setting the +\c hoverEnabled property to \c true, in turn will enable the \c entered, +\c exited, and \c positionChanged signal and their respective signal handlers. + +Additionally, to disable the whole mouse area, set the \c MouseArea +element's \c enabled property to \c false. + +\section1 MouseEvent Object + +Signals and their handlers receive a \l MouseEvent object as a parameter. The +\c mouse object contain information about the mouse event. For example, the +mouse button that started the event is queried through the +\l {MouseEvent::button}{mouse.button} property. + +The \c MouseEvent object can also ignore a mouse event using its \c accepted +property. + +\section2 Accepting Further Signals +Many of the signals are sent multiple times to reflect various mouse events +such as double clicking. To facilitate the classification of mouse clicks, the +MouseEvent object has an \c accepted property to disable the event propagation. To learn more about QML's event system, please read the \l {QML Signal and Handler Event System} document. diff --git a/doc/src/declarative/propertybinding.qdoc b/doc/src/declarative/propertybinding.qdoc index 27653bd..00ff650 100644 --- a/doc/src/declarative/propertybinding.qdoc +++ b/doc/src/declarative/propertybinding.qdoc @@ -35,9 +35,14 @@ \section1 Properties -A property is a value of a QML component that can be read and modified by other objects. -In QML, properties serve many purpose. Their main function is to bind to values. -Values may be a \l{QML Basic Types}{basic type}, or other QML elements. +QML components have \e properties that can be read and modified by other objects. +In QML, properties serve many purposes but their main function is to bind to +values. Values may be a \l{QML Basic Types}{basic type}, or other QML elements. + +The syntax for properties is: +\qml + [default] property <type> <name>[: defaultValue] +\endqml Elements already possess useful properties but, to create custom properties, precede the property name with the keyword \c property. @@ -48,7 +53,7 @@ precede the property name with the keyword \c property. \snippet doc/src/snippets/declarative/properties.qml parent end QML property rules coincide with many of JavaScript's property rules, for example, -properti names must begin with a lowercase letter. +property names must begin with a lowercase letter. \l {JavaScript Reserved Words}{JavaScript reserved words} are not valid property names. @@ -229,7 +234,6 @@ Accessing the aliasing property is similar to accessing a regular property. In addition, the optional \c default keyword indicates that the aliasing property is a \l{Default Properties}{default property}. -<<<<<<< HEAD \snippet doc/src/snippets/declarative/Button.qml property alias When importing the component as a \c Button, the \c buttonlabel is directly accessible through the \c label property. diff --git a/doc/src/declarative/qdeclarativedocument.qdoc b/doc/src/declarative/qdeclarativedocument.qdoc index b94e32e..f2147de 100644 --- a/doc/src/declarative/qdeclarativedocument.qdoc +++ b/doc/src/declarative/qdeclarativedocument.qdoc @@ -42,17 +42,17 @@ Here is a simple QML document: QML documents are always encoded in UTF-8 format. -A QML document always begins with one or more import statements. To prevent elements -introduced in later versions from affecting existing QML programs, the element types -available within a document are controlled by the imported QML \l {Modules}. That is, +A QML document always begins with one or more import statements. To prevent elements +introduced in later versions from affecting existing QML programs, the element types +available within a document are controlled by the imported QML \l {Modules}. That is, QML is a \e versioned language. -Syntactically a QML document is self contained; QML does \e not have a preprocessor that -modifies the document prior to presentation to the QML runtime. \c import statements -do not "include" code in the document, but instead instruct the QML runtime on how to -resolve type references found in the document. Any type reference present in a QML -document - such as \c Rectangle and \c ListView - including those made within an -\l {Inline JavaScript}{JavaScript block} or \l {Property Binding}s, are \e resolved based exclusively on the +Syntactically a QML document is self contained; QML does \e not have a preprocessor that +modifies the document prior to presentation to the QML runtime. \c import statements +do not "include" code in the document, but instead instruct the QML runtime on how to +resolve type references found in the document. Any type reference present in a QML +document - such as \c Rectangle and \c ListView - including those made within an +\l {Inline JavaScript}{JavaScript block} or \l {Property Binding}s, are \e resolved based exclusively on the import statements. QML does not import any modules by default, so at least one \c import statement must be present or no elements will be available! @@ -63,12 +63,12 @@ resolved according to the document scope. \section1 Documents as Component Definitions -A QML document defines a single, top-level \l {QDeclarativeComponent}{QML component}. A QML component -is a template that is interpreted by the QML runtime to create an object with some predefined -behaviour. As it is a template, a single QML component can be "run" multiple times to -produce several objects, each of which are said to be \e instances of the component. +A QML document defines a single, top-level \l {QDeclarativeComponent}{QML component}. A QML component +is a template that is interpreted by the QML runtime to create an object with some predefined +behaviour. As it is a template, a single QML component can be "run" multiple times to +produce several objects, each of which are said to be \e instances of the component. -Once created, instances are not dependent on the component that created them, so they can +Once created, instances are not dependent on the component that created them, so they can operate on independent data. Here is an example of a simple "Button" component (defined in a \c Button.qml file) that is instantiated four times by \c application.qml. Each instance is created with a different value for its \c text property: @@ -80,7 +80,7 @@ Each instance is created with a different value for its \c text property: \row \o \snippet doc/src/snippets/declarative/qml-documents/qmldocuments.qml document -\o +\o \qml import QtQuick 1.0 @@ -112,23 +112,23 @@ to other QML components and applications in the same directory. \section1 Inline Components In addition to the top-level component that all QML documents define, and any reusable -components placed in separate files, documents may also -include \e inline components. Inline components are declared using the -\l Component element, as can be seen in the first example above. Inline components share +components placed in separate files, documents may also +include \e inline components. Inline components are declared using the +\l Component element, as can be seen in the first example above. Inline components share all the characteristics of regular top-level components and use the same \c import list as their -containing QML document. Components are one of the most basic building blocks in QML, and are +containing QML document. Components are one of the most basic building blocks in QML, and are frequently used as "factories" by other elements. For example, the \l ListView element uses the \c delegate component as the template for instantiating list items - each list item is just a new instance of the component with the item specific data set appropriately. -Like other \l {QML Elements}, the \l Component element is an object and must be assigned to a +Like other \l {QML Elements}, the \l Component element is an object and must be assigned to a property. \l Component objects may also have an object id. In the first example on this page, -the inline component is added to the \l Rectangle's \c resources list, and then -\l {Property Binding} is used to assign the \l Component to the \l ListView's \c delegate +the inline component is added to the \l Rectangle's \c resources list, and then +\l {Property Binding} is used to assign the \l Component to the \l ListView's \c delegate property. While using property binding allows the \l Component object to be shared (for example, -if the QML document contained multiple \l ListView's with the same delegate), in this case the -\l Component could have been assigned directly to the \l ListView's \c delegate. The QML -language even contains a syntactic optimization when assigning directly to a component property +if the QML document contained multiple \l ListView's with the same delegate), in this case the +\l Component could have been assigned directly to the \l ListView's \c delegate. The QML +language even contains a syntactic optimization when assigning directly to a component property for this case where it will automatically insert the \l Component tag. These final two examples are behaviorally identical to the original document. diff --git a/doc/src/declarative/qdeclarativemodels.qdoc b/doc/src/declarative/qdeclarativemodels.qdoc index 70228b1..2f9d418 100644 --- a/doc/src/declarative/qdeclarativemodels.qdoc +++ b/doc/src/declarative/qdeclarativemodels.qdoc @@ -78,6 +78,7 @@ The use of positioner items to arrange items from a model is covered in \l{Using QML Positioner and Repeater Items}. +\keyword qml-data-models \section1 QML Data Models \section2 ListModel @@ -154,7 +155,7 @@ Note that in the above example there is no delegate required. The items of the model itself provide the visual elements that will be positioned by the view. - +\keyword qml-c++-models \section1 C++ Data Models Models can be defined in C++ and then made available to QML. This is useful diff --git a/doc/src/declarative/qdeclarativestates.qdoc b/doc/src/declarative/qdeclarativestates.qdoc index 4089609..3f05c9b 100644 --- a/doc/src/declarative/qdeclarativestates.qdoc +++ b/doc/src/declarative/qdeclarativestates.qdoc @@ -34,194 +34,105 @@ \target qmlstates \title QML States -\section1 Overview +\section1 States Elements +\list +\o \l State +\o \l PropertyChanges +\o \l StateGroup +\o \l StateChangeScript +\o \l ParentChange +\o \l AnchorChanges +\endlist -User interfaces are designed to present different interface configurations in -different scenarios, or to modify their appearances in response to user -interaction. Often, there are a set of changes that are made concurrently, such -that the interface could be seen to be internally changing from one \e state to -another. +\section1 Overview -This applies generally to interface elements regardless of their complexity. -A photo viewer may initially present images in a grid, and when an image is -clicked, change to a "detailed" state where the individual image is expanded -and the interface is changed to present new options for image editing. On the -other end of the scale, when a simple button is pressed, it may change to a -"pressed" state in which its color and position is modified to give a pressed -appearance. +Many user interface designs are \e state driven; interfaces have configurations +that differ depending on the current state. For example, a traffic signal will +configure its flags or lights depending on its state. While in the signal's +\c stop state, a red light will turn on while the yellow and the green lights +will turn off. In the \c caution state, the yellow light is on while the other +lights are turned off. -In QML, any object can change between different \e states to apply sets of -changes that modify the properties of relevant items. Each \e state could -present a different configuration that could, for example: +In QML, \e states are a set of property configurations defined in a \l State +element. Different configurations could, for example: \list \o Show some UI elements and hide others \o Present different available actions to the user -\o Start, stop or pause animations +\o Start, stop, or pause animations \o Execute some script required in the new state \o Change a property value for a particular item -\o Show a different view or "screen" +\o Show a different view or screen \endlist -Changes between states can be animated using \l {Transitions}{transitions}, as -discussed further below. - -All \l {Item}-based objects have a \e {default state}, and can specify additional -states by adding new \l State objects to the item's \l {Item::}{states} -property. Each state has a \e name that is unique for all states within that -item; the default state's name is an empty string. To change the current state +All \l {Item}-based objects have a \c state property, and can specify additional +states by adding new \c State objects to the item's \l {Item::}{states} +property. Each state within a component has a unique \c name, an empty string +being the default. To change the current state of an item, set the \l {Item::}{state} property to the name of the state. -Non-Item objects can use states through the StateGroup element. - +Non-Item objects may use states through the \l StateGroup element. \section1 Creating States To create a state, add a \l State object to the item's \l {Item::}{states} property, which holds a list of states for that item. -Following is an example. Here, the \l Rectangle is initially placed in the -default (0, 0) position. It has defined an additional state named "moved", in -which a PropertyChanges object repositions the rectangle to (50, 50). Clicking -within the MouseArea changes the state to the "moved" state, thus moving the \l -Rectangle. - -\snippet doc/src/snippets/declarative/states.qml 0 - -The \l State item defines all the changes to be made in the new state. It -could specify additional properties to be changed, or create additional -PropertyChanges for other objects. It can also modify the properties of other -objects, not just the object that owns the state. For example: - -\qml -Rectangle { - // ... - states: [ - State { - name: "moved" - PropertyChanges { target: myRect; x: 50; y: 50; color: "blue" } - PropertyChanges { target: someOtherItem; width: 1000 } - } - ] -} -\endqml - -As a convenience, if an item only has one state, its \l {Item::}{states} -property can be defined as a single \l State, without the square-brace list -syntax: - -\snippet doc/src/snippets/declarative/propertyanimation.qml single state - -A \l State is not limited to performing modifications on property values. It -can also: - +A warning \c signal component may have two states, the \c NORMAL and the +\c CRITICAL state. Suppose that in the \c NORMAL state, the \c color of the +signal should be \c green and the warning \c flag is down. Meanwhile, in the +\c CRITICAL state, the \c color should be \c red and the flag is \c up. We may +model the states using the \c State element and the color and flag +configurations with the \c PropertyChanges element. +\snippet doc/src/snippets/declarative/states.qml signal states +The \l PropertyChanges element will change the values of object properties. +Objects are referenced through their \l {qml-id-property}{id}. Objects outside +the component are also referenced using the \c id property, exemplified by the +property change to the external \c flag object. + +Further, the state may change by assigning the \c state property with the +appropriate signal state. A state switch could be in a \l MouseArea element, +assigning a different state whenever the signal receives a mouse click. +\snippet doc/src/snippets/declarative/states.qml switch states + +The State element is not limited to performing modifications on property values. +It can also: \list -\o Run some script using StateChangeScript -\o Override an existing signal handler for an object using PropertyChanges -\o Re-parent an \l Item using ParentChanges -\o Modify anchor values using AnchorChanges +\o Run some script using \l StateChangeScript +\o Override an existing signal handler for an object using \l PropertyChanges +\o Re-parent an \l Item using \l ParentChange +\o Modify anchor values using \l AnchorChanges \endlist -The \l {declarative/animation/states}{States and Transitions example} -demonstrates how to declare a basic set of states and apply animated -transitions between them. - - \section1 The Default State -Of course, the \l Rectangle in the example above could have simply been moved -by setting its position to (50, 50) in the mouse area's \c onClicked handler. -However, aside from enabling batched property changes, one of the features of -QML states is the ability of an item to revert to its \e {default state}. -The default state contains all of an item's initial property values before -they were modified in a state change. - -For example, suppose the \l Rectangle should move to (50,50) when the mouse is -pressed, and then move back to its original position when the mouse is -released. This can be achieved by using the \l {State::}{when} property, -like this: - -\qml -Rectangle { - // ... - - MouseArea { - id: mouseArea - anchors.fill: parent - } - - states: State { - name: "moved" - when: mouseArea.pressed - // ... - } -} -\endqml - -The \l {State::}{when} property is set to an expression that evaluates to -\c true when the item should be set to that state. When the mouse is pressed, -the state is changed to \e moved. When it is released, the item reverts to its -\e default state, which defines all of the item's original property values. - -Alternatively, an item can be explicitly set to its default state by setting its -\l {Item::}{state} property to an empty string (""). For example, instead of -using the \l {State::}{when} property, the above code could be changed to: - -\qml -Rectangle { - // ... - - MouseArea { - anchors.fill: parent - onPressed: myRect.state = 'moved'; - onReleased: myRect.state = ''; - } - - states: State { - name: "moved" - // ... - } -} -\endqml - -Obviously it makes sense to use the \l {State::}{when} property when possible -as it provides a simpler (and a better, more declarative) solution than -assigning the state from signal handlers. - - -\section1 Animating State Changes - +Every \l Item based component has a \c state property and a \e{default state}. +The default state is the empty string (\c{""}) and contains all of an item's +initial property values. The default state is useful for managing property +values before state changes. Setting the \c state property to an empty string +will load the default state. -State changes can be easily animated through \l {Transitions}{transitions}. A -\l Transition defines the animations that should be applied when an item -changes from one state to another. +\section1 The \c when Property -If the above example was modified to include the following \l Transition, the -movement of the \l Rectangle would be animated: +For convenience, the \l State element has a \c when property that can bind to +expressions to change the state whenever the bound expression evaluates to +\c true. The \c when property will revert the state back to the +\l {The Default State}{default state} when the expression evaluates to false. -\qml -Rectangle { - // ... +\snippet doc/src/snippets/declarative/states.qml when property +The \c bell component will change to the \c RINGING state whenever the +\c signal.state is \c CRITICAL. - MouseArea { - // Handle mouse events... - } - - states: [ - // States are defined here... - ] +\section1 Animating State Changes - transitions: [ - Transition { - NumberAnimation { properties: "x,y"; duration: 500 } - } - ] - } -\endqml +State changes induce abrupt value changes. The \l Transitions element allow +smoother changes during state changes. In transitions, animations and +interpolation behaviors are definable. The +\l {QML Animation and Transitions}{Animation and Transitions} article has more +information about creating state animations. -This \l Transition defines that if any \c x or \c y properties have changed -during a state change within this item, their values should be animated over 500 -milliseconds. +The \l {declarative/animation/states}{States and Transitions example} +demonstrates how to declare a basic set of states and apply animated +transitions between them. -See the \l Transitions documentation for more information. */ diff --git a/doc/src/declarative/qmlevents.qdoc b/doc/src/declarative/qmlevents.qdoc index 3c1c8df..8c2147a 100644 --- a/doc/src/declarative/qmlevents.qdoc +++ b/doc/src/declarative/qmlevents.qdoc @@ -1,6 +1,10 @@ /**************************************************************************** ** +<<<<<<< HEAD +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +======= ** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +>>>>>>> d7a91cfe8683309883694fbbf508e5fc42d44165 ** All rights reserved. ** Contact: Nokia Corporation (qt-info@nokia.com) ** @@ -26,12 +30,106 @@ ****************************************************************************/ /*! - \page qmlevents.html - \ingroup qml-features - \contentspage QML Features - \previouspage {Integrating QML Code with Existing Qt UI Code} - \nextpage {Dynamic Object Management in QML}{Dynamic Object Management} +\page qmlevents.html +\ingroup qml-features +\contentspage QML Features +\previouspage {Integrating QML Code with Existing Qt UI Code} +\nextpage {Dynamic Object Management in QML}{Dynamic Object Management} - \title QML Signal and Handler Event System +\title QML Signal and Handler Event System + +\section1 Overview, structural information + +QML utilizes Qt's \l{The Meta-Object System}{meta-object} and +\l{Signals & Slots}{signals} systems. Signals and slots created using Qt in C++ +are inheritely valid in QML. + +\keyword qml-signals-and-handlers +\section1 Signals and Handlers + +Signals provide a way to notify other objects when an event has occurred. For +example, the MouseArea \c clicked signal notifies other objects that the mouse +has been clicked within the area. + +The syntax for defining a new signal is: + +\qml +signal <name>[([<type> <parameter name>[, ...]])] +\endqml + +Attempting to declare two signals or methods with the same name in the same type +block is an error. However, a new signal may reuse the name of an existing +signal on the type. (This should be done with caution, as the existing signal +may be hidden and become inaccessible.) + +Here are various examples of signal declarations: +\snippet doc/src/snippets/declarative/events.qml parent begin +\snippet doc/src/snippets/declarative/events.qml signal declaration +\snippet doc/src/snippets/declarative/events.qml parent end + +If the signal has no parameters, the "\c{()}" brackets are optional. If +parameters are used, the parameter types must be declared, as for the \c string +and \c variant arguments of the \c perform signal. + +Adding a signal to an item automatically adds a \e{signal handler} as well. The +signal hander is named \c on<SignalName>, with the first letter of the signal in +uppercase. The previous signals have the following signal handlers: +\snippet doc/src/snippets/declarative/events.qml signal handler declaration + +Further, each QML properties have a \c{<property_name>Changed} signal and its +corresponding \c{on<property_name>Changed} signal handler. As a result, property +changes may notify other components for any changes. +\snippet doc/src/snippets/declarative/events.qml automatic signals + +To emit a signal, invoke it as a method. The signal handler binding is similar +to a property binding and it is invoked when the signal is emitted. Use the +defined argument names to access the respective arguments. +\snippet doc/src/snippets/declarative/events.qml signal emit +Note that the \c Component.onCompleted is an +\l{attached-signalhandlers}{attached signal handler}; it is invoked when the +\l Component initialization is complete. + +\keyword qml-connect-signals-to-method +\section2 Connecting Signals to Methods and Signals + +Signal objects have a \c connect() method to a connect a signal either to a +method or another signal. When a signal is connected to a method, the method is +automatically invoked whenever the signal is emitted. (In Qt terminology, the +method is a \e slot that is connected to the \e signal; all methods defined in +QML are created as \l{Signals & Slots}{Qt slots}.) This enables a signal +to be received by a method instead of a \l {Signal Handlers}{signal handler}. + +\snippet doc/src/snippets/declarative/events.qml connect method +The \c {connect()} method is appropriate when connecting a JavaScript method, +such as the \c {callee}'s\c answer method, to QML signals. + +The corresponding \c disconnect() method is for removing connected +signals. The following code removes the connection created in \c application.qml above: +\snippet doc/src/snippets/declarative/events.qml disconnect method + +\section3 Signal to Signal Connect + +By connecting signals to other signals, the \c connect() method can form different +signal chains. +\snippet doc/src/snippets/declarative/events.qml parent begin +\snippet doc/src/snippets/declarative/events.qml forward signal +\snippet doc/src/snippets/declarative/events.qml parent end + +Whenever the \l MouseArea \c clicked signal is emitted, the \c widgetClicked +signal will automatically be emitted as well. + +\code +output: + MouseArea clicked + Widget clicked +\endcode + +\section1 C++ additions + +Because QML uses Qt, a signal defined in C++ also works as a QML signal. The +signal may be emitted in QML code or called as a method. In addition, the QML +runtime automatically creates signal handlers for the C++ signals. For more +signal control, the \c connect() method and the \l Connect element may connect a +C++ to another signal or method. */ diff --git a/doc/src/declarative/qmlreusablecomponents.qdoc b/doc/src/declarative/qmlreusablecomponents.qdoc index 78865a1..0d02f4d 100644 --- a/doc/src/declarative/qmlreusablecomponents.qdoc +++ b/doc/src/declarative/qmlreusablecomponents.qdoc @@ -34,23 +34,24 @@ \title Importing Reusable Components -One of the key concepts in QML is the ability to define your own QML components that suit -the purposes of your application. The standard \l {QML Elements} provide the essential components -for creating a QML application; beyond these, you can write your own custom components that can -be created and reused, without the use of C++. - -Components are the building blocks of a QML project. When writing a QML application, whether -large or small, it is best to separate QML code into smaller components that perform specific -sets of operations, instead of creating mammoth QML files with large, combined functionality -that is more difficult to manage and may contain duplicated code. +A \e component is an instantiable QML definition, typically contained in a +\c .qml file. For instance, a Button \e component may be defined in +\c Button.qml. The QML runtime may instantiate this Button component to create +Button \e objects. Alternatively, a component may be defined inside a +\l Component element. +Moreover, the Button definition may also contain other components. A Button +component could use a Text element for its label and other components to +implement its functions. Compounding components to form new components +(and effectively new interfaces) is the emphasis in QML. \section1 Defining New Components -A component is a reusable type with a well-defined interface, built entirely in QML. -Any snippet of QML code can become a component, by placing the code in a file "<Name>.qml" where -<Name> is the new component name, beginning with an uppercase letter. These QML files automatically -become available as new QML element types to other QML components and applications in the same directory. +Any snippet of QML code may become a component, by placing the code in a QML +file (extension is \c .qml). An inline component definition may also reside in a +\l Component element. + +\snippet doc/src/snippets/declarative/reusablecomponents/Button.qml document For example, one of the simplest and most common components you can build in QML is a button-type component. Below, we implement this component as a \l Rectangle with a clickable @@ -80,418 +81,6 @@ filesystems. It is recommended the file name case matches the case of the QML co exactly - for example, \c Box.qml and not \c BoX.qml - regardless of the platform to which the QML component will be deployed. -To write a useful component, it is generally necessary to provide it with custom attributes that store and -communicate specific data. This is achieved by adding the following attributes to your components: - -\list -\o \bold Properties that can be accessed externally to modify an object (for example, \l Item has - \l {Item::}{width} and \l {Item::}{height} properties) and used in \l {Property Binding} -\o \bold Methods of JavaScript code can be invoked internally or externally (for example, - \l Animation has a \l {Animation::}{start()} method) -\o \bold Signals to notify other objects when an event has occurred (for example, MouseArea has a - \c clicked signal) -\endlist - -The following sections show how these attributes can be added to QML components. - - -\section1 Adding Properties - -A property is a value of a QML component that can be read and modified by other objects. For -example, a \l Rectangle component has \l {Item::}{width}, \l {Item::}{height} and \l -{Rectangle::}{color} properties. Significantly, properties be used with \l {Property Binding}, where -a property value is automatically updated using the value of another property. - -The syntax for defining a new property is: - -\code -[default] property <type> <name>[: defaultValue] -\endcode - -A \c property declaration can appear anywhere within a QML component definition, but it is customary -to place it at the top. A component cannot declare more than one property with the same name. (It is -possible to have a property name that is the same as an existing property in a type, but this is not -recommended as the existing property becomes hidden and inaccessible.) - -Below is an example. The \c ImageViewer component has defined a \c string type property named -\c currentImage, and its initial value is "default-image.png". This property is used to set the image -displayed in the child \l Image object. Another file, \c application.qml, can create -an \c ImageViewer object and read or modify the \c currentImage value: - -\table -\row -\o \snippet doc/src/snippets/declarative/qml-extending-types/properties/ImageViewer.qml 0 -\o \snippet doc/src/snippets/declarative/qml-extending-types/properties/application.qml 0 -\endtable - -It is optional for a property to have a default value. The default value is a convenient shortcut, and is -behaviorally identical to doing it in two steps, like this: - -\qml -// Use default value -property int myProperty: 10 - -// Longer, but behaviorally identical -property int myProperty -myProperty: 10 -\endqml - - -\section2 Supported property types - -All QML properties are typed. The examples above show properties with \c int and \c string types; -notice that the type of the property must be declared. The type is used to determine the property -behavior, and how the property is defined in C++. - -A number of property types are supported by default. These are listed in the table below, -with their default values and the corresponding C++ type: - -\table -\header \o QML Type Name \o Default value \o C++ Type Name -\row \o int \o 0 \o int -\row \o bool \o \c false \o bool -\row \o double \o 0.0 \o double -\row \o real \o 0.0 \o double -\row \o string \o "" (empty string) \o QString -\row \o url \o "" (empty url) \o QUrl -\row \o color \o #000000 (black) \o QColor -\row \o date \o \c undefined \o QDateTime -\row \o variant \o \c undefined \o QVariant -\endtable - -QML object types can also be used as property types. This includes -\l {Defining new QML elements}{custom QML types} implemented in C++. Such properties are -defined like this: - -\qml -property Item itemProperty -property QtObject objectProperty -property MyCustomType customProperty -\endqml - -Such object-type properties default to an \c undefined value. - -\l{list}{List properties} are created with the \c list<Type> syntax, and default to an empty -list: - -\qml -property list<Item> listOfItems -\endqml - -Note that list properties cannot be modified like ordinary JavaScript -arrays. See the \l {list}{list type documentation} for details. - -For details about accessing and manipulating QML properties from C++, see \l {Using QML Bindings in C++ Applications}. - - -\section2 Property change signals - -Adding a \c property to an item automatically adds a \e {value changed} -signal handler to the item. To connect to this signal, use a \l {Signal Handlers}{signal handler} -named with the \c on<Property>Changed syntax, using upper case for the first letter of the -property name. - -For example, the following \c onMyNumberChanged signal handler is automatically called whenever the -\c myNumber property changes: - -\snippet doc/src/snippets/declarative/qml-extending-types/properties/property-signals.qml 0 - - -\section2 Default properties - -The optional \c default attribute for a property marks it as the \e {default property} -for a type. This allows other items to specify the default property's value -as child elements. For example, the \l Item element's default property is its -\l{Item::children}{children} property. This allows the children of an \l Item -to be set like this: - -\qml -Item { - Rectangle {} - Rectangle {} -} -\endqml - -If the \l{Item::children}{children} property was not the default property for -\l Item, its value would have to be set like this instead: - -\qml -Item { - children: [ - Rectangle {} - Rectangle {} - ] -} -\endqml - -See the \l{declarative/ui-components/tabwidget}{TabWidget} example for a -demonstration of using default properties. - -Specifying a default property overrides any existing default property (for -example, any default property inherited from a parent item). Using the -\c default attribute twice in the same type block is an error. - - -\section2 Property aliases - -Property aliases are a more advanced form of property declaration. Unlike a -property definition, which allocates a new, unique storage space for the -property, a property alias connects the newly declared property (called the -aliasing property) as a direct reference to an existing property (the aliased property). Read -operations on the aliasing property act as read operations on the aliased -property, and write operations on the aliasing property as write operations on -the aliased property. - -A property alias declaration looks a lot like an ordinary property definition: -\code - [default] property alias <name>: <alias reference> -\endcode - -As the aliasing property has the same type as the aliased property, an explicit -type is omitted, and the special "alias" keyword is used. Instead of a default -value, a property alias includes a compulsory alias reference. The alias -reference is used to locate the aliased property. While similar to a property -binding, the alias reference syntax is highly restricted. - -An alias reference takes one of the following forms: -\code - <id>.<property> - <id> -\endcode - -where <id> must refer to an object id within the same component as the type -declaring the alias, and, optionally, <property> refers to a property on that object. - -For example, below is a \c Button.qml component with a \c buttonText aliased property which is -connected to the child Text object's \c text property: - -\snippet doc/src/snippets/declarative/qml-extending-types/properties/alias.qml 0 - -The following code would create a \c Button with a defined text string for the -child \l Text object: - -\qml -Button { buttonText: "This is a button" } -\endqml - -Here, modifying \c buttonText directly modifies the \c textItem.text value; it does not -change some other value that then updates \c textItem.text. - -In this case, the use of aliased properties is essential. If \c buttonText was not an alias, -changing its value would not actually change the displayed text at all, as -\l {Property Binding}{property bindings} are not bi-directional: the \c buttonText value would -change when \c textItem.text changes, but not the other way around. - -Aliased properties are also useful for allowing external objects to directly modify and -access child objects in a component. For example, here is a modified version of the \c ImageViewer -component shown \l {Adding Properties}{earlier} on this page. The \c currentImage property has -been changed to an alias to the child \l Image object: - -\table -\row -\o \snippet doc/src/snippets/declarative/qml-extending-types/properties/alias/ImageViewer.qml 0 -\o \snippet doc/src/snippets/declarative/qml-extending-types/properties/alias/application.qml 0 -\endtable - -Instead of being limited to setting the \l Image source, \c application.qml can now directly -access and modify the child \l Image object and its properties. - -Obviously, exposing child objects in this manner should be done with care, as it allows external -objects to modify them freely. However, this use of aliased properties can be quite useful in -particular situations, such as for the \l {declarative/ui-components/tabwidget}{TabWidget} -example, where new tab items are actually parented to a child object that displays the current tab. - - -\section3 Considerations for property aliases - -Aliases are only activated once the component specifying them is completed. The -most obvious consequence of this is that the component itself cannot generally -use the aliased property directly during creation. For example, this will not work: - -\code - // Does NOT work - property alias buttonText: textItem.text - buttonText: "Some text" // buttonText is not yet defined when this value is set -\endcode - -A second, much less significant, consequence of the delayed activation of -aliases is that an alias reference cannot refer to another aliasing property -declared within the same component. This will not work: - -\code - // Does NOT work - id: root - property alias buttonText: textItem.text - property alias buttonText2: root.buttonText -\endcode - -At the time the component is created, the \c buttonText value has not yet been assigned, -so \c root.buttonText would refer to an undefined value. (From outside the component, -however, aliasing properties appear as regular Qt properties and consequently can be -used in alias references.) - -It is possible for an aliased property to have the same name as an existing property. For example, -the following component has a \c color alias property, named the same as the built-in -\l {Rectangle::color} property: - -\snippet doc/src/snippets/declarative/qml-extending-types/properties/alias-override.qml 0 - -Any objects that use this component and refer to its \c color property will be -referring to the alias rather than the ordinary \l {Rectangle::color} property. Internally, -however, the rectangle can correctly set this property to "red" and refer to the actual defined -property rather than the alias. - - -\section1 Adding Methods - -A QML component can define methods of JavaScript code. These methods can be invoked -either internally or by other objects. - -The syntax for defining a method is: - -\code -function <name>([<parameter name>[, ...]]) { <body> } -\endcode - -This declaration may appear anywhere within a type body, but it is customary to -include it at the top. Attempting to declare two methods or signals with the -same name in the same type block is an error. However, a new method may reuse -the name of an existing method on the type. (This should be done with caution, -as the existing method may be hidden and become inaccessible.) - -Unlike \l{Adding Signals}{signals}, method parameter types do not have to be declared as they -default to the \c variant type. The body of the method is written in JavaScript and may access -the parameters by name. - -Here is an example of a component with a \c say() method that accepts a single \c text argument: - -\snippet doc/src/snippets/declarative/qml-extending-types/methods/app.qml 0 - -A method can be connected to a signal so that it is automatically invoked whenever the signal -is emitted. See \l {Connecting signals to methods and other signals} below. - -Also see \l {Integrating JavaScript} for more information on using JavaScript with QML. - - -\section1 Adding Signals - -Signals provide a way to notify other objects when an event has occurred. For example, the MouseArea -\c clicked signal notifies other objects that the mouse has been clicked within the area. - -The syntax for defining a new signal is: - -\code -signal <name>[([<type> <parameter name>[, ...]])] -\endcode - -This declaration may appear anywhere within a type body, but it is customary to -include it at the top. Attempting to declare two signals or methods with the -same name in the same type block is an error. However, a new signal may reuse -the name of an existing signal on the type. (This should be done with caution, -as the existing signal may be hidden and become inaccessible.) - -Here are three examples of signal declarations: - -\code -Item { - signal clicked - signal hovered() - signal performAction(string action, variant actionArgument) -} -\endcode - -If the signal has no parameters, the "()" brackets are optional. If parameters are used, the -parameter types must be declared, as for the \c string and \c variant arguments for the \c -performAction signal above; the allowed parameter types are the same as those listed in the \l -{Adding Properties} section on this page. - -Adding a signal to an item automatically adds a \l {Signal Handlers}{signal handler} as well. -The signal hander is named \c on<SignalName>, with the first letter of the signal being upper -cased. The above example item would now have the following signal handlers: - -\list -\o onClicked -\o onHovered -\o onPerformAction -\endlist - -To emit a signal, simply invoke it in the same way as a method. Below left, when the \l MouseArea is -clicked, it emits the parent \c buttonClicked signal by invoking \c rect.buttonClicked(). The -signal is received by \c application.qml through an \c onButtonClicked signal handler: - -\table -\row -\o \snippet doc/src/snippets/declarative/qml-extending-types/signals/basic.qml 0 -\o \snippet doc/src/snippets/declarative/qml-extending-types/signals/no-parameters.qml 0 -\endtable - -If the signal has parameters, they are accessible by parameter name in the signal handler. -In the example below, \c buttonClicked is emitted with \c xPos and \c yPos parameters instead: - -\table -\row -\o \snippet doc/src/snippets/declarative/qml-extending-types/signals/Button.qml 0 -\o \snippet doc/src/snippets/declarative/qml-extending-types/signals/parameters.qml 0 -\endtable - - -\section2 Connecting signals to methods and other signals - -Signal objects have a \c connect() method that can be used to a connect a signal to a method or -another signal. When a signal is connected to a method, the method is automatically invoked -whenever the signal is emitted. (In Qt terminology, the method is a \e slot that is connected -to the \e signal; all methods defined in QML are created as Qt slots.) This enables a signal -to be received by a method instead of a \l {Signal Handlers}{signal handler}. - -For example, the \c application.qml above could be rewritten as: - -\snippet doc/src/snippets/declarative/qml-extending-types/signals/connectslots.qml 0 - -The \c myMethod() method will be called whenever the \c buttonClicked signal is received. - -In many cases it is sufficient to receive signals through signal handlers rather than using -the \c connect() function; the above example does not provide any improvements over using a -simple \c onButtonClicked handler. However, if you are \l{Dynamic Object Management in QML}{creating objects dynamically}, -or \l {Integrating JavaScript}{integrating JavaScript code}, then you will find the -\c connect() method useful. For example, the component below creates three \c Button -objects dynamically, and connects the \c buttonClicked signal of each object to the -\c myMethod() function: - -\snippet doc/src/snippets/declarative/qml-extending-types/signals/connectdynamic.qml 0 - -In the same way, you could connect a signal to methods defined in a dynamically -created object, or \l {Receiving QML Signals in JavaScript}{connect a signal to a JavaScript method}. - -There is also a corresponding \c disconnect() method for removing connected signals. The following -code removes the connection created in \c application.qml above: - -\qml -// application.qml -Item { - ... - - function removeSignal() { - button.clicked.disconnect(item.myMethod) - } -} -\endqml - - -\section3 Forwarding signals - -The \c connect() method can also connect a signal to other signals. This has the effect -of "forwarding" a signal: it is automatically emitted whenever the relevant signal is emitted. For -example, the MouseArea \c onClicked handler in \c Button.qml above could have been replaced with -a call to \c connect(): - -\qml -MouseArea { - anchors.fill: parent - Component.onCompleted: clicked.connect(item.buttonClicked) -} -\endqml - -Whenever the \l MouseArea \c clicked signal is emitted, the \c rect.buttonClicked signal will -automatically be emitted as well. +\section1 Loading a Component */ diff --git a/doc/src/declarative/qmlsyntax.qdoc b/doc/src/declarative/qmlsyntax.qdoc index 908b924..67d282a 100644 --- a/doc/src/declarative/qmlsyntax.qdoc +++ b/doc/src/declarative/qmlsyntax.qdoc @@ -30,7 +30,7 @@ \title QML Syntax \ingroup QML Features \previouspage QML Features -\nextpage Property Binding +\nextpage QML Basic Elements \contentspage QML Features \tableofcontents diff --git a/doc/src/declarative/qmltexthandling.qdoc b/doc/src/declarative/qmltexthandling.qdoc index c5a6bc9..e0d9b0f 100644 --- a/doc/src/declarative/qmltexthandling.qdoc +++ b/doc/src/declarative/qmltexthandling.qdoc @@ -35,8 +35,6 @@ \tableofcontents -\section1 Introduction - \section1 Text Elements \list @@ -52,4 +50,25 @@ \o \l{RegExpValidator} \endlist +\section1 Displaying Text in QML +QML provides several elements to display text onto the screen. The \l Text +element will display formatted text onto the screen, the \l TextEdit element +will place a multiline line edit onto the screen, and the \l TextInput will +place a single editable line field onto the screen. + +To learn more about their specific features and properties, visit their +respective element documentation. + +\section1 Validating Input Text +The \l {Validators}{validator} elements enforce the type and format of +\l TextInput objects. + +\snippet doc/src/snippets/declarative/texthandling.qml int validator +The validator elements bind to \c {TextInput}'s \c validator property. + +\snippet doc/src/snippets/declarative/texthandling.qml regexp validator +The regular expression in the snippet will only allow the inputted text to be +\c {fruit basket}. The \l {QRegExp} class has more information about Qt's +regular expressions. + */ diff --git a/doc/src/declarative/qmlviews.qdoc b/doc/src/declarative/qmlviews.qdoc index 3f74214..c207d9a 100644 --- a/doc/src/declarative/qmlviews.qdoc +++ b/doc/src/declarative/qmlviews.qdoc @@ -35,21 +35,8 @@ \section1 Introduction -Qt Quick contains a set of standard items that can be used to present data in a -number of different ways. For simple user interfaces, -\l{Using QML Positioner and Repeater Items#Repeaters}{Repeaters} can be used -in combination with -\l{Using QML Positioner and Repeater Items#Positioners}{Positioners} -to obtain pieces of data and arrange them in a user interface. However, when -large quantities of data are involved, it is often better to use models with -the standard views since these contain many built-in display and navigation -features. - -\section1 Views - -Views are scrolling containers for collections of items. They are feature-rich, -supporting many of the use cases found in typical applications, and can be -customized to meet requirements on style and behavior. +Views are containers for collections of items. They are feature-rich and can be +customizable to meet style or behavior requirements. A set of standard views are provided in the basic set of Qt Quick graphical elements: @@ -58,13 +45,21 @@ graphical elements: \o \l{#ListView}{ListView} arranges items in a horizontal or vertical list \o \l{#GridView}{GridView} arranges items in a grid within the available space \o \l{#PathView}{PathView} arranges items on a path +\o \l{WebView}{WebView} - available from the Qt WebKit module. + \endlist Unlike these items, \l WebView is not a fully-featured view item, and needs to be combined with a \l Flickable item to create a view that performs like a Web browser. -\section2 ListView +\section1 Models + +Views display a \l{qml-data-models}{models} onto the screen. A model could be a simple list of \l{QML Data Models#An Integer}{integer} or a \l{qml-c++-models}{C++ models}. + +To assign a model to a view, bind the view's \c model property to a model. + +\section1 ListView \l ListView shows a classic list of items with horizontal or vertical placing of items. |