Lumilikha ng isang app para sa Ubuntu Touch [QML] - [Bahagi 1]

Pagpapakilala

Darating ang isang serye ng mga post (kagaya ng mga nakasama ko Vala), ngunit sa oras na ito na may isang application para sa Ubuntu Touch, ang application ay paunang "pareho" tulad ng sa mga post mula sa Vala, iyon ay, isang uri ng laro kung saan mayroon kaming isang katanungan at 4 na mga sagot sa anyo ng isang pagsubok, pagkatapos ay mayroon kaming tatlong mga pindutan, isa upang matanggal ang dalawa sa mga posibleng sagot (50%), isa pa upang mag-freeze ng oras at ang huling umalis sa tanong.

Upang makita kung paano magsisimulang lumikha ng isang proyekto, maaari mo itong bisitahin magpaskil (dokumentasyon, lumikha ng proyekto ...), dahil magsisimula kami sa proyekto na nilikha.

Kahit na ang application ay nakatuon sa Ubuntu Touch Maaari din itong magamit sa Ubuntu na parang ito ay isang normal na aplikasyon

Pangunahing kaalaman

Upang likhain ang app ay gagamitin namin ang mga bahagi ng UbuntuHabang maaari kaming lumikha ng aming sariling mga bahagi, hindi kami sa kasong ito.

Ang Mga Bahagi ng Ubuntu ay mga sangkap na gagamitin namin para sa aming app:

Makunan mula 2014-07-04 23:57:48

Upang magamit ang mga ito ng pareho kailangan nating i-import ang module:

i-import ang Ubuntu. Mga Kumpanya 0.1

Maaari kaming makahanap ng iba't ibang mga elemento sa loob ng mga bahagi, tulad ng mga pindutan, mga progress bar atbp. Maaari kaming mag-download ng isang proyekto kung saan ipinapakita sa amin ang karamihan sa mga sangkap na ito:

sangay ng bzr lp: ubuntu-ui-toolkit 
kailangan nating magkaroon ng naka-install na bzr

Pagdidisenyo ng app

Nagsisimula kami mula sa imahe kung saan namin ginawa ang application gTK, sa kasong ito gagamitin namin QML, sa katunayan lilikha kami ng buong aplikasyon Qt Mabilis (QML + JavaScript).

Ang application, tulad ng imahe, ay binubuo ng isang katanungan, oras, sagot, pagpipilian at mga puntos. Ang pagkakaiba lamang (bukod sa "istilo"), ay sa itaas ay magkakaroon kami ng Mga Tab.

Para dito gagamitin namin ang mga elemento ng pindutan, tatak at pag-unladBar. Para sa istrakturang gagamitin namin ang Element Haligi y Hilera

Mamaya lilikha kami ng isang pinagsamang mga katanungan

Pagdidisenyo ng layout ng pangunahing screen:

Nagsisimula kami sa isang MainView, kung saan mahahanap ang magkakaibang Mga Tab, sa kasong ito ay gagana kami sa layout ng paunang screen ng aming app.

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

Mga Dimensyon (para sa Ubuntu Touch):

lapad: unit.gu (50) taas: unit.gu (75)

Tinutukoy namin ang haba at lapad ng aming aplikasyon, kung saan ang lapad ay 50 (mga yunit) at ang haba ng 75, ngayon bibigyan namin ito ng kulay:

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

Mayroon kaming kulay ng header, katawan at footer:

Makunan mula 2014-07-05 15:24:58

Tulad ng nabanggit ko dati, ang application ay mabubuo ng Mga Tab:

    Mga Tab na {id: tabs Set {objectName: "jocTab"} / * Magdagdag ng {objectName: "addQuestions"} * /}

Tulad ng nakikita nating mayroon kaming dalawang Mga Tab, ang isa ay nagkomento (hindi pa namin ito nilikha) at isa pa upang i-play (na lilikha namin ngayon). Upang likhain ang nasabing Tab, lilikha kami ng isang bagong file na qml (Magdagdag ng bago -> Qt -> QML File -> ...), ang pangalan ng nasabing file ay magiging Laro.qml.

Kaya, baguhin natin ang Game.qml sa isang paraan na gagawin natin itong isang Tab, na sa loob ay may isang pahina (Pahina):

i-import ang QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr (Pahina ng "Laro") {}}

Sa loob ng pahina magsisimula kaming mag-istraktura ng mga elemento na nabanggit namin sa disenyo. Isang haligi na isasama ang lahat ng mga elemento sa loob (ilalagay ito nang patayo), pagkatapos ay ilalagay namin ang mga elemento sa pagkakasunud-sunod: Label, ProgressBar, ang 4 na mga pindutan; at upang mailagay ang mga pagpipilian, gagamitin namin ang elemento ng Hilera upang ilagay ang mga ito nang pahalang.

Column {anchors.top: Gamepage.top anchors.topMargin: 50 spacing: 15 width: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Tanong?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "malaki" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp4 text: "Tugon 4" mga angkla .horizontalCenter: parent.horizontalCenter} Hilera {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50%"} Button {id: bCon text: "Freeze"} Button {id: bNext text: " Susunod na "}} Hilera {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"}}

Tingnan natin kung paano sa loob ng bawat elemento na nalimitahan ng nito {} mayroon kaming magkakaibang mga katangian, sa kaso ng label at mga pindutan maaari naming makita na ang "text" na pag-aari ay ang teksto na ipinapakita nito, isang mahalagang di-visual na pag-aari ay ang tagatukoy ng "id», Aling makakatulong sa amin kapag ipinatupad namin ang lohika ng application.

Sa katapusan makikita natin ang resulta:

Makunan mula 2014-07-23 19:21:03


6 na puna, iwan mo na ang iyo

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan ng *

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.

  1.   nano dijo

    Gusto ko ito, wala itong ilang detalye sa aking opinyon, ngunit ito ay isang mabuting gabay sa sanggunian ...

  2.   Ariel dijo

    Napakahusay! Gumagana ito nang napakahusay upang magsimula sa Qml.
    Ito ang pinakamahusay na Linux blog sa Espanya, sa ngayon. Hindi pa ako nagkomento dati, ngunit madalas ko itong suriin; ito ay halos isang pagkagumon na mayroon ako.
    Isang tanong ... Maaari bang mai-install ang isang program na ginawa sa Ubuntu SDK sa ibang-ibang distro, tulad ng halimbawa ng Arch? Ipagpalagay ko na kinakailangan upang matupad ang ilang pagtitiwala (tulad ng Qt syempre). Ngunit mayroong lahat ng mga dependency na ito nang normal sa mga repository ng anumang distro.

    1.    Ariel dijo

      Paumanhin, ang huling pangungusap ay dapat na talagang isang katanungan ... Ang lahat ba ng mga dependency sa mga repository ng anumang distro?

      1.    lolbimbo dijo

        Bilang default hindi mo mai-install ang -la (sa kasong ito), dahil mayroon itong mga dependency tulad ng mga ubuntu-sangkap (sa kasong ito ang bersyon 0.1), kung mai-install mo ang mga ito sa paglaon hindi ito dapat magbigay ng mga problema, kung sakaling hindi mo ginagamit ang mga sangkap (Sa palagay ko Maaari mo ring mai-import ang lahat sa kanila sa application upang tumaas ito sa timbang ngunit aalisin mo sila bilang isang dependency) tulad ng aplikasyon ng sigram (client para sa telegram) na ginawa nang mabilis at maaari mo itong mai-install sa karamihan mga distrito

  3.   Sasuke dijo

    Inaasahan mong natapos mo ang aplikasyon.

    1.    gabielus dijo

      Napakaganda Sinundan ko na ang mga hakbang at ito ay tulad ng dati.
      Inaasahan mong ipagpatuloy mo ang proyekto ...