Krei programon por Ubuntu Touch [QML] - [Parto 1]

Enkonduko

Jen venos serio da afiŝoj (kiel tiuj kun kiuj mi faris Vala), sed ĉi-foje kun aplikaĵo por ubuntu Touch, la apliko estas komence la "sama" kiel en la afiŝoj de Vala, tio estas, speco de ludo, kie ni havas demandon kaj 4 respondojn en formo de testo, tiam ni havas tri butonojn, unu por forigi du el la eblaj respondoj (50%), alia por frostigi tempon kaj la lastan por iru de demando.

Por vidi kiel komenci krei projekton, vi povas viziti ĉi tion post (dokumentado, krei projekton ...), ĉar ni komencos per la projekto jam kreita.

Bazaj scioj

Por krei la programon ni uzos la erojn de ubuntuKvankam ni povus krei niajn proprajn erojn, ni ne faros ĉi-kaze.

Ubuntu-Komponentoj estas komponantoj, kiujn ni uzos por nia programo:

Por uzi ilin same ni devas importi la modulon:

importi Ubuntu.Komponantoj 0.1

Ni povas trovi malsamajn elementojn ene de la eroj, kiel butonoj, progresaj stangoj ktp. Ni povas elŝuti projekton, kie ili montras al ni la plej multajn el ĉi tiuj eroj:

bzr-filio lp: ubuntu-ui-ilaro 

Projektante la programon

Ni komencas de la bildo, kie ni havas la programon GTK, ĉi-kaze ni uzos QML, fakte ni kreos la tutan aplikaĵon per Qt Rapida (QML + JavaScript).

La apliko, kiel la bildo, konsistos el demando, tempo, respondoj, ebloj kaj punktoj. La sola diferenco (krom la "stilo"), estos, ke supre ni havos Tabojn.

Por tio ni uzos la butonajn, etikedajn kaj progresajn elementojn. Por la strukturo ni uzos la Elementon Kolumno y Vico.

Projektante la aranĝon de la ĉefa ekrano:

Ni komencas per MainView, kie troviĝos diversaj Pestañas, en ĉi tiu kazo ni laboros pri la aranĝo de la komenca ekrano de nia programo.

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

Dimensioj (por Ubuntu Touch):

larĝo: units.gu (50) alto: units.gu (75)

Ni difinas la longon kaj larĝon de nia aplikaĵo, kie la larĝo estos 50 (unuoj) kaj la longo 75, nun ni kolorigos ĝin:

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

Ni havas la koloron de la kaplinio, korpo kaj piedlinio:

Kiel mi menciis antaŭe, la apliko estos strukturita per Taboj:

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

Kiel ni vidas, ni havas du Pestañas, unu komentis (ni ankoraŭ ne kreis ĝin) kaj alia por ludi (kiujn ni nun kreos). Por krei menciitan Tab, ni kreos novan qml-dosieron (Aldoni novan -> Qt -> QML-Dosiero -> ...), la nomo de tiu dosiero estos Game.qml.

Nu, ni modifu Game.qml tiel, ke ni igas ĝin Tab, kiu interne havas paĝon (Paĝo):

importi QtQuick 2.0 importi Ubuntu.Components 0.1 Tab {title: i18n.tr ("Ludo") Paĝo {}}

Ene de la paĝo ni komencos strukturi la elementojn, kiujn ni mencias en la projektado. Kolumno, kiu inkluzivos ĉiujn elementojn interne (ĝi metos ilin vertikale), tiam ni ordigos la elementojn: Etikedo, ProgressBar, la 4 butonoj; kaj por meti la eblojn, ni uzos la elementon Vico por meti ilin horizontale.

Kolumno {anchors.top: Gamepage.top anchors.topMargin: 50 interspaco: 15 width: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Demando?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Butono {id: resp1 text: "Respondo 1" anchors.horizontalCenter: parent.horizontalCenter} Butono {id: resp2 text: "Respondo 2" anchors.horizontalCenter: parent.horizontalCenter} Butono {id: resp3 text: "Respondo 3" anchors.horizontalCenter: parent.horizontalCenter} Butono {id: resp4 text: "Respondo 4" ankroj .horizontalCenter: parent.horizontalCenter} Vico {interspaco: 15 ankroj.horizontalCenter: parent.horizontalCenter Butono {id: b50 text: "50%"} Butono {id: bCon text: "Frosti"} Butono {id: bSekva teksto: " Sekva "}} Vico {interspaco: 15 anchors.horizontalCenter: parent.horizontalCenter Label {id: failures text:" Fiaskoj: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : points text: "Punktoj: 0" fontSize: "medium"}}

Ni vidu, kiel ene de ĉiu elemento limigita de ĝia {} ni havas malsamajn ecojn, en la kazo de la etikedo kaj de la butonoj ni povas vidi, ke la "teksto" estas la teksto, kiun ĝi montras, grava nevida eco estas la identigilo "id», Kiu helpos nin kiam ni efektivigos la aplikaĵan logikon.

Ĉe la fino ni povas vidi la rezulton: