Membuat Aplikasi Mobile Native Pertama di Tizen OS

Meskipun Tizen mendukung secara langsung pengembangan aplikasi berbasis web, Tizen tetap menyediakan dokumentasi yang cukup lengkap dalam membangun aplikasi native untuk performa yang lebih optimal. Bahasa pemrograman yang didukung adalah C, meskipun tersedia juga binding untuk bahasa Python, Scala, Perl dan C++.

Pada tutorial kali ini kita akan membuat aplikasi mobile native pertama untuk sistem operasi Tizen menggunakan bahasa pemrograman C. Aplikasi yang akan dibuat adalah counter sederhana. Aplikasi ini menampilkan angka yang nilainya akan terus naik setiap kali layar diketuk.

Tujuan dari tutorial ini adalah untuk mengenal dan mengakrabkan diri dengan lingkungan pemrograman aplikasi native di sistem operasi Tizen. Beberapa hal yang akan dibahas diantaranya struktur dasar program, penggunaan native API untuk membuat aplikasi sederhana dan debugging aplikasi pada emulator dan device.

Sebelum memulai tutorial ini, Kamu harus menginstal dulu Tizen SDK. Langkah-langkah instalasi Tizen SDK dapat dibaca pada artikel Mengenal Perangkat Development untuk Membangun Aplikasi di Tizen OS. Pastikan Kamu sudah mengikuti langkah-langkah persiapan pada artikel tersebut karena pada tutorial ini kita akan langsung membahas pemrograman native dengan C.

Membuat Project Mobile Native Baru

Buka aplikasi Tizen IDE di komputermu, kemudian buat native project baru dengan mengakses menu File > Tizen Native Project.

Maka akan muncul jendela New Tizen Native Project. Pada bagian atas jendela ada 3 pilihan sumber, yakni Template, Online Sample dan User Template. Pilih Template. Kemudian pada kolom di bawahnya klik template Basic UI.

Pada kolom Project name isi dengan nama project yang Kamu inginkan, dalam tutorial ini saya menggunakan nama project FirstNativeApp. Pada kolom Package name sesuaikan dengan package name untuk aplikasimu. Kemudian klik Finish.

Setelah tombol Finish ditekan, Tizen IDE membutuhkan waktu beberapa detik untuk membuat project baru. Project kita siap diprogram dan dibuild ketika sudah muncul di panel Project Explorer.

Ada beberapa folder dan file di dalam project aplikasi kita, diantaranya:

• inc, berisi file header (.h)
• res, berisi file resource
• shared, berisi file resource untuk digunakan bersama aplikasi lain
• src, berisi file source (.c)
• lib, untuk menyimpan library eksternal
• tizen-manifest.xml,

Untuk saat ini cukup perhatikan folder inc dan src karena kita akan bekerja pada file yang ada di folder tersebut. IDE akan membuatkan file .h pada folder inc dan .c pada folder src dengan nama yang sama dengan nama project kita. Di file itulah kita akan mulai menuliskan program.

Selain itu Kamu juga dapat mengatur properti project untuk aplikasimu pada file tizen-manifest.xml. Dobel klik file tersebut maka IDE akan menampilkan isi dari file dengan menggunakan Manifest Editor untuk memudahkan modifikasi. Terdapat beberapa tab pada Manifest Editor:

• Overview, mendefinisikan dan mengedit informasi umum, seperti application package, versi, pembuat, deskripsi, dan ikon aplikasi.
• Features, mendeklarasikan fitur software dan hardware yang diperlukan oleh aplikasi untuk prose filter di application store.
• Privileges, menentukan hak akses spesifik seperti rekues data user, akses terhadap fitur pada perangkat, media penyimpanan dan sebagainya.
• Localization, mengatur bahasa yang didukung aplikasi.
• Advanced, mendefinisikan fitur tingkat lanjut aplikasi, seperti metadata, data control, application control functionalities, account, dan lain-lain.
• tizen-manifest.xml, mengedit file tizen-manifest.xml dalam format dokumen xml.

Build dan Running Aplikasi di Emulator dan Device

Untuk menguji apakah project kita sudah siap untuk diprogram lebih lanjut, kita akan mem-build dan menjalankannya di emulator dan perangkat smartphone berbasis Tizen OS (bila ada). Ada 3 cara untuk build project:

• Klik kanan project pada panel Project Explorer lalu pilih Build Project.
• Klik project pada panel Project Explorer lalu pilih menu Project > Build Project atau tekan F10 pada keyboard.
• Klik project pada panel Project Explorer lalu klik ikon bergambar palu pada toolbar.

Running di Emulator

Setelah proses build selesai, Kamu bisa menjalankan aplikasimu di emulator. Klik project pada panel Project Explorer, lalu pilih menu Run > Run, atau klik tombol Run (ikon bergambar play berwarna hijau) pada toolbar, atau tekan Ctrl + F11. Bila emulatormu belum aktif, akan muncul jendela Choose Target Dialog untuk memilih emulator.

Pilih emulator dan klik tombol Launch. Maka emulator akan dijalankan. Klik Run lagi untuk menjalankan aplikasi pada emulator.

Apabila pada saat hendak menjalankan aplikasi, emulator belum tersedia atau muncul jendela pesan Signing, ikuti dulu langkah persiapan pada artikel Mengenal Perangkat Development untuk Membangun Aplikasi di Tizen OS bagian Menambah Emulator Tizen dan Menjalankan Project Tizen di Emulator.

Apabila semua persiapan sudah dilakukan, emulator akan menampilkan project kita dengan lancar.

Running di Device Tizen

Bila Kamu memiliki smartphone dengan sistem operasi Tizen, Kamu dapat mengetes aplikasimu langsung ke smartphone Tizen. Langkahnya cukup mudah. Pertama-tama pastikan USB Debugging pada halaman Settings > Developer options dalam keadaan aktif.

Kemudian hubungkan smartphone pada computer menggunakan kabel micro USB. Saya menggunakan device Samsung Z1.

Windows akan menginstal driver pertama kali. Dan apabila semua driver sudah terinstal dengan baik, maka Windows Explorer akan menampilkan device Tizen tersebut.

Dan yang lebih penting adalah device muncul di panel Connection Explorer pada IDE.

Apabila devicemu tidak muncul di panel tersebut, kemungkinan besar driver USB untuk device tersebut belum menggunakan yang terbaru. Bila Kamu juga menggunakan device Samsung seri Z, Kamu bisa mencoba mengupdate driver USBnya menggunakan installer yang dapat diunduh disini.

Setelah devicemu muncul di panel Connection Explorer, Kamu bisa langsung menjalankan aplikasi di device dengan cara mengklik device tersebut pada panel Connection Explorer, kemudian pada panel Project Explorer klik kanan project dan pilih Clean Project. Setelah itu klik menu Run > Run As > Tizen Native Application atau klik tanda panah ke bawah pada di sebelah tombol Run pada toolbar, lalu pilih Run As > Tizen Native Application.

Maka project akan dibuild ulang dan diupload ke device. Tunggu hingga aplikasi muncul di layar device. Pada layar akan muncul sama persis seperti pada emulator.

Memahami Struktur Dasar Program

Sekarang saatnya kita perhatikan kode dibalik aplikasi yang sudah kita jalankan. Buka file src/firstnativeapp.c. Maka akan muncul kode untuk file firstnativeapp.c pada IDE. File inilah yang menjadi file utama yang menjalankan aplikasi.

Setidaknya ada 3 bagian dasar program pada aplikasi native di Tizen, yaitu struktur data, life-cycle callback, dan objek UI.

Data Structure

Di bagian atas program kita terdapat kode yang berfungsi mendefinisikan struktur data yang akan kita gunakan pada aplikasi:

typedef struct appdata {
 Evas_Object *win;
 Evas_Object *conform;
 Evas_Object *label;
} appdata_s;

Life-cycle Callback

Fungsi main() pada program adalah bagian utama yang dijalankan pada saat program berjalan. Pada fungsi ini juga terdapat 5 buah callback yang mengatur bagian-bagian tertentu dalam siklus hidup aplikasi, diantaranya:

• app_create, dipanggil pada saat aplikasi memulai proses, digunakan untuk membuat komponen UI,
• app_terminate, dipanggil pada saat proses pada aplikasi berakhir, setelah siklus utama berhenti,
• app_resume, dipanggil pada saat jendela aplikasi muncul,
• app_pause, dipanggil pada saat jendela aplikasi tersembunyi,
• app_control, dipanggil setelah app_create pada saat aplikasi dimulai, atau dipanggil saat rekues untuk menjalankan aplikasi diterima pada saat aplikasi berjalan, dan digunakan untuk menjalankan aksi tertentu pada aplikasi.

UI Objects

Pada saat aplikasi mulai berjalan, maka program akan memanggil callback app_create.

static bool
app_create(void *data)
{
 /* Hook to take necessary actions before main event loop starts
 Initialize UI resources and application's data
 If this function returns true, the main loop of application starts
 If this function returns false, the application is terminated */
 appdata_s *ad = data;
create_base_gui(ad);
return true;
}

Di dalam fungsi tersebut terdapat baris kode yang memanggil fungsi bernama create_base_gui(). Fungsi inilah yang membuat semua komponen UI yang dibutuhkan oleh aplikasi.

Secara umum isi dari fungsi create_base_gui() di atas ada 3 blok kode program, diantaranya membangun window, conformant dan label. Ketiga komponen UI inilah yang menghasilkan tampilan seperti yang kita lihat pada emulator.

static void
create_base_gui(appdata_s *ad)
{
  /* Window */
  /* Create and initialize elm_win.
  elm_win is mandatory to manipulate window. */
  ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
  elm_win_autodel_set(ad->win, EINA_TRUE);

  if (elm_win_wm_rotation_supported_get(ad->win)) {
    int rots[4] = { 0, 90, 180, 270 };
    elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
  }

  evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
  eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);

  /* Conformant */
  /* Create and initialize elm_conformant.
  elm_conformant is mandatory for base gui to have proper size
  when indicator or virtual keypad is visible. */
  ad->conform = elm_conformant_add(ad->win);
  elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
  elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
  evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_win_resize_object_add(ad->win, ad->conform);
  evas_object_show(ad->conform);

  /* Label */
  /* Create an actual view of the base gui.
  Modify this part to change the view. */
  ad->label = elm_label_add(ad->conform);
  elm_object_text_set(ad->label, "<align=center>Hello Tizen</align>");
  evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_object_content_set(ad->conform, ad->label);

  /* Show window after base gui is set up */
  evas_object_show(ad->win);
}

Library EFL dan Struktur Hirarki UI

Apa yang baru saja kita lihat dari kode program yang digunakan untuk membangun komponen UI sesungguhnya adalah implementasi dari penggunaan library bernama EFL. EFL atau Enlightenment Foundation Libraries adalah UI framework yang digunakan oleh Tizen untuk membangun aplikasi native. EFL menyediakan tidak hanya antarmuka aplikasi, tapi juga keuntungan performa aplikasi yang cukup signifikan.

EFL bukanlah barang baru di dunia pemrograman. Awalnya Enlightenment adalah project untuk membangun sebuah Window Manager untuk X11. Seperti kita ketahui X11 adalah sistem perangkat lunak komputer dan network protocol yang menyajikan antarmuka grafis pada komputer jaringan dan sistem operasi UNIX, BSD dan GNU/Linux. Mac OS X adalah salahsatu sistem operasi yang menggunakan X11 (hingga Mac OS X v10.5). Kini Enlightenment Window Manager tidak hanya mengcover untuk keperluan UI desktop, tapi juga untuk mobile, wearable, dan TV, seperti yang diimplementasikan oleh Tizen.

Kini kita tau mengapa Tizen menggunakan konsumsi sumber daya yang sangat efisien. EFL menggunakan memori yang sedikit tapi menghasilkan performa yang tinggi. EFL mendukung sistem grafik mode terdahulu dan fitur user-sentris, seperti themes, efek 2D/3D, dan aksesibilitas. Lebih jauh lagi tentang keunggulan dan karakteristik EFL pada Tizen dapat dilihat pada halaman https://developer.tizen.org/development/getting-started/native-application/overview-tizen-ui-development.

Struktur EFL di Tizen

EFL adalah kumpulan library yang menangani sejumlah fungsionalitas mulai dari mengatur daur hidup aplikasi hingga rendering objek grafis. Library-library pada EFL membentuk lapisan-lapisan yang menghubungkan aplikasi dengan lapisan terendah dari sistem.

Ketika kita membuat aplikasi dasar EFL, kita akan menggunakan beberapa library dasar berikut:

• Elementary, adalah library yang ada di lapisan paling atas yang akan sering kita gunakan saat membangun aplikasi. Library ini menyediakan segala keperluan untuk membuat window, layout sederhana dan kompleks, mengatur daur hidup view, dan menambahkan komponen UI lainnya seperti button, box, scroller, dan slider. API library Elementary umumnya diawali oleh prefix elm_.
• EFL Core library, meliputi beberapa library yang tersusun sedemikian rupa seperti pada bagan di atas, diantaranya:
  • Edje, library ini mengatur urusan tema. Kita dapat membuat komponen UI sendiri di luar yang telah disediakan, dan juga memodifikasi tampilan dari tema dasar.
  • Ecore, library ini mengatur main loop pada aplikasi. Main loop adalah salah satu konsep penting yang harus dipahami dalam membangun aplikasi. Main loop adalah saat dimana suatu event ditangani, dan ketika aplikasi berinteraksi dengan pengguna melalui mekanisme callback.
  • Evas, library ini bertanggung jawab mengatur gambar pada konten. Setiap objek grafis adalah objek Evas. Evas menangani status window dengan mengisi canvas dengan objek dan melakukan manipulasi objek. Tidak seperti canvas library lain seperti Cairo, OpenGL dan XRender, Evas bukanlah drawing library, melainkan scene graph library yang memelihara status semua objek. Evas membuat dan memanipulasi objek-objek UI pada aplikasi, dan dan menghapusnya ketika sudah tidak digunakan.
  • Eina, library ini adalah dasar bagi semua library pada EFL. Eina seperti sebuat kotak perkakas yang mengimplementasikan API untuk tipe data dengan teknik yang efisien. Library ini memiliki semua fungsi yang dibutuhkan untuk membuat list dan hash, mengatur shared strings dan open shared library, menangani error dan memory pool.

Struktur Hirarki UI

Pada bagian ini kita masih membahas tentang konsep seperti bagian EFL di atas, karena konsep inilah yang menjadi landasan berpikir kita saat membangun aplikasi dan menuliskan kode program. Seperti halnya komposisi library pada EFL, Kamu juga harus paham Struktur hirarkikal dari sebuah tampilan aplikasi.

Pada bagan di atas, diilustrasikan hirarki komponen yang umum digunakan pada pengembangan aplikasi di tizen.

• Window, adalah komponen UI paling bawah yang menampung objek canvas, untuk merepresentasikan blok memori yang saling berpadu pada layar.
• Conformant, adalah komponen yang menampilkan komponen keyboard virtual, indikator, softkey, dan area clipboard. Kalau kita tidak memerlukan komponen-komponen tersebut, maka kita tidak mesti menggunakan conformant.
• Naviframe, adalah komponen yang digunakan untuk mengatur beberapa tampilan beserta transisi antar tampilannya. Bila aplikasi kita hanya menggunakan satu buah tampilan saja (tidak ada perpindahan halaman) maka kita tidak perlu menggunakan naviframe.
• UI Container, seperti grid, table, dan box, berfungsi untuk mengatur urutan dan susunan tampilan komponen UI di atasnya.
• UI Component, seperti button, background, icon, image, adalah komponen yang menampilkan layout UI.

Komponen UI pada Library Elementary

Library Elementary adalah seperangkat komponen UI yang cepat, mudah digunakan, dikembangkan dan dimodifikasi tampilannya. Ada sekitar 80 komponen UI yang dapat kita gunakan, diantaranya mencakup container dan non-container. Komponen UI ini juga mobile-friendly, seperti misalnya komponen naviframe yang mendukung penggunaan untuk banyak tampilan halaman, komponen entry yang mendukung banyak mode (seperti password, single/multi-line, dan edit/no-edit), dan komponen toolbar yang menampilkan menu saat sebuah item dipilih.

Berikut adalah daftar komponen UI yang dapat kita gunakan untuk membangun sebuah aplikasi native di Tizen. Kamu dapat membacanya sekilas sebagai gambaran dan merujuknya kembali ketika sudah mulai membuat aplikasi.

• Win: component win adalah dasar dari komponen window yang sering digunakan pada aplikasi. Komponen ini memungkinkan kita untuk membuat konten di atasnya, dan komponen ini ditangani langsung oleh window manager.
• Conformant: adalah komponen container yang bertanggung jawab menyediakan ruang bagi indicator, virtual keyboard, dan area softkey.
• Naviframe: adalah komponen yang terdiri dari lapisan-lapisan view. View baru akan disimpan di lapisan paling atas dan hanya lapisan paling atas yang akan ditampilkan.
• Popup: komponen ini menampilkan area popup yang dapan memuat bagian kecil dari konten dan aksi.
• Ctxpopup: adalah kontekstual popup yang dapat menampilkan daftar item.
• Scroller: komponen yang menyokong sebuah objek dan memungkinkan pengguna untuk menggulung (scroll) objek tersebut.
• Grid: pada komponen ini, objek disimpan pada posisi spesifik sepanjang area grid.
• Table: seperti komponen box, tapi dengan dua dimensi.
• Box: adalah komponen container paling sederhana dari EFL, memungkinkan pengembang untukmenyusun komponen UI dalam urutan spesifik horizontal atau vertikal.
• Panes: komponen ini menambahkan mistar yang dapat didrag antara dua area konten. Ukuran area konten akan berubah ketika objek pane didrag.
• Panel: komponen ini adalah objek bergerak yang dapat disisipi objek lain. Maksudnya bergerak adalah dapat melebar atau menyurut ketika tombol di sisinya diklik.
• List: adalah komponen list yang paling sederhana untuk mengatur sejumlah item. Untuk mengatur banyak item, gunakan komponen genlist.
• Genlist: komponen ini menampilkan daftar item yang dapat digulung. Komponen ini dapat menampung banyak item dengan tetap menjaga performa aplikasi dan efisiensi memori (hanya bagian yang muncul saja yang dialokasikan memorinya).
• Toolbar: komponen ini menampilkan daftar item yang dapat digulung. Juga dapat menampilkan menu ketika item dipilih. Hanya satu item yang dapat dipilih dalam satu waktu.
• Multibuttonentry: adalah komponen UI yang memungkinkan pengguna untuk memasukkan sejumlah teks sebagai kumpulan tombol.
• Gengrid: adalah komponen yang menampiklkan objek pada layout grid dan hanya merender bagian yang tampil saja.
• Index: adalah komponen UI yang menyediakan indeks untuk akses cepat ke grup item UI.
• Flipselector: adalah komponen UI yang mempunyai sejumlah teks dan melipat ke atas atau ke bawah untuk mengganti tampilan teksnya.
• Background: adalah komponen latar belakang untuk mengatur dekorasi warna latar solid pada window atau objek container. Komponen ini berlaku seperti komponen image, dengan tambahan properti khusus background, seperti pengaturan mode gambar berulang, rata tengah, dan penuh.
• Datetime: komponen ini dapat menampilkan input tanggal dan waktu.
• Image: komponen ini dapat memuat dan menampilkan gambar dari file atau memori.
• Label: komponen ini menampilkan teks dengan markup seperti HTML yang sederhana.
• Progressbar: komponen ini dapat digunakan untuk menampilkan status progres dari suatu proses.
• Layout: adalah komponen container yang menggunakan file strandar desain Edje dan membungkusnya dengan sangat ramping pada komponen UI.
• Map: adalah komponen UI yang khusus menampilkan peta menggunakan provider OpenStreetMap.
• Calendar: komponen ini menampilkan view bulan.
• Colorselector: komponen ini menyajikan pemilihan warna, memiliki beberapa mode yang masing-masing menampilkan konfigurasi pemilihan warna yang berbeda.
• Entry: adalah komponen berbentuk kotak untuk memasukkan teks.
• Spinner: komponen ini memungkinkan pengguna untuk menaikkan atau menurunkan nilai numerik dengan menggunakan tombol panah.
• Slider: komponen ini memiliki mistar yang dapat didrag untuk memilih nilai dari rentang nilai tertentu.
• Button: adalah komponen tombol sederhana, tersusun dari teks label dan objek ikon, dan memiliki fitur auto-repeat.
• Check: komponen ini memberikan nilai true saat diceklis atau atau false saat tidak diceklis.
• Radio: komponen ini dapat menampilkan satu atau lebih opsi pilihan, tapi hanya satu yang dapat dipilih.

Membuat Tampilan Aplikasi

Sepertinya sudah cukup konsep dasarnya. Sekarang kita akan lihat bagaimana EFL digunakan dalam proses pembuatan aplikasi. Pada project yang sudah kita buat pada langkah awal tutorial ini, akan kita modifikasi agar menjadi sebuah aplikasi counter sederhana. Hasil akhirnya kira-kira seperti gambar di bawah ini:

Review Ulang Kode Dasar

Silakan buka kembali file src/firstnativeapp.c pada IDE, kemudian perhatikan bagian fungsi create_base_gui(), tempat dimana kita membagun UI untuk aplikasi kita. Pada fungsi tersebut sudah ada beberapa baris kode.

/* Window */
/* Create and initialize elm_win.
elm_win is mandatory to manipulate window. */
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(ad->win)) {
int rots[4] = { 0, 90, 180, 270 };
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);

Fungsi elm_win_util_standard_add() digunakan untuk membuat objek window dan menambahkan callback untuk objek window. Salah satu diantara callbacknya menangani event delete,request ketika window hendak ditutup, dan juga event EEXT_CALLBACK_BACK ketika tombol back ditekan.

/* Conformant */
/* Create and initialize elm_conformant.
elm_conformant is mandatory for base gui to have proper size
when indicator or virtual keypad is visible. */
ad->conform = elm_conformant_add(ad->win);
elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->conform);
evas_object_show(ad->conform);

Kita dapat membuat conformant langsung di atas komponen window dengan menggunakan fungsi elm_conformant_add(). Fungsi elm_win_indicator_mode_set() digunakan untuk menampilkan atau menyembunyikan indicator. Fungsi elm_win_indicator_opacity_set() digunakan untuk mengatur opacity dari indicator. Fungsi evas_object_size_hint_weight_set() pada kode di atas digunakan untuk mengatur ukuran conformant horizontal (parameter kedua) dan vertikal (parameter ketiga). Parameter kedua dan ketiga fungsi ini kita isi dengan konstanta EVAS_HINT_EXPAND agar ukuran objek dibuat justify secara horizontal maupun vertikal. Fungsi elm_win_resize_object_add() membuat ukuran conformant agar mengikuti ukuran window. Terakhir fungsi evas_object_show() untuk menampilkan conformant, karena pada dasarnya semua objek dibuat pada kondisi hidden.

/* Label */
/* Create an actual view of the base gui.
Modify this part to change the view. */
ad->label = elm_label_add(ad->conform);
elm_object_text_set(ad->label, "<align=center>Hello Tizen</align>");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_object_content_set(ad->conform, ad->label);

Fungsi elm_label_add() digunakan untuk membuat objek Label. Fungsi elm_object_text_set() digunakan untuk mengeset konten teks pada label. Kita dapat menggunakan tag HTML untuk memberikan style pada teks. Fungsi elm_object_content_set() digunakan untuk menyematkan objek label pada conformant.

Menambahkan Objek Naviframe

Kita akan menghapus objek label yang sudah ada dan akan membuat yang baru nanti untuk menampilkan angka counternya. Sekarang kita akan membuat objek Naviframe. Meskipun aplikasi yang kita buat hanya menggunakan satu tampilan saja, saya akan tetap menunjukkan bagaimana menambahkan objek naviframe pada aplikasi ini.

/* Naviframe */
 Evas_Object *naviframe = elm_naviframe_add(ad->conform);
 elm_object_content_set(ad->conform, naviframe);

Fungsi elm_naviframe_add() digunakan untuk membuat objek naviframe pada parent, dalam kasus kode di atas parentnya adalah conformant. Fungsi elm_object_content_set() digunakan untuk menjadikan naviframe sebagai konten dari conformant.

Menambahkan Objek Box

Container box kita gunakan untuk menampung objek UI lainnya secara vertikal atau horizontal. Dalam kasus project kita, kita akan menampilkan label dan button secara vertikal.

/* Box Component */
Evas_Object *box = elm_box_add(naviframe);
elm_box_horizontal_set(box, EINA_FALSE);
evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
elm_naviframe_item_push(naviframe, "Counter", NULL, NULL, box, NULL);
evas_object_show(box);

Fungsi elm_box_add() digunakan untuk membuat box baru pada parent. Fungsi elm_box_horizontal_set() digunakan untuk mengeset tampilan box secara horizontal dengan mengisi parameter kedua dengan EINA_FALSE. Fungsi evas_object_size_hint_align_set() digunakan untuk mengatur perataan objek. Parameter kedua dan ketiga kita isi dengan konstanta EVAS_HINT_FILL agar objek rata kiri-kanan dan atas-bawah. Fungsi elm_naviframe_item_push() digunakan untuk menambahkan box ke dalam naviframe, dengan judul “Counter”.

Menambahkan Komponen Label dan Button

Sekarang kita tambahkan komponen Label untuk menampilkan jumlah counter, dan komponen Button untuk menerima event click (atau tap pada layar sentuh) untuk menambahkan counter.

/* Label */
ad->label = elm_label_add(box);
elm_object_text_set(ad->label, "<align=center><color=#ffffffff><font_size=220><br>0</font_size></color></align>");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(ad->label, EVAS_HINT_FILL, EVAS_HINT_FILL);
elm_box_pack_end(box, ad->label);
evas_object_show(ad->label);
/* Button */
Evas_Object *button = elm_button_add(box);
elm_object_text_set(button, "Count");
evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
elm_box_pack_end(box, button);
evas_object_show(button);

Fungsi elm_label_add() dan elm_button_add() masing-masing digunakan untuk membuat objek label dan button pada objek parent. Fungsi elm_object_text_set() pada kedua objek digunakan untuk menambahkan caption teks. Fungsi elm_box_pack_end() digunakan untuk memasukkan objek ke dalam container box.

Perhatikan perbedaan deklarasi objek label dan button. Objek button dideklarasikan dengan tipe data Evas_Object sedangkan objek label tidak. Sebenarnya objek label pun dideklarasikan dengan tipe data Evas_Object di bagian atas kode pada struktur data aplikasi. Hal ini dimaksudkan supaya kita bisa mengedit objek label di luar fungsi create_base_gui(). Sedangkan objek button hanya berlaku pada lokal fungsi tersebut. Caption pada objek label akan kita update setiap kali nilai counter bertambah.

Sekarang coba jalankan aplikasi di emulator. Mestinya tampilannya sudah sesuai dengan hasil akhir.

Menambahkan Callback untuk Event Tombol Ditekan

Sampai sini kita sudah mempunyai tampilan aplikasi saja. Adapun fungsi aplikasinya belum berjalan karena kita belum membuat callback untuk menangani event ketika tombol ditekan.

Pertama-tama deklarasikan variable counter dengan tipe data integer di bagian atas kode.

#include "firstnativeapp.h"

// buat variabel counter
int counter;

Kemudian registrasikan callback pada objek button seperti pada kode berikut di baris kedua dari bawah.

/* Button */
Evas_Object *button = elm_button_add(box);
elm_object_text_set(button, "Count");
evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_smart_callback_add(button, "clicked", button_clicked_cb, ad);
elm_box_pack_end(box, button);

Terakhir buat fungsi callback untuk menangani penambahan counter saat tombol diklik.

void button_clicked_cb(void *data, Evas_Object *obj, void *event_info) {
  appdata_s *ad = data;
  Eina_Strbuf *str;

  counter += 1;

  str = eina_strbuf_new();
  eina_strbuf_append_printf(str,   "<align=center><color=#ffffffff><font_size=220><br>%d</font_size></color></align>",
    counter);
  elm_object_text_set(ad->label, eina_strbuf_string_get(str));
  eina_strbuf_free(str);
}

Pada fungsi di atas, kita mengeset ulang teks pada label menjadi teks dengan format yang sama dengan nilai yang sudah ditambah satu dari nilai sebelumnya. Nilai sebelumnya disimpan di dalam variabel counter. Yang menjadi tantangan adalah proses konkatenansi string di C yang lumayan repot. Untungnya EFL sudah menyediakan API untuk memproses append string sehingga proses penulisan kodenya menjadi lebih sederhana.

Baiklah. Sekarang kodenya sudah lengkap. Silakan coba build ulang dan jalankan di emulator dan device. Selamat, aplikasi native Tizen pertamamu sudah selesai!

Referensi: https://developer.tizen.org/development/getting-started/native-application/creating-your-first-tizen-mobile-native-application/building-simple-ui https://developer.tizen.org/development/getting-started/native-application/overview-tizen-ui-development https://srin.gitbooks.io/dasar-tizen/content/chapter2/helloworld.html https://developer.tizen.org/sites/default/files/documentation/guide_to_developing_tizen_native_application_en_2.pdf https://www.youtube.com/watch?v=m9sx7AZQKtQ