Mendesain Tampilan Aplikasi Tizen Lebih Mudah Menggunakan Tizen UI Builder

Pada tutorial Membuat Aplikasi Mobile Native Pertama di Tizen OS kita telah mempelajari bagaimana membuat aplikasi native sederhana pada Tizen. Sebenarnya kita dapat membuat tampilan lebih mudah dengan bantuan tools tambahan yang sudah disediakan di dalam Tizen SDK, yakni UI Builder. Seperti sudah dibahas pada tutorial yang disebut di atas, bahwa Tizen menggunakan library EFL atau Enlightenment Foundation Library yang menyediakan API yang sangat lengkap untuk membangun antarmuka aplikasi. Kita tidak mesti sulit-sulit membuat dari nol widget seperti dropdown, list, date picker, color picker, hingga calendar dan maps. Kita dapat langsung menggunakan API yang tersedia dan semua kebutuhan tampilan dan event handler sudah siap pakai.

Pada tutorial ini kita akan lihat bagaimana membangun aplikasi Tizen lebih mudah lagi dengan memanfaatkan UI Builder. UI Builder atau Tizen native UI Builder adalah adalah alat untuk menyusun antarmuka grafis yang memudahkan pengembang dalam membangun UI aplikasi native Tizen dengan cara menyusun komponen UI menggunakan editor drag-and-drop WYSIWYG (What You See Is What You Get).

Untuk melihat bagaimana kecanggihan UI Builder Tizen, mari kita coba dengan membuat aplikasi baru. Jalankan aplikasi Tizen IDE, dan pilih menu File > New > Tizen Native Project. Pada jendela New Tizen Native Project, pilih tab Template. Kamu akan menemukan tipe UI Builder – Navigation dan UI Builder – Single View. Kamu dapat mencoba tipe UI Builder - Navigation untuk dapat mencoba langsung contoh aplikasi yang sudah siap dengan beberapa halaman view. Isi kolom Project name dan Package name, lalu klik tombol Finish.

Pengenalan Area Kerja

Pada project kita, karena kita menggunakan tipe template UI Builder, IDE akan otomatis mengaktifkan perspective Tizen Native UI Builder yang dapat diganti sewaktu-waktu di bagian kanan atas IDE.

Perspective Tizen Native UI Builder menyediakan beragam panel yang mendukung mengembangan native UI, disamping panel-panel umum seperti Project Explorer, Console,  Outline dan Connection Explorer. Berikut diantaranya.

GUI Editor

GUI Editor inilah bagian utama dari UI Builder tempat kita mendesain tampilan aplikasi. Ada 3 buah tab pada panel GUI Editor ini, yaitu Design, Source dan Storyboard.

• Design Pada panel ini kita dapat menyusun komponen UI pada aplikasi seperti apapun yang kita inginkan, semudah mengklik dan tarik komponen ke area kerja desain. Tersedia berbagai komponen UI yang sudah disediakan EFL, dalam bentuk grafis objek.

• Source Tab Source menampilkan XML editor dari file layout/layout.xml. Pada dasarnya file inilah tempat kita mendefinisikan susunan komponen aplikasi yang akan digunakan oleh project untuk merender antarmuka. Kita dapat menyusun manual komponen UI dengan menuliskan tag-tag komponen pada XML editor. Tag-tag yang sudah ditulis sempurna pada editor akan langsung ditampilkan purwarupanya di bagian GUI sebelah kanan.

• Storyboard Tab Storyboard menampilkan desain alur perpindahan halaman view pada aplikasi. Panel ini memudahkan kita dalam mendesain storyboard terlebih dahulu sebelum menuliskan logika dan perhitungan program.

Outline

Panel ini menampilkan hirarki komponen yang tersusun dalam sebuah view. Komponen yang ditampilkan paling atas berada di lapisan paling belakang/bawah dari aplikasi. Kita dapat melihat komponen apa saja yang terdapat pada view aktif. Kita juga dapat menyusun ulang hirarki penampilan komponen pada panel ini.

Navigation

Panel ini menampilkan view yang terdapat di dalam layout. Pada panel inilah kita memilih view mana yang akan diaktifkan untuk didesain, dengan mengklik ganda pada view yang ingin diaktifkan. Kita juga dapat membuat view baru pada panel ini, dengan mengklik ikon kertas dengan tanda plus di bagian kanan atas panel, atau mengklik kanan area putih pada panel lalu pilih menu New.

Properties

Panel ini menampilkan beragam properti dari komponen yang berada dalam kondisi aktif terseleksi. Properti komponen adalah setiap atribut yang dimiliki sebuah komponen, dan dapat diedit baik melalui panel ini maupun langsung pada file layout.xml. Pada panel ini, atribut-atribut tersebut ditampilkan dalam bentuk form GUI sehingga lebih memudahkan dalam manipulasi nilai properti. Untuk menampilkan atribut suatu komponen pada panel Properties, klik komponen pada area GUI Editor atau pada panel Outline.

Setiap komponen memiliki sejumlah atribut yang berbeda-beda dan beragam. Kamu dapat melihat atribut apa saja yang dimiliki setiap komponen pada laman https://developer.tizen.org/development/_tools/native-tools/ui-builder/component-attributes.

Mendesain Layout UI Aplikasi

Kali ini kita akan coba menyusun sendiri template aplikasi kita. Kita akan membuat contoh template aplikasi sederhana dengan dua buah view. View pertama menampilkan form login, dan view kedua menampilkan label bertuliskan selamat datang.

Buat project baru melalui menu File > New > Tizen Native Project. Pada tab template, pilih tipe UI Builder - Single View. Isi kolom Project name dan Package name, lalu klik tombol Finish.

Menggunakan GUI Editor

Pada view pertama kita akan menambahkan komponen Grid sebagai container, dan menyimpan komponen untuk form login di atasnya. Pada panel GUI Editor, buka Palette UI Componen Container, lalu klik drag komponen Grid ke area template. Maka pada panel Outline akan nampak komponen Grid berada di bawah View1.

Kemudian masukkan dan susun 2 buah komponen Label dari Pallete Display UI Components, 2 buah komponen Entry dari Pallete Input UI Components, dan satu buah komponen Button dari Pallete Buttons. Susun sedemikian rupa agar tampilannya menjadi seperti gambar berikut:

Bila Kamu kesulitan memposisikan setiap komponen menggunakan mouse pada area template, Kamu bisa mengedit atribut setiap komponen melalui panel Properties dengan nilai seperti pada tabel berikut:

Komponen	Label
ID	label1
Text	Username
Left	100
Top	260
Width	200
Height	50

 

 

Komponen	Label
ID	Label2
Text	Password
Left	100
Top	370
Width	200
Height	50

 

Komponen	Entry
ID	entry1
Text
Single Line	true
Password	false
Editable	true
Scrollable	false
Left	300
Top	230
Width	600
Height	80

 

Komponen	Entry
ID	Entry2
Text
Single Line	true
Password	true
Editable	true
Scrollable	false
Left	300
Top	340
Width	600
Height	80

 

Komponen	Button
ID	button1
Text	Log In
Left	100
Top	500
Width	800
Height	80

Simpan perubahan layout kemudian coba jalankan aplikasi di emulator.

Menggunakan XML Editor

Kita sudah membuat view pertama menggunakan GUI Editor. Sekarang kita akan membuat view kedua. Ada baiknya bila kita juga mempelajari sedikit tentang tag-tag XML untuk komponen UI. Oleh karena itu kita akan coba membuat view kedua menggunakan XML.

Buka tab Source pada panel GUI Editor. Untuk mendefinisikan view kita cukup membuat tag <view> seperti yang sudah ada. Perhatikan bahwa struktur view pada dokumen XML berada di dalam tag <views>. Coba buat tag view setelah tag tutup </view> pertama, seperti berikut:

<view id="view2" indicator="true" screen_orientation="full_sensor" type="view"></view>

Maka view kedua akan muncul pada panel Navigation.

Sekarang masukkan satu buah Button dan satu buah label, seperti pada gambar di bawah ini, menggunakan XML. Sekali lagi, Kamu dapat melihat komponen apa saja beserta atribut-atribut yang dimilikinya pada halaman panduan Tizen berikut https://developer.tizen.org/development/tools/native-tools/ui-builder/component-attributes.

Berikut adalah kode XMLnya:

<grid vsize_w="1000" vsize_h="1000" align_h="fill" align_v="fill"
 weight_v="1" weight_h="1" visible="true" id="grid1">

    <label align_v="fill" align_h="fill" weight_v="1" weight_h="1"
     pack_x="380" pack_y="100" pack_w="240" pack_h="50" ellipsis="false"
     wrap_width="0" disable="false" line_wrap="none"
     id="label3" text="Selamat Datang!" visible="true"></label>

    <button align_v="fill" align_h="fill" weight_v="1" weight_h="1"
     pack_w="800" pack_h="80" pack_x="100" pack_y="250" style="default"
     disable="false" id="button2" text="Log Out" visible="true" ></button>

</grid>

Kita menggunakan grid dengan width dan height 1000, artinya ada 1000 kolom dan 1000 baris yang bisa kita gunakan sebagai koordinat posisi komponen UI di dalamnya. Kita menggunakan komponen grid sebagai container agar ketika orientasi layar berubah menjadi landscape, posisi setiap komponen di dalamnya tetap konsisten dan disesuaikan.

Kita memasang komponen label dengan text “Selamat Datang!”, kemudian menempatkannya pada posisi grid kolom 380 dari kiri (pack_x) dan baris 100 dari atas (pack_y), dengan ukuran panjang 240 kolom (pack_w) dan tinggi 50 baris (pack_h).

Terakhir kita memasang komponen button dengan text “Log Out”. Kita menyimpan komponen ini pada posisi kolom 100 dan baris 250, serta mengatur panjang menjadi 800 kolom dan tinggi 80 baris.

Memasang Event Handler pada Komponen

Sekarang kita ingin agar ketika tombol Log In ditekan, halaman akan berpindah ke view2, dan ketika tombol Log Out ditekan, halaman akan kembali ke view1. UI Builder membuat perkerjaan tersebut menjadi sangat mudah. Pada panel GUI Editor, ada Tab Storyboard untuk mengatur alur halaman dari aplikasi kita.

Buka tab Storyboard, lalu klik kanan komponen button1 yakni tombol dengan teks Log In, lalu pilih menu Change Page > clicked. Akan muncul jendela Target View. Pilih view2 untuk kolom Target View lalu klik tombol OK.

Cara lain untuk membuat perpindahan halaman adalah dengan menekan tombol Ctrl lalu klik drag komponen button1 ke view2, dan pada menu popup yang muncul pilih menu clicked. Maka baik cara pertama maupun kedua akan muncul panah dari view1 ke view2.

Lakukan hal yang sama dari tombol Log Out agar saat ditekan, halaman berpindah ke view1.

Klik komponen Login, lalu perhatikan panel Properties, tab event. Disitu kita lihat ada satu event handler yang dibuat untuk event clicked dengan nama view1_button1_onclicked. Event handler ini otomatis dibuat oleh IDE oleh sebab kita membuat keterkaitan antara tombol dengan view2. Klik ikon panah yang ada di samping event handler, maka akan tampil kode program dasar dengan dua fungsi event handler, yakni view1_button1_onclicked() dan view1_button1_onclicked_post(). Fungsi view1_button1_onclicked() akan dijalankan pada saat button1 pada view1 mulai diklik, dan fungsi view1_button1_onclicked_post() akan dijalankan setelah button1 pada view1 selesai diklik. Pada fungsi ini kita dapat menambahkan kode untuk melakukan aksi apapun seperti mengecek input, mengeset value komponen lain dan sebagainya.

Sekarang coba jalankan project pada Emulator, maka halaman akan berpindah ke view2 pada saat tombol Login ditekan dan halaman kembali ke view1 ketika tombol Log Out ditekan.