Introducción a QML – II

Continuamos con el Hola Mundo

Veamos un Hola mundo sencillo y revisemos línea a línea el mismo:

image
Import’s, importamos lo necesario

Al igual que muchos lenguajes de programación es necesario importar los tipos necesarios para nuestro proyecto. En QML se realiza mediante la palabra reservada import

Muchos archivos QML importarán los tipos básicos de QML (como Rectangle o Image utilizando:

image

Componente Rectangle
    Un componente es un objeto declarado en un documento QML.
      En el ejemplo el

componente

      raíz es de tipo

Rectangle

      (Rectángulo), uno de los tipos básicos de QML. Fijaros en la asignación de un identificativo mediante

id

      para poder referirnos al

componente

      posteriormente. También establecemos sus

propiedades

      (ancho, alto y color) mediante las palabras clave width, height y color.

 

      El

componenteRectangle

    tiene muchas otras propiedades.

 

Componente Text

Definimos un componente Text (Texto), el cuál será hijo del componente Rectangle y que mostrará el texto “Hello world!”

La propiedad Y es utilizada para posicionar el texto de manera vertical a 30 pixeles por debajo de la parte superior de su padre.

Las propiedades font.pointSize (Tamaño de fuente) y font.bold (Negritas) están relacionadas con el tipo Font y es por ello que usan una notación con puntos (Tipo.propiedad).

La propiedad anchors.horizontalCenter (anclas.CentroHorizontal) se refiere al centro horizontal de un elemento.

Las propiedades font.pointSize y font.bold properties están relacionadas con la fuente y utilizan la notación de punto.

Avanzando en la teoría respecto a QML

La sintaxis de QML está basada en la especificación ECMA-262 pero con algunas diferencias:

  • El entorno de ejecución es distinto al de un web browser (típico interprete para ECMA)
  • DOM vs. QtDeclarative
  • Soporte de características de la v5 de ECMA (principalmente JSON)
  • Se añaden algunos conceptos declarativos

Componentes (Component)
      Un documento

QML

      tiene extensión .qml  y describe la estructura de un

componente

      (

Component

    )
      Un componente es un objeto declarado en un documento QML. En el ejemplo anterior uno de ellos sería

Rectange

      El nombre del primer

componente

    corresponde con el nombre del fichero. Es sensible a las mayúsculas y sigue la sintaxis camel-case. Los componentes tienen soporte para herencia.

image

Automáticamente se crea una instancia de un componente declarado cuando el programa se ejecuta. Las propiedades id’s de los componentes se utilizan para poder referenciarlos.

image

 

La parte privada de un componente no es visible por otros componentes
La API de los Componentes está formada por propiedades, funciones y señales.

  • Propiedad (Property) – Expresión que evalúa un valor
  • Función (Function) – Llamada para realizar alguna tarea
  • Señal (Signal) – Llamada desde el componente “callback”
Propiedades (Properties)

Las propiedades definen las características del componente.

  • Se referencian mediante un nombre
  • Siempre empiezan con una letra en minúsculas
  • Pueden referenciar a otras propiedades mediante binding

image

  • Se utiliza el id de la propiedad para referenciarlas.
  • Existe la posibilidad de usar listas de propiedades (Colecciones).
  • La propiedad por defecto se puede utilizar sin referencia por nombre.

image

 

image

  • Podemos exponer una propiedad interna mediante un alias (Property alias). image
  • Podemos agrupar y unir propiedades
  • Se referencian con la notación ’.’
  • Son visibles en el lado de C++, no dentro de QML

image

 

Señales (Signals)
  • Un componente puede emitir señales, que pueden ser capturadas mediante manejadores de señales (signal handlers)

image

  • Los cambios en las propiedades pueden estar vinculados a señales. La sintaxis para los eventos asociados a propiedades es: on<Property>Changed

image

Podemos definir nuestras propias señales mediante la palabra clave signal

image

Funciones (Functions)

Un componente puede exportar funciones que pueden ser llamadas desde otros componentes

image

Continuará…

Descargar en formato PDFDescargar en PDF
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votes, average: 5,00 out of 5)
Cargando…

Seguir Jorge Hontoria Jimenez:

Gerente de TipeSoft

Dirección de proyectos de integración de software y aplicaciones orientadas a servicios. Implantación de soluciones de integración basadas en SharePoint Portal.

Últimas publicaciones de

2 Respuestas

  1. Hola, una corrección, es camel-case, no calme-case. Muchas gracias por el tutorial.

Dejar una opinión