1. Ubuntu Touch: Sviluppo App e Convergenza Relatore: Giulio Collura

2. Cos' QtQuick un insieme di tecnologie che include: QML, linguaggio dichiarativo utile a descrivere l'interfaccia utente di un programma Javascript C++ API 3. Obiettivi di QtQuick Interfacce utente semplici e veloci Design-oriented Sviluppo rapido 4. QML Syntax Il QML un linguaggio dichiarativo che consente agli oggetti di essere definiti secondo le loro propriet e di come possono interagire e rispondere ai cambiamenti. 5. Import statements Un documento QML pu definire diversi imports per includere un insieme di componenti e script in javascript Esempio import Namespace VersionMajor.VersionMinor import Namespace VersionMajor.VersionMinor as Identifier import "directory" import "file.js" as Script 6. Object Declarations Creare un nuovo file con il nome del nuovo componente Il nome del file senza estensione sar il nome del nuovo componente 7. Esempio SpecialLabel.qml import QtQuick 2.0 Text { property int size: 23 anchors { horizontalCenter: parent.horizontalCenter } color: "white" font { bold: true pointSize: size } } main.qml import QtQuick 2.0 Rectangle { id: root Column { SpecialLabel { size: 15 text: "Label #1" } SpecialLabel { size: 30 text: "Label #2" } } } 8. Integrazione Javascript e QML Codice Javascript pu essere integrato con semplicit per fornire controllo sugli elementi e altri benefici 9. Javascript expressions Item { width: Math.random() height: width < 100 ? 100 : (width + 50) / 2 } 10. Javascript functions import QtQuick 2.0 Item { id: container function randomNumber() { return Math.random() * 360; } function getNumber() { return container.randomNumber(); } MouseArea { anchors.fill: parent // This line uses the JS function from the item onClicked: rectangle.rotation = container.getNumber(); } Rectangle { id: rectangle anchors.centerIn: parent width: 160 height: 160 color: "green" } } 11. Nuovo progetto Idee Nuove applicazioni Porting di Harmattan apps Remake di app iOS e Android Tutorial Disponibili in rete http://developer.ubuntu.com Design guidelines http://design.ubuntu.com/apps Reference Core Apps 12. Project Tree habitus/ habitus.json manifest.json habitus.desktop habitus.qml components/ tests/ ui/ 13. habitus.json { "policy_groups": [ "networking", "usermetrics" ], "policy_version": 1.1 } 14. Policy disponibili audio import QtMultimedia 5.0 camera import QtMultimedia 5.0 connectivity import QtSystemInfo 5.0 content_exchange import Ubuntu.Content 0.1 location import QtLocation 5.0 networking sensors usermetrics video 15. manifest.json { "name": "com.ubuntu.developer..", "description": "Descrizione dell'applicazione", "framework": "ubuntu-sdk-14.04-qml-dev1", "architecture": "all", "title": "", "hooks": { "": { "apparmor": ".json", "desktop": ".desktop" } }, "version": "0.1", "maintainer": "Giulio Collura " } 16. habitus.desktop [Desktop Entry] Name=Habitus Exec=qmlscene $@ habitus.qml Icon=qmlscene Terminal=false Type=Application X-Ubuntu-Touch=true 17. habitus.qml import QtQuick 2.0 import Ubuntu.Components 0.1 import "ui" MainView { objectName: "mainView" applicationName: "com.ubuntu.developer.gcollura.habitus" automaticOrientation: true width: units.gu(100) height: units.gu(75) Tabs { id: tabs HelloTab { objectName: "helloTab" } WorldTab { objectName: "worldTab" } } } 18. MainView Componente principale per tutte le applicazioni Aggiunge automaticamente un header e una toolbar Ruota automaticamente i contenuti a seconda della rotazione del device Modulo di Ubuntu.Components import Ubuntu.Components 0.1 19. MainView Propriet principali applicationName anchorsToKeyboard automaticOrientation backgroundColor footerColor headerColor 20. Resolution Independence Device Conversione Comuni schermi (laptop, desktop) 1 gu = 8 px Retina display 1 gu = 16 px Smartphones 1 gu = 18 px 21. PageStack Componente principale per la visualizzazione delle Page Pu essere utilizzato dentro MainView Metodi principali push(page, properties) pop() clear() Propriet currentPage depth Aggiunge automaticamente nella Toolbar il tasto Back per la navigazione 22. PageStack MainView { /* */ PageStack { id: pageStack Component.onCompleted: push(page0) Page { id: page0 title: i18n.tr("Root page") visible: false Column { anchors.fill: parent Button { text: "Click to push Second page" onClicked: pageStack.push(page1, { title: "New Second page" }) } Button { text: "Click to load a page" onClicked: pageStack.push(Qt.resolvedUrl("MyCustomPage.qml")) } } } Page { id: page1 title: i18n.tr("Second page") visible: false } } } 23. Tabs Componente la gestione di pi pagine principali Propriet principale currentPage count selectedTab selectedTabIndex I Tabs si intregrano direttamente nella MainView 24. Tabs Tabs { id: tabs Tab { title: page.title page: HomePage { } } Tab { title: i18n.tr("Search online") page: SearchPage { } } } 25. Page Componente di base per MainView, PageStack e Tabs Definisce il testo dell'Header e le funzioni della Toolbar Propriet: title actions tools flickable 26. Page MainView { width: units.gu(48) height: units.gu(60) Page { title: "Example page" Label { anchors.centerIn: parent text: "Hello world!" } tools: ToolbarItems { ToolbarButton { action: Action { text: "one" } } ToolbarButton { action: Action { text: "two" } } } } } 27. Nuovi componenti utile creare nuovi componenti esternamente per modularizzare la propria applicazione Molto semplice necessario creare un nuovo modulo .qml all'interno del progetto 28. Esempio components/HelloComponent.qml import QtQuick 2.0 import Ubuntu.Components 0.1 UbuntuShape { width: 200 height: width property alias text: myText.text Label { id: myText anchors.centerIn: parent } } habitus.qml import QtQuick 2.0 import Ubuntu.Components 0.1 import "components" MainView { width: units.gu(48) height: units.gu(60) Page { title: "Example page" HelloComponent { anchors.centerIn: parent text: "Hello world!" } } } 29. Popups import Ubuntu.Components.Popups 0.1 Diversi tipi: Dialog Popover Sheet & ComposerSheet (sconsigliato l'uso) Utili in diverse situazioni: Mostrare all'utente un messaggio di conferma Chiedere all'utente di riempire un campo Mostrare all'utente diverse possibilit di scelta 30. Dialog /* ... */ import Ubuntu.Components.Popups 0.1 Item { Button { id: button text: i18n.tr("Open") onClicked: PopupUtils.open(dialog, button) } Component { id: dialog Dialog { id: dialogue title: "Sample Dialog" text: "Are you sure you want to delete this file?" Button { text: "Cancel" gradient: UbuntuColors.greyGradient onClicked: PopupUtils.close(dialogue) } Button { text: "Delete" onClicked: PopupUtils.close(dialogue) } } } } 31. Popover /* .. */ import Ubuntu.Components.Popups 0.1 Item { Button { id: popoverButton text: i18n.tr("Open") onClicked: PopupUtils.open(actionSelectionPopover, popoverButton) } Component { id: actionSelectionPopover ActionSelectionPopover { actions: ActionList { Action { text: i18n.tr("Action #1") onTriggered: print(text) } Action { text: i18n.tr("Action #2") onTriggered: print(text) } /* .. */ } } } } 32. Convergenza Una sola applicazione per tutti i dispositivi Uso efficiente dello spazio dello schermo Interfacce dinamiche 33. Layouts 34. Layouts 35. Ubuntu.Layouts Componente dell'SDK utile a posizionare i vari elementi date certe condizioni import Ubuntu.Layouts 0.1 Elementi Layouts ItemLayout ConditionalLayout 36. Esempio import Ubuntu.Layouts 0.1 Page { Layouts { anchors.fill: parent layouts: [ ConditionalLayout { name: "tablet" when: mainView.width > units.gu(100) Row { anchors.fill: parent ItemLayout { item: "item1" width: units.gu(30) height: units.gu(40) } ItemLayout { item: "item2" width: units.gu(30) height: units.gu(40) } } } ] Column { spacing: units.gu(2) Rectangle { Layouts.item: "item1" color: "green" } Rectangle { Layouts.item: "item2" color: "blue" } } } } 37. Alternative E' possibile utilizzare altri metodi per ottenere la convergenze nelle proprie applicazioni Il QML sufficientemente malleabile per consentire altre soluzioni 38. States Tutti gli oggetti (basate su Item) in QML hanno due propriet: state [string] states [var/list] Gli states sono un set di propriet definite tramite uno State 39. States Rectangle { id: signal width: 200; height: 200 state: "NORMAL" states: [ State { name: "NORMAL" PropertyChanges { target: signal; color: "green"} PropertyChanges { target: flag; state: "FLAG_DOWN"} }, State { name: "CRITICAL" PropertyChanges { target: signal; color: "red"} PropertyChanges { target: flag; state: "FLAG_UP"} } ] } Rectangle { id: signalswitch width: 75; height: 75 color: "blue" MouseArea { anchors.fill: parent onClicked: { if (signal.state == "NORMAL") signal.state = "CRITICAL" else signal.state = "NORMAL" } } } 40. States State non si limita solo a variare propriet con PropertyChanges ma anche: Far partire script con StateChangeScript Override di un segnale per un oggetto con PropertyChanges Cambiare parente a un Item con ParentChange Modificare gli anchors di un oggetto con AnchorChanges Lo state di default lo si indica con il nome when per impostare il trigger automatico di uno stato data una condizione 41. U1db Modulo per la gestione di un database basato su JSON objects Molto semplice da usare Comodo per salvare impostazioni e informazioni permanentemente Implementa la sincronizzazione con i server UbuntuOne import U1db 1.0 as U1db Policy: networking 42. U1db.Database Creazione di un Database Un Database un modello e pu essere utilizzato nelle ListView Esempio: U1db.Database { id: myDatabase path: "my-database" } 43. U1db.Document Document = JSON Object Identificato tramite univocamente tramite docId Pu essere definito in runtime Definizione di esempio: U1db.Document { id: aBookmarkDocument docId: 'bookmarks' create: true defaults: { "bookmarks": [{}] } } 44. U1db.Document Metodi per accedere ai Document in un Database: Variant getDoc(docid) list listDocs() string putDoc(contents[, docid]) void deleteDoc(docid) Per modificare un Document dato il suo id [javascript]: var contents = aDocument.contents; contents['name'] = 'hello world'; aDocuments.contents = contents; 45. Esempio Salvataggio impostazioni U1db.Document { id: settings database: myDatabase docId: "settings" create: true defaults: { "firstRun": true, "version": applicationVersion } function set(key, value) { var contents = settings.contents; contents[key] = value; settings.contents = contents; } function get(key) { return settings.contents[key]; } } 46. U1db.Index Crea un indice di tutti i Document presenti nel Database data una o pi chiavi Definizione: U1db.Index { id: colorIndex database: myDatabase name: 'colorIndex' expression: [ 'color', 'color.name' ] } 47. U1db.Query Dato un Index crea un modello con tutti i Document che rispettano la chiave di ricerca Esempio: U1db.Document { id: aDocument1 database: aDatabase docId: 'helloworld' create: true contents:{"hello": { "world": [ { "message": "Hello World" } ] } } } U1db.Index{ database: aDatabase id: by_helloworld expression: ["hello.world.message"] } U1db.Query{ id: aQuery index: by_helloworld query: [{"message":"Hel*"}] } 48. Domande 49. Contatti Email: giulio.collura@gmail.com Twitter: gcollura93 IRC: gcollura Le slide saranno disponibili sulla mia pagina web: http://gcollura.github.io/projects