{"id":329,"date":"2010-11-06T21:37:43","date_gmt":"2010-11-06T21:37:43","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=329"},"modified":"2010-11-06T21:37:43","modified_gmt":"2010-11-06T21:37:43","slug":"states-qml","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/states-qml\/","title":{"rendered":"States en QML"},"content":{"rendered":"

Para quienes hayan o est\u00e9n trabajado con Flash, Flex, WPF o Silverlight el tema de los States es algo conocido y de uso diario, en QML un State nos permite cambiar propiedades de un elemento, disparar un script usando StateChangeScript<\/a>, modificar el parent utilizando ParentChanges<\/a>, cambiar la alineaci\u00f3n usando AnchorChanges<\/a> o sobrescribir un signal handler utilizando PropertyChanges<\/a>, todo ello cuando ocurra un evento determinado ya sea por nosotros en c\u00f3digo o por el usuario cuando interact\u00faa con la aplicaci\u00f3n.<\/p>\n

Vamos a comenzar con un ejemplo simple, la idea es crear un bot\u00f3n, mas que nada porque es un elemento de uso com\u00fan el cual cuenta con varios estados con los que podemos jugar y porque QML no trae un elemento Button definido as\u00ed que si necesitamos hacer uso de uno vamos a tener que crearlo nosotros, esto puede parecer un poco molesto, pero por suerte es un proceso f\u00e1cil y cuyo c\u00f3digo puede ser reutilizado posteriormente.<\/p>\n

Vamos a empezar creando un proyecto con Qt Creator, luego de crearlo vamos a a\u00f1adir un archivo QML llamado Button.qml, una cosa a tener en cuenta es que el nombre que usemos para el archivo sera el que usaremos para invocar el elemento que creemos con el, en este caso Button.<\/p>\n

El pr\u00f3ximo paso sera pegar el siguiente c\u00f3digo en el archivo Button.qml<\/p>\n

Button.qml<\/h5>\n
\nimport Qt 4.7\n\nItem {\n    id: container\n    signal clicked\n    property string text\n\n    Rectangle {\n        id: button\n        color: "#00aeef"\n        border.width: 1\n        radius: 4\n        width: container.width\n        height: container.height\n    }\n\n    MouseArea {\n        id: mouseRegion\n        anchors.fill: button\n        onClicked: {\n            container.clicked();\n        }\n    }\n\n    Text {\n        color: "#fff"\n        anchors.centerIn: button\n        font.pixelSize: 12\n        text: container.text\n    }\n\n    states: [\n        State {\n            name: "Pressed"\n            when: mouseRegion.pressed == true\n            PropertyChanges {\n                target: button\n                color: "#333"\n            }\n        }\n    ]\n }\n<\/pre>\n
El c\u00f3digo comienza con el import de rigor y sigue con un Item<\/a>, el cual es el mas b\u00e1sico de los visual items en QML, continua con el signal que no es mas que un handler usado por el MouseArea<\/a> y que detecta las acciones hechas por el mouse dentro de si, y por ultimo en esta primera parte del c\u00f3digo tenemos la declaraci\u00f3n de la propiedad text la cual usaremos para setear el texto a mostrar por el bot\u00f3n.<\/p>\n
A continuaci\u00f3n tenemos un elemento Rectangle<\/a> que sera nuestro bot\u00f3n en si, sigue el MouseArea<\/a> que esta configurado para que ocupe toda la superficie del Rectangle<\/a> y que contiene el handler onClicked<\/a> el cual se dispara cuando se hace click con el bot\u00f3n izquierdo del mouse, por ultimo tenemos un elemento Text<\/a> que hace las veces de label del bot\u00f3n.<\/p>\n
Y para finalizar llegamos a la secci\u00f3n de states donde tenemos un State<\/a> cuyo nombre es Pressed y se dispara cuando el MouseArea<\/a> ha recibido un click el cual a trav\u00e9s de la PropertyChanges<\/a> que apunta al bot\u00f3n cambien la propiedad color del mismo.<\/p>\n
Bien, ya tenemos nuestro bot\u00f3n listo, utilizarlo es tan simple como invocar un elemento Button, en el c\u00f3digo que sigue pueden ver un ejemplo de como hacerlo.<\/p>\n
Main.qml<\/h5>\n
\nimport Qt 4.7\n\nRectangle {\n    width: 200\n    height: 200\n    id: container\n    Button {\n        width: 100;\n        height: 25;\n        text: 'Hello World';\n        anchors.horizontalCenter: container.horizontalCenter;\n        anchors.verticalCenter: container.verticalCenter;\n    }\n}\n<\/pre>\n
Animaci\u00f3n<\/h3>\n
Bien como se ve en el ejemplo anterior el uso de states es bastante simple e intuitivo, con states se pueden hacer muchas mas cosas y pueden aprender mas de ellos viendo la documentaci\u00f3n<\/a>, pero para ir cerrando este post y como adelanto de los que vienen vamos a agregarle una peque\u00f1a animaci\u00f3n al State<\/a> utilizado por nuestro bot\u00f3n para hacer mas suave la transici\u00f3n entre el estado por default y Pressed, para ello solamente hay que agregar el siguiente c\u00f3digo luego de la secci\u00f3n de states.<\/p>\n
Button.qml<\/h5>\n
\ntransitions: [\n    Transition {\n        PropertyAnimation { properties: "color"; duration: 300 }\n    }\n]\n<\/pre>\n
La animaci\u00f3n que usamos es bastante simple lo \u00fanico que hacemos es crear una Transition<\/a> y setear las propiedades que ser\u00e1n animadas por la PropertyAnimation<\/a> y su duraci\u00f3n.<\/p>\n
El resultado de todo esto deber\u00eda de verse de la siguiente manera:<\/p>\n
\"States<\/p>\n
Recuerden darse una vuelta por los ejemplos<\/a> y por la documentaci\u00f3n<\/a> de Qt Quick, en la cual hay mas informaci\u00f3n acerca de states<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Para quienes hayan o est\u00e9n trabajado con Flash, Flex, WPF o Silverlight el tema de los States es algo conocido y de uso diario, en QML un State nos permite cambiar propiedades de un elemento, disparar un script usando StateChangeScript, modificar el parent utilizando ParentChanges, cambiar la alineaci\u00f3n usando AnchorChanges o sobrescribir un signal handler […]<\/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-329","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\/329","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=329"}],"version-history":[{"count":0,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/329\/revisions"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}