Posts made in décembre, 2014

Création d’une application ubuntu – jour 4

Navigation sous ubuntu touch Dans le projet que nous venons d’ouvrir il y a des exemples d’utilisation de presque tous les composants ubuntu, mais pas pour la navigation. Nous allons donc voir comment faire un système de navigation. Il existe deux façon de naviguer sur ubuntu touch : PageStack et Tabs. Nous allons étudiez chacun des deux composants. Utiliser la navigation avec le composant PageStack Pour utiliser pageStack il faut aller sur la documentation officiel pour prendre connaissance des règles de design (comme indiqué sur l’image ci-dessous) : Maintenant passons à l’exemple pratique (issue de la documentation) : JavaScript import QtQuick 2.0 import Ubuntu.Components 1.1 import Ubuntu.Components.ListItems 1.0 as ListItem MainView { width: units.gu(48) height: units.gu(60) PageStack { id: pageStack Component.onCompleted: push(page0) Page { id: page0 title: i18n.tr("Root page") visible: false Column { anchors.fill: parent ListItem.Standard { text: i18n.tr("Page one") onClicked: pageStack.push(page1, {color: UbuntuColors.orange}) progression: true } ListItem.Standard { text: i18n.tr("External page") onClicked: pageStack.push(Qt.resolvedUrl("MyCustomPage.qml")) progression: true } } } Page { title: "Rectangle" id: page1 visible: false property alias color: rectangle.color Rectangle { id: rectangle anchors { fill: parent margins: units.gu(5) } } } } } 123456789101112131415161718192021222324252627282930313233343536373839404142 import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItemMainView {    width: units.gu(48)    height: units.gu(60)    PageStack {        id: pageStack        Component.onCompleted: push(page0)        Page {            id: page0            title: i18n.tr("Root page")            visible: false            Column {                anchors.fill: parent                ListItem.Standard {                    text: i18n.tr("Page one")                    onClicked: pageStack.push(page1, {color: UbuntuColors.orange})                    progression: true                }                ListItem.Standard {                    text: i18n.tr("External page")                    onClicked: pageStack.push(Qt.resolvedUrl("MyCustomPage.qml"))                    progression: true                }            }        }        Page {            title: "Rectangle"            id: page1            visible: false            property alias color: rectangle.color            Rectangle {                id: rectangle                anchors {                    fill: parent                    margins: units.gu(5)                }            }        }    }} Qu’est-ce qu’il se passe ? Toutes les pages doivent être à l’intérieur d’un PageStack (et il ne peux y avoir qu’un seul PageStack sinon le système ne sais plus où il en est). Au chargement du composant on « push » la page0 (ça sera la page afficher par défaut). Utiliser la navigation avec le composant Tabs Comme pour le composant PageStack, je vous invite à prendre connaissance des règles de design sur la documentation officiel pour avoir plus de détails Voici un exemple d’utilisation tiré de la documentation officiel JavaScript import QtQuick 2.0 import Ubuntu.Components 1.1 import Ubuntu.Components.ListItems 1.0 as ListItem MainView { width: units.gu(48) height: units.gu(60) Tabs { id: tabs Tab { title: i18n.tr("Simple page") page: Page { Label { id: label anchors.centerIn: parent text: "A centered label" } tools: ToolbarItems { ToolbarButton { text: "action" onTriggered: print("action triggered") } } } } Tab { id: externalTab title: i18n.tr("External") page: Loader { parent: externalTab anchors { left: parent.left right: parent.right bottom: parent.bottom } source: (tabs.selectedTab ===...

Read More

Création d’une application pour ubuntu touch – jour 3

Création d’une application pour ubuntu touch – jour 3

Utilisation du toolkit de démonstration d’ubuntu touch Bonjour à tous. Après avoir passez les deux étapes préliminaires, nous allons tout doucement passez au cœurs du développement de l’application. Mais avant de commencer le développement à proprement parlé, je vous invite à vous familiarisé avec les conventions de design sous ubuntu touch en découvrant le kit de d’utilisation (toolkit) d’ubuntu ui (user interface) . Ubuntu ui – toolkit Lorsque vous avez installé le sdk ubuntu, vous avez aussi installé de petit exemples d’utilisations des composants ubuntu. Dans ce bref tutoriel, nous allons nous intéresser aux différents composants existant pour ubuntu touch.   Ouverture du toolkit Le projet est situé dans le répertoire « /usr/lib/ubuntu-ui-toolkit/examples/ » Dans Qt, faire CTRL + o pour ouvrir un nouveau projet, puis collez /usr/lib/ubuntu-ui-toolkit/examples/ dans la barre de location, comme dans l’exemple ci-dessous :   Ensuite, presser la touche entrer, vous devriez atterrir dans le répertoire choisi : Vous avez comme projet de démonstration une calculatrice et une application de conversion d’unité. Je vous laisserais avoir la curiosité d’aller regardé ces applications. Ici, l’application qui nous intéresseras seras la galerie de toolkit (ubuntu-ui-toolkit-gallery). Double clickez sur le répertoire « ubuntu-ui-toolkit-gallery » et choisissez le fichier « ubuntu-ui-toolkit-gallery.qmlproject » : Ensuite vous pouvez lancer l’application de démonstration des composants ubuntu en cliquant sur CTRL + R : Nous allons voir comment utilisez la navigation dans le prochain...

Read More

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

Empêcher un fichier d’être modifié ou supprimé

Empêcher un fichier d’être modifié ou supprimé

Il est possible d’empêcher n’importe quel fichier d’être modifié, supprimé ou même renommé, et ce, par par n’importe quel utilisateur, root y compris. Comment faire ? Pour faire cela il faut utiliser la commande : chattr qui modifie les attributs d’un fichier. L’option qui nous intéresse est l’option « i » : « +i » pour activer la protection et « -i » pour désactiver cette protection . Le « i » signifie immuable (ou immutable en anglais) qui veux dire « ne peuvent pas être modifiés ». chattr peut aussi protéger des répertoires entiers. chattr doit être utilisé avec les privilèges root. Protéger un fichier : sudo chattr +i <fichier ou repertoire> Retirer la protection d’un fichier protéger sudo chattr -i <fichier ou repertoire> Si vous appliquez ces commandes sur un répertoire, vous pouvez utilisez l’option « -R » pour exécutez la commande récursivement. Exemples : créons un fichier quelconque : echo "Ceci est un fichier tres important." >important.txt avec les droits root, utiliser chattr : sudo chattr +i important.txt Est-ce que l’utilisateur root peut modifier le fichier ? Est-ce que je peux renommé le fichier avec les droits super utilisateurs ? Est-ce que je peux le supprimé ? Si vous voulez pouvoir effectuer l’une de ces actions il faudra donc enlever la protection du fichier avec l’attribut « -i » comme nous l’avons-vu précédemment : sudo chattr -i important.txt   traduction de l’article suivant :...

Read More