Explanation of QML 4

Source: Internet
Author: User
Tags button type signal handler

Explanation of QML 4
QML Object Attributes

Each QML object type defines a series of attributes. Each time you create an instance of this object type, these attributes of this instance are also automatically created. Next we will discuss several different types of attributes.

Id attribute

Each QML object type has a unique id attribute. This attribute is provided by the QML language and cannot be redefined or overloaded in the QML object type.

We must specify a value for the id attribute to allow this object to be uniquely identified and used for reference by other objects. The Id attribute value must start with a lowercase letter or underline and can only contain letters, numbers, and underscores.

The following is a TextInput object and a Text object. The id attribute value of a TextInput object is "myTextInput ". The Text property value of the text object is set to the same as the text property value of the TextInput object through myTextInput. text.


In the future, we can reference this object through the id attribute in the visible area of this component. Therefore, the id attribute value must be unique in the visible area of the component.

Once an object instance is created, the id attribute value cannot be changed. The Id attribute looks like a common attribute, but it is not a real common attribute. We apply special semantics to it. For example, in the preceding example, we cannot use myTextInput. id.

Property

A property is an attribute of an object. It can be assigned a static value or bound to a dynamic expression. The value of a property can be read by other objects. Generally, the property can be modified by other objects unless the QML type explicitly specifies that the property cannot be modified.

[Define property attributes]

A property can be defined in C ++ and registered to the QML type system through Q_PROPERTY. Of course, we can also use the following syntax in the QML document to customize the property attributes of an object:


In this way, an object can expose some specific values to other objects, or maintain some internal states more easily.

The Property name must start with a lowercase letter and can only contain letters, numbers, and underscores. The reserved keyword of JavaScript cannot be the name of the property. The Default keyword is optional. Details about the modifier of the default and default attributes will be discussed later.

Defining a custom property creates a value-change signal for this property implicitly, that is, associating a signal handler named on <PropertyName> Changed. <PropertyName> is the name of the property, and the first letter must be capitalized.

For example, the following defines two property attributes and implements its signalhandler:


[Legal type of custom property]

The enumeration type in the QML basic type can be used as the custom property type. For example, the following are legal property declarations:


The basic types provided by some QtQuick modules cannot be the property type unless the QtQuick module is imported into the QML document.

The basic var type is a common type and can store any type of values, including lists and objects:


In addition, any QML object type can be used as the property type. For example:


This is also applicable to custom QML types. If a qml type is defined in the ColorfulButton. QML file, the property attribute of the ColorfulButton type is also valid.

[Valid property value]

We can define the property value in two ways:

* Initialization

* Assignment

The value can be a static value or a binding expression.

{Initialization}

Property initialization:


We can also perform initialization and value assignment when defining the property:


The initialization assignment example is as follows:


{Assignment}

You can use JavaScript code to assign values to the property, as shown below:


Example:


[Valid property value]

As mentioned earlier, we can assign two types of values to the property: static values and binding expressions:


Example:


In many cases, values of the string type can be automatically converted to many different types of values, because QML provides conversion from the string type to other types (that is why you can assign a value to the color attribute "red ").

Note that, when bound to an expression, the return value of the Qt. binding () function required by the expression on the right returns an appropriate value type. An expression can be directly assigned a value when the property is initialized without using that function (in fact, using a function may cause an error ).

[Type security]

All attributes are type-safe. The attribute value must be type-matched.

For example, the following assignment will cause an error:


If the attribute is assigned a type error value during running, the assignment will not succeed and an error will be generated.

As mentioned earlier, some attribute types do not have good types to express their values. In this case, the QML engine provides a good string type conversion. For example, for the color attribute, the value type stored in this attribute should be of the color type rather than the string type, but you can specify a value of the string type for it without generating an error.

[Special property type]

Property Attribute of Object List type

The property attribute of the List type can also be assigned the value of the QML object type List. The assignment format is as follows:


For example, the Item type has a State attribute, which can be used to save the list of State object types. The following code initializes the list:


If the list contains only one item, square brackets can be omitted:


We can define the property of the Object List type as follows:


An example of the List type attribute declaration is as follows:


If you want to declare an attribute to store the list value, but not necessarily to store the QML object type value, you need to declare the property attribute of var.

[Group attributes]

In some cases, attributes can be logically divided into sub-attribute groups. You can assign values to these sub-attributes through "." or a group.

For example, the Text type has a font group attribute. Below, the first Text object uses "." to initialize the font value, and the second is to assign values using groups:


Group attribute types are basic types. Some of these basic types are provided by the QML language, and others are provided by the Qt Quick module.

[Attribute alias]

An Attribute alias stores a reference to another attribute. Unlike the definition of common attributes, the definition of common attributes requires a new and unique bucket, and an attribute alias is only connected to the attribute.

The root attribute definition of the attribute alias is similar, but the attribute alias must use the alias keyword instead of the property type in the attribute definition. The value on the right must be a valid reference alias:


Unlike common attributes, an alias can only reference objects or object attributes.

For example, the following Button type has a buttonText attribute alias, which is linked to the Text attribute of the subtext object:


The following code creates a Button and defines a text string:


If you modify buttonText, you can directly modify the value of textItem. text without modifying other values. If buttonText is not an attribute alias, modifying its value will not modify the displayed text, because attribute binding is not bidirectional.

[Attribute alias]

The attribute alias is activated only after the component is fully initialized. If an uninitialized alias is referenced, an error occurs. In addition, an error occurs when an attribute alias is generated:


We can create an attribute alias with the same name for an existing attribute, which overwrites the existing attribute. For example, the following QML type has a color attribute alias, which is similar to the Rectangle built-in attribute Rectangle: color attribute:


[Default attribute]

An object definition can contain a default attribute. If an object () Sub-object is defined within another object (parent object) and no attribute is assigned to the parent object, the sub-object is the default attribute value of the parent object. If the attribute is declared as default, the default keyword must be used.

For example, the object in the MyLabel. qml file below has a default property of someText:


We can assign values to the default someText attribute in the MyLabel object definition:


The above two are equivalent to the following:


However, because the someText attribute is marked as the default attribute, we do not need to assign the Text object to this default attribute.

You may also notice that sub-objects can be added to any Item-based type without explicitly adding them to the sub-attributes. This is because the default attribute of Item is the data attribute. Any object added to Item is automatically added to its sub-Object List.

The default attribute is very useful for re-specifying sub-objects. Let's look at the TabWidget example. This example uses the default attribute to automatically re-specify the sub-Object List of TabWidget as its sub-Object List.

[Read-only attribute]

You can use the readonly keyword to define read-only attributes for any object definition. Use the following syntax:


The read-only attribute must be specified during initialization. Once the read-only attribute is initialized, it cannot be assigned a value, whether it is a value (using "=") or other methods.

For example, the following Component. onCompleted code block is invalid:


Note: a read-only attribute cannot be declared as a default attribute or an attribute alias.

[Attribute Modification object]

Attributes can have property value modified objects associated with them. We can define attributes to modify object instances as follows and associate them with specific attributes:


Note that the above syntax is actually an object Declaration, which will instantiate an existing attribute of an object operation.

A specific attribute modification type can only be applied to a specific attribute type, but this is not mandatory by the language. For example, the NumberAnimation type provided by the QtQuick module only affects the numeric type (such as int or real) attributes. If NumberAnimation is used to a non-numeric attribute, no error is caused, but the non-numeric attribute does not produce an animation. The action of modifying a property type is closely related to the implementation of a specific property.

Signal attributes

The signal sends a notification from the object type when some events occur: for example, an attribute change, an animation starts or stops, or an image is downloaded completely. For example, a click signal is sent when a user clicks the MouseArea type.

When a signal is sent, the object can be notified through signal handler. The definition Syntax of A signalhandler is on <Signal>. <Signal> is the name of the Signal, and the first letter must be capitalized. Signalhandler must be implemented within the definition of the object that emits the signal, and signalhandler must include the JavaScript code block. When signal handler is called, the code block will be executed.

For example, in the definition of the MouseArea object, you can define the signal handler of the onClicked type. When the MouseArea is clicked, the signal handler is called to print a message on the console:


[Define Signal attributes]

We can use Q_SIGNAL to define the Signal attribute in the C ++ class and register it with the QML type system. Optional. You can also use the following syntax to define the signal attribute in the QML document:


Defining two signals or methods with the same name in a type block produces an error. However, we can use an existing signal type to define a new signal (this will cause the previous signal to be invisible)

The following is an example of signal definition:


If a signal has no parameter, "()" is optional. If a parameter is used, the parameter type must be specified, for example, the string and val parameters in the above actionreceivmed signal. The allowed parameter types are the same in the defined property described before the root.

To send a signal, a method is called. Any signal handler associated with the signal is executed when the signal is sent, and handlers can use the defined signal Parameter Name and obtain the expected parameter.

[Attribute change signal]

The QML type also provides built-in attribute change signals. When the attribute value is changed, these signals will be sent. Next we will introduce the benefits of the signal and how to use it.

[Signal Handler attribute]

Signal handlers is a special method property type. When a Signal is sent, a specific method associated with the Signal will be called. Adding a signal to QML automatically adds a signalhandler associated with it. By default, this function will be empty. The client can provide its own implementation to implement the Program Logic:

Consider the following SquareButton type, which is defined in the SquareButton. qml file and defines two signals: activated and deactived:


These signals can be obtained from any SquareButton object in other QML files in the same directory. The client also provides the signalhandler implementation:


[Signal Handler attribute change]

The Signal handler syntax for attribute change is as follows: on <Property> Changed, <Property> is the name of the attribute, and the first letter must be capitalized. For example, although the textChanged signal is not defined in the TextInput type document, this signal is available because TextInput has a text attribute. Therefore, we can implement onTextChanged signal handler. When the attribute value is changed, the signal handler will be called:


Method Property

The method of an object is called when processing or triggering some events. When a method is connected to a signal, these methods are executed when the signal is sent.

[Define method attributes]

We can use the Q_INVOKABLE function of the C ++ class to register with the QML type system or register as Q_SLOT in the C ++ class. Optional. You can also add custom methods to an object in the QML document:


Methods can be added to the QML type to define separate reusable JavaScript code. These methods can be called internally or by external objects.

Unlike signals, parameter types are not defined here because they are var by default.

Defining two methods with the same name or signal in the same type block may cause errors. However, we can use the name of an existing method to define a new method (this will cause the existing method to be unavailable)

The following Rectangle type has a calculateHeight () method, which is called when the height value is specified.

If the method has parameters, we can access them through the parameter names in the method. For example, if the MouseArea is clicked, The moveTo () method is called. You can use newX and newY to set the new location of the text:


Additional attributes and additional SignalHandler

Additional attributes and additional signal processing mechanisms allow objects to use external attributes and signal handlers that cannot be referenced by those objects. This allows an object to access the attributes and signals associated with a single object.

You can create additional attributes and signals for a QML type implementation. This type of Instantiation is created at runtime, allowing these objects to access attributes and signals.

Reference additional attributes and handlers Syntax:


For example, the ListView type has an additional attribute ListView. isCurrentItem, which can be accessed by every proxy of ListView. This attribute can be determined by each independent proxy object which is selected currently:


In this case, the name of the additional type is ListView and the attribute isCurrentItem. The additional property is referenced using ListView. isCurrentItem.

The attached signal handler can also be referenced in this way. For example, the appended signal handler is Component. isCompleted. After the Component creation process is complete, it can be used to execute some JavaScript code. In the following example, once the ListModel is completely created, Component. onCompleted signal handler is automatically executed:


The additional type names are Component and completed signals. The attached signal handler can reference: Component. isCompleted.

[Notes for accessing additional attributes and Signal Handler]

A common error is that additional attributes and signal handler can be directly accessed from the sub-object. This is not a problem. The attached instance is only added to a specific object, not to an object and all its sub-objects.

For example, the following example shows an adapted version of an additional property. In this case, the proxy is an Item, and the Rectangle is the sub-object of the Item:


This does not work as expected, because ListView. isCurrentItem is only appended to the root proxy object, not its sub-object. Because Rectangle is a sub-object of the proxy, rather than the proxy itself, it cannot use ListView. isCurrentItem to access the isCurrentItem additional attribute. Therefore, rectangle must access the isCurrentItem attribute through the root proxy object:


Now, you can use delegateItem. ListView. isCurrentItem to correctly reference the isCurrentItem additional attribute of the proxy.

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.