{"id":460,"date":"2010-11-19T00:57:13","date_gmt":"2010-11-19T00:57:13","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=460"},"modified":"2010-11-19T00:57:13","modified_gmt":"2010-11-19T00:57:13","slug":"consumiendo-xml-con-qml","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/consumiendo-xml-con-qml\/","title":{"rendered":"Consumiendo XML con QML"},"content":{"rendered":"<p>Consumir XML en QML es algo casi trivial, para ello contamos con el elemento <a href=\"http:\/\/doc.qt.nokia.com\/4.7-snapshot\/qml-xmllistmodel.html\" target=\"_blank\">XmlListModel<\/a> que har\u00e1 de data source de un <a href=\"http:\/\/doc.qt.nokia.com\/4.7-snapshot\/qml-listview.html\" target=\"_blank\">ListView<\/a> en el ejemplo a continuaci\u00f3n, el <a href=\"http:\/\/doc.qt.nokia.com\/4.7-snapshot\/qml-xmllistmodel.html\" target=\"_blank\">XmlListModel<\/a> cuenta con una id, un source, que en este caso hace uso de la Weather API de Yahoo, luego vienen los <a href=\"http:\/\/doc.qt.nokia.com\/4.7-snapshot\/qml-xmlrole.html\" target=\"_blank\">XmlRole<\/a> los cuales describen los datos expuestos, cada uno de ellos tiene un name que sera usado luego para poder acceder a la data del role.<\/p>\n<p>A continuaci\u00f3n tenemos un delegate, en donde especificamos que datos vamos a consumir, el layout y la apariencia que tendran, por ultimo el <a href=\"http:\/\/doc.qt.nokia.com\/4.7-snapshot\/qml-listview.html\" target=\"_blank\">ListView<\/a> usa el model y el delegate que previamente configuramos, en este caso solo muestra un item (ver imagen abajo) ya que nuestra query solo devuelve un dato, pero si el data source devolviese mas items, cada uno de ellos poblar\u00edan el <a href=\"http:\/\/doc.qt.nokia.com\/4.7-snapshot\/qml-listview.html\" target=\"_blank\">ListView<\/a>, como bonus, el <a href=\"http:\/\/doc.qt.nokia.com\/4.7-snapshot\/qml-listview.html\" target=\"_blank\">ListView<\/a> cuenta con kinetic scroll, el cual nos da unos puntos extras en el apartado de UX con 0 esfuerzo por parte nuestra.<\/p>\n<pre>\nimport Qt 4.7\n\nRectangle {\n    width: 640\n    height: 360\n\n    XmlListModel {\n        id: weatherModel\n        source: &quot;http:\/\/weather.yahooapis.com\/forecastrss?w=468739&amp;amp;amp;amp;amp;amp;amp;amp;amp;u=c&quot;\n        query: &quot;\/rss\/channel\/item&quot;\n        XmlRole {\n            name: &quot;title&quot;\n            query: &quot;title\/string()&quot;\n        }\n        XmlRole {\n            name: &quot;description&quot;\n            query: &quot;description\/string()&quot;\n        }\n    }\n\n    Component {\n        id: weatherDelegate\n            Item {\n                anchors.fill: parent\n                Column {\n                    Text {\n                        text:title\n                    }\n                    Text {\n                        text:description\n                    }\n                }\n            }\n        }\n\n    ListView {\n        id: weatherList\n        anchors.fill: parent\n        model: weatherModel\n        delegate: weatherDelegate\n    }\n}\n<\/pre>\n<p><img decoding=\"async\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2010\/11\/home-paulo-Qt-Projects-WeatherFeeds-WeatherFeeds.qml-Qt-QML-Viewer_003.png\" alt=\"Consumiendo XML con QML\" title=\"Consumiendo XML con QML\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Consumir XML en QML es algo casi trivial, para ello contamos con el elemento XmlListModel que har\u00e1 de data source de un ListView en el ejemplo a continuaci\u00f3n, el XmlListModel cuenta con una id, un source, que en este caso hace uso de la Weather API de Yahoo, luego vienen los XmlRole los cuales describen [&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],"tags":[43,44,46],"class_list":["post-460","post","type-post","status-publish","format-standard","hentry","category-development","tag-qml","tag-qt","tag-qt-quick"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/460","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=460"}],"version-history":[{"count":0,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/460\/revisions"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}