Come sviluppare app per Ubuntu Touch, dall'init del progetto a come ottenere la convergenza tramite Ubuntu.Layouts. Presentazione del 27 aprile 2014 alla Fiera del Radioamatore di Pordenone.

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.<nomesviluppatore>.<appname>",
"description": "Descrizione dell'applicazione",
"framework": "ubuntu-sdk-14.04-qml-dev1",
"architecture": "all",
"title": "<Nome Applicazione>",
"hooks": {
"<appname>": {
"apparmor": "<appname>.json",
"desktop": "<appname>.desktop"
}
},
"version": "0.1",
"maintainer": "Giulio Collura <giulio.collura@gmail.com>"
}

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!"
}
}
}

30. 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

31. 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)
}
}
}
}

32. 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)
}
/* .. */
}
}
}
}

33. Convergenza
•
Una sola applicazione per tutti i dispositivi
•
Uso efficiente dello spazio dello schermo
•
Interfacce dinamiche

34. Layouts

35. Layouts

36. Ubuntu.Layouts
•
Componente dell'SDK utile a posizionare i vari elementi date
certe condizioni
• import Ubuntu.Layouts 0.1
•
Elementi
– Layouts
– ItemLayout
– ConditionalLayout

37. 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"
}
}
}
}

38. Alternative
•
E' possibile utilizzare altri metodi per ottenere la
convergenze nelle proprie applicazioni
•
Il QML è sufficientemente malleabile per
consentire altre soluzioni

39. 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

40. 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"
}
}
}

41. 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

42. 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

43. U1db.Database
•
Creazione di un Database
•
Un Database è un modello e può essere utilizzato
nelle ListView
•
Esempio:
U1db.Database {
id: myDatabase
path: "my-database"
}

44. 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": [{}] }
}

45. U1db.Document
•
Metodi per accedere ai Document in un Database:
– Variant getDoc(docid)
– list<string> 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;

46. 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];
}
}

47. 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' ]
}

48. 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*"}]
}

49. Domande

50. Contatti
Email: giulio.collura@gmail.com
Twitter: gcollura93
IRC: gcollura
Le slide saranno disponibili sulla mia pagina web:
http://gcollura.github.io/projects