{"id":300,"date":"2010-11-04T00:07:30","date_gmt":"2010-11-04T00:07:30","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=300"},"modified":"2010-11-04T00:07:30","modified_gmt":"2010-11-04T00:07:30","slug":"intro-a-qt-quick","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/intro-a-qt-quick\/","title":{"rendered":"Intro a Qt Quick"},"content":{"rendered":"<p>Qt Quick fue para mi la novedad mas importante que nos trajo el reciente lanzamiento de Qt 4.7, Qt Quick permite que dise\u00f1adores y developers trabajen codo a codo para crear aplicaciones en donde la UX es lo mas importante,  Qt Quick incluye a QML (Qt Meta-Object Language), un lenguaje declarativo para el dise\u00f1o de interfaces basado en Javascript y que puede ser extendido usando Javascript o C++, tambien esta disponible en versi\u00f3n beta Qt Creator 2.1 con el cual podemos dise\u00f1ar usando valga la redundancia el designer o editando directamente el codigo QML, por ultimo disponemos de Qt Declarative con el cual podemos integrar QML en aplicaciones C++.<\/p>\n<h3>Hello World<\/h3>\n<p>Vamos a comenzar con el tradicional Hello World, podemos crear un proyecto nuevo en Qt Creator o crear un archivo de texto y lo guardamos con extension .qml, un documento QML describe los elementos que los componen en un arbol de objetos, QML trae incluidos algunos elementos graficos como Canvas, Imagenes, Rectangulos entro otros ademas de algunos Behaviors como por ejemplo States, Animations y Transitions, estos elementos ser\u00e1n los que combinaremos para crear nuestra aplicaci\u00f3n.<\/p>\n<p>En nuestro proyecto en Qt Creator o en un archivo de texto ingresamos el siguiente c\u00f3digo.<\/p>\n<pre>\nimport Qt 4.7\n\nRectangle {\n    id: container\n    width: 200\n    height: 200\n    Text {\n        text: &quot;Hello World&quot;\n        anchors.horizontalCenter: container.horizontalCenter\n        anchors.verticalCenter: container.verticalCenter\n    }\n}\n<\/pre>\n<p>En la primera linea vemos el import para utilizar las bibliotecas b\u00e1sicas de Qt 4.7, luego creamos un elemento Rectangle el cual tiene seteadas sus dimensiones y la id container, paso siguiente y dentro del Rectangle que hace las veces de contenedor creamos un elemento Text, le damos un valor a la propiedad text del mismo y alineamos el elemento usando las propiedades anchors las cuales enlazaremos a las propiedades horizontalCenter y verticalCenter del Rectangle.<\/p>\n<p>Paso siguiente si estamos en QT Creator podemos correr nuestro ejemplo pulsando Ctrl+R si usamos Linux o Windows o cmd+R si utilizamos en OS X, en cambio si solo estamos trabajando con un archivo de texto podemos correr la demo usando el comando <strong>qmlviewer hello.qml<\/strong>, si todo sale bien deber\u00edamos de ver algo as\u00ed.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2010\/11\/hello-qml01.jpg\" alt=\"Qt Creator - Hello World\" title=\"Qt Creator - Hello World\" \/><\/p>\n<h4>Lo que viene<\/h4>\n<p>Este es el primero de una serie de posts en donde hablare sobre los fundamentos de Qt Quick, si quieren ir investigando por sus propios medios pueden comenzar bajando el SDK de Qt 4.7 y Qt Creator y luego darle una mirada a la documentaci\u00f3n online (ver links abajo), que por cierto es muy completa y se va actualizando y mejorando permanentemente.<\/p>\n<ul>\n<li><a href=\"http:\/\/qt.nokia.com\/\">Download Qt 4.7 &#038; Qt Creator<\/a><\/li>\n<li><a href=\"http:\/\/doc.qt.nokia.com\/4.7-snapshot\/qtquick.html\">Qt Quick Documentation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Qt Quick fue para mi la novedad mas importante que nos trajo el reciente lanzamiento de Qt 4.7, Qt Quick permite que dise\u00f1adores y developers trabajen codo a codo para crear aplicaciones en donde la UX es lo mas importante, Qt Quick incluye a QML (Qt Meta-Object Language), un lenguaje declarativo para el dise\u00f1o de [&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":[43,44,46],"class_list":["post-300","post","type-post","status-publish","format-standard","hentry","category-development","category-ui","tag-qml","tag-qt","tag-qt-quick"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/300","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=300"}],"version-history":[{"count":0,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/300\/revisions"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}