Una de las características interesantes de QML es la posibilidad de usar Javascript para agregar funcionalidades extras de forma rápida y fácil, básicamente contamos con un entorno igual al que se encuentra en cualquier browser moderno con algunas pequeñas adiciones.

Vamos a comenzar con un ejemplo simple, la idea de este ejemplo es crear una app que muestre numero aleatorios cuando se presione la barra espaciadora o cuando se haga click sobre el elemento Text que mostrara los numeros.

Javascript Inline

Para comenzar vamos a mostrar como integrar el código Javascript de forma inline, esta practica se aconseja siempre y cuando el código a añadir no sea muy extenso, ya que sino la legibilidad y mantenibilidad del código se resiente.

Pasemos ahora al código, en un nuevo proyecto pegamos el siguiente código, como verán luego de declarar un Rectangle y dentro del mismo, agregue un función que genera números aleatorios en este caso hasta el numero 100, luego viene el elemento Text encargado de mostrar el numero aleatorio, el cual contiene un MouseArea que cuando se dispara el evento onClicked toma un numero generado por la función Javascript y se lo asigna al elemento Text, lo mismo pasa a continuación con la función Keys.onPressed seteada para dispararse cuando se presiona la barra espaciadora.

Numerator.qml

import Qt 4.7

Rectangle {
    width: 640
    height: 360
    id:container

    function rand (n){
        return (Math.floor(Math.random() * n + 1));
    }

    Text{
        id: start
        text: "click!"
        font.pointSize: 128
        font.family: "Arial"
        font.bold: true
        color: "#cc0000"
        focus: true
        anchors.horizontalCenter: container.horizontalCenter
        anchors.verticalCenter: container.verticalCenter

        MouseArea {
            id: mouseRegion
            anchors.fill: start
            onClicked: {
                start.text = RandomFunctions.rand (100);
            }
        }

        Keys.onPressed: {
            if (event.key == Qt.Key_Space) {
                start.text = rand(100);
            }
        }
    }
}

Javascript Standalone

Cuando el código Javascript crece en tamaño o si se quiere mantener todo mas ordenado la opción es poner el código Javascript en uno o mas archivos separados, si vamos al caso de nuestro ejemplo podemos mover la función que genera los numero aleatorios a un archivo aparte, en este caso yo lo llame generator.qml, un tip a tener en cuenta es que por convención los nombres de los archivos .js deben comenzar con minúscula.

generator.js

function rand (n){
      return (Math.floor(Math.random() * n + 1));
}

Para poder hacer uso de las funciones ubicadas en un archivo separado debemos hacer un import con la ruta del archivo .js y setear un “alias” el cual debe ser único para cada archivo que importemos, este “alias” lo usaremos para poder invocar las funciones que albergue el archvio .js, un ejemplo de ello pueden verlo en el MouseArea o en la Keys.onPressed del código a continuación.

Numerator.qml

import Qt 4.7
import "generator.js" as RandomFunctions

Rectangle {
    width: 640
    height: 360
    id:container

    Text{
        id: start
        text: "click!"
        font.pointSize: 128
        font.family: "Arial"
        font.bold: true
        color: "#cc0000"
        focus: true
        anchors.horizontalCenter: container.horizontalCenter
        anchors.verticalCenter: container.verticalCenter

        MouseArea {
            id: mouseRegion
            anchors.fill: start
            onClicked: {
                start.text = RandomFunctions.rand (100);
            }
        }

        Keys.onPressed: {
            if (event.key == Qt.Key_Space) {
                start.text = RandomFunctions.ran (100);
            }
        }
    }
}

Como verán el integrar Javascript con QML es muy fácil y nos permite potenciar las posibilidades de QML, en la documentación oficial pueden encontrar mas información, ejemplos y buenas practicas para aplicar a nuestros desarrollos.