/**************************************************************************** ** ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). ** Contact: http://www.qt-project.org/ ** ** This file is part of the documentation of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:FDL$ ** GNU Free Documentation License ** Alternatively, this file may be used under the terms of the GNU Free ** Documentation License version 1.3 as published by the Free Software ** Foundation and appearing in the file included in the packaging of ** this file. ** ** Other Usage ** Alternatively, this file may be used in accordance with the terms ** and conditions contained in a signed written agreement between you ** and Nokia. ** ** ** ** ** ** $QT_END_LICENSE$ ** ****************************************************************************/ /*! \page qtqml-basictypes.html \title QML Basic Types \brief Description of basic types provided by the Qt QML module QML supports a number of basic types. A \e{basic type} is one that refers to a simple value, such as an \c int or a \c string. This contrasts with a \l{qtqml-typesystem-topic.html#qml-object-types}{QML Object Types}, which refers to an object with properties, signals, methods and so on. Unlike an object type, a basic type cannot be used to declare QML objects: it is not possible, for example, to declare an \c int{} object or a \c size{} object. Basic types can be used to refer to: \list \li A single value (e.g. \l int refers to a single number, \l var can refer to a single list of items) \li A value that contains a simple set of property-value pairs (e.g. \l size refers to a value with \c width and \c height attributes) \endlist \sa {qtqml-typesystem-topic.html}{The QML Type System} \section1 Supported Basic Types Most basic types are supported by the engine by default and do not require an \l {Import Statements}{Import Statement} to be used, unlike QML object types. Some basic types which contain multiple property-value pairs (also known as \c{value types}) do require an import, as they are provided by the QtQuick module. The basic types supported in QML are listed below: \annotatedlist qmlbasictypes \section1 Property Change Behavior for Basic Types Some basic types have properties: for example, the \l font type has \c pixelSize, \c family and \c bold properties. Unlike properties of \l{qtqml-typesystem-topic.html#qml-object-types}{object types}, properties of basic types do not provide their own property change signals. It is only possible to create a property change signal handler for the basic type property itself: \code Text { // invalid! onFont.pixelSizeChanged: doSomething() // also invalid! font { onPixelSizeChanged: doSomething() } // but this is ok onFontChanged: doSomething() } \endcode Be aware, however, that a property change signal for a basic type is emitted whenever \e any of its attributes have changed, as well as when the property itself changes. Take the following code, for example: \qml Text { onFontChanged: console.log("font changed") Text { id: otherText } focus: true // changing any of the font attributes, or reassigning the property // to a different font value, will invoke the onFontChanged handler Keys.onDigit1Pressed: font.pixelSize += 1 Keys.onDigit2Pressed: font.bold = !font.bold Keys.onDigit3Pressed: font = otherText.font } \endqml In contrast, properties of an \l{qtqml-typesystem-topic.html#qml-object-types}{object type} emit their own property change signals, and a property change signal handler for an object-type property is only invoked when the property is reassigned to a different object value. */ /*! \qmlbasictype int \ingroup qmlbasictypes \brief a whole number, e.g. 0, 10, or -20. The \c int type refers to a whole number, e.g. 0, 10, or -20. The possible \c int values range from around -2000000000 to around 2000000000, although most elements will only accept a reduced range (which they mention in their documentation). Example: \qml Item { width: 100; height: 200 } \endqml This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype bool \ingroup qmlbasictypes \brief a binary true/false value. The \c bool type refers to a binary true/false value. Example: \qml Item { focus: true clip: false } \endqml This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype real \ingroup qmlbasictypes \brief a number with a decimal point. The \c real type refers to a number with decimal point, e.g. 1.2 or -29.8. Example: \qml Item { width: 100.45; height: 150.82 } \endqml \b{Note:} In QML all reals are stored in double precision, \l {http://en.wikipedia.org/wiki/IEEE_754} {IEEE floating point} format. This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype double \ingroup qmlbasictypes \brief a number with a decimal point, stored in double precision. The \c double type refers to a number with a decimal point and is stored in double precision, \l {http://en.wikipedia.org/wiki/IEEE_754} {IEEE floating point} format. Example: \qml Item { property double number: 32155.2355 } \endqml This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype string \ingroup qmlbasictypes \brief a free form text string. The \c string type refers to a free form text string in quotes, e.g. "Hello world!". Example: \qml Text { text: "Hello world!" } \endqml Strings have a \c length attribute that holds the number of characters in the string. QML extends the JavaScript String type with a \l {String::arg}{arg()} function to support value substitution. When integrating with C++, note that any QString value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c string value, and vice-versa. This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype url \ingroup qmlbasictypes \brief a resource locator. The \c url type refers to a resource locator (like a file name, for example). It can be either absolute, e.g. "http://qt.nokia.com", or relative, e.g. "pics/logo.png". A relative URL is resolved relative to the URL of the containing component. For example, the following assigns a valid URL to the \l {Image::source} property, which is of type \c url: \qml Image { source: "pics/logo.png" } \endqml When integrating with C++, note that any QUrl value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c url value, and vice-versa. \section1 Using the url type When a relative URL is written to a \c url type property, it is converted into a URL object, so \bold {matching the URL value against the input string value will fail}. Instead, convert the string to a URL using Qt.resolvedUrl() for means of comparison, and use \c toString() to get the contents of the URL: \qml Image { source: "pics/logo.png" Component.onCompleted: { // This prints 'false'. Although "pics/logo.png" was the input string, // it's been converted from a string to a URL, so these two are not the same. console.log(source == "pics/logo.png") // This prints 'true' as Qt.resovledUrl() converts the string into a // URL with the correctly resolved path console.log(source == Qt.resolvedUrl("pics/logo.png")) // This prints the absolute path, e.g. "file:///path/to/pics/logo.png" console.log(source.toString()) } } \endqml \note When referring to files stored with the \l{resources.html}{Qt Resource System} from within QML, you should use "qrc:///" instead of ":/" as QML requires URL paths. Relative URLs resolved from within that file will use the same protocol. Additionally, URLs may contain encoded characters using the 'percent-encoding' scheme specified by \l {http://tools.ietf.org/html/rfc3986}{RFC 3986}. These characters will be preserved within properties of type \c url, to allow QML code to construct precise URL values. An exception to this rule is the preemptive decoding of directory-separator characters (\c '/') - these characters are decoded to allow the URL to be correctly classified. For example, a local file containing a '#' character, which would normally be interpreted as the beginning of the URL 'fragment' element, can be accessed by encoding the characters of the file name: \qml Image { source: encodeURIComponent("/tmp/test#1.png") } \endqml This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype color \ingroup qmlbasictypes \brief an ARGB color value. \target qmlbasictypecolor The \c color type refers to an ARGB color value. It can be specified in a number of ways: \list \li By a \l{http://www.w3.org/TR/SVG/types.html#ColorKeywords}{SVG color name}, such as "red", "green" or "lightsteelblue". \li By a hexadecimal triplet or quad in the form \c "#RRGGBB" and \c "#AARRGGBB" respectively. For example, the color red corresponds to a triplet of \c "#FF0000" and a slightly transparent blue to a quad of \c "#800000FF". \li Using the \l{QML:Qt::rgba()}{Qt.rgba()}, \l{QML:Qt::hsla()}{Qt.hsla()}, \l{QML:Qt::darker()}{Qt.darker()}, \l{QML:Qt::lighter()}{Qt.lighter()} or \l{QML:Qt::tint()}{Qt.tint()} functions. \endlist Example: \div{float-right} \inlineimage declarative-colors.png \enddiv \snippet qml/colors.qml colors Additionally, a color type has \c r, \c g, \c b and \c a properties that refer to the red, green, blue and alpha values of the color, respectively: \qml Text { color: "red" // prints "1 0 0 1" Component.onCompleted: console.log(color.r, color.g, color.b, color.a) } \endqml To test color values for equality, use the \l{QML:Qt::colorEqual()}{Qt.colorEqual()} function. This allows colors to be accurately compared whether they are in property form or in any of the acceptable string specification forms. When integrating with C++, note that any QColor value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c color value, and vice-versa. This basic type is provided by the QtQuick import. \sa {QML Basic Types} */ /*! \qmlbasictype point \ingroup qmlbasictypes \brief a value with x and y attributes. The \c point type refers to a value with \c x and \c y attributes. To create a \c point value, specify it as a "x,y" string: \qml CustomObject { myPointProperty: "0,20" } \endqml Or use the \l{QML:Qt::point()}{Qt.point()} function: \qml CustomObject { myPointProperty: Qt.point(0, 20) } \endqml When integrating with C++, note that any QPoint or QPointF value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c point value. When a \c point value is passed to C++, it is automatically converted into a QPointF value. This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype size \ingroup qmlbasictypes \brief a value with width and height attributes The \c size type refers to a value with has \c width and \c height attributes. For example, to read the \c width and \c height values of the \l {Image::sourceSize} size-type property: \qml Column { Image { id: image; source: "logo.png" } Text { text: image.sourceSize.width + "," + image.sourceSize.height } } \endqml To create a \c size value, specify it as a "width x height" string: \qml Image { sourceSize: "150x50" } \endqml Or use the \l{QML:Qt::size()}{Qt.size()} function: \qml Image { sourceSize: Qt.size(150, 50) } \endqml When integrating with C++, note that any QSize or QSizeF value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c size value, and vice-versa. When a \c size value is passed to C++, it is automatically converted into a QSizeF value. This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype rect \ingroup qmlbasictypes \brief a value with x, y, width and height attributes. The \c rect type refers to a value with \c x, \c y, \c width and \c height attributes. For example, to read the \c width and \c height values of the \l Item \l {Item::}{childrenRect} rect-type type property: \qml Rectangle { width: childrenRect.width height: childrenRect.height Rectangle { width: 100; height: 100 } } \endqml To create a \c rect value, specify it as a "x, y, width x height" string: \qml CustomObject { myRectProperty: "50,50,100x100" } \endqml Or use the \l{QML:Qt::rect()}{Qt.rect()} function: \qml CustomObject { myRectProperty: Qt.rect(50, 50, 100, 100) } \endqml When integrating with C++, note that any QRect or QRectF value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c rect value, and vice-versa. When a \c rect value is passed to C++, it is automatically converted into a QRectF value. This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype date \ingroup qmlbasictypes \brief a date value. The \c date type refers to a date value. To create a \c date value, specify it as a "YYYY-MM-DD" string: \qml MyDatePicker { minDate: "2000-01-01"; maxDate: "2020-12-31" } \endqml To read a date value returned from a C++ extension class, use \l{QML:Qt::formatDate()}{Qt.formatDate()} and \l{QML:Qt::formatDateTime()}{Qt.formatDateTime()}. When integrating with C++, note that any QDate value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c date value, and vice-versa. Note that the date type has comparison semantics which match those of the JavaScript Date object. To compare the value of two date properties, you should compare their "toString()" values. This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype time \ingroup qmlbasictypes \brief a time value. The \c time type refers to a time value. To create a \c time value, specified as "hh:mm:ss": \qml MyTimePicker { time: "14:22:15" } \endqml To read a time value returned from a C++ extension class, use \l{QML:Qt::formatTime()}{Qt.formatTime()} and \l{QML:Qt::formatDateTime()}{Qt.formatDateTime()}. Note that when converting historical times to and from javascript that QDateTime and the JS Date object have different methods of calculating historical daylight savings time application. This can lead to variations of one hour when converting to historical local time. When integrating with C++, note that any QTime value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c time value, and vice-versa. This basic type is provided by the QML language. \sa {QML Basic Types} */ /*! \qmlbasictype font \ingroup qmlbasictypes \brief a font value with the properties of QFont. \target fontbasictypedocs The \c font type refers to a font value with the properties of QFont. The most commonly used properties are: \list \li \l string \c font.family \li \l bool \c font.bold \li \l bool \c font.italic \li \l bool \c font.underline \li \l real \c font.pointSize \li \l int \c font.pixelSize \endlist If both \c pointSize and a \c pixelSize are specified, \c pixelSize will be used. The following properties are also available: \list \li \l enumeration \c font.weight \li \l bool \c font.overline \li \l bool \c font.sstrikeout \li \l enumeration \c font.capitalization \li \l real \c font.letterSpacing \li \l real \c font.wordSpacing \endlist Example: \qml Text { font.family: "Helvetica"; font.pointSize: 13; font.bold: true } \endqml When integrating with C++, note that any QFont value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c font value, and vice-versa. This basic type is provided by the QtQuick import. Font weighting is classified on a scale from 0 to 99, where a weight of 0 is ultralight, and 99 is extremely black. The following values are supported: \table \row \li \c Font.Light \li 25 \row \li \c Font.Normal \li 50 \row \li \c Font.DemiBold \li 63 \row \li \c Font.Bold \li 75 \row \li \c Font.Black \li 87 \endtable Capitalization supports the following values: \table \row \li \c Font.MixedCase \li No capitalization change is applied. \row \li \c Font.AllUppercase \li Alters the text to be rendered in all uppercase type. \row \li \c Font.AllLowercase \li Alters the text to be rendered in all lowercase type. \row \li \c Font.SmallCaps \li Alters the text to be rendered in small-caps type. \row \li \c Font.Capitalize \li Alters the text to be rendered with the first character of each word as an uppercase character. \endtable \sa {QML Basic Types} */ /*! \qmlbasictype list \ingroup qmlbasictypes \brief a list of QML objects. The \c list type refers to a list of QML objects. A list value can be accessed in a similar way to a JavaScript array: \list \li Values are assigned using the \c[] square bracket syntax with comma-separated values \li The \c length property provides the number of items in the list \li Values in the list are accessed using the \c [index] syntax \endlist A \c list can only store QML objects, and cannot contain any \l {QML Basic Types}{basic type} values. (To store basic types within a list, use the \l var type instead.) When integrating with C++, note that any QQmlListProperty value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into a \c list value, and vice-versa. \section1 Using the list type For example, the \l Item type has a \l {Item::}{states} list-type property that can be assigned to and used as follows: \qml import QtQuick 2.0 Item { width: 100; height: 100 states: [ State { name: "activated" }, State { name: "deactivated" } ] Component.onCompleted: { console.log("Name of first state:", states[0].name) for (var i=0; i.}. For example, the \l Text type has an \c AlignRight enumeration value: \qml Text { horizontalAlignment: Text.AlignRight } \endqml (For backwards compatibility, the enumeration value may also be specified as a string, e.g. "AlignRight". This form is not recommended for new code.) When integrating with C++, note that any enumeration value \l{qtqml-cppintegration-data.html}{passed into QML from C++} is automatically converted into an \c enumeration value, and vice-versa. This basic type is provided by the QML language. Some enumeration values are provided by the QtQuick import. \sa {QML Basic Types} */