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

I

Evo niza postova (poput onih s 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 koji ide iz pitanje.

Da biste vidjeli kako započeti izradu projekta, možete posjetiti ovo pošta (dokumentacija, izraditi projekt ...), jer ćemo započeti s već stvorenim 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, poput gumba, traka napretka itd. Možemo preuzeti projekt gdje nam pokazuju većinu ovih komponenata:

bzr podružnica lp: ubuntu-ui-toolkit 

Dizajniranje aplikacije

Polazimo od slike na kojoj imamo napravljenu prijavu GTK, u ovom slučaju ćemo koristiti QML, ustvari ćemo stvoriti cijelu aplikaciju s Qt Brzo (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 zaslona:

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

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

Dimenzije (za Ubuntu Touch):

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

Definiramo duljinu i širinu naše aplikacije, gdje će širina biti 50 (jedinica), a duljina 75, sada ćemo je obojiti:

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

Imamo boju zaglavlja, tijela i podnožja:

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

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

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

Pa, izmijenimo 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; a da stavimo opcije, koristit ćemo element Red da bismo ih postavili vodoravno.

Stupac {anchors.top: Gamepage.top anchors.topMargin: 50 razmak: 15 širina: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Question?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Gumb {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 Gumb {id: b50 text: "50%"} Gumb {id: bCon text: "Freeze"} Gumb {id: bNext text: " Dalje "}} Red {razmak: 15 sidra.horizontalCenter: parent.horizontalCenter Oznaka {id: neuspjeli tekst:" Otkazi: 0 "boja:" crvena "} Oznaka {id: pogađa tekst:" Hit: 0 "} Oznaka {id : tekst bodova: "Bodovi: 0" fontSize: "medium"}}

Pogledajmo kako unutar svakog elementa koji je omeđ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 », Što će nam pomoći kada implementiramo logiku aplikacije.

Na kraju možemo vidjeti rezultat: