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:

Rectangle { 
     width: 200 
     height: 100 
     color: "#efefef" 
     Text { 
         anchors.centerIn: parent 
         text: "Hello, World!" 
     } 
}

Pada bagian import, kita mendefinisikan library yang akan kita gunakan, yakni QtQuick2.0 yang akan digunakan pada bagian deklarasi obyek. Pada contoh tersebut, deklarasi obyek kita adalah membuat tulisan (Text) "Hello, World" di dalam sebuak kotak (Rectangle) yang berukuran widht 200 dan height 100 px dengan warna kotak lightg rey (#efefef). Cukup mudah bukan? Untuk meletakkan tulisan Hello, World di tengah kotak digunakan perintah anchors.In: parent.

Running

Untuk me-run program hello world tersebut, simpan kode tersebut dengan ekstensi hello.qml, kemudian pada terminal ketikkan perintah berikut (dengan asumsi telah menginstall qmlscence).

qmlscene hello.qml

Dan, Horee.. program pertama QML kita pun jadi!

Output program hello.qml

Sumber:

1. http://qt-project.org/doc/qt-5.0/qtquick/qtquick-quickstart-basics.html 
2. http://developer.ubuntu.com/apps/qml/get-started/