Tutorial QML untuk Ubuntu Touch [1]: Membuat Template dan Halaman Awal Aplikasi (MainView)

Setelah berhasil membuat "Hello World!" dengan QML, saatnya untuk membuat aplikasi sederhana dan menjalankannya pada Ubuntu emulator. Code di di bawah merupakan tutorial yang diberikan di developer.ubuntu.com untuk membuat currenccy converter, sebuah program untuk menghitung nilai tukar mata uang.

Tutorial ini dibagi menjadi 4 tahapan sebagai berikut,

1. Template aplikasi dan dasar komponen dasar Ubuntu Toolkit
2. Alur logika dalam aplikasi currency converter
3. Menyusun User Interface (UI)
4. Finalisasi dan menjalankan aplikasi pada Ubuntu-emulator

Pada bagian pertama, akan dibuat template dan halaman muka aplikasi currency converter. Seperti halnya aplikasi hello world yang telah kita buat, aplikasi currency converter ini juga menggunakan konsep dasar QML sebagai scripting language yang akan mengkonversikan dua nilai mata uang yang berbeda dengan API dari Bank Central Uni Eropa. Aplikasi ini mengintegrasikan dasar-dasar Ubuntu QML toolkit seperti i18n, units, ItemStyle for theming, Label, ActivityIndicator, Popover, Button, TextField, ListItems.Header dan ListItems.Standard.

Silakan ketik atau copy-paste berikut pada layar Ubuntu SDK (File >> New Project >> Simple UI).

import QtQuick 2.0
import Ubuntu.Components 0.1
 
/*!
    brief MainView with a Label and Button elements.
*/
 
MainView {
    id: root
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView" //nama object
    applicationName: "CurrencyConverter" //nama aplikasi
 
    width: units.gu(100) //lebar UI
    height: units.gu(75) //tinggi UI
 
    property real margins: units.gu(2) //batas fisik
    property real buttonWidth: units.gu(9) //
 
    Page {
        title: i18n.tr("Currency Converter")
 
    }
}

Simpan program di atas (Ctrl-S) kemudian run (Ctrl-R) untuk menjalankan hasilnya. Maka, akan muncul tampilan UI seperti berikut,

Tampilan muka aplikasi currency converter

Ya! semudah dan sesederhana itu untuk membuat aplikasi Ubuntu dengan QML karena aplikasi yang kita buat memang masih sangat sederhana. Baiklah, kita akan menganalisa kode diatas baris per baris.

Dasar pemrograman qml terdiri dari dua bagian, bagian import dan bagian deklarasi object. Pada bagian import kode aplikasi currency converter di atas, kita mengimport dua tipe dan komponen yang kita butuhkan QtQuick dan Ubuntu.Components sebagai berikut,

import QtQuick 2.0
import Ubuntu.Components 0.1

Selanjutnya, kita mendeklarasikan obyek dalam baris selanjutnya. Dalam qml, user interface disusun sebagai pohon obyek dengan propertinya

a user interface is specified as a tree of objects with properties (qt-project)

Jadi, UI merupakan kesatuan dari obyek-obyek penyusunnya dengan properties-nya masing-maing. Pada Ubuntu, inti dari UI ada pada MainView, yang merupakan komponen utama SDK berfungsi sebagai root container dari aplikasi yang akan kita buat. MainView ini juga menyediakan standard Toolbar dan Header.

Selanjutnya, didefinisikan properties dari MainView dengan memberinya id (nama) sebagai root dan mendifiniskan beberapa properties visual (lebar, tinggi, warna) dari halaman muka. Pada qml, properties dibatasi dengan format ‘property: value‘. Juga mendefinisikan property lain yakni margins dan buttonWidth dengan tipe real (nilai desimal). Kode seterusnya merupakan default dari MainView Ubuntu component.

Independensi Resolusi

Salah satu keunggulan Ubuntu SDK adalah penggunaan grid unit (gu) yang tidak bergantung pada ukuran layar display. Dengan beragam jenis ukuran layaar display dari smartphon, tablet dan laptop/PC maka akan sulit untuk menentukan ukuran layar aplikasi pada nilai tertentu. Misalnya, aplikasi blog saya ini, di dalam setting blogger saya definisikan lebarnya 1360px dan support dengan mobile view. Ketika anda mengakses blog saya ini dengan laptop layar besar, makan ukuran lebarnya akan tetap 1360px. Hal ini berbeda dengan penggunaan grid unit, gu merupakan solusi ukuran yang bergantung pada ukuran divais itu sendiri (tablet/smartphone)

For now, you can consider them (grid-unit) as a form-factor-agnostic way to specify measurements. They return a pixel value that’s dependent on the device the application is running on.... Grid units translate to a pixel value depending on the type of screen and device the application is running on.

Grid unit menyesuaikan ukuran pixel sesuai dengan ukuran divais dimana aplikasi sedang berjalan, beberapa contohnya ukura gu adalah sebagai berikut.

Device	Conversion
Most laptops	1 gu = 8 px
Retina laptops	1 gu = 16 px
Smart phones	1 gu = 18 px

Internasionalisasi

Pada akhir baris progam di atas ada ada tambahan page berupa kode  i18n.tr("Currency Converter") yang merupakan fitur internasionalisasi dari Ubuntu SDK. Fungsi i18n.tr merupakan fungsi internasionalisasi perangkat lunak terbuka yang diadopsi Ubuntu melalui paket gettext untuk memudahkan penerjemahan aplikasi pada Ubuntu OS khususnya untu smartphone dan tablet ini.

Tips: Ketika ulang kode diatas, jangan copy-paste untuk lebih memahami sintaks-sintaksnya.