{"id":668,"date":"2011-03-19T00:47:57","date_gmt":"2011-03-19T03:47:57","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=668"},"modified":"2011-12-16T22:54:13","modified_gmt":"2011-12-17T01:54:13","slug":"json-qml","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/json-qml\/","title":{"rendered":"Consumiendo JSON con QML"},"content":{"rendered":"

Hace un tiempo escrib\u00ed sobre lo f\u00e1cil que es consumir XML con QML<\/a>, hoy le toca el turno a JSON, consumir JSON con QML requiere un poco mas de trabajo comparado con XML, pero no mucho mas.<\/p>\n

Pasemos al c\u00f3digo, lo primero que haremos sera crear un archivo data.js que contendr\u00e1 la l\u00f3gica que poblara al Model con los datos, para este ejemplo vamos a usar el API de Wikileaks para mostrar un listado con los \u00faltimos cables liberados, lo siguiente es agregar el ListModel, el Delegate cuyo c\u00f3digo esta al final y no necesita muchos comentarios, el ListView que mostrara los datos y vamos a disparar la funci\u00f3n getLatestCables() cuando la view se haya cargado.<\/p>\n

main.qml<\/h5>\n
\r\nimport QtQuick 1.0\r\nimport "data.js" as Data\r\n\r\nRectangle {\r\n    width:360\r\n    height:640\r\n\r\n    Component.onCompleted:Data.getLatestCables();\r\n\r\n    ListModel {\r\n        id:cablesModel\r\n    }\r\n\r\n    CablesDelegate {\r\n        id:cablesDelegate\r\n    }\r\n\r\n    Item {\r\n        id:cablesList\r\n        anchors.fill:parent\r\n\r\n        ListView {\r\n            model:cablesModel\r\n            delegate:cablesDelegate\r\n            anchors.fill:parent\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
La magia que no es mucha, pasa aqu\u00ed, esto es simple y puro JavaScript, utilizaremos un XMLHttpRequest para acceder al feed con los datos, luego lo parseamos e iremos agregando uno a uno los datos al Model.<\/p>\n
data.js<\/h5>\n
\r\nfunction getLatestCables(){\r\n    var xhr = new XMLHttpRequest;\r\n    xhr.open("GET", "http:\/\/api.leakfeed.com\/v1\/cables\/latest.json");\r\n    xhr.onreadystatechange = function() {\r\n        if (xhr.readyState == XMLHttpRequest.DONE) {\r\n            var a = JSON.parse(xhr.responseText);\r\n            for (var c in a) {\r\n                var i = a[c];\r\n                cablesModel.append({identifier: i.identifier, classification: i.classification, office: i.office, subject: i.subject});\r\n            }\r\n        }\r\n    }\r\n    xhr.send();\r\n}\r\n<\/pre>\n
CablesDelegate.qml<\/h5>\n
\r\nimport QtQuick 1.0\r\n\r\nComponent {\r\n\r\n    Rectangle {\r\n        border.color:"#b7b7b7"\r\n        border.width:1\r\n        width:parent.width\r\n        height:cableIdentifier.height + cableOffice.height + cableClass.height + cableSubject.height + 10\r\n        color:"#fff"\r\n\r\n        Item {\r\n            width:parent.width\r\n            height:parent.height\r\n\r\n            Grid {\r\n                rows:4\r\n                width:parent.width\r\n                anchors.verticalCenter:parent.verticalCenter\r\n                anchors.left:parent.left\r\n                anchors.leftMargin:5\r\n                anchors.right:parent.right\r\n                anchors.rightMargin:5\r\n\r\n                Text {\r\n                    id:cableIdentifier\r\n                    text:identifier\r\n                    font.bold:true\r\n                    font.pixelSize:18\r\n                    smooth:true\r\n                    color:"#333"\r\n                }\r\n\r\n                Text {\r\n                    id:cableOffice\r\n                    color:"#0076A3"\r\n                    text:office\r\n                    font.pixelSize:18\r\n                    font.bold:true\r\n                    smooth:true\r\n                }\r\n\r\n                Text {\r\n                    id:cableClass\r\n                    color:"#aa1317"\r\n                    text:classification\r\n                    font.pixelSize:16\r\n                    font.bold:true\r\n                    smooth:true\r\n                }\r\n\r\n                Text {\r\n                    id:cableSubject\r\n                    text:subject\r\n                    font.pixelSize: 14\r\n                    wrapMode:Text.WrapAtWordBoundaryOrAnywhere\r\n                    width:parent.width\r\n                    smooth:true\r\n                    color:"#333"\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
Si todo sale bien, al correr la demo deber\u00edamos obtener como resultado algo parecido a los que se ve en la siguiente imagen.<\/p>\n
\"JSON<\/p>\n","protected":false},"excerpt":{"rendered":"
Hace un tiempo escrib\u00ed sobre lo f\u00e1cil que es consumir XML con QML, hoy le toca el turno a JSON, consumir JSON con QML requiere un poco mas de trabajo comparado con XML, pero no mucho mas. Pasemos al c\u00f3digo,…<\/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":[23,43,44,46],"class_list":["post-668","post","type-post","status-publish","format-standard","hentry","category-development","tag-json","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