{"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":"<p>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 <a href=\"http:\/\/doc.trolltech.com\/4.7-snapshot\/qdeclarativeglobalobject.html\" target=\"_blank\">adiciones<\/a>.<\/p>\n<p>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 <a href=\"http:\/\/doc.trolltech.com\/4.7-snapshot\/qml-text.html\" target=\"_blank\">Text<\/a> que mostrara los numeros.<\/p>\n<h4>Javascript Inline<\/h4>\n<p>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<p>Pasemos ahora al c\u00f3digo, en un nuevo proyecto pegamos el siguiente c\u00f3digo, como ver\u00e1n luego de declarar un <a href=\"http:\/\/doc.trolltech.com\/4.7-snapshot\/qml-rectangle.html\" target=\"_blank\">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 <a href=\"http:\/\/doc.trolltech.com\/4.7-snapshot\/qml-text.html\" target=\"_blank\">Text<\/a> encargado de mostrar el numero aleatorio, el cual contiene un <a href=\"http:\/\/doc.trolltech.com\/4.7-snapshot\/qml-mousearea.html\" target=\"_blank\">MouseArea<\/a> que cuando se dispara el evento onClicked toma un numero generado por la funci\u00f3n Javascript y se lo asigna al elemento <a href=\"http:\/\/doc.trolltech.com\/4.7-snapshot\/qml-text.html\" target=\"_blank\">Text<\/a>, lo mismo pasa a continuaci\u00f3n con la funci\u00f3n <a href=\"http:\/\/doc.qt.nokia.com\/4.7\/qml-keys.html\" target=\"_blank\">Keys.onPressed<\/a> seteada para dispararse cuando se presiona la barra espaciadora.<\/p>\n<h5>Numerator.qml<\/h5>\n<pre>\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: &quot;click!&quot;\n        font.pointSize: 128\n        font.family: &quot;Arial&quot;\n        font.bold: true\n        color: &quot;#cc0000&quot;\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<h4>Javascript Standalone<\/h4>\n<p>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<h5>generator.js<\/h5>\n<pre>\nfunction rand (n){\n      return (Math.floor(Math.random() * n + 1));\n}\n<\/pre>\n<p>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 &#8220;alias&#8221; el cual debe ser \u00fanico para cada archivo que importemos, este &#8220;alias&#8221; lo usaremos para poder invocar las funciones que albergue el archvio .js, un ejemplo de ello pueden verlo en el <a href=\"http:\/\/doc.trolltech.com\/4.7-snapshot\/qml-mousearea.html\" target=\"_blank\">MouseArea<\/a> o en la <a href=\"http:\/\/doc.qt.nokia.com\/4.7\/qml-keys.html\" target=\"_blank\">Keys.onPressed<\/a> del c\u00f3digo a continuaci\u00f3n.<\/p>\n<h5>Numerator.qml<\/h5>\n<pre>\nimport Qt 4.7\nimport &quot;generator.js&quot; as RandomFunctions\n\nRectangle {\n    width: 640\n    height: 360\n    id:container\n\n    Text{\n        id: start\n        text: &quot;click!&quot;\n        font.pointSize: 128\n        font.family: &quot;Arial&quot;\n        font.bold: true\n        color: &quot;#cc0000&quot;\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<p>Como ver\u00e1n el integrar Javascript con QML es muy f\u00e1cil y nos permite potenciar las posibilidades de QML, en la <a href=\"http:\/\/doc.trolltech.com\/4.7-snapshot\/qdeclarativejavascript.html\" target=\"_blank\">documentaci\u00f3n<\/a> oficial pueden encontrar mas informaci\u00f3n, ejemplos y buenas practicas para aplicar a nuestros desarrollos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. Vamos a comenzar con un ejemplo simple, la idea de este ejemplo es crear una [&hellip;]<\/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":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/comments?post=366"}],"version-history":[{"count":0,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/366\/revisions"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}