Posts Tagged "api"

Ubuntu touch – Comment parser une API JSON dans un ListView

Ubuntu touch – Comment parser une API JSON dans un ListView

Bonjour à tous, Dans ce petit tutoriel rapide on va voir comment récupérer les données d’une API JSON et de les afficher dans un ListView. Voici un petit exemple du résultat final : Qt fournis déjà une petite feature l XMLListModel qui permet de paser aisément du XML. Malheureusement aucun component ne permet de le faire en JSON. Un peut partout sur le net on trouve des petites bidouilles pour le faire via du javascript. L’utilisation du javascript pure est simple et efficace. Le seul bémol c’est lorsqu’on commence à avoir une API un petit peut compliqué, le code deviens très vite désorganisé. Heureusement, la nature ayant horreur du vide. Un grand merci à  Romain Pokrzywka qui nous à préparer un petit component pour parser du JSON : JSONListModel. C’est beaucoup plus propre que d’utiliser du javascript pure. Il suffit de télécharger les fichier JSONListModel.qml et jsonpath.js. Insérer les dans votre projet et le tour est joué. Voici une petite démo d’utilisation: JavaScript import QtQuick 2.0 import Ubuntu.Components 1.1 import Ubuntu.Components.ListItems 1.0 as ListItem /*! \brief MainView with a Label and Button elements. */ MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "com.ubuntu.developer.username.newapp" /* This property enables the application to change orientation when the device is rotated. The default is false. */ //automaticOrientation: true // Removes the old toolbar and enables new features of the new header. useDeprecatedToolbar: false width: units.gu(100) height: units.gu(75) Page { title: i18n.tr("Morgan Blog - demo") ListView { id: redditList anchors.fill: parent JSONListModel { id: redditFeed source: "http://www.reddit.com/r/Ubuntufr/hot.json" query: "$.data.children[*]" } model: redditFeed.model delegate: ListItem.Subtitled { Component.onCompleted: console.log(model.data.title+"\n"); iconSource: model.data.thumbnail Text { width: parent.width horizontalAlignment: Text.AlignLeft font.pixelSize: 12 color: "black" text: model.data.title } } } } } 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItem/*!    \brief MainView with a Label and Button elements.*/ MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"     // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "com.ubuntu.developer.username.newapp"     /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true     // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false     width: units.gu(100)    height: units.gu(75)     Page {        title: i18n.tr("Morgan Blog - demo")        ListView {            id: redditList             anchors.fill: parent            JSONListModel {                id: redditFeed                source: "http://www.reddit.com/r/Ubuntufr/hot.json"                query: "$.data.children[*]"            }            model: redditFeed.model            delegate: ListItem.Subtitled {                 Component.onCompleted: console.log(model.data.title+"\n");                iconSource: model.data.thumbnail                Text {                    width: parent.width                    horizontalAlignment: Text.AlignLeft                    font.pixelSize: 12                    color: "black"                    text: model.data.title                 }            }        }    }}    ...

Read More