Een app maken voor Ubuntu Touch [QML] - [Deel 1]

Introducción

Hier komt een reeks berichten (zoals degene met wie ik deed Vala), maar dit keer met een aanvraag voor Ubuntu Touch, de applicatie is in eerste instantie "hetzelfde" als in het berichten van Vala, dat wil zeggen, een soort spel waarbij we een vraag hebben en 4 antwoorden in de vorm van een test, dan hebben we drie knoppen, een om twee van de mogelijke antwoorden te elimineren (50%), een andere om de tijd te bevriezen en de laatste om ga van de vraag.

Om te zien hoe u kunt beginnen met het maken van een project, kunt u hier terecht post (documentatie, project aanmaken ...), aangezien we beginnen met het reeds gemaakte project.

Basis kennis

Om de app te maken, gebruiken we de componenten van UbuntuHoewel we onze eigen componenten zouden kunnen maken, zullen we dat in dit geval niet doen.

Ubuntu-componenten zijn componenten die we voor onze app zullen gebruiken:

Om ze op dezelfde manier te gebruiken, moeten we de module importeren:

importeer Ubuntu.Components 0.1

We kunnen verschillende elementen binnen de componenten vinden, zoals knoppen, voortgangsbalken etc. We kunnen een project downloaden waarin ze ons de meeste van deze componenten laten zien:

bzr tak lp: ubuntu-ui-toolkit 

Het ontwerpen van de app

We gaan uit van de afbeelding waarmee we de aanvraag hebben gemaakt GTK, in dit geval gebruiken we QML, in feite zullen we de hele applicatie maken met Qt snel (QML + JavaScript).

De applicatie zal, net als de afbeelding, bestaan ​​uit een vraag, tijd, antwoorden, opties en punten. Het enige verschil (afgezien van de "stijl") is dat we hierboven tabbladen hebben.

Hiervoor gebruiken we de button, label en progressBar elementen. Voor de structuur zullen we het Element gebruiken Kolom y Rij.

De lay-out van het hoofdscherm ontwerpen:

We beginnen met een MainView, waar verschillende Tabs te vinden zijn, in dit geval gaan we aan de slag met de layout van het startscherm van onze app.

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

Dimensies (voor Ubuntu Touch):

breedte: units.gu (50) hoogte: units.gu (75)

We definiëren de lengte en breedte van onze applicatie, waarbij de breedte 50 (eenheden) en de lengte 75 zal zijn, nu gaan we deze kleur geven:

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

We hebben de kleur van de koptekst, het hoofdgedeelte en de voettekst:

Zoals ik al eerder zei, wordt de applicatie gestructureerd door tabbladen:

    Tabbladen {id: tabs Stel {objectName: "jocTab"} / * in {objectName: "addQuestions"} * /}

Zoals we zien, hebben we twee tabbladen, een met commentaar (we hebben het nog niet gemaakt) en een ander om af te spelen (die we nu zullen maken). Om het tabblad te maken, zullen we een nieuw qml-bestand maken (Nieuw toevoegen -> Qt -> QML-bestand -> ...), de naam van het bestand zal zijn Game.qml.

Laten we Game.qml zo aanpassen dat we er een tabblad van maken, dat van binnen een pagina (pagina) heeft:

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

Binnen de pagina zullen we beginnen met het structureren van de elementen die we in het ontwerp noemen. Een kolom die alle elementen erin zal bevatten (het zal ze verticaal plaatsen), dan zullen we de elementen op volgorde plaatsen: Label, ProgressBar, de 4 knoppen; en om de opties te plaatsen, zullen we het Row-element gebruiken om ze horizontaal te plaatsen.

Kolom {anchors.top: Gamepage.top anchors.topMargin: 50 afstand: 15 breedte: parent.width hoogte: parent.height - 50 Label {id: vraag anchors.topMargin: 500 tekst: "Vraag?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: tijd anchors.horizontalCenter: parent.horizontalCenter} Knop {id: resp1 tekst: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Knop {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Knop {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Knop {id: resp4 tekst: "Response 4" ankers .horizontalCenter: parent.horizontalCenter} Rij {afstand: 15 anchors.horizontalCenter: parent.horizontalCenter Knop {id: b50 tekst: "50%"} Knop {id: bCon tekst: "Vastzetten"} Knop {id: bVolgende tekst: " Volgende "}} Rij {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Label {id: failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : points text: "Points: 0" fontSize: "medium"}}

Laten we eens kijken hoe we binnen elk element dat wordt afgebakend door zijn {} verschillende eigenschappen hebben, in het geval van het label en de knoppen kunnen we zien dat de 'text'-eigenschap de tekst is die wordt weergegeven, een belangrijke niet-visuele eigenschap is de identifier "id», die ons zal helpen bij het implementeren van de applicatielogica.

Aan het einde kunnen we het resultaat zien: