Nota: Esta es una "traducción libre" y no oficial de la publicación hecha por Nokia, se realiza sólo con el fin de extender su difusión a las personas que no poseen la comprensión suficiente del idioma inglés para entender la nota original. Esta traducción puede no expresar de manera exacta las opiniones de Nokia. Se recomienda ampliamente leer la publicación oficial.

Publicación oficial:
http://blog.qt.nokia.com/2010/02/15/meet-qt-quick/
http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial.html

¿Qué es Qt Quick?

Qt Quick es una interfaz de programación que facilita de gran manera la creación de interfaces gráficas de usuario ligeras y atractivas con soporte para pantallas táctiles, todo esto sin necesidad de utilizar C++ (El lenguaje por defecto utilizado en la programación con Qt). Qt Quick será lanzado en la versión 4.7 de Qt de la cual hubo un "technology preview" en el mes de marzo y una versión beta en el mes de mayo.

Qt Quick está compuesto por:

• Un sencillo lenguaje tipo scripting llamado QML (Qt Meta-Object Language).
• Herramientas en el IDE Qt Creator,incluyendo un editor visual que permite a los desarrolladores y diseñadores combinar elementos simples para construir interfaces gráficas de usuario animadas y fluidas.
• Un nuevo enfoque de programación declarativa, el cuál hace más fácil crear interfaces gráficas de usuario diciéndoles que hacer, más que cómo hacerlo.

Ejemplo de Qt Quick

A continuación, el código y la explicación del ejemplo, para poder ejecutarlo necesitar descargar la versión beta de Qt 4.7 o Qt Creator 2.0.
Puedes descargarlos de la página: http://qt.nokia.com/developer/qt-qtcreator-prerelease

El primer programa es un simple "Hola mundo" que introduce algunos conceptos básicos de QML. La imagen de abajo muestra una captura de pantalla de este programa.

El código QML para esta aplicación es el siguiente:

 import Qt 4.7
 
 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"
 
     Text {
         id: helloText
         text: "Hello world!"
         y: 30
         anchors.horizontalCenter: page.horizontalCenter
         font.pointSize: 24; font.bold: true
     }
 }

En la primera línea importamos los tipos necesarios para este ejemplo. Muchos archivos QML importarán los tipos básicos de QML (como Rectangle o Image).

En la tercera línea declaramos nuestro elemento raíz el cuál será de tipo Rectangle (Rectángulo), uno de los tipos básicos de QML. Le asignamos un id con el cuál podremos referirnos a él posteriormente, en este caso le llamaremos page (página). También establecemos sus propiedades de ancho, alto y color mediante las palabras clave width, height y color.
El tipo Rectangle tiene muchas otras propiedades (como posición en X y en Y) pero por ahora dejaremos que conserven sus valores por defecto.

En la octava línea definimos un elemento tipo Text (Texto), el cuál será hijo del elemento page 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. En este caso, especificamos que nuestro elemento helloText debe estar centrado horizontalmente en el elemento page. Más información en Anchor-based Layout (Organización basada en anclas)

Para ver el ejemplo, ejecuta la herramienta qml (localizada en el directorio bin) con el nombre del archivo como primer argumento. Por ejemplo, para ejecutar el ejemplo desde la localización de la instalación, debes escribir:

bin/qml $QTDIR/examples/declarative/tutorials/helloworld/tutorial.qml

Ahora agregaremos un selector de color a nuestra aplicación que servirá para cambiar el color de nuestro texto. La aplicación de esta sección del ejemplo se verá como en la siguiente imagen. 

El selector de color está hecho de seis celdas de distintos colores. Para evitar escribir el código varias veces, primero creamos un nuevo componente llamaco Cell (Celda/Casilla). Los componentes proveen maneras de definir un nuevo tipo que puede ser reutilizado en otros archivos QML. Un componente de QML es como una caja negra que interactua con el mundo exterior a través de propiedades, señales y slots y que generalmente está definido en su propio archivo QML (Para más detalles puedes ver Defining new Components (Definiendo nuevos componentes))
El nombre del componente siempre debe comenzar con una letra mayúscula.

El código del componente Cell (Cell.qml) es el siguiente:

 import Qt 4.7
 
 Item {
     id: container
     property alias cellColor: rectangle.color
     signal clicked(color cellColor)
 
     width: 40; height: 25
 
     Rectangle {
         id: rectangle
         border.color: "white"
         anchors.fill: parent
     }
 
     MouseArea {
         anchors.fill: parent
         onClicked: container.clicked(container.cellColor)
     }
 }

En la tercera línea definimos nuestro elemento raíz el cuál será de tipo Item (Elemento) y su id será container. El tipo Item es el elemento más básico de QML y es frecuentemente utilizado como contenedor para otros elementos.
En la quinta línea declaramos una propiedad llamada cellColor. Está propiedad será accesible desde fuera del componente y por lo tanto nos permitirá instanciar celdas de distintos colores. Esta propiedas es sólo un alias de una propiedad existente: El color del rectángulo que compone la celda. (Par más información puedes ver Properties (Propiedades)).

En la sexta línea definimos una señal de nombre clicked (presionado) para nuestro componente y que tendrá un parámetro de tipo color, llamado color. Usaremos esta señal para cambiar el color del texto desde nuestro archivo main.

En la décima línea definimos un elemento rectángulo que será hijo de nuestro elemento container y definimos sus propiedades. Nuestro elemento Cell es básicamente un rectángulo de color igual a rectangle.id La propiedad anchors.fill es una manera conveniente de establecer el tamaño de un elemento. En este caso el elemento rectangle tendrá el mismo tamaño que su padre.

En la línea 16 definimos un elemento MouseArea (Área de Mouse/Ratón) y que también será hijo de nuestro elemento container. La MouseArea tendrá el mismo tamaño que su padre y es capaz de detectar eventos del mouse. En este caso define una señal clicked y en la línea 18 le indicamos que hacer cuándo la señal de la MouseArea se emita: Emitir la señal del su padre, el elemento container, con el color del container como parámetro.

El archivo main.qml también debe cambiar y quedará de la siguiente forma:

 import Qt 4.7
 
 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"
 
     Text {
         id: helloText
         text: "Hello world!"
         y: 30
         anchors.horizontalCenter: page.horizontalCenter
         font.pointSize: 24; font.bold: true
     }
 
     Grid {
         id: colorPicker
         x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
         rows: 2; columns: 3; spacing: 3
 
         Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
     }
 }

Creamos nuestro selector de color colocando 6 Cells de distinto color en un elemento Grid (tabla/rejllla). Cuando la señal clicked de alguna Cell se disparé, estableceremos el color del texto que pasamos como parámetro al color del rectángulo que emite la señal.
Podemos reaccionar ante la emisión de cualquier señal de nuestros componentes a través de la propiedad "onNombreDeSeñal".

Ahora haremos este ejemplo un poco más dinámico mediante states (estados) y transitions (transiciones). Haremos que nuestro texto se mueva hacia abajo, gire 180 grados y cambie su color a rojo al ser presionado.

La aplicación final se verá como en la siguiente imagen.

Para ello es necesario cambiar el código de main.qml que quedará de la siguiente forma:

 import Qt 4.7
 
 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"
 
     Text {
         id: helloText
         text: "Hello world!"
         y: 30
         anchors.horizontalCenter: page.horizontalCenter
         font.pointSize: 24; font.bold: true
 
         MouseArea { id: mouseArea; anchors.fill: parent }
 
         states: State {
             name: "down"; when: mouseArea.pressed == true
             PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
         }
 
         transitions: Transition {
             from: ""; to: "down"; reversible: true
             ParallelAnimation {
                 NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                 ColorAnimation { duration: 500 }
             }
         }
     }
 
     Grid {
         id: colorPicker
         x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
         rows: 2; columns: 3; spacing: 3
 
         Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
     }
 }

En la línea 17 creamos un nuevo estado llamado down (presionado) para nuestro elemento texto. Este evento será activado cuándo la MouseArea esté presionada y desactivado cuando se deje de presionar.
El estado down incluye un conjunto de cambios a las propiedades de nuestro estado por defecto definido implicitamente (es decir, como fue inicialmente definido). Especificamente, establecemos la propiedad y de text a 160, su rotación a 180 y el color a rojo.

Ya que no queremos que los cambios de propiedades cambien inmediatamente sino que lo hagan lentamente a través de una animación, definimos una transición entre nuestros dos estados (línea 22). from y to definen los estados inicial y final de la transición. En este caso queremos que la transición ocurra del estado por defecto al estado down.

Debido a que queremos que la misma transición se ejecute en reversa al regresar del estado down al estado por defecto, establecemos la propiedad reversible a true (verdadero). Esto es equivalente a escribir dos transiciones por separado, una para cada estado como origen y destino.

El elemento ParallelAnimation (Animación paralela) se asegura que los dos tipos de animación (propiedades numéricas y el color) comiencen al mismo tiempo. También es posible que cambien una después de la otra utilizando el elemento SequentialAnimation (Animación secuencial).

Para más detalles sobre estados y transiciones puedes ver QML States (Estados QML).