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,
- Template aplikasi dan dasar komponen dasar Ubuntu Toolkit
- Alur logika dalam aplikasi currency converter
- Menyusun User Interface (UI)
- 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.
