Conceptos básicos de sintaxis QML

QML es un lenguaje multiparadigma que permite definir objetos en función de sus atributos y de cómo se relacionan y responden a cambios en otros objetos. A diferencia del código puramente imperativo, en el que los cambios de atributos y comportamiento se expresan mediante una serie de sentencias que se procesan paso a paso, la sintaxis declarativa de QML integra los cambios de atributos y comportamiento directamente en las definiciones de objetos individuales. Estas definiciones de atributos pueden incluir código imperativo, en el caso de que se necesite un comportamiento de aplicación personalizado y complejo.

Por lo general, el motor carga el código fuente QML a través de documentos QML, que son documentos independientes de código QML. Pueden utilizarse para definir tipos de objetos QML que pueden reutilizarse en una aplicación. Tenga en cuenta que los nombres de los tipos deben empezar por mayúscula para poder declararlos como tipos de objeto QML en un archivo QML.

Declaraciones de importación

Un documento QML puede tener una o varias importaciones al principio del archivo. Una importación puede ser cualquiera de las siguientes:

• un módulo QML
• un directorio relativo que contenga definiciones de tipo como documentos QML
• un archivo JavaScript

Las importaciones de archivos JavaScript deben calificarse cuando se importan, de modo que pueda accederse a las propiedades y métodos que proporcionan.

La forma genérica de las distintas importaciones es la siguiente:

• import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]
• import "<Directory>"
• import "<JavaScriptFile>" [as <ScriptIdentifier>]

Ejemplos:

• import QtQuick 2.0
• import QtQuick.LocalStorage 2.0 as Database
• import "../privateComponents"
• import "somefile.js" as Script

Consulte la documentación Sintaxis QML - Declaraciones de importación para obtener información detallada sobre las importaciones QML.

Declaraciones de objetos

Sintácticamente, un bloque de código QML define un árbol de objetos QML que se van a crear. Los objetos se definen mediante declaraciones de objeto que describen el tipo de objeto que se va a crear, así como los atributos que se le van a asignar. Cada objeto también puede declarar objetos hijos mediante declaraciones de objetos anidadas.

Una declaración de objeto consiste en el nombre de su tipo de objeto, seguido de un conjunto de llaves. Todos los atributos y objetos hijos se declaran dentro de estas llaves.

A continuación se muestra una declaración de objeto sencilla:

Rectangle {
    width: 100
    height: 100
    color: "red"
}

Se declara un objeto de tipo Rectangle, seguido de un conjunto de llaves que engloba los atributos definidos para ese objeto. El tipo Rectangle es un tipo disponible en el módulo QtQuick, y los atributos definidos en este caso son los valores de las propiedades width, height y color del rectángulo. (Se trata de propiedades puestas a disposición por el tipo Rectangle, como se describe en la documentación de Rectangle ).

El motor puede cargar el objeto anterior si forma parte de un documento QML. Es decir, si el código fuente se complementa con una sentencia import que importe el módulo QtQuick (para que el tipo Rectangle esté disponible), como se indica a continuación:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
}

Cuando se coloca en un archivo .qml y es cargado por el motor QML, el código anterior crea un objeto Rectangle utilizando el tipo Rectangle suministrado por el módulo QtQuick:

Rectangle { width: 100; height: 100; color: "red" }

Evidentemente, el objeto Rectangle declarado en este ejemplo es muy simple, ya que sólo define algunos valores de propiedades. Para crear objetos más útiles, una declaración de objeto puede definir muchos otros tipos de atributos: éstos se tratan en la documentación Atributos de objeto QML. Además, una declaración de objeto puede definir objetos hijo, como se explica a continuación.

Objetos hijo

Cualquier declaración de objeto puede definir objetos hijo mediante declaraciones de objeto anidadas. De este modo, cualquier declaración de objeto declara implícitamente un árbol de objetos que puede contener cualquier número de objetos hijo.

Por ejemplo, la siguiente declaración de objeto Rectangle incluye una declaración de objeto Gradient, que a su vez contiene dos declaraciones GradientStop:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

Cuando el motor carga este código, crea un árbol de objetos con un objeto Rectangle en la raíz; este objeto tiene un objeto hijo Gradient, que a su vez tiene dos hijos GradientStop.

Nótese, sin embargo, que se trata de una relación padre-hijo en el contexto del árbol de objetos QML, no en el contexto de la escena visual. El concepto de relación padre-hijo en una escena visual lo proporciona el tipo Item del módulo QtQuick, que es el tipo base para la mayoría de los tipos QML, ya que la mayoría de los objetos QML están pensados para ser representados visualmente. Por ejemplo, Rectangle y Text son tipos basados en Item, y a continuación se ha declarado un objeto Text como hijo visual de un objeto Rectangle:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

Cuando el objeto Text se refiere a su valor parent en el código anterior, se está refiriendo a su padre visual, no al padre en el árbol de objetos. En este caso, son la misma cosa: el objeto Rectangle es el padre del objeto Text tanto en el contexto del árbol de objetos QML como en el contexto de la escena visual. Sin embargo, mientras que la propiedad parent puede modificarse para cambiar el padre visual, el padre de un objeto en el contexto del árbol de objetos no puede modificarse desde QML.

(Además, observe que el objeto Text se ha declarado sin asignarlo a una propiedad de Rectangle, a diferencia del ejemplo anterior que asignaba un objeto Gradient a la propiedad gradient del rectángulo. Esto se debe a que la propiedad children de Item se ha establecido como propiedad por defecto del tipo para permitir esta sintaxis más conveniente).

Consulte la documentación sobre padres vis uales para obtener más información sobre el concepto de padres visuales con el tipo Item.

Comentarios

La sintaxis de los comentarios en QML es similar a la de JavaScript:

• Los comentarios de una línea empiezan por // y terminan al final de la línea.
• Los comentarios multilínea empiezan por /* y terminan con */.

Text {
    text: "Hello world!"    //a basic greeting
    /*
        We want this text to stand out from the rest so
        we give it a large size and different font.
     */
    font.family: "Helvetica"
    font.pointSize: 24
}

El motor ignora los comentarios cuando procesa código QML. Son útiles para explicar lo que hace una sección de código, ya sea para consultarla posteriormente o para explicar la implementación a otras personas.

Los comentarios también pueden utilizarse para impedir la ejecución de código, lo que a veces resulta útil para localizar problemas.

Text {
    text: "Hello world!"
    //opacity: 0.5
}

En el ejemplo anterior, el objeto Text tendrá una opacidad normal, ya que la línea opacidad: 0,5 se ha convertido en un comentario.