Lietotnes izveide Ubuntu Touch [QML] - [1. daļa]

Ievads

Šeit nāks virkne ziņu (kā tie, ar kuriem es darīju Vala), bet šoreiz ar pieteikumu Ubuntu Touch, sākotnēji lietojumprogramma ir tā pati ziņas no Vala, tas ir, sava veida spēle, kurā mums ir jautājums un 4 atbildes testa veidā, pēc tam mums ir trīs pogas, no kurām viena izslēdz divas iespējamās atbildes (50%), otra - laika iesaldēšana un pēdējā - ej no jautājuma.

Lai uzzinātu, kā sākt veidot projektu, varat to apmeklēt nosūtīt (dokumentācija, projekta izveide ...), jo mēs sāksim ar jau izveidoto projektu.

Lai gan pieteikums ir vērsts uz Ubuntu Touch To var izmantot arī Ubuntu it kā tas būtu normāls pielietojums

Pamatzināšanas

Lai izveidotu lietotni, mēs izmantosim UbuntuLai gan mēs varētu izveidot paši savus komponentus, mēs to nedarīsim.

Ubuntu komponenti ir komponenti, kurus mēs izmantosim mūsu lietotnei:

Uzņemiet no 2014. gada 07. septembra 04:23:57

Lai tos izmantotu tāpat, mums ir jāimportē modulis:

importēt Ubuntu. Komponenti 0.1

Komponentos mēs varam atrast dažādus elementus, piemēram, pogas, progresa joslas utt. Mēs varam lejupielādēt projektu, kurā tie parāda lielāko daļu no šiem komponentiem:

bzr filiāle lp: ubuntu-ui-toolkit 
mums ir jāuzstāda bzr

Lietotnes projektēšana

Mēs sākam no attēla, kurā mums ir izveidota lietojumprogramma GTK, šajā gadījumā mēs izmantosim QML, patiesībā mēs izveidosim visu lietojumprogrammu ar Qt Ātri (QML + JavaScript).

Lietojumprogramma, tāpat kā attēls, sastāvēs no jautājuma, laika, atbildēm, iespējām un punktiem. Vienīgā atšķirība (izņemot "stilu") būs tā, ka augšpusē mums būs cilnes.

Šim nolūkam mēs izmantosim pogas, etiķetes un progressBar elementus. Struktūrai mēs izmantosim Elementu Sleja y Rinda.

Vēlāk mēs izveidosim jautājumu kopumu

Galvenā ekrāna izkārtojuma noformēšana:

Mēs sākam ar MainView, kur tiks atrastas dažādas cilnes, šajā gadījumā mēs strādāsim pie mūsu lietotnes sākotnējā ekrāna izkārtojuma.

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

Izmēri (priekš Ubuntu Touch):

platums: vienības.gu (50) augstums: vienības.gu (75)

Mēs definējam mūsu lietojuma garumu un platumu, kur platums būs 50 (vienības) un garums 75, tagad mēs tam piešķirsim krāsu:

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

Mums ir galvenes, ķermeņa un kājenes krāsa:

Uzņemiet no 2014. gada 07. septembra 05:15:24

Kā jau minēju iepriekš, lietojumprogrammu strukturēs cilnes:

    Cilnes {id: tabs Set {objectName: "jocTab"} / * Pievienot {objectName: "addQuestions"} * /}

Kā redzam, mums ir divas cilnes, viena komentēja (mēs to vēl neesam izveidojuši), bet otra - spēlēšanai (ko mēs tagad izveidosim). Lai izveidotu minēto cilni, mēs izveidosim jaunu qml failu (Pievienot jaunu -> Qt -> QML fails ->…), minētā faila nosaukums būs Game.qml.

Labi, pārveidosim Game.qml tādā veidā, ka mēs to pārvēršam par cilni, kuras iekšpusē ir lapa (Lapa):

importēt QtQuick 2.0 importēt Ubuntu.Components 0.1 Tab {title: i18n.tr ("Spēle") lapa {}}

Lapas ietvaros mēs sāksim strukturēt elementus, kurus mēs pieminējam dizainā. Kolonna, kurā būs iekļauti visi iekšpusē esošie elementi (tas tos novietos vertikāli), tad mēs sakārtosim elementus: Label, ProgressBar, 4 pogas; un, lai ievietotu opcijas, mēs izmantosim Row elementu, lai tos novietotu horizontāli.

Kolonna {anchors.top: Gamepage.top anchors.topMargin: 50 atstarpes: 15 platums: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Jautājums?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Poga {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Poga {id: resp2 text: "Response 2" enkuri.horizontalCenter: parent.horizontalCenter} Poga {id: resp3 text: "Response 3" enkuri.horizontalCenter: parent.horizontalCenter} Poga {id: resp4 text: "Response 4" enkuri .horizontalCenter: parent.horizontalCenter} Rinda {atstarpes: 15 anchors.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50%"} Button {id: bCon text: "Freeze"} Button {id: bNext text: " Nākamā "}} rinda {atstarpes: 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"}}

Apskatīsim, kā katram elementam, kuru norobežo tā {}, mums ir atšķirīgas īpašības, etiķetes un pogu gadījumā mēs varam redzēt, ka rekvizīts "teksts" ir teksts, kuru tas parāda, svarīgs nevizuāls īpašums identifikators "id», kas mums palīdzēs, ieviešot lietojumprogrammas loģiku.

Beigās mēs varam redzēt rezultātu:

Uzņemiet no 2014. gada 07. septembra 23:19:21


6 komentāri, atstājiet savus

Atstājiet savu komentāru

Jūsu e-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti ar *

*

*

  1. Atbildīgais par datiem: Migels Ángels Gatóns
  2. Datu mērķis: SPAM kontrole, komentāru pārvaldība.
  3. Legitimācija: jūsu piekrišana
  4. Datu paziņošana: Dati netiks paziņoti trešām personām, izņemot juridiskus pienākumus.
  5. Datu glabāšana: datu bāze, ko mitina Occentus Networks (ES)
  6. Tiesības: jebkurā laikā varat ierobežot, atjaunot un dzēst savu informāciju.

  1.   nano teica

    Man tas patīk, manuprāt, tajā nav dažas detaļas, bet tas ir labs atsauces ceļvedis

  2.   Ariel teica

    Ļoti labi! Sākums ar Qml darbojas ļoti labi.
    Šis ir labākais Linux emuārs spāņu valodā. Es nekad iepriekš neesmu komentējis, bet es to tik bieži pārbaudu; tā ir gandrīz atkarība, kas man ir.
    Viens jautājums ... Vai programmu, kas izveidota ar Ubuntu SDK, var instalēt ļoti atšķirīgā distro, piemēram, piemēram, Arch? Es domāju, ka būs jāapmierina kāda atkarība (piemēram, Qt, protams). Bet visas šīs atkarības parasti ir jebkura izplatītāja krātuvēs.

    1.    Ariel teica

      Atvainojiet, pēdējam teikumam noteikti bija jābūt jautājumam ... Vai visas atkarības kāda krātuves krātuvēs ir?

      1.    lolbimbo teica

        Pēc noklusējuma jūs nevarat instalēt -la (šajā gadījumā), jo tam ir tādas atkarības kā ubuntu-components (šajā gadījumā versija 0.1), ja tos instalējat vēlāk, tam nevajadzētu radīt problēmas, ja neizmantojat komponentus (Es domāju, ka jūs varat tos visus arī importēt lietojumprogrammā, lai tas palielinātu svaru, bet jūs tos noņemat kā atkarību), piemēram, sigram lietojumprogramma (klients telegrammai) tiek izveidota ar qt quick, un jūs varat to instalēt lielākajā daļā distros .

  3.   Sasuke teica

    Cerams, ka jūs pabeidzat pieteikumu.

    1.    gabielus teica

      Tas ir ļoti labi. Es jau sekoju soļiem un ir kā ir.
      Cerams, ka jūs turpināsiet projektu ...