Tutorial QML Untuk Ubuntu Touch [3]: Menyusun User Interface

Bagian ke-3 tutorial QML untuk Ubuntu Touch ini merupakan penyusunan user interface (ui) dari implementasi logika pada aplikasi. UI yang kita rancang terdiri dari satu kolom dua bari plus tombol clear seperti yang terlihat pada gambar dibawah. Ketika mata uang EUR sebagai basis tampilan awal di sentuh maka akan keluar opsi mata uang lainnya. Begitu pula dengan mata uang tujuan konversi. Di bagian bawah, ada tombol clear untuk me-reset data yang telah dimasukkan. Bandingkan gambar ini dengan hasil akhir program.

Rancangan UI, 1 kolom 2 Baris + clear button

Terakhir, tambahkan kode berikut pada baris ke-99,

Column {
    id: pageLayout
 
    anchors {
        fill: parent
        margins: root.margins
    }
    spacing: units.gu(1)
 
    Row {
        spacing: units.gu(1)
 
        Button {
            id: selectorFrom
            property int currencyIndex: 0
            property TextField input: inputFrom
            text: currencies.getCurrency(currencyIndex)
            onClicked: PopupUtils.open(currencySelector, selectorFrom)
        }
 
        TextField {
            id: inputFrom
            errorHighlight: false
            validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
            width: pageLayout.width - 2 * root.margins - root.buttonWidth
            height: units.gu(5)
            font.pixelSize: FontUtils.sizeToPixels("medium")
            text: '0.0'
            onTextChanged: {
                if (activeFocus) {
                    inputTo.text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
                }
            }
            function update() {
                text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
            }
        }
    }
 
    Row {
        spacing: units.gu(1)
        Button {
            id: selectorTo
            property int currencyIndex: 1
            property TextField input: inputTo
            text: currencies.getCurrency(currencyIndex)
            onClicked: PopupUtils.open(currencySelector, selectorTo)
        }
 
        TextField {
            id: inputTo
            errorHighlight: false
            validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
            width: pageLayout.width - 2 * root.margins - root.buttonWidth
            height: units.gu(5)
            font.pixelSize: FontUtils.sizeToPixels("medium")
            text: '0.0'
            onTextChanged: {
                if (activeFocus) {
                    inputFrom.text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
                }
            }
            function update() {
                text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
            }
        }
    }
 
    Button {
        text: i18n.tr("Clear")
        width: units.gu(12)
        onClicked: {
            inputTo.text = '0.0';
            inputFrom.text = '0.0';
        }
    }
}

Hasilnya adalah sebagai berikut,

Tampilan UI

Opsi pilihan mata uang

Baris-baris terakhir diatas mengikuti rancangan ui yaang telah kita tentukan susuai gambar pertama diatas. Seperti terlihat pada kode diatas, potongan kode tersebut terdiri atas row, row dan button. Semuga komponen tersebut kita definisikan untuk berada di halaman induk root beserta singal handler-nya.

Yang perlu menjadi perhatian, perhatikan signal handler onClicked untuk mendefiniksan apa yang terjadi ketika user meng-klik currency selector (EUR), maka akan muncul pop up pilihan jenis-jenis mata uang. Hal ini juga terjadi pada kolom selanjutnya, yakni mata uang tujuan konversi (by default: EUR). Signal handler onTextChanged akan memanggil fungsi convert() untuk melakukan konversi dan kemudian melakukan fungsi update() list view item yang telah kita definisikan juga sebelumnya.

Sumber: developer.ubuntu.com