Modul 2
MENGENAL USER INTERFACE
Dalam modul ini, kita akan membahas penggunaan macam-macam field sebagai user
interface. Topik di sini merupakan hal-hal dasar karena Framework BlackBerry akan
melakukan banyak hal secara otomatis untuk kita. Dalam modul ini, kita fokus dengan
macam-macam tipe field basic yang disediakan oleh Framework BlackBerry namun
sebelumnya kita akan mengenal terlebih dahulu seperti apa langkah-langkah membuat project
dalam Eclipse BlackBerry.
2.1 Membuat ProjectLangkah pertama dalam membuat suatu aplikasi BlackBerry pada IDE (Integrated
Development Environment) Eclipce adalah membuat project. Project di sini merupakan
sebuah paket yang terdiri dari folder dan file yang akan digunakan dalam program aplikasi.
Berikut langkah-langkah untuk membuat project dalam Eclipse:
1. Jalankan program Eclipse BlackBerry
2. Klik ikon new lalu pilih BlackBerry Project
Gambar 2.1 Membuat BlackBerry Project
12
3. Berikan nama project BackupRestore, pilih target JRE BlackBerry JRE 6.0.0, setelah
itu klik next tiga kali
Gambar 2.2 Memberi Nama Project
4. Isi kolom package name (nama paket aplikasi yang dibuat), apllication name (nama
kelas utama aplikasi) dan Screen Class Name (nama kelas layar utama) dan Screen
13
Title (judul aplikasi yang muncul di layar utama), Anda dapat memberi nama sesuai
dengan gambar berikut atau memilih nama lain. Setelah itu klik tombol finish
Gambar 2.3 Memberikan Detail Properti Project
5. Program akan membuat folder "Modul2" secara otomatis beserta sub folder di
dalamnya.
6. Terdapat juga file “BlackBerry_App_Descriptor.xml” yang merupakan isi deskripsi
dari aplikasi yang dibuat, di sini developer dapat menentukan judul, deskripsi, nama
vendor, ikon aplikasi serta beberapa pengaturan lain.
14
Gambar 2.4 Tampilan Properti Project
15
2.2 LabelFieldSebuah LabelField merupakan tipe field yang sangat sederhana. Sebuah LabelField
menampilkan teks secara read-only, yang hanya pas untuk label. LabelField tidak menerima
fokus, sehingga jika pengguna tidak dapat mengklik LabelField atau hanya scroll melewati
LabelField. LabelField juga sering kali ditemukan pada bagian header aplikasi atau sebagai
judul aplikasi.
Cara membuat LabelField:
Edit file layar utama (UiScreen.java) seperti berikut
package modul2package;
import net.rim.device.api.ui.component.LabelField;import net.rim.device.api.ui.container.MainScreen;
public final class UiScreen extends MainScreen
{
LabelField label; public UiScreen()
{
label = new LabelField ("Hello World"); setTitle("User Interface");
add(label); }
}
Penjelasan kode program sebagai berikut, pertama kita harus deklarasi variabel LabelField
dengan nama label, deklarasi harus tersebut ada dalam final class bukan di dalam UiScreen()
selanjutnya kita tugaskan/assign variabel tersebut untuk menampung data/nilai pada contoh
ini data yang diberikan adalah kalimat string berupa "LabelField". Terakhir jika variabel
sudah diberikan data/nilai maka kita memanggil variabel tersebut dengan perintah add(nama
variabel) untuk memunculkan variabel yang kita inginkan.
Setelah menuliskan kode Anda dapat menjalankannya dengan cara mengklik folder modul2
pada project explorer lalu klik ikon run on simulator, tunggu beberapa saat sampai simulator
selesai loading.
16
Gambar 2.5 Menjalankan aplikasi pada simulator
Saat pertama kali menjalankan simulator, scroll ke bawah dengan menekan tombol panah
bawah pada keyboard lalu klik ok. Selanjutnya scroll lagi ke bawah dengan menggunakan
tombol navigasi pada keyboard lalu pilih ikon aplikasi user interface lalu tekan enter.
17
Gambar 2.6 Tampilan program saat dijalankan pada simulator
18
2.3 SeparatorField
SeparatorField merupakan salah satu user interface paling dasar yang tersedia. Kegunaannya
adalah untuk menampilkan garis horizontal kecil di layar untuk memisahkan satu bidang dari
yang lain. Anda mungkin sering lihat dalam banyak aplikasi stAndar, seperti di layar Tulis
Pesan antara subjek dan tubuh pesan. SeparatorField juga digunakan pada menu untuk menu
grup bersama. SeparatorField tidak melakukan apa pun kecuali hanya menggambar garis,
bahkan tidak akan menerima fokus dan tidak dapat dipilih.
Untuk membuat SeparatorField Anda hanya tinggal menambahkan kode berikut
add(new SeparatorField());
2.4 BitmapField
BitmapField adalah user interface yang digunakan untuk menampilkan gambar. Anda dapat
menggunakan gambar Anda sendiri atau salah satu dari gambar yang terdapat dalam
resource. BlackBerry mendukung gambar berformat JPG, GIF, dan PNG. Di antara kesemuan
itu tipe file PNG adalah pilihan yang terbaik, karena biasanya jauh lebih kecil daripada
format lainnya. Berikut adalah cara memasukkan BitmapField:
Cara membuat BitmapField
Edit file layar utama (UiScreen.java) seperti berikutpackage modul2package;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.MainScreen;
public final class UiScreen extends MainScreen
{
LabelField label;
public UiScreen()
{
Bitmap gmb = Bitmap.getBitmapResource("logo.png");
label = new LabelField ("Hello World");
19
setTitle("User Interface");
add(label);
add(new SeparatorField());
add(new BitmapField(gmb));
}
}
Sebelum menambahkan Anda buat dahulu gambar yang ingin ditampilkan, buatlah gambar
kecil berukuran sekitar 32x32 px berformat PNG. Setelah itu kita memasukkan gambar
tersebut ke dalam paket di dalam folder img. Untuk melakukannya klik tanda panah pada
folder modul2, lalu klik lagi tanda panah pada folder res, lalu highlight img. Klik kanan pada
folder img lalu pilih new, other, file lalu klik next. Klik tombol advanced lalu beri tanda
centang pada Link to file in the system. Selebihnya Anda bisa browse file gambar yang ingin
ditambahkan setelah itu klik finish.
20
Gambar 2.7 Menambahkan file gambar
Langkah selanjutnya kita memanggil nama file gambar kita maksudkan seperti pada contoh
di atas kita menamai gambar dengan nama logo.png maka nama yang dipanggil juga sama,
lalu menambahkannya melalui perintah add()
21
Gambar 2.8 Tampilan program saat dijalankan pada simulator
22
2.5 ChoiceField
ChoiceField adalah user interface dengan daftar pilihan dropdown. Anda tidak dapat
menggunakan ChoiceField secara langsung, melainkan Anda harus menggunakan salah satu
dari dua khusus yang diturunkan kelas ini yaitu NumericChoiceField atau ObjectChoiceField.
Menggunakan ChoiceField memungkinkan pengguna untuk memilih angka tertentu dari
sebuah daftar pilihan angka-angka yang telah ditentukan. Sedangkan ObjectChoiceField
memungkinkan pengguna untuk memilih pilahan berupa karakter/string yang sudah
ditentukan sebelumnya.
String[] choices = {"Choice1","Choice2","Choice3"};
ObjectChoiceField objChoice = new ObjectChoiceField(
"Object Choice Field", choices);
add(objChoice);
// cara kedua
ObjectChoiceField objChoice2 = new ObjectChoiceField();
objChoice2.setLabel("Another way");
objChoice2.setChoices(choices);
add(objChoice2);
Dalam contoh ini, saya menunjukkan bagaimana membuat ChoiceFields dalam dua cara yang
berbeda. Keduanya menggunakan array statis. Contoh pertama menempatkan semua
informasi penting untuk menyiapkan field dalam constructor. Cara ini lebih baik digunakan
ketika Anda tahu pasti apa yang perlu masuk ke daftar, tapi kadang-kadang tidak demikian.
Dalam kasus ini Anda dapat membuat daftar dengan cepat, dan kemudian menambahkan
mereka ke ObjectChoiceField dengan menggunakan metode setChoices seperti pada cara
yang kedua.
NumericChoiceField numChoice = new NumericChoiceField(
"Numeric Choice Field", 10,20,2);
23
add(numChoice);
Perbedaan antara NumericChoiceField dan ObjectChoiceField hanya sedikit, tetapi
menggunakan objek yang tepat untuk situasi yang tepat dapat membuat pekerjaan Anda lebih
mudah. Poin penting pertama untuk diperhatikan adalah bahwa rentang dan nilai-nilai
langkah diberikan dalam constructor. Sebenarnya, keduanya harus diberikan dalam
constructor. Berbeda dengan ObjectChoiceField, tidak ada metode untuk mengatur range
nilai dan penambahan (increment) nilai ketika field dibuat.
2.6 GaugeField
Sebuah GaugeField merupakan sebuah bar yang dapat ditentukan nilainya. Secara default,
bersifat tidak dapat diedit tetapi dapat diedit jika beberapa fungsi yang ditambahkan. Oleh
karena itu, apa yang dilakukan dan bagaimana hal itu digunakan tergantung pada apakah field
ini dapat diedit atau tidak. Adapun cara untuk menambahkan GaugeField adalah sebagai
berikut:
// GaugeField normal
GaugeField progress = new GaugeField("Normal", 0, 100, 60,
Field.FOCUSABLE);
add(progress);
// GaugeField yang bisa diubah nilainya atau diedit
GaugeField gaugeField = new GaugeField("Editable", 0, 10, 5,
Field.EDITABLE|Field.FOCUSABLE);
add(gaugeField);
2.7 DateField
DateField dapat digunakan untuk menampilkan Tanggal dan Waktu. Dalam DateField
terdapat kelas khusus untuk membuat tanggal dan atau waktu mudah bagi para developer
24
dengan menggunakan teknik encapsulasasi beberapa pilihan field sehingga menjadi satu
DateField. Berikut contoh penggunaan DateField untuk Eclipse BlackBerry:
// Menampilkan tanggal dan waktu
Date now = new Date();
DateField datetimeField = new DateField("DateTime Field",
now.getTime(),
DateFormat.getInstance( DateFormat.DATETIME_DEFAULT));
add(datetimeField);
//Menampilkan tanggal saja
DateField dateField = new DateField();
dateField.setLabel("Date Field");
dateField.setDate(now);
dateField.setFormat(DateFormat.getInstance(
DateFormat.DATE_DEFAULT));
add(dateField);
//Hanya menampilkan waktu
DateField timeField = new DateField("Time Field", now.getTime(),
DateFormat.getInstance(DateFormat.TIME_
DEFAULT));
add(timeField);
2.8 Checkboxfield
CheckboxField adalah salah satu bidang dasar yang hampir tidak perlu banyak penjelasan
lagi karena hampir semua bahasa pemrograman menggunakan checkbox. CheckboxField
mengikuti banyak konvensi standar dalam sistem lain, seperti HTML dan Windows, dengan
menempatkan kotak centang di sisi kiri layar dengan label di sebelah kanan. Sebuah kotak
centang yang digunakan untuk mewakili nilai Boolean atau sederhana on/off atau ya/tidak.
25
Berikut adalah contoh penggunaan Checkboxfield:
CheckboxField chkField = new CheckboxField("Checkbox",false);
add(chkField);
// penempatan di sisi kanan
CheckboxField chkField2 = new CheckboxField("FIELD_RIGHT", true,
Field.FIELD_RIGHT);
add(chkField2);
2.9 RadioButtonField
RadioButtonField mirip dengan checkbox. Hanya yang berbeda dengan Checkboxfiled
RadioButton harus digunakan secara berkelompok dalam satu grup yang biasa dikenal
dengan RadioButtonGroup. Dalam sebuah RadioButtonGroup terdapat dua atau lebih
RadioButton, di sini pengguna harus memilih salah satu di antaranya (tidak bisa memilih
lebih dari satu). Berikut contoh penggunaan RadioButtonField:
RadioButtonGroup rdoGroup = new RadioButtonGroup();
RadioButtonField rdo1 = new RadioButtonField("Radio Field 1");
RadioButtonField rdo2 = new RadioButtonField("Radio Field 2");
RadioButtonField rdo3 = new RadioButtonField("Radio Field 3");
rdoGroup.add(rdo1);
rdoGroup.add(rdo2);
rdoGroup.add(rdo3);
add(rdo3);
add(rdo2);
add(rdo1);
rdoGroup.setSelectedIndex(0);
26
Gambar 2.9 Tampilan program saat dijalankan pada simulator
2.10 EditField
EditField merupakan teksbox yang digunakan menyisipkan input berupa teks. EditField
merupakan salah satu field yang sangat lazim digunakan. EditField dapat menerima fokus
dan jika pengguna menekan tombol menu pada menu BlackBerry maka akan secara otomatis
menampilkan menu seperti Cut, Copy dan Paste. Berikut adalah contoh penggunaannya:
EditField edit = new EditField("Edit: ","");
edit.setMaxSize(25);
add(edit);
2.11 PasswordEditField
Seperti namanya, PasswordEditField digunakan setiap kali Anda ingin mengumpulkan data
sensitif, seperti password. Berbeda dengan tipe field lain, kelas ini memungkinkan pengguna
27
untuk memasukkan karakter tetapi hanya menampilkan tanda bintang di layar. Data
sesungguhnya masih di dalam field dan Anda dapat mengaksesnya, tetapi disembunyikan
oleh tanda bintang. Selain itu, operasi copy dinonaktifkan sehingga data sensitif tidak dapat
disalin. Jika Anda sebelumnya disalin beberapa teks ke clipboard, operasi Paste masih dapat
digunakan. Berikut contoh penggunaan PasswordEditField:
PasswordEditField pass = new PasswordEditField("Password:","");
add(pass);
2.12 EmailAddressEditField
EmailAddressEditField serupa dengan editfield hanya saja dapat menyaring dan memvalidasi
karakter yang benar untuk alamat email. Jika pengguna menekan tombol spasi pada
EmailAddressEditField maka yang akan muncul adalah simbol @. Berikut contoh
penggunaannya:
EmailAddressEditField addr = new EmailAddressEditField("Email: ","");
add(addr);
2.13 ActiveAutoTextEditField
ActiveAutoTextEditField merupakan edit field yang memungkinkan agar pengguna untuk
menyorot tulisan yang ada di dalamnya. Data yang secara otomatis dibuatkan highlight
adalah alamat email, alamat website dan nomor telepon. Pengguna nantinya dapat membuka
aplikasi terkait saat mengklik alamat website misalkan maka akan langsung membuka web
browser. Berikut cara menggunakan ActiveAutoTextEditField:
ActiveAutoTextEditField activeauto = new
ActiveAutoTextEditField("ActiveAuto:","silakan kunjungi www.google.com");
add(activeauto);
28
Gambar 2.10 Tampilan program saat dijalankan pada simulator
2.14 AutoEditText
AutoEditTextField menggunakan database sederhana untuk mengonversi salah satu karakter
ke karakter lain. AutoEditTextField hanya mengenal bahasa inggris namun field ini bukanlah
spell checker. Walaupun demikian, kesalahan ketik yang umum seperti "teh" akan dikoreksi
menjadi "the" selain itu Autoedittextfield juga dapat secara otomatis membuatkan huruf
kapital di setiap kata atau memperbaiki format tulisan. Namun, kata seperti "ill" tidak secara
otomatis berubah menjadi "i'll" karena "ill" itu sendiri sebuah kata. Berikut contoh
penggunaan AutoEditTextField:
AutoTextEditField auto = new AutoTextEditField("Auto: ", "");
add(auto);
29
AutoTextEditField autoNoCap = new AutoTextEditField("AutoNoCap: ","", 25,
AutoTextEditField.AUTOCAP_OFF);
add(autoNoCap);
AutoTextEditField autoNoPunc = new AutoTextEditField("AutoNoPunc: ",
"",25,AutoTextEditField.AUTOPERIOD_OFF);
add(autoNoPunc);
2.15 RichTextField
Dinamakan RichTextField karena mampu menampilkan banyak tipe format teks yang tidak
dapat dilakukan tipe field lainnya. Fitur khususnya adalah untuk menampilkan teks dalam
font berbeda dan warna yang berbeda. Tipe field ini bersifat Read Only yang berarti hanya
dapat menampilkan tulisan tanpa bisa diedit pengguna. Berikut contoh penggunaan
RichTextField:
Font someFont;
try{someFont = FontFamily.forName("BBClarity").getFont(FontFamily.SCALABLE_FONT,10); }catch (ClassNotFoundException e){someFont = Font.getDefault(); }Font fonts[] = new Font[5]; fonts[0] = Font.getDefault(); fonts[1] = Font.getDefault().derive(Font.BOLD); fonts[2] = Font.getDefault().derive(Font.UNDERLINED); fonts[3] = Font.getDefault().derive( Font.ITALIC); fonts[4] = someFont; byte attributes[] = new byte[8];int offsets[] = new int[9]; offsets[0] = 0; attributes[0] = 0; offsets[1] = 2; attributes[1] = 1; offsets[2] = 15; attributes[2] = 0; offsets[3] = 20; attributes[3] = 3; offsets[4] = 27; attributes[4] = 0; offsets[5] = 35; attributes[5] = 2; offsets[6] = 40;
30
attributes[6] = 4; offsets[7] = 50;
attributes[7] = 0; offsets[8] = 57; RichTextField rich = new RichTextField(); rich.setText("A RichTextField can display text in many different fonts.", offsets,attributes,fonts); add(rich);
Gambar 2.11 Tampilan program saat dijalankan pada simulator
31
32
