Membuat aplikasi untuk Ubuntu Touch [QML] - [Part 1]

Pengantar

Ini akan datang serangkaian posting (seperti yang saya lakukan dengan Vala), tapi kali ini dengan aplikasi untuk Ubuntu Sentuh, aplikasi awalnya "sama" seperti di posting dari Vala, yaitu, sejenis permainan di mana kita memiliki pertanyaan dan 4 jawaban dalam bentuk tes, kemudian kita memiliki tiga tombol, satu untuk menghilangkan dua kemungkinan jawaban (50%), satu lagi untuk membekukan waktu dan yang terakhir untuk pergi dari pertanyaan.

Untuk melihat cara mulai membuat proyek, Anda dapat mengunjungi ini pos (dokumentasi, buat proyek ...), karena kita akan mulai dengan proyek yang sudah dibuat.

Pengetahuan dasar

Untuk membuat aplikasi kita akan menggunakan komponen UbuntuMeskipun kami dapat membuat komponen kami sendiri, kami tidak akan melakukannya dalam kasus ini.

Komponen Ubuntu adalah komponen yang akan kita gunakan untuk aplikasi kita:

Untuk menggunakannya sama kita harus mengimpor modul:

impor Ubuntu.Components 0.1

Kami dapat menemukan berbagai elemen di dalam komponen, seperti tombol, bilah kemajuan, dll. Kami dapat mengunduh proyek yang menunjukkan sebagian besar komponen ini kepada kami:

cabang bzr lp: ubuntu-ui-toolkit 

Mendesain aplikasi

Kami mulai dari gambar tempat kami membuat aplikasi GTK, dalam hal ini kami akan menggunakan QML, sebenarnya kami akan membuat seluruh aplikasi dengan Qt Cepat (QML + JavaScript).

Aplikasi, seperti gambar, akan terdiri dari pertanyaan, waktu, jawaban, opsi, dan poin. Satu-satunya perbedaan (selain dari "gaya"), di atas kita akan memiliki Tab.

Untuk ini kita akan menggunakan elemen tombol, label dan progressBar. Untuk strukturnya kita akan menggunakan Element Kolom y Baris.

Mendesain tata letak layar utama:

Kita mulai dengan MainView, di mana Tab yang berbeda akan ditemukan, dalam hal ini kita akan mengerjakan tata letak layar awal aplikasi kita.

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

Dimensi (untuk Ubuntu Touch):

lebar: units.gu (50) tinggi: units.gu (75)

Kami menentukan panjang dan lebar aplikasi kami, di mana lebarnya akan menjadi 50 (unit) dan panjang 75, sekarang kami akan mewarnainya:

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

Kami memiliki warna header, body dan footer:

Seperti yang saya sebutkan sebelumnya, aplikasi akan disusun oleh Tab:

    Tab {id: tabs Setel {objectName: "jocTab"} / * Tambahkan {objectName: "addQuestions"} * /}

Seperti yang kita lihat, kita memiliki dua Tab, satu berkomentar (kita belum membuatnya) dan satu lagi untuk dimainkan (yang sekarang akan kita buat). Untuk membuat Tab tersebut, kita akan membuat file qml baru (Add new -> Qt -> QML File ->…), nama file tersebut akan menjadi Game.qml.

Nah, mari kita modifikasi Game.qml sedemikian rupa sehingga kita mengubahnya menjadi Tab, yang di dalamnya ada halaman (Page):

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

Di dalam halaman kami akan mulai menyusun elemen yang kami sebutkan dalam desain. Sebuah kolom yang akan menyertakan semua elemen di dalamnya (itu akan menempatkan mereka secara vertikal), kemudian kita akan menempatkan elemen dalam urutan: Label, ProgressBar, 4 tombol; dan untuk meletakkan opsi, kita akan menggunakan elemen Row untuk meletakkannya secara horizontal.

Kolom {anchors.top: Gamepage.top anchors.topMargin: 50 spasi: 15 lebar: induk.width tinggi: induk.height - 50 Label {id: pertanyaan anchors.topMargin: 500 teks: "Pertanyaan?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Tombol {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Tombol {id: resp2 text: "Respon 2" anchors.horizontalCenter: parent.horizontalCenter} Tombol {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Tombol {id: resp4 text: "Response 4" anchors .horizontalCenter: parent.horizontalCenter} Baris {spasi: 15 anchors.horizontalCenter: parent.horizontalCenter Tombol {id: b50 teks: "50%"} Tombol {id: bCon text: "Freeze"} Tombol {id: bNext text: " Berikutnya "}} Baris {spasi: 15 anchors.horizontalCenter: parent.horizontalCenter Label {id: failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : teks poin: "Poin: 0" fontSize: "medium"}}

Mari kita lihat bagaimana dalam setiap elemen yang dibatasi oleh {} kita memiliki properti yang berbeda, dalam kasus label dan tombol kita dapat melihat bahwa properti "teks" adalah teks yang ditampilkan, properti non-visual yang penting adalah identifier "id», Yang akan membantu kita saat kita mengimplementasikan logika aplikasi.

Pada akhirnya kita bisa melihat hasilnya: