Integrando QML y Javascript
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.