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.
Selanjutnya, kita akan mengambil data dari obyek QtQuick untuk me-load data menjadi sebuah model: XmlListModel. Karena itulah, kita perlu menambahkan pada bagian import sebuah statement import baru, yakni QtQuick.XmlListModel, sehingga bagian import menjadi,

import QtQuick 2.0
import QtQuick.XmlListModel 2.0
import Ubuntu.Components 2.0

Dan pada barik ke-39 kita tambahkan,

XmlListModel {
    id: ratesFetcher
    source: "http://www.ecb.int/stats/eurofxref/eurofxref-daily.xml"
    namespaceDeclarations: "declare namespace gesmes='http://www.gesmes.org/xml/2002-08-01';"
                           +"declare default element namespace 'http://www.ecb.int/vocabulary/2002-08-01/eurofxref';"
    query: "/gesmes:Envelope/Cube/Cube/Cube"
 
    onStatusChanged: {
        if (status === XmlListModel.Ready) {
            for (var i = 0; i < count; i++)
                currencies.append({"currency": get(i).currency, "rate": parseFloat(get(i).rate)})
        }
    }
 
    XmlRole { name: "currency"; query: "@currency/string()" }
    XmlRole { name: "rate"; query: "@rate/string()" }
}

Elemen penting kode diatas adalah source yang mengambil data langsung dari bank sentral uni eropa secara online, jadi aplikasi ini membutuhkan koneksi internet untuk bisa mengetahui kurs secara real time saat aplikasi digunakan. Elemen lain XmlList model adalah query yang menunjukkan query XPath absolut untuk membuat model item dari XmlRoles below; dan namespaceDeclarations sebagai deklarasi nama yang akan digunakan pada XPath queries.

onStatusChanged signal handler mendemonstrasikan kombinasi sergaguna dari signal, handler dan javascript. Setiap property qml memiliki <property>Changed signal dan on<property>Changed signalhandler yang berkaitan. Pada kode di atas, StatusChanged signal akan digunakan untuk memberikan notifikasi pada perubahan dari status property dan kita akan mendifinisikan semua handler pada semuna nilai tukar mata uang dalam ListModel ketika ratesFetcher selesai me-load data. (ratesFetcher akan mempopulasikan data nilai tukar yang akan ditambahkan pada mata uang yang bersangkutan).

Dalam banyak kasus, XmlListModel bisa digunakan sekali saja, namun dalam aplikasi currency converter ini XmlListModel digunakan sebagai kontainter intermediate. Kita butuh mengubah data pada nilai tukar EUR dan meletakkan hasilnya pada currencies ListModel

Proses pertukaran nilai mata uang dalam aplikasi ini berjalan secara transparat, kemudian pada baris ke-56 ditambahkan kode Ubuntu ActivityIndicator berikut untuk menunjukkan bahwa proses sedang berjalan ,

ActivityIndicator {
    anchors.right: parent.right
    running: ratesFetcher.status === XmlListModel.Loading
}

Kode diatas dikaitkan dengan kode induknya (root), kemudian pada baris 66, yakni di atas dan diluar komponen Page, ditambahkan kode fungsi javascript berikut untuk merubah nilai tukar secara aktual,

function convert(from, fromRateIndex, toRateIndex) {
    var fromRate = currencies.getRate(fromRateIndex);
    if (from.length <= 0 || fromRate <= 0.0)
        return "";
    return currencies.getRate(toRateIndex) * (parseFloat(from) / fromRate);
}

Memilih Nilai Mata Uang

Untuk memberikan opsi pilihan mata uang pada pengguna aplikasi ini, kita tambahkan komponen ListItem baru, blok baru yang bisa digunakan untuk mengkombinasikan komponen dan obyek lain.

import Ubuntu.Components.ListItems 0.1
import Ubuntu.Components.Popups 0.1

Dan kode-kode terakhir pada tutorial bagian kedua Currency Converter ini diletakkan pada baris 68 komponen sebagai berikut,

Component {
    id: currencySelector
    Popover {
        Column {
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
            }
            height: pageLayout.height
            Header {
                id: header
                text: i18n.tr("Select currency")
            }
            ListView {
                clip: true
                width: parent.width
                height: parent.height - header.height
                model: currencies
                delegate: Standard {
                    text: currency
                    onClicked: {
                        caller.currencyIndex = index
                        caller.input.update()
                        hide()
                    }
                }
            }
        }
    }
}

Pada tahap ini tidak belum ada perubahan perubahan berarti pada halaman tampilan user interface, yang kita telah lakukan disini adalah membuat currency selector dengan Ubuntu Popover dan standard Qt Quick ListView. ListView akan menampilkan data dari currencies ListMode. Perlu diperhatikan bahwa Column object membungkus Ubuntu Header dan list view untuk menyusunnya secara vertical, dan bagaimana tiap item pada list view menjadi komponen item Standard list.

Popover akan menunjukkan pilhan mata uang, selama pemilihan popover akan disembunyikan sampai dikonfirmasin pilihan mata uang dan data di-update. Diasumsikan bahwa caller memiliki currencyIndex (baris 90) dan properti input dan input adalah item dengan fungsi update().

Hasilnya adalah seperti berikut, hanya ada tambaha Ubuntu ActivityIndicator yang sedarng berputar di pojok kanan atas.

Currency Converter [update2: Ubuntu AcitivityIndicator]

Sumber: http://developer.ubuntu.com/apps/qml/tutorial/building_your_first_qml_app/2/