{"id":1813,"date":"2012-05-11T22:55:39","date_gmt":"2012-05-12T01:55:39","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=1813"},"modified":"2013-02-23T10:17:29","modified_gmt":"2013-02-23T13:17:29","slug":"intro-qjson","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/intro-qjson\/","title":{"rendered":"Intro a QJson"},"content":{"rendered":"

Hace unos d\u00edas navegando por los proyectos p\u00fablicos<\/a> en Nokia Developer, me tope con un fork de QJson<\/a> que incluye ciertas modificaciones para poder integrar QJson de forma mas natural con QML, antes ya hab\u00eda escrito<\/a> como consumir JSON con QML, pero usar esta versi\u00f3n de QJson es mucho mas simple y eficiente.<\/p>\n

Para empezar, lo primero que hay que hacer es bajar<\/a> el proyecto y copiarlo en una carpeta con nombre el QJson en la carpeta ra\u00edz de nuestro proyecto.<\/p>\n

Luego en el .pro de nuestro proyecto debemos hace un include al .pri de QJson.<\/p>\n

\r\ninclude(.\/QJson\/json.pri)\r\n<\/pre>\n
Tambi\u00e9n en el .pro hay que declarar que vamos a usar la funci\u00f3n network.<\/p>\n
\r\nQT += network\r\n<\/pre>\n
En el main.cpp de nuestra app solo hay que crear los includes para QtDeclarative y para QJson y registrar el Type.<\/p>\n
\r\n#include <QtGui\/QApplication>\r\n#include \"qmlapplicationviewer.h\"\r\n\r\n#include <QtDeclarative>\r\n#include \"QJson\/qjson.h\"\r\n\r\nQ_DECL_EXPORT int main(int argc, char *argv[])\r\n{\r\n    QScopedPointer<QApplication> app(createApplication(argc, argv));\r\n\r\n    qmlRegisterType<QJson>(\"QJson\", 1, 0, \"QJson\");\r\n\r\n    QmlApplicationViewer viewer;\r\n    viewer.setMainQmlFile(QLatin1String(\"qml\/QColor\/main.qml\"));\r\n    viewer.showExpanded();\r\n\r\n    return app->exec();\r\n}\r\n<\/pre>\n
En la parte QML empezamos agregando un import a QJson, luego crearemos un objeto QJSon y por ultimo vamos a declarar que cuando se dispare el evento Component.onCompleted<\/em> se le asignara la url a parsear al objeto QJson y luego iteraremos la data resultante de la consulta he iremos asignando lo valores obtenidos a los campos correspondientes del modelo.<\/p>\n
\r\nimport QtQuick 1.1\r\nimport QJson 1.0\r\nimport com.nokia.symbian 1.1\r\n\r\nPage {\r\n    id: mainPage\r\n\r\n    ListModel {\r\n        id:colorsModel\r\n    }\r\n\r\n    Component {\r\n        id:colorsDelegate\r\n        ListItem {\r\n            height: 100\r\n            Image {\r\n                id:icon\r\n                smooth: true\r\n                width: parent.width\r\n                height: parent.height\r\n                source: imageUrl\r\n                Rectangle {\r\n                    width:parent.width\r\n                    height: 28\r\n                    color:\"#000\"\r\n                    anchors.bottom: parent.bottom\r\n                    anchors.bottomMargin: 0\r\n                    opacity: 0.750\r\n                    ListItemText {\r\n                        role: \"SubTitle\"\r\n                        text:title +\" by \" + userName\r\n                        horizontalAlignment: Text.AlignHCenter\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    ListView {\r\n        anchors.fill: parent\r\n        model: colorsModel\r\n        delegate: colorsDelegate\r\n    }\r\n\r\n    QJson {\r\n        id: json\r\n        onError: {\r\n            console.log(\"line:\"+line)\r\n            console.log(\"message:\"+message)\r\n        }\r\n    }\r\n\r\n    Component.onCompleted: {\r\n        var data = json.parse(\"http:\/\/www.colourlovers.com\/api\/palettes\/new&format=json\")\r\n\r\n        for(var p in data){\r\n            colorsModel.append({\r\n                                   \"title\"   : data[p][\"title\"]\r\n                                   ,\"userName\"  : data[p][\"userName\"]\r\n                                   ,\"imageUrl\": data[p][\"imageUrl\"]\r\n                               })\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
Para este ejemplo use el API<\/a> de ColorLovers<\/a> para poder consultar las ultimas paletas que se han agregado a su DB, el resultado de este peque\u00f1o ejemplo pueden apreciarlo en la siguiente imagen.<\/p>\n
\"QColor<\/p>\n","protected":false},"excerpt":{"rendered":"
Hace unos d\u00edas navegando por los proyectos p\u00fablicos en Nokia Developer, me tope con un fork de QJson que incluye ciertas modificaciones para poder integrar QJson de forma mas natural con QML, antes ya hab\u00eda escrito como consumir JSON con QML, pero usar esta versi\u00f3n de QJson es mucho mas simple y eficiente. Para empezar, […]<\/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,25,43,44,54],"class_list":["post-1813","post","type-post","status-publish","format-standard","hentry","category-development","tag-json","tag-meego","tag-qml","tag-qt","tag-symbian"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/1813","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=1813"}],"version-history":[{"count":19,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/1813\/revisions"}],"predecessor-version":[{"id":2209,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/1813\/revisions\/2209"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=1813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=1813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=1813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}