Izrada aplikacije za Ubuntu Touch [QML] - [1. dio]

Uvod

Ovdje će doći serija postova (poput onih sa kojima sam radio Vala), ali ovaj put s prijavom za Ubuntu Touch, aplikacija je u početku "ista" kao u postovi od Vala, to jest, vrsta igre u kojoj imamo pitanje i 4 odgovora u obliku testa, zatim imamo tri gumba, jedan za uklanjanje dva moguća odgovora (50%), drugi za zamrzavanje vremena i zadnji za pređite sa pitanja.

Da biste vidjeli kako započeti stvaranje projekta, možete posjetiti ovo pošta (dokumentacija, kreirajte projekt ...), jer ćemo započeti s već kreiranim projektom.

Osnovno znanje

Za stvaranje aplikacije koristit ćemo komponente UbuntuIako bismo mogli stvoriti vlastite komponente, u ovom slučaju to nećemo učiniti.

Ubuntu komponente su komponente koje ćemo koristiti za našu aplikaciju:

Da bismo ih koristili na isti način moramo uvesti modul:

uvoz Ubuntu.Components 0.1

U komponentama možemo pronaći različite elemente, kao što su dugmad, trake napretka itd. Možemo preuzeti projekt gdje će nam pokazati većinu ovih komponenata:

bzr podružnica lp: ubuntu-ui-toolkit 

Dizajniranje aplikacije

Polazimo od slike na kojoj je napravljena aplikacija GTK, u ovom slučaju ćemo koristiti QML, ustvari ćemo stvoriti cijelu aplikaciju sa qt-quick (QML + JavaScript).

Aplikacija će se, poput slike, sastojati od pitanja, vremena, odgovora, opcija i bodova. Jedina razlika (osim "stila") bit će u tome što ćemo gore imati kartice.

Za to ćemo koristiti elemente gumba, oznake i progressBar. Za strukturu ćemo koristiti element Kolona y Red.

Dizajniranje izgleda glavnog ekrana:

Počinjemo s MainViewom, gdje će se naći različite kartice, u ovom slučaju ćemo raditi na izgledu početnog zaslona naše aplikacije.

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

Dimenzije (za Ubuntu Touch):

širina: units.gu (50) visina: units.gu (75)

Definiramo duljinu i širinu naše aplikacije, gdje će širina biti 50 (jedinica), a dužina 75, sada ćemo joj dati boju:

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

Imamo boju zaglavlja, tijela i podnožja:

Kao što sam već spomenuo, prijavu će strukturirati Tabs:

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

Kao što vidimo imamo dvije kartice, jednu komentiranu (još je nismo stvorili) i drugu za reprodukciju (koju ćemo sada stvoriti). Da bismo kreirali navedenu karticu, stvorit ćemo novu qml datoteku (Dodaj novu -> Qt -> QML datoteku -> ...), naziv te datoteke bit će Game.qml.

Pa, hajde da modificiramo Game.qml na takav način da ga pretvorimo u Tab, koji unutar ima stranicu (Stranica):

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

Unutar stranice počet ćemo strukturirati elemente koje spominjemo u dizajnu. Stupac koji će sadržavati sve elemente iznutra (stavit će ih okomito), a zatim ćemo elemente dovesti u red: Oznaka, ProgressBar, 4 gumba; i da stavimo opcije, koristit ćemo element Red da ih stavimo vodoravno.

Stupac {anchors.top: Gamepage.top anchors.topMargin: 50 razmak: 15 širina: parent.width height: parent.height - 50 Oznaka {id: question anchors.topMargin: 500 text: "Question?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Dugme {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Gumb {id: resp2 text: "Response 2" sidra.horizontalCenter: parent.horizontalCenter} Gumb {id: resp3 text: "Response 3" sidra.horizontalCenter: parent.horizontalCenter} Gumb {id: resp4 text: "Response 4" sidra .horizontalCenter: parent.horizontalCenter} Red {razmak: 15 sidra.horizontalCenter: parent.horizontalCenter Dugme {id: b50 text: "50%"} Dugme {id: bCon text: "Freeze"} Dugme {id: bNext text: " Sljedeći "}} Red {razmak: 15 anchors.horizontalCenter: parent.horizontalCenter Oznaka {id: neuspjeli tekst:" Otkazi: 0 "boja:" crvena "} Oznaka {id: pogađa tekst:" Hit: 0 "} Oznaka {id : tekst bodova: "Points: 0" fontSize: "medium"}}

Pogledajmo kako unutar svakog elementa koji je ograničen svojim {} imamo različita svojstva, u slučaju oznake i gumba možemo vidjeti da je svojstvo "text" tekst koji prikazuje, važno nevizuelno svojstvo je identifikator "id", koji će nam pomoći kada implementiramo logiku aplikacije.

Na kraju možemo vidjeti rezultat: