Mettre à jour la documentation développeur Ubuntu UI toolkit

Bonjour, aujourd’hui je vais vous présenter un petit tuto qui vous montre la marche à suivre pour contribuer à la documentation ubuntu touch. En effet, un des gros problèmes avec ubuntu ui toolkit, c’est que la doc est encore loin d’être à jour. Donc si vous suivez l’actualité et que vous voulez donner un coup de main, n’hésitez pas à contribuer ! Premièrement, il vous faudra un compte sur le launchpad Ubuntu UI toolkit et configurer votre clés ssh (je vous laisse allez sur votre profile et suivre les instructions) Dans un second temps, il faut savoir que launchpad utilise bazar comme gestionaire de version (C’est très semblable à git). Il faut cloner la branch staging (qui est la branche des modifications en cours) : bzr branch lp:ubuntu-ui-toolkit/staging Dans un troisième temps, nous allons modifier le fichier et créer notre branche sur bazar. Pour cela, il faudra ouvrir le projet avec un qtCreator (ou même un simple editeur texte). Dans mon cas, j’ai voulu modifier la documentation du composant Popover afin qu’il utilise la dernière version du composant ListItem (l’ancien étant deprecatied car non performant). J’ai donc ouvert le fichier « staging/src/Ubuntu/Components/Popups/1.3/Popover.qml » pour y modifier l’exemple de la documentation. En faisant un bzr status  vous pourrez voir la liste des fichiers modifier et ajouter le votre avec bzr add <chemin-vers-le-fichier> . il ne vous reste à commiter les changements : bzr commit -m "<commentaire>" , et les publiers sur votre branche bzr push lp:~/ubuntu-ui-toolkit/<nom-de-la-branche> . Quatrièmement, il faudra faire votre pull request à la team ubuntu pour que les changements soit accepté ! Il faudra vous rendre sur la page du  launchpad Ubuntu UI toolkit (https://code.launchpad.net/~z-admin-angels-gmail-com/ubuntu-ui-toolkit/<nom-de-votre-brance>)  et cliquez sur « Propose for merging ». Quand à la branche, il faudra choisir « other » et mettre  » lp:ubuntu-ui-toolkit/staging  » afin de bien spécifier la branche staging. Et voila,  une fois que vous aurez saisis le formulaire, votre contribution seras soumis à validation...

Read More

Modifier les raccourcis d’applications ubuntu touch

Modifier les raccourcis  d’applications ubuntu touch

Bonjour à tous, Ayant récemment fait l’acquisition d’un ubuntu touch, j’ai décider d’ouvrir une section où je posterais des petites astuces que je trouve.   Pour inaugurer cette nouvelle catégorie, nous allons voir comment modifier les raccourcis d’applications ubuntu touch.   Pour remplacer l’icône de l’horloge par l’excellente application de mail Dekko, il vous suffit d’entrer cette ligne de commande : gsettings set com.canonical.Unity.ClickScope core-apps '["dialer-app", "messaging-app", "address-book-app", "com.ubuntu.camera_camera", "webbrowser-app", "dekko.dekkoproject"]'   Vous pouvez vous amusez à la taper à la main depuis votre smartphone (en utilisant l’application terminal) ou alors vous pouvez le faire depuis votre desktop, pour ce faire suivez les étapes suivantes : Activer le mode développeur (pour activer le mode développeur il faut avoir activer le passcode). Allez dans « System setting » -> « about this phone »  -> « developper mode »  Connecter le téléphone au pc via USB Déverrouiller l’écran (c’est une sécurité, pour que le pc puisse accéder au portable il faut déverrouillé l’écran du téléphone) Dans votre terminal (desktop), pour vous connecter au téléphone,  taper : adb shell  Ensuite entrer la ligne de commande pour ajouter l’icône Dekko : gsettings set com.canonical.Unity.ClickScope core-apps '["dialer-app", "messaging-app", "address-book-app", "com.ubuntu.camera_camera", "webbrowser-app", "dekko.dekkoproject"]' Et voici le résultat : Si jamais vous voulez ré-initialiser les raccourcis par défaut : gsettings reset com.canonical.Unity.ClickScope core-apps...

Read More

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

Comment mettre un background à un TextField

Comment mettre un background à un TextField

Bonjour à tous, aujourd’hui je vous fais découvrir une petite astuce, toute simple pour pouvoir mettre un background à un TextField. Ce petit trick ne casse pas des briques mais ça fais un bon petit aide mémoire. Il faut préférer l’utilisation d’un « TextField » plutôt qu’un « TextInput« , grâce à cela vous pourrez utiliser « TextFieldStyle » qui permet de personnalisé le TextField. JavaScript import QtQuick 2.0 import Ubuntu.Components 1.1 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.1 MainView { id: main width: 400 height: 300 Column { spacing: units.gu(2) anchors.centerIn: parent TextInput { text: "TextInput par defaut" cursorVisible: false width: main.width - units.gu(25) } TextField { placeholderText: "TextField par defaut" width: main.width - units.gu(25) } TextField { placeholderText: "TextField avec background" width: main.width - units.gu(25) text: "TextField avec background" style: TextFieldStyle { textColor: "black" background: Rectangle { radius: 5 color: "orange" implicitWidth: 100 implicitHeight: 24 border.color: "#333" border.width: 1 } } } } } 12345678910111213141516171819202122232425262728293031323334353637383940 import QtQuick 2.0import Ubuntu.Components 1.1import QtQuick.Controls 1.1import QtQuick.Controls.Styles 1.1 MainView {    id: main    width: 400    height: 300     Column {        spacing: units.gu(2)        anchors.centerIn: parent        TextInput {            text: "TextInput par defaut"            cursorVisible: false            width: main.width - units.gu(25)        }        TextField {            placeholderText: "TextField par defaut"            width: main.width - units.gu(25)        }        TextField {            placeholderText: "TextField avec background"            width: main.width - units.gu(25)            text: "TextField avec background"            style: TextFieldStyle {                textColor: "black"                background: Rectangle {                    radius: 5                    color: "orange"                    implicitWidth: 100                    implicitHeight: 24                    border.color: "#333"                    border.width: 1                }            }        }    }} Et voici le rendu :  ...

Read More

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

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

Création d’une application pour ubuntu-touch – jour 2   [Jour 2] – Créer ça première application Dans cette article on va voir comment créer notre première application qui compile sur desktop et mobile. Je vous préviens ça commenceras à devenir intéressant à partir du prochain article ! Let’s Go Tout d’abord retourné sur l’écran d’accueil et cliquez sur « Create a new Project » : Une fenêtre ressemblant à celle-ci devrais s’ouvrir :     Alors la, il y a plusieurs choix, vous pouvez faire des web App, des applications HTML 5 (avec cordova) ou même choisir de développer en GO (langage de google) plutôt qu’en C++. Personnellement je vais faire du Qt avec Qml  donc choisisez « App with simple UI »     Bon la c’est facile, vous choisissez le nom de votre application     Cette partie est importante, elle vous permettra de publier automatiquement votre application sur launchpad (je reviendrais dessus dans un prochain tutoriel), ici on veux faire une petite application pour découvrir le monde ubuntu. Bon la vous choisissez sur quel plateforme vous voulez compilez votre application, pour le moment choisissez le desktop et votre émulateur (plus tard je ferais un article pour le déploiement d’une application sur plusieurs plate-forme (linux, windows, mac, android, ubuntu-touch etc …)   Ici vous choisissez votre gestionnaire de version (Git, SVN, etc …), dans le cadre de l’article nous nous acquitterons de cette partie.   Et voila maintenant vous avez une application avec le code minimal, pour la compilez cliquez sur CTRL + R !...

Read More

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

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

Création d’une application pour ubuntu-touch Introduction Bonjour à tous, j’ai décidé de faire un tutoriel pour apprendre à créer une application pour Ubuntu-touch depuis Ubuntu 14.04. [Jour 1] Mise en place de l’environnement de développement Tout d’abord il faut mettre en place un environnement de développement pour que l’on soit dans des conditions optimales. La mise en place de l’environnement de développement consiste à installer le SDK ubuntu puis d’émuler un appareille ubuntu touch.  1. Installation des paquets 1.1Ubuntu SDK Swift sudo add-apt-repository ppa:ubuntu-sdk-team/ppa sudo apt-get update && sudo apt-get install ubuntu-sdk 12 sudo add-apt-repository ppa:ubuntu-sdk-team/ppasudo apt-get update && sudo apt-get install ubuntu-sdk  1.2 Ubuntu-touch emulator Shell sudo apt-get install ubuntu-emulator 1 sudo apt-get install ubuntu-emulator 2. Création d’un émulateur Ubuntu touch Il vous faut ouvrir l’application que l’on viens d’installer   Ensuite allez dans l’onglet « devices »     Cliquez sur le « + » (en bas à gauche) pour ajouter un nouvelle émulateur !   Ensuite cliquez sur create et patientez quelques minutes, normalement votre interface « device » devrais ressemblez à quelque chose comme ça :   Personnellement j’aime bien lui mettre 768Mo de ram. Ensuite appuyez sur la bouton play (le triangle vert en haut) pour démarrer l’émulateur     Choisissez votre langue, puis appuyer sur start     Passez la validation de la carte sim (on s’en fiche un peut c’est un émulateur).     Pareille pour le wifi : on passe   Accepter d’envoyer des donnée pour aider les développeur à corriger des bug     Ensuite laissez-vous guider par l’intro pour apprendre à dompter la bête...

Read More