Sekilas tentang Qt Quick QML

Berawal dari Laptop saya yang tidak bisa dihubungkan dengan proyektor sehingga saya terpaksa meminjam laptop Iqbal untuk membantu saya mendemokan pengembangan aplikasi Symbian menggunakan Qt Quick QML pada acara Seminar “Mobile Opportunities di Indonesia” yang diadakan di STMIK AMIK Bandung. Lalu ternyata ditengah-tengah ditemukan lagi masalah bahwa di laptop Iqbal ternyata tidak ada QML Viewernya sehingga saya tidak bisa membuktikan hasil live coding saya. Maka saya menulis blog ini untuk menebus semua itu dan juga untuk berbagi pengetahuan kepada semuanya. J

Pertama-tama bukalah Qt Creator. Lalu setelah terbuka klik Create Project. Pada pilihan New Project pilih Qt Quick Project dan Qt Quick UI. Lanjutkan wizard tersebut dengan menekan tombol Choose lalu pilih tempat penyimpanan project Anda tersebut lalu Next-Next sampai wizard selesai.

Setelah ini maka Qt Creator akan membuatkan Anda sebuah project baru dan akan terbuka secara otomatis file qml nya. Ubah isi file qml tersebut supaya menjadi seperti berikut:

import QtQuick 1.0

Rectangle {

    id:recWindow

    gradient:Gradient{

        GradientStop{

            position: 0.00

            color:"gray"

        }

        GradientStop{

            position: 1.00

            color:"white"

        }

    }

    TextInput{

        id:textinputopacity

        text:"Set the opacity here"

    }

    TextInput{

        id:textinputcolor

        text:"Set the color here"

        y:50

    }

    Rectangle{

        id:recModif

        height:250

        width:250

        anchors.centerIn: recWindow

        color:"black"

        PropertyAnimation{

            id:animopacity

            target: recModif

            properties: "opacity"

            duration: 2000

        }

        PropertyAnimation{

            id:animcolor

            target:recModif

            properties:"color"

            duration:2000

        }

        MouseArea{

            anchors.fill: parent

            onPressed: {

                animopacity.from=parent.opacity

                animopacity.to=textinputopacity.text

                animopacity.running="true"

                animcolor.from=parent.color

                animcolor.to=textinputcolor.text

                animcolor.running="true"

            }

        }

    }

}

 

Silahkan coba run aplikasi ini dengan menekan tombol Ctrl+R. Jika ingin merubah tujuan running aplikasi kita (misal dari tipe desktop ke tipe mobile, atau dari tipe mobile ke tipe desktop) silahkan klik tab Projects dan pilih Qt version nya (pilih yang Simulator untuk dijalankan di Nokia Simulator atau pilih yang Qt for Desktop untuk dijalankan di aplikasi desktop). Enjoy! Jika ada yang mau ditanyakan silahkan komentari blog post ini. J

We need your comment here. Please leave it below.

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: