{"id":366,"date":"2010-11-11T02:36:35","date_gmt":"2010-11-11T02:36:35","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=366"},"modified":"2010-11-11T02:36:35","modified_gmt":"2010-11-11T02:36:35","slug":"integrando-qml-javascript","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/integrando-qml-javascript\/","title":{"rendered":"Integrando QML y Javascript"},"content":{"rendered":"

Una de las caracter\u00edsticas interesantes de QML es la posibilidad de usar Javascript para agregar funcionalidades extras de forma r\u00e1pida y f\u00e1cil, b\u00e1sicamente contamos con un entorno igual al que se encuentra en cualquier browser moderno con algunas peque\u00f1as adiciones<\/a>.<\/p>\n

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<\/a> que mostrara los numeros.<\/p>\n

Javascript Inline<\/h4>\n

Para comenzar vamos a mostrar como integrar el c\u00f3digo Javascript de forma inline, esta practica se aconseja siempre y cuando el c\u00f3digo a a\u00f1adir no sea muy extenso, ya que sino la legibilidad y mantenibilidad del c\u00f3digo se resiente.<\/p>\n

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

Numerator.qml<\/h5>\n
\nimport Qt 4.7\n\nRectangle {\n    width: 640\n    height: 360\n    id:container\n\n    function rand (n){\n        return (Math.floor(Math.random() * n + 1));\n    }\n\n    Text{\n        id: start\n        text: "click!"\n        font.pointSize: 128\n        font.family: "Arial"\n        font.bold: true\n        color: "#cc0000"\n        focus: true\n        anchors.horizontalCenter: container.horizontalCenter\n        anchors.verticalCenter: container.verticalCenter\n\n        MouseArea {\n            id: mouseRegion\n            anchors.fill: start\n            onClicked: {\n                start.text = RandomFunctions.rand (100);\n            }\n        }\n\n        Keys.onPressed: {\n            if (event.key == Qt.Key_Space) {\n                start.text = rand(100);\n            }\n        }\n    }\n}\n<\/pre>\n
Javascript Standalone<\/h4>\n
Cuando el c\u00f3digo Javascript crece en tama\u00f1o o si se quiere mantener todo mas ordenado la opci\u00f3n es poner el c\u00f3digo Javascript en uno o mas archivos separados, si vamos al caso de nuestro ejemplo podemos mover la funci\u00f3n 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\u00f3n los nombres de los archivos .js deben comenzar con min\u00fascula.<\/p>\n
generator.js<\/h5>\n
\nfunction rand (n){\n      return (Math.floor(Math.random() * n + 1));\n}\n<\/pre>\n
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 \u00fanico 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<\/a> o en la Keys.onPressed<\/a> del c\u00f3digo a continuaci\u00f3n.<\/p>\n
Numerator.qml<\/h5>\n
\nimport Qt 4.7\nimport "generator.js" as RandomFunctions\n\nRectangle {\n    width: 640\n    height: 360\n    id:container\n\n    Text{\n        id: start\n        text: "click!"\n        font.pointSize: 128\n        font.family: "Arial"\n        font.bold: true\n        color: "#cc0000"\n        focus: true\n        anchors.horizontalCenter: container.horizontalCenter\n        anchors.verticalCenter: container.verticalCenter\n\n        MouseArea {\n            id: mouseRegion\n            anchors.fill: start\n            onClicked: {\n                start.text = RandomFunctions.rand (100);\n            }\n        }\n\n        Keys.onPressed: {\n            if (event.key == Qt.Key_Space) {\n                start.text = RandomFunctions.ran (100);\n            }\n        }\n    }\n}\n<\/pre>\n
Como ver\u00e1n el integrar Javascript con QML es muy f\u00e1cil y nos permite potenciar las posibilidades de QML, en la documentaci\u00f3n<\/a> oficial pueden encontrar mas informaci\u00f3n, ejemplos y buenas practicas para aplicar a nuestros desarrollos.<\/p>\n","protected":false},"excerpt":{"rendered":"
Una de las caracter\u00edsticas interesantes de QML es la posibilidad de usar Javascript para agregar funcionalidades extras de forma r\u00e1pida y f\u00e1cil, b\u00e1sicamente contamos con un entorno igual al que se encuentra en cualquier browser moderno con algunas peque\u00f1as adiciones.…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,9],"tags":[22,43,44,46],"class_list":["post-366","post","type-post","status-publish","format-standard","hentry","category-development","category-ui","tag-javascript","tag-qml","tag-qt","tag-qt-quick"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t