Creazione di un'app per Ubuntu Touch [QML] - [Parte 1]

Introduzione

Arriverà una serie di post (come quelli con cui ho fatto vala), ma questa volta con un'applicazione per Ubuntu touch, l'applicazione è inizialmente la "stessa" di post da vala, cioè una specie di gioco in cui abbiamo una domanda e 4 risposte sotto forma di test, poi abbiamo tre pulsanti, uno per eliminare due delle possibili risposte (50%), un altro per fermare il tempo e l'ultimo per vai dalla domanda.

Per vedere come iniziare a creare un progetto, puoi visitare questo settimana (documentazione, crea progetto ...), poiché inizieremo con il progetto già creato.

Conoscenza di base

Per creare l'app utilizzeremo i componenti di UbuntuAnche se potremmo creare i nostri componenti, in questo caso non lo faremo.

I componenti di Ubuntu sono componenti che useremo per la nostra app:

Per usarli allo stesso modo dobbiamo importare il modulo:

importa Ubuntu.Components 0.1

Possiamo trovare diversi elementi all'interno dei componenti, come pulsanti, barre di avanzamento ecc. Possiamo scaricare un progetto in cui ci mostrano la maggior parte di questi componenti:

bzr ramo lp: ubuntu-ui-toolkit 

Progettare l'app

Partiamo dall'immagine con cui abbiamo realizzato l'applicazione GTK, in questo caso useremo QML, infatti creeremo l'intera applicazione con Qt veloce (QML + JavaScript).

L'applicazione, come l'immagine, consisterà in una domanda, tempo, risposte, opzioni e punti. L'unica differenza (a parte lo "stile"), sarà che avremo le schede in alto.

Per questo useremo gli elementi button, label e progressBar. Per la struttura useremo l'Elemento Colonna y Riga.

Progettare il layout della schermata principale:

Partiamo da una MainView, dove si troveranno diverse Tab, in questo caso lavoreremo sul layout della schermata iniziale della nostra app.

MainView {objectName: "mainView" // ...}

Dimensioni (per Ubuntu Touch):

larghezza: units.gu (50) altezza: units.gu (75)

Definiamo la lunghezza e la larghezza della nostra applicazione, dove la larghezza sarà 50 (unità) e la lunghezza 75, ora le daremo colore:

headerColor: "# 57365E" backgroundColor: "# A55263" footerColor: "# D75669"

Abbiamo il colore dell'intestazione, del corpo e del piè di pagina:

Come accennato prima, l'applicazione sarà strutturata in schede:

    Tabs {id: tabs Set {objectName: "jocTab"} / * Aggiungi {objectName: "addQuestions"} * /}

Come possiamo vedere abbiamo due Tab, una commentata (non l'abbiamo ancora creata) e un'altra da giocare (che ora creeremo). Per creare tale scheda, creeremo un nuovo file qml (Aggiungi nuovo -> Qt -> File QML -> ...), il nome di detto file sarà Game.qml.

Bene, modifichiamo Game.qml in modo tale da trasformarlo in una Tab, che al suo interno ha una pagina (Pagina):

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("Game") Page {}}

All'interno della pagina inizieremo a strutturare gli elementi che citiamo nel design. Una colonna che includerà tutti gli elementi all'interno (li metterà verticalmente), quindi metteremo in ordine gli elementi: Etichetta, ProgressBar, i 4 pulsanti; e per inserire le opzioni, useremo l'elemento Row per metterle orizzontalmente.

Colonna {anchors.top: Gamepage.top anchors.topMargin: 50 spaziatura: 15 larghezza: parent.width altezza: parent.height - 50 Etichetta {id: domanda anchors.topMargin: 500 testo: "Domanda?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Pulsante {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Pulsante {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Pulsante {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Pulsante {id: resp4 text: "Response 4" ancore .horizontalCenter: parent.horizontalCenter} Riga {spaziatura: 15 anchors.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50%"} Button {id: bCon text: "Freeze"} Button {id: bNext text: " Successivo "}} Riga {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Etichetta {id: failures text:" Failures: 0 "color:" red "} Etichetta {id: hits text:" Hit: 0 "} Etichetta {id : points text: "Points: 0" fontSize: "medium"}}

Vediamo come all'interno di ogni elemento che è delimitato dalla sua {} abbiamo proprietà diverse, nel caso dell'etichetta e dei pulsanti possiamo vedere che la proprietà "text" è il testo che mostra, un'importante proprietà non visuale è la identificatore "id», che ci aiuterà quando implementeremo la logica dell'applicazione.

Alla fine possiamo vedere il risultato: