Pada tutorial <a href="https://www.codepolitan.com/tutorial/membuat-aplikasi-mobile-native-pertama-tizen-os/" target="_blank">Membuat Aplikasi Mobile Native Pertama di Tizen OS</a> 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 &gt; New &gt; 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.

<img class="alignnone size-full wp-image-11524" src="https://www.codepolitan.com/wp-content/uploads/2016/07/1.1.png" alt="1.1" width="651" height="554" />
<h2>Pengenalan Area Kerja</h2>
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.

<img class="alignnone size-full wp-image-11525" src="https://www.codepolitan.com/wp-content/uploads/2016/07/2-4.png" alt="2" width="289" height="108" />

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.
<h3>GUI Editor</h3>
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.
<ul>
 	<li>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.
<img class="alignnone size-large wp-image-11526" src="https://www.codepolitan.com/wp-content/uploads/2016/07/3-7-700x394.png" alt="3" width="700" height="394" /></li>
</ul>
<ul>
 	<li>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.
<img class="alignnone size-large wp-image-11528" src="https://www.codepolitan.com/wp-content/uploads/2016/07/4-5-700x395.png" alt="4" width="700" height="395" /></li>
</ul>
<ul>
 	<li>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.
<img class="alignnone size-large wp-image-11529" src="https://www.codepolitan.com/wp-content/uploads/2016/07/5-5-700x393.png" alt="5" width="700" height="393" /></li>
</ul>
<h3>Outline</h3>
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.

<img class="alignnone size-full wp-image-11530" src="https://www.codepolitan.com/wp-content/uploads/2016/07/6-5.png" alt="6" width="274" height="250" />
<h3>Navigation</h3>
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.

<img class="alignnone size-full wp-image-11531" src="https://www.codepolitan.com/wp-content/uploads/2016/07/7-3.png" alt="7" width="528" height="259" />
<h3>Properties</h3>
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.

<img class="alignnone size-full wp-image-11532" src="https://www.codepolitan.com/wp-content/uploads/2016/07/8-4.png" alt="8" width="296" height="520" />

Setiap komponen memiliki sejumlah atribut yang berbeda-beda dan beragam. Kamu dapat melihat atribut apa saja yang dimiliki setiap komponen pada laman <a href="https://developer.tizen.org/development/tools/native-tools/ui-builder/component-attributes">https://developer.tizen.org/development/tools/native-tools/ui-builder/component-attributes</a>.
<h2>Mendesain Layout UI Aplikasi</h2>
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 &gt; New &gt; Tizen Native Project. Pada tab template, pilih tipe UI Builder - Single View. Isi kolom Project name dan Package name, lalu klik tombol Finish.

<img class="alignnone size-large wp-image-11533" src="https://www.codepolitan.com/wp-content/uploads/2016/07/1-5-676x700.png" alt="1" width="676" height="700" />
<h3>Menggunakan GUI Editor</h3>
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.

<img class="alignnone size-large wp-image-11534" src="https://www.codepolitan.com/wp-content/uploads/2016/07/9-3-700x430.png" alt="9" width="700" height="430" />

<img class="alignnone size-large wp-image-11535" src="https://www.codepolitan.com/wp-content/uploads/2016/07/10-3-700x380.png" alt="10" width="700" height="380" />

<img class="alignnone size-full wp-image-11536" src="https://www.codepolitan.com/wp-content/uploads/2016/07/11-1.png" alt="11" width="373" height="195" />

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:

<img class="alignnone size-full wp-image-11537" src="https://www.codepolitan.com/wp-content/uploads/2016/07/13-2.png" alt="13" width="396" height="511" />

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:
<table>
<tbody>
<tr>
<td width="104">Komponen</td>
<td width="151">Label</td>
</tr>
<tr>
<td width="104">ID</td>
<td width="151">label1</td>
</tr>
<tr>
<td width="104">Text</td>
<td width="151">Username</td>
</tr>
<tr>
<td width="104">Left</td>
<td width="151">100</td>
</tr>
<tr>
<td width="104">Top</td>
<td width="151">260</td>
</tr>
<tr>
<td width="104">Width</td>
<td width="151">200</td>
</tr>
<tr>
<td width="104">Height</td>
<td width="151">50</td>
</tr>
</tbody>
</table>
&nbsp;

&nbsp;
<table>
<tbody>
<tr>
<td width="104">Komponen</td>
<td width="151">Label</td>
</tr>
<tr>
<td width="104">ID</td>
<td width="151">Label2</td>
</tr>
<tr>
<td width="104">Text</td>
<td width="151">Password</td>
</tr>
<tr>
<td width="104">Left</td>
<td width="151">100</td>
</tr>
<tr>
<td width="104">Top</td>
<td width="151">370</td>
</tr>
<tr>
<td width="104">Width</td>
<td width="151">200</td>
</tr>
<tr>
<td width="104">Height</td>
<td width="151">50</td>
</tr>
</tbody>
</table>
&nbsp;
<table>
<tbody>
<tr>
<td width="104">Komponen</td>
<td width="151">Entry</td>
</tr>
<tr>
<td width="104">ID</td>
<td width="151">entry1</td>
</tr>
<tr>
<td width="104">Text</td>
<td width="151"></td>
</tr>
<tr>
<td width="104">Single Line</td>
<td width="151">true</td>
</tr>
<tr>
<td width="104">Password</td>
<td width="151">false</td>
</tr>
<tr>
<td width="104">Editable</td>
<td width="151">true</td>
</tr>
<tr>
<td width="104">Scrollable</td>
<td width="151">false</td>
</tr>
<tr>
<td width="104">Left</td>
<td width="151">300</td>
</tr>
<tr>
<td width="104">Top</td>
<td width="151">230</td>
</tr>
<tr>
<td width="104">Width</td>
<td width="151">600</td>
</tr>
<tr>
<td width="104">Height</td>
<td width="151">80</td>
</tr>
</tbody>
</table>
&nbsp;
<table>
<tbody>
<tr>
<td width="104">Komponen</td>
<td width="151">Entry</td>
</tr>
<tr>
<td width="104">ID</td>
<td width="151">Entry2</td>
</tr>
<tr>
<td width="104">Text</td>
<td width="151"></td>
</tr>
<tr>
<td width="104">Single Line</td>
<td width="151">true</td>
</tr>
<tr>
<td width="104">Password</td>
<td width="151">true</td>
</tr>
<tr>
<td width="104">Editable</td>
<td width="151">true</td>
</tr>
<tr>
<td width="104">Scrollable</td>
<td width="151">false</td>
</tr>
<tr>
<td width="104">Left</td>
<td width="151">300</td>
</tr>
<tr>
<td width="104">Top</td>
<td width="151">340</td>
</tr>
<tr>
<td width="104">Width</td>
<td width="151">600</td>
</tr>
<tr>
<td width="104">Height</td>
<td width="151">80</td>
</tr>
</tbody>
</table>
&nbsp;
<table>
<tbody>
<tr>
<td width="104">Komponen</td>
<td width="151">Button</td>
</tr>
<tr>
<td width="104">ID</td>
<td width="151">button1</td>
</tr>
<tr>
<td width="104">Text</td>
<td width="151">Log In</td>
</tr>
<tr>
<td width="104">Left</td>
<td width="151">100</td>
</tr>
<tr>
<td width="104">Top</td>
<td width="151">500</td>
</tr>
<tr>
<td width="104">Width</td>
<td width="151">800</td>
</tr>
<tr>
<td width="104">Height</td>
<td width="151">80</td>
</tr>
</tbody>
</table>
Simpan perubahan layout kemudian coba jalankan aplikasi di emulator.
<h3>Menggunakan XML Editor</h3>
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 &lt;view&gt; seperti yang sudah ada. Perhatikan bahwa struktur view pada dokumen XML berada di dalam tag &lt;views&gt;. Coba buat tag view setelah tag tutup &lt;/view&gt; pertama, seperti berikut:
<pre>&lt;view id="view2" indicator="true" screen_orientation="full_sensor" type="view"&gt;&lt;/view&gt;</pre>
Maka view kedua akan muncul pada panel Navigation.

<img class="alignnone size-full wp-image-11538" src="https://www.codepolitan.com/wp-content/uploads/2016/07/12-2.png" alt="12" width="312" height="264" />

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 <a href="https://developer.tizen.org/development/tools/native-tools/ui-builder/component-attributes">https://developer.tizen.org/development/tools/native-tools/ui-builder/component-attributes</a>.

<img class="alignnone size-full wp-image-11539" src="https://www.codepolitan.com/wp-content/uploads/2016/07/14-3.png" alt="14" width="413" height="342" />

Berikut adalah kode XMLnya:
<pre>&lt;grid vsize_w="1000" vsize_h="1000" align_h="fill" align_v="fill"
 weight_v="1" weight_h="1" visible="true" id="grid1"&gt;

 &lt;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"&gt;&lt;/label&gt;

 &lt;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" &gt;&lt;/button&gt;

&lt;/grid&gt;</pre>
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.
<h2>Memasang Event Handler pada Komponen</h2>
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 &gt; clicked. Akan muncul jendela Target View. Pilih view2 untuk kolom Target View lalu klik tombol OK.

<img class="alignnone size-full wp-image-11540" src="https://www.codepolitan.com/wp-content/uploads/2016/07/15-2.png" alt="15" width="364" height="165" />

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.

<img class="alignnone size-large wp-image-11541" src="https://www.codepolitan.com/wp-content/uploads/2016/07/16-3-700x374.png" alt="16" width="700" height="374" />

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.

<img class="alignnone size-full wp-image-11542" src="https://www.codepolitan.com/wp-content/uploads/2016/07/17-2.png" alt="17" width="383" height="361" />

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.

Mendesain Tampilan Aplikasi Tizen Lebih Mudah Menggunakan Tizen UI Builder

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Mendesain Tampilan Aplikasi Tizen Lebih Mudah Menggunakan Tizen UI Builder

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Micro Python, Bahasa Python untuk Pemrograman Mikrokontroller

CodeIgniter PHP Framework Sekarang Punya Rumah Baru

Ikuti Giveaway dari CoderTalk dan Menangkan 6 Hadiah Menarik

Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Cara Install Node.js

Digital Input Output pada Arduino