Tutorial QML Untuk Ubuntu Touch [2]: Implementasi Logika Dalam Aplikasi

Untuk membuat aplikasi pada Ubuntu (touch), setelah template dan halaman muka jadi, maka kita menambahkan alur logika untuk aplikasi kita, yakni menghitung nilai tukar antar dua mata uang dengan API dari bank sentral Uni Eropa. Baiklah, kita review program kita sebelumnya yang kurang lebih seperti ini,

import xxx x.x
import xxx x.x

MainView {
    //id
    //property
    //internasionalisasi
}

Skrip kode diatas terbagi atas bagian import dan deklarasi obyek. Selanjutnya, kita tambahkan pada baris 23, sebelum kurung penutup page dan MainView kode sebagai berikut,

ListModel {
    id: currencies
    ListElement {
        currency: "EUR"
        rate: 1.0
    }
 
    function getCurrency(idx) {
        return (idx >= 0 && idx < count) ? get(idx).currency: ""
    }
 
    function getRate(idx) {
        return (idx >= 0 && idx < count) ? get(idx).rate: 0.0
    }
}

yang kita lakukan diatas adalah menggunakan currency sebagai obyek ListModel yang berisi beberapa nilai mata uang dan nilai tukarnya. ListModel dari nilai tukar (currencies) digunakan untuk menampilkan data nilai tukar pada halaman aplikasi. Data yang digunakan merupakan data aktual di bank sentral uni eropa sedangkan nilai patokan mata uang yang dipakai adalah euro (EUR), jadi nilai tukar EUR - EUR = 1.0.

Salah satu keunggululan scripting dengan qml adalah integrasi dengan javascript yang juga digunakan dalam aplikasi currency ini. Fungsi javascript digunakan sebagai glue code untuk mengisolasi currency dari index ketika pertama kali di load oleh aplikasi (??). Yang perlu diingat, bahwa kita bisa menggunakan javascript dalam qml ini, sepert halnya dengan html dan css.

Belajar QML: Hello World!

Artikel ini merupakan terjemahan bebas saya dari artikel berbahasa Inggris: Quick Start Guide - QML Basics. Artikel tersebut merupakan tutorial dari Qt Creator untuk QML Qt Quick.

Ada dua bagian pokok dari setiap dokumen qml, yakni bagian import dan deklarasi objek. Bagian import mendefinisikan library, types dan functionality dari kode yang akan digunakan pada bagian deklarasi obyek.

Sebagai contoh, mari kita perhatikan program berikut: Hello world!

import QtQuick 2.0 
Rectangle { 
     width: 200 // this is a property
     height: 100 
     color: "#efefef" 
     Text { 
         anchors.centerIn: parent 
         text: "Hello, World!" 
     } 
}

Bagian import pada kode  diatas disebutkan dengan kode

import QtQuick 2.0 

sedang bagian deklarasi obyeknya merupakan baris sisanya, yakni: