BAB VI MODUL IV

BAB VI

MODUL IV

Bab VI ini berisi tentang penerapan modul penggunaan Spinner,

CheckBox, dan Radio Button dalam pemrogram mobile android. Berikut ini

pembahasan mengenai teori-teori penggunaan Spinner, CheckBox, dan Radio

Button dalam pemrogram mobile android.

6.1 Tujuan Praktikum

Dalam melakukan sebuah praktikum, tentunya memiliki tujuan yang

ingin diperoleh. Adapun tujuan dari praktikum pemrograman mobile pada modul

IV tetntang penggunaan Spinner, CheckBox, dan Radio Button adalah sebagai

berikut :

1. Mengetahui dan memahami konsep penggunaan Spinner, CheckBox, dan

Radio Button dalam aplikasi android.

2. Mengetahui dan memahami cara-cara pengimplementasian Spinner,

CheckBox, dan Radio Button dalam pemrograman mobile android.

3. Mampu menggunakan Spinner, CheckBox, dan Radio Button dalam

aplikasi android.

6.2 Tinjauan Pustaka

Adapun tinjauan pustaka yang digunakan pada praktikum integrasi

migrasi sistem untuk modul pengelolaan utang piutang yakni sebagai berikut.

6.2.1 Spinner

RadioButtons dan CheckButtons cocok digunakan dalam pilihan suatu set

yang kecil. Jika pilihan sangat banyak maka dapat menggunakan widget lain

seperti: listboxes, comboboxes, drop-down lists, picture galleries, dsb. Android

memiliki framework data adapter yang memberikan interface umum untuk

pilihan (selection) baik itu berupa static array maupun isi database. Selection

views, merupakan widget untuk menampilkan daftar pilihan yang menggunakan

adapter sebagai pengisi pilihan. Adapter yang mudah digunakan adalah

ArrayAdapter, seperti contoh berikut :

Gambar 6.1 Kode program penggunaan ArrayAdapter

Dalam Android spinner ekuivalen dengan drop down selector. Spinner

memiliki fungsi yang sama dengan ListView tetapi memiliki ruang yang lebih

kecil. Sama seperti ListView, menggunakan adapter untuk menghubungkan data

ke child views, yaitu dengan setAdapter( ). Penambahan listener pada object untuk

menangkap pilihan pada list dengan setOnItemSelectedListener( ). Menggunakan

fungsi setDropDownViewResource( ) untuk mengisi resource ID multi-line

selection list view.

Contoh penggunaan spinner dengan menggunakan layout dalam bentuk

simple list adalah seperti gambar 6.1 berikut.

Gambar 6.2 Penggunaan spinner dengan layout dalam bentuk simple list

Pada contoh yang ditunjukkan sesuai gambar 6.1 menggunakan XML

Layout dengan kode program seperti gambar 6.3 di bawah ini.

Gambar 6.3 XML Layout untuk contoh sesuai gambar 6.1

Dari XML Layout yang dibuat menggunakan kode program 6.2, diolah

menggunakan kode program seperti gambar 6.4 di bawah ini yang menggunakan

bahasa pemrograman java yang berisi activity aplikasi.

Gambar 6.4 Activity aplikasi penggunaan spinner

6.2.2 CheckBox

Checkbox merupakan widget dari salah satu tipe Button yang mempunyai

dua status yaitu checked dan unchecked yang memberi pilihan check jika

CheckBox tersebut dibuat group maka bisa dipilih atau bisa juga tidak dan bersifat

multiselect. Contoh script main.xml yang menggunakan CheckBox, seperti kode

program pada gambar 6.5 berikut.

Gambar 6.5 Script mail.xml penggunaan Checkbox

Untuk source code java yang berisi event habler untuk contoh penggunaan

checkbox adalah seperti kode program pada gambar 6.6 di bawah ini.

Gambar 6.6 Source code java untuk event handler contoh penggunaan checkbox

Pada fungsi onClick, mengandung maksud, jika ChekBox01 berupa

ckCream dipilih, maka string yang ditampilkan adalah “cream”. Jika CheckBox

berupa Sugar dipilih, maka ditampung string berupa “sugar”. Kemudian string

tesebut ditampilkan dalam suatu pesan cepat melaui Toast. Tampilan contoh

penggunaan penggunaan checkbox ditunjukkan gambar 6.7.

Gambar 6.7 Tampilan contoh penggunaan checkbox

6.2.3 Radio Button

Radio button adalah widget yang digunakan pada form bersifat selected

one atau hanya dipilih salah satu dari beberapa radio button. Seperti contoh

berikut ini.

Gambar 6.8 Contoh radion button

Untuk contoh di atas pada gambar 6.3, digunakan kumpulan RadioButton

yaitu RadioGroup dengan pilihan tiga item. Penggunaan RadioGroup hanya bisa

memilih satu saja sedangkan jika tidak di-group maka dapat memilih lebih dari

satu. Contoh script main.xml yang menggunakan Radio Button, seperti kode

program pada gambar 6.9 berikut

Gambar 6.9 Script main.xml contoh penggunaan radio button

Untuk source code java yang berisi event handler untuk contoh

penggunaan checkbox adalah seperti kode program pada gambar 6.10 di bawah

ini.

Gambar 6.10 Source code java untuk event handler contoh penggunaan radio button

Dari contoh penggunaan ini, Toast untuk menampilkan pesan singkat

seperti pada gambar 6.11. Pesan–pesan tersebut akan tampil jika memilih salah

satu radio button atau checkbutton.

Gambar 6.11 Tampilan contoh penggunaan radion button hasil dari kode program 6.6 dan 6.7

6.3 Analisa dan Pembahasan

Pada praktikum ini membahas tentang penggunaan Spinner, CheckBox,

dan Radio button. Dalam hal ini aplikasi yang dibuat adalah pengisian biodata,

yang dapat menampilkan informasi.user name, gender, hoby, dan job pengguna

sesuai informasi yang telah dimasukkan.

6.3.1 Penggunaan Spinner

Dalam pembahasan spinner kali ini, spinner digunakan sebagai selected

pemilihan cepat dengan item yang jumlahnnya banyak untuk memilih job atau

pekerjaan pengguna.

Kode Progam 6.1 Script layout xml untu menampilkan snipper

Script diatas digunakan untuk menampilkan widget spinner, di Android

Layout XML. Kemudian unutk membuat String array di strings.xml seperti kode

program 6.2 berikut :

Kode Progam 6.2 Script string.xml untuk String array dari snipper

String array digunakan sebagai item dari spinner. Dalam hal ini spinner

memiliki empat item pilihan, yaitu student, employee, businessman, dan idleness

Untuk melakukan pengisian item ke dalam spinner digunakanlah ArrayAdapter

dengan kode program 6.3 berikut.

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/user_hoby_layout"

android:id="@+id/user_job_layout"

android:orientation="horizontal">

<TextView android:layout_width="125dp"


android:textSize="18sp"

android:text="@string/user_job"

android:id="@+id/user_job_text" />

<TextView android:layout_width="wrap_content"



android:text="@string/separator"

android:id="@+id/user_job_separator" />

<Spinner

android:id="@+id/user_job"


android:layout_height="wrap_content" />

</LinearLayout>

<string-array name="job">

<item></item>

<item>Student</item>

<item>Employee</item>

<item>Businessman</item>

<item>Idleness</item>

</string-array>

Kode Progam 6.3 Handler untuk mengisi item spinner

6.3.2 Penggunaan CheckBox

Checkbox digunakan pada form yang bersifat check dan bersifat

multiselect. Oleh karena itu dalam hal ini checkbox cocok digunakan untuk

menampung informasi hoby pengguna, dimana terdapat kemungkinan pengguna

memiliki lebih dari satu hoby.

Kode Progam 6.4 Script layout xml untu menampilkan checkbox

Spinner jobSpinner = (Spinner) findViewById(R.id.user_job);

ArrayAdapter jobAdapater =

ArrayAdapter.createFromResource(this, R.array.job,

android.R.layout. simple_spinner_item);

jobAdapater.setDropDownViewResource(android.R.layout.simple_spi

nner_dropdown_item);

jobSpinner.setAdapter(jobAdapater);

<CheckBox android:id="@+id/user_hoby_culinary"

android:layout_width="100dp"


android:layout_gravity="left"

android:gravity="left"

android:text="@string/user_hoby_culinary"

android:onClick="onCheckboxClicked"/>

<CheckBox android:id="@+id/user_hoby_music"




android:layout_toRightOf="@id/user_hoby_culinary"


android:text="@string/user_hoby_music"


<CheckBox android:id="@+id/user_hoby_sport"




android:layout_below="@id/user_hoby_culinary"


android:text="@string/user_hoby_sport"


<CheckBox android:id="@+id/user_hoby_other"




android:layout_below="@id/user_hoby_music"

android:layout_toRightOf="@id/user_hoby_sport"


android:text="@string/user_hoby_other"


Kode program 6.4 diatas digunakan untuk menampilkan checkbox di

Android Layout XML. Pada checkbox ini terdapat empat pilihan item yang dapat

di-check, yaitu culinary, music, sport, dan other. Agar checkbox dapat bekerja

untuk menampung informasi saat terdapat item yang di-check maka diperlukan

handler. Kode program 6.5 di bawah ini berisi handler untuk checkbox.

Kode Progam 6.5 Handler untuk checkbox

public void onCheckboxClicked(View v) {

boolean checked = ((CheckBox) v).isChecked();

switch (v.getId()) {

case R.id.user_hoby_culinary:

if(checked) {

if(hoby_result.length() > 0){

hoby_result.append(", Culinary");

} else{

hoby_result.append("Culinary");

}

}

break;

case R.id.user_hoby_music:

if(checked) {


hoby_result.append(", Music");

} else{

hoby_result.append("Music");

}

}

break;

case R.id.user_hoby_sport:

if(checked) {


hoby_result.append(", Sport");

} else{

hoby_result.append("Sport");

}

}

break;

case R.id.user_hoby_other:

if(checked) {


hoby_result.append(", Other");

} else{

hoby_result.append("Other");

}

}

break;

}

hoby = hoby_result.toString();

}

6.3.3 Radio Button

Radio button merupakan widget yang bersifat selected one atau hanya

dipilih salah satu dari beberapa radio button. Jadi sangat cocok digunakan untuk

menampung informasi tetang gender atau jenis kelamin pengguna.

Kode Progam 6.6 Script layout xml untu menampilkan radio button

Pada kode program 6.6 di atas terdapat dua pilihan radio button untuk

gender, yaitu male dan female. Supaya bisa bekerja menampung informasi saat

salah satu pilihan radio button dipilih perlu dibuat handle pada kode program java

seperti kode prorgram 6.7 berikut.

Kode Progam 6.7 Handler untuk radio button

6.3.3 Kode Program Secara Keseluruhan

Dengan menggabungkan kode program penggunaan Spinner, CheckBox,

dan Radio Button di atas, terbentuklah aplikasi pengisian biodata. Pada kode

program 6.8 berikut merupakan kode program untuk layout xml aplikasi.

<RadioGroup

xmlns:android="http://schemas.android.com/apk/res/android"




<RadioButton android:id="@+id/user_gender_male"



android:text="@string/user_gender_male"

android:onClick="onRadioButtonClicked"/>

<RadioButton android:id="@+id/user_gender_female"



android:text="@string/user_gender_female"


</RadioGroup>

public void onRadioButtonClicked(View v) {

boolean checked = ((RadioButton) v).isChecked();

switch(v.getId()) {

case R.id.user_gender_male:

if(checked) gender = "Male";

break;

case R.id.user_gender_female:

if(checked) gender = "Female";

break;

}

}

<RelativeLayout


xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".MainActivity">

<LinearLayout



android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:id="@+id/user_name_layout"

android:orientation="horizontal"

android:paddingBottom="5dp"

android:paddingTop="5dp">




android:text="@string/user_name"

android:id="@+id/user_name_text" />





android:id="@+id/user_name_separator" />

<EditText android:id="@+id/user_name"

android:layout_width="wrap_content"



android:background="@android:color/transparent"

android:layout_marginLeft="5dp"

android:singleLine="true"

android:hint="@string/user_name"

android:inputType="text" />

</LinearLayout>

<LinearLayout



android:layout_below="@id/user_name_layout"

android:id="@+id/user_gender_layout"





android:text="@string/user_gender"

android:id="@+id/user_gender_text" />





android:id="@+id/user_gender_separator" />

<RadioGroup





<RadioButton android:id="@+id/user_gender_male"



android:text="@string/user_gender_male"


<RadioButton android:id="@+id/user_gender_female"



android:text="@string/user_gender_female"


</RadioGroup>

</LinearLayout>

<LinearLayout



android:layout_below="@id/user_gender_layout"

android:id="@+id/user_hoby_layout"





android:text="@string/user_hoby"

android:id="@+id/user_hoby_text" />





android:id="@+id/user_hoby_separator" />

<RelativeLayout



android:id="@+id/user_hoby_checkbox"



android:textAlignment="gravity">

<CheckBox android:id="@+id/user_hoby_culinary"





android:text="@string/user_hoby_culinary"


<CheckBox android:id="@+id/user_hoby_music"




android:layout_toRightOf="@id/user_hoby_culinary"


android:text="@string/user_hoby_music"


<CheckBox android:id="@+id/user_hoby_sport"




android:layout_below="@id/user_hoby_culinary"


android:text="@string/user_hoby_sport"


<CheckBox android:id="@+id/user_hoby_other"




android:layout_below="@id/user_hoby_music"

android:layout_toRightOf="@id/user_hoby_sport"


android:text="@string/user_hoby_other"


</RelativeLayout>

</LinearLayout>

<LinearLayout



android:layout_below="@id/user_hoby_layout"

android:id="@+id/user_job_layout"





android:text="@string/user_job"

android:id="@+id/user_job_text" />





android:id="@+id/user_job_separator" />

<Spinner

android:id="@+id/user_job"


android:layout_height="wrap_content" />

</LinearLayout>

<Button



android:layout_below="@id/user_job_layout"

android:text="@string/button_set"

android:id="@+id/button_set"

android:layout_centerVertical="true"

android:layout_centerHorizontal="true"

android:layout_marginTop="10dp" />

<TextView



android:id="@+id/biodata_set"

android:layout_below="@+id/button_set"

android:layout_centerHorizontal="true"

android:layout_marginTop="5dp"

android:hint="@string/user_biodata"

android:textSize="18sp" />

</RelativeLayout>

Kode Progam 6.8 Layout xml untuk tampilan utama aplikasi

Dengan menggunakan layout xml pada kode program 6.8 di atas dibuatlah

kode program java untuk activty aplikasi yang tunjukkan dengan kode prgam 6.9

berikut.

package com.example.yo.modul4;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.EditText;

import android.widget.RadioButton;

import android.widget.Spinner;

import android.widget.TextView;

import android.widget.Toast;

import java.lang.reflect.Array;

public class MainActivity extends Activity {

private Button buttonSet;

private EditText userName;

private TextView biodataSet;

private Spinner jobSpinner;

private StringBuffer hoby_result = new StringBuffer();

private String hoby, gender;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

userName = (EditText) findViewById(R.id.user_name);

biodataSet = (TextView) findViewById(R.id.biodata_set);

jobSpinner = (Spinner) findViewById(R.id.user_job);

ArrayAdapter jobAdapater =

ArrayAdapter.createFromResource(this, R.array.job,

android.R.layout. simple_spinner_item);

jobAdapater.setDropDownViewResource(android.R.layout.simple_spinn

er_dropdown_item);

jobSpinner.setAdapter(jobAdapater);

buttonSet = (Button) findViewById(R.id.button_set);

buttonSet.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

biodataSet.setText("User Name : " +

userName.getText().toString() + "\nGender : " + gender

+ "\nHoby : " + hoby + "\nJob : " +

jobSpinner.getSelectedItem().toString());

}

});

}

public void onCheckboxClicked(View v) {

boolean checked = ((CheckBox) v).isChecked();

switch (v.getId()) {

case R.id.user_hoby_culinary:

if(checked) {


hoby_result.append(", Culinary");

} else{

hoby_result.append("Culinary");

}

}

break;

case R.id.user_hoby_music:

if(checked) {


hoby_result.append(", Music");

} else{

hoby_result.append("Music");

}

}

break;

case R.id.user_hoby_sport:

if(checked) {


hoby_result.append(", Sport");

} else{

hoby_result.append("Sport");

}

}

break;

case R.id.user_hoby_other:

if(checked) {


hoby_result.append(", Other");

} else{

hoby_result.append("Other");

}

}

break;

}

hoby = hoby_result.toString();

}

public void onRadioButtonClicked(View v) {

boolean checked = ((RadioButton) v).isChecked();

switch(v.getId()) {

case R.id.user_gender_male:

if(checked) gender = "Male";

break;

case R.id.user_gender_female:

if(checked) gender = "Female";

break;

}

}

}

Kode Progam 6.9 Activity java aplikasi

Untuk string yang digunakan dalam aplikasi, semuanya tersimpan pada

kode program String XML sebagaiman kode program 6.10 berikut.

<?xml version="1.0" encoding="utf-8"?>

<resources>

<string name="app_name">Modul4</string>

<string name="hello_world">Hello world!</string>

<string name="action_settings">Settings</string>

<string name="separator"> : </string>

<string name="user_name">User Name</string>

<string name="user_gender">Gender</string>

<string name="user_gender_male">Male</string>

<string name="user_gender_female">Female</string>

<string name="user_hoby">Hoby</string>

<string name="user_hoby_sport">Sport</string>

<string name="user_hoby_culinary">Culinary</string>

<string name="user_hoby_music">Music</string>

<string name="user_hoby_other">Other</string>

<string name="user_job">Job</string>

<string-array name="job">

<item></item>

<item>Student</item>

<item>Employee</item>

<item>Businessman</item>

<item>Idleness</item>

</string-array>

<string name="button_set">SET</string>

<string name="user_biodata">User Biodata</string>

</resources>

Kode Progam 6.10 String xml aplikasi

6.3.4 Aplikasi Proyek Kelompok

Dalam praktikum pemrograman mobile ini, aplikasi yang dibuat adalah

MemoPad, yaitu semacam catatan yang dapat digunakan pengguna untuk

menyimpan catatan penting. Dalam aplikasi MemoPad pengguna dapat membuat

atau menambah catatan seta, mengubah dan menghapus catatanyang talah

dibuatnya.

Gambar 6.12 Flowchart aplikasi MemoPad

Bardasrakan flowchart gambar 6.12 di atas, aplikasi MemoPad memiliki

empat fungsi utama, yaitu menampilkan, membuat, mengubah, dan menghapus

catatan pengguna. Untuk itu terdapat dua layout utama pada aplikasi Memopad

ini, yaitu notelist untuk menampilkan daftar catatan dan note_edit untuk

mengubah atau membuat catatan. Selain itu ada satu layout tambahan layout

untuk membantu dalam menampilkan catata, yaitu notes_row yang nantinya akan

dimasukkan ke dalam ListView yang ada dalam notelist.


<RelativeLayout




android:background="@drawable/notelist">

<ListView

android:id="@android:id/list"



android:layout_above="@+id/btmLayout"

MULAI

Tampilkan

Daftar

Catatan

yang Telah

Dibuat

Ubah

Catatan

Tambah

Catatan

Tampilkan

Judul dan

Isi Catatan

Masukkan

Judul atau

Isi Catatan

yang Baru

Hapus

Catatan

Simpan

Catatan

Simpan Catatan

Hapus Catatan

SELESAI

`Ya

Tidak Tidak

`Ya `Ya

`Ya

Tidak

android:background="#FFF9C8"

android:divider="#D3D3D3"

android:dividerHeight="1sp"

android:footerDividersEnabled="true" />

<LinearLayout

android:id="@+id/btmLayout"



android:layout_gravity="center_horizontal"

android:gravity="center"

android:layout_alignParentBottom="true"

android:layout_marginBottom="3dp"

android:layout_marginTop="10dp"

android:background="#ffffffff">

<Button

android:id="@+id/addnotebutton"



android:background="@drawable/create_note" />

</LinearLayout>

</RelativeLayout>

Kode Progam 6.11 Kode xml untuk Layout notelist

Kode program 6.11 merupakan kode program xml untuk layout notelist.

Berdasarkan kode program 6.11 tersebut, terdapat dua id utama, yaitu list yang

merupakan ListView untuk daftar tampilan catatan yang telah dibuat dan

addbuttonnote sebagai tombol untuk membuat catatan baru.


<RelativeLayout



android:layout_height="match_parent">

<TextView




android:layout_marginLeft="10sp"


android:hint="@string/no_title"

android:id="@+id/text1"/>

<TextView



android:textSize = "25sp"

android:id="@+id/date_row"

android:layout_alignParentRight="true"

android:layout_marginRight="10sp"/>

</RelativeLayout>

Kode Progam 6.12 Kode xml untuk Layout notesrow

Pada kode program xml untuk layout notesrow yang ditunjukkan kode

program 6.12 di atas merupakan layout untuk menampung informasi setiap

catatan yang telah dibuat yang mana nantinya akan dimasukkan ke dalam

ListView pada layout notelist. Terdapat dua id utama berupa TextView, yaitu text1

untuk menampung title atau judul catatan dan date_row untuk manampung

tanggal pembuatan atau pengubahan terakhir catatan.


<RelativeLayout




android:background="#FFF9C8">

<RelativeLayout

android:id="@+id/toplayout"

android:background="@drawable/notetop"



android:layout_alignParentTop="true"


android:paddingBottom="5dp"

android:paddingLeft="5dp"

android:paddingTop="5dp" >




android:text="@string/title"

android:id="@+id/title_text1" />

<EditText android:id="@+id/title"




android:hint="@string/no_title"

android:layout_toRightOf="@+id/title_text1"


android:layout_marginLeft="5dp"

android:singleLine="true"

android:imeOptions="actionNext"/>

<TextView

android:id="@+id/notelist_date"



android:layout_alignParentRight="true"

android:paddingRight="10sp"


</RelativeLayout>

<view


android:id="@+id/body"



android:layout_below="@+id/toplayout"

class="com.example.yo.memopad.NoteEdit$LineEditText"


android:capitalize="sentences"

android:fadingEdge="vertical"

android:gravity="top"

android:padding="5dp"

android:scrollbars="vertical"


</RelativeLayout>

Kode Progam 6.12 Kode xml untuk Layout note_edit

Untuk layout pengubahan catatan ditunjukkan dengan kode program 6.12.

Terdapat tiga id utama, yaitu title yang berupa EditText untuk memasukkan title

atau judul catatan, notelist_date yang berupa TextView untuk tanggal pembuatan

atau pengubahan catatan, dan body yang berupa view LineEditText untuk

menampung body atau isi catatan.

Selain kode xml layout untuk tampilan apilkasi, tedapat juga kode xml

menu yang digunakan untuk membuat menu dapat digunakan pada aplikasi.

Dalam hal ini digunkan dua buah kode xml menu, yaitu notelist_menu untuk

menu pada layout notelist dan noteedit_menui untuk layout note_edit.


<menu xmlns:android="http://schemas.android.com/apk/res/android"

>

<item android:id="@+id/menu_about"

android:orderInCategory="1000"

android:showAsAction="never"

android:title="@string/about"/>

</menu>

Kode Progam 6.13 Kode xml menu untuk notelist_menu

Pada kode program 6.13 di atas merupakan menu untuk layout notelist.

terdapat satu buah id menu, yaitu menui_about yang nantinya digunakan untuk

manampilkan informasi tentang aplikasi.


<menu xmlns:android="http://schemas.android.com/apk/res/android"

>

<item android:id="@+id/menu_save"

android:icon="@drawable/ic_menu_save"

android:alphabeticShortcut='s'

android:title="@string/save_menu_noteedit"

android:showAsAction="ifRoom|withText" />

<item android:id="@+id/menu_delete"

android:icon="@drawable/ic_menu_delete"

android:title="@string/delete_menu_noteedit"

android:showAsAction="ifRoom|withText" />

<item android:id="@+id/menu_about"

android:orderInCategory="100"

android:showAsAction="never"

android:title="@string/about"/>

</menu>

Kode Progam 6.14 Kode xml menu untuk noteedit_menu

Kode program 6.14 merupakan kode xml menu untuk layout note_edit.

Terdapat tiga id menu, yaitu menu_save untuk menyimpan catatan, menu_delete

untuk menghapus catan, dan menu_abouti untuk menampilkan informasi tentang

aplikasi.

Terdapat juga kode xml string yang digunakan untuk menampung string

yang digunakan dalam aplikasi terutam pada layout. Kode program 6.15 berikut

merupakan kode xml string yang digunakan dalam aplikasi.


<resources>

<string name="app_name">MemoPad</string>

<string name="about">About</string>

<string name="title">Title</string>

<string name="no_title">Title</string>

<string name="menu_delete">Delete Item</string>

<string name="edit_note">Edit Note</string>

<string name="save_menu_noteedit">Save</string>

<string name="delete_menu_noteedit">Delete</string>

<string name="about_us">

\nKelompok 9 :

\n1. Setyo Hadi Kusumo (1204505039)

\n2. Andrew Martin Setio (1204505041)

\n3. I Putu Andreas Waranu (1204505042)

\n4. Ni Kadek Rahayu Widya Utami (1204505043)

\n5. Firnandha Yusuf Pryambudi (1204505044)

</string>

</resources>

Kode Progam 6.14 Kode xml menu untuk string

Selanjutnya terdapat kode java yang digunakan untuk melakukan activity

yang menjalankan aplikasi. Dalam aplikasi ini terdapat tiga kode java, yaitu

NoteList.java, NoteEdit.java, dan NoteDbAdapter.

package com.example.yo.memopad;


import android.app.AlertDialog;

import android.app.ListActivity;

import android.content.DialogInterface;

import android.content.Intent;

import android.database.Cursor;

import android.view.ContextMenu;

import android.view.ContextMenu.ContextMenuInfo;



import android.view.View;

import android.widget.Button;

import android.widget.ListView;

import android.widget.SimpleCursorAdapter;


import android.widget.AdapterView.AdapterContextMenuInfo;

public class NoteList extends ListActivity {

private static final int ACTIVITY_CREATE=0;

private static final int ACTIVITY_EDIT=1;

private static final int DELETE_ID = Menu.FIRST;

private int mNoteNumber = 1;

private NotesDbAdapter mDbHelper;

@Override



setContentView(R.layout.notelist);

mDbHelper = new NotesDbAdapter (this);

mDbHelper.open();

fillData();

registerForContextMenu(getListView());

Button addnote =

(Button)findViewById(R.id.addnotebutton);

addnote.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

createNote();

}

});

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar

if it is present.

getMenuInflater().inflate(R.menu.notelist_menu, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.menu_about:

AlertDialog.Builder dialog = new

AlertDialog.Builder(NoteList.this);

dialog.setTitle("About");

dialog.setMessage(R.string.about_us);

dialog.setPositiveButton("OK", new

DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog,

int which) {

dialog.cancel();

}

});

dialog.show();

return true;

default:

return super.onOptionsItemSelected(item);

}

}

private void createNote() {

Intent i = new Intent(this, NoteEdit.class);

startActivityForResult(i, ACTIVITY_CREATE);

}

@Override

protected void onListItemClick(ListView l, View v, int

position, long id) {

super.onListItemClick(l, v, position, id);

Intent i = new Intent(this, NoteEdit.class);

i.putExtra(NotesDbAdapter.KEY_ROWID, id);

startActivityForResult(i, ACTIVITY_EDIT);

}

private void fillData() {

// Get all data

Cursor notesCursor = mDbHelper.fetchAllNotes();

startManagingCursor(notesCursor);

String[] from = new String[] { NotesDbAdapter.KEY_TITLE

,NotesDbAdapter.KEY_DATE};

int[] to = new int[] { R.id.text1 ,R.id.date_row};

// Array adapter

SimpleCursorAdapter notes =

new SimpleCursorAdapter(this,

R.layout.notes_row, notesCursor, from, to);

setListAdapter(notes);

}

@Override

public void onCreateContextMenu(ContextMenu menu, View v,

ContextMenuInfo menuInfo) {

super.onCreateContextMenu(menu, v, menuInfo);

menu.add(0, DELETE_ID, 0, R.string.menu_delete);

}

@Override

public boolean onContextItemSelected(MenuItem item) {

switch(item.getItemId()) {

case DELETE_ID:

AdapterContextMenuInfo info =

(AdapterContextMenuInfo) item.getMenuInfo();

mDbHelper.deleteNote(info.id);

fillData();

return true;

}

return super.onContextItemSelected(item);

}

@Override

protected void onActivityResult(int requestCode, int

resultCode, Intent intent) {

super.onActivityResult(requestCode, resultCode, intent);

fillData();

}

}

Kode Progam 6.15 Kode java NoteList.java

Kode program 6.15 di atas merupakan kode program untuk NoteList.java.

NoteList.java berfungsi untuk menjalankan tampulan utama aplikasi yang berisi

daftar catatan yangtelah dibuat menggunakan layout notelist.


/**

* Created by Yo on 15/01/2015.

*/

import java.text.SimpleDateFormat;

import java.util.Date;

import android.app.Activity;

import android.app.AlertDialog;

import android.content.Context;

import android.content.DialogInterface;


import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Rect;


import android.util.AttributeSet;

import android.util.Log;



import android.widget.EditText;


public class NoteEdit extends Activity{

public static int numTitle = 1;

public static String curDate = "";

public static String curText = "";

private EditText mTitleText;

private EditText mBodyText;

private TextView mDateText;

private Long mRowId;

private Cursor note;

private NotesDbAdapter mDbHelper;

@Override



mDbHelper = new NotesDbAdapter(this);

mDbHelper.open();

setContentView(R.layout.note_edit);

setTitle(R.string.app_name);

mTitleText = (EditText) findViewById(R.id.title);

mBodyText = (EditText) findViewById(R.id.body);

mDateText = (TextView) findViewById(R.id.notelist_date);

long msTime = System.currentTimeMillis();

Date curDateTime = new Date(msTime);

SimpleDateFormat formatter = new

SimpleDateFormat("d'/'M'/'y");

curDate = formatter.format(curDateTime);

mDateText.setText(""+curDate);

mRowId = (savedInstanceState == null) ? null :

(Long)

savedInstanceState.getSerializable(NotesDbAdapter.KEY_ROWID);

if (mRowId == null) {

Bundle extras = getIntent().getExtras();

mRowId = extras != null ?

extras.getLong(NotesDbAdapter.KEY_ROWID)

: null;

}

populateFields();

}

public static class LineEditText extends EditText{

// we need this constructor for LayoutInflater

public LineEditText(Context context, AttributeSet attrs)

{

super(context, attrs);

mRect = new Rect();

mPaint = new Paint();

mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

mPaint.setColor(Color.BLUE);

}

private Rect mRect;

private Paint mPaint;

@Override

protected void onDraw(Canvas canvas) {

int height = getHeight();

int line_height = getLineHeight();

int count = height / line_height;

if (getLineCount() > count)

count = getLineCount();

Rect r = mRect;

Paint paint = mPaint;

int baseline = getLineBounds(0, r);

for (int i = 0; i < count; i++) {

canvas.drawLine(r.left, baseline + 1, r.right,

baseline + 1, paint);

baseline += getLineHeight();

super.onDraw(canvas);

}

}

}

@Override

protected void onSaveInstanceState(Bundle outState) {

super.onSaveInstanceState(outState);

saveState();

outState.putSerializable(NotesDbAdapter.KEY_ROWID,

mRowId);

}

@Override

protected void onPause() {

super.onPause();

saveState();

}

@Override

protected void onResume() {

super.onResume();

populateFields();

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar

if it is present.

getMenuInflater().inflate(R.menu.noteedit_menu, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.menu_about:

/* Here is the introduce about myself */

AlertDialog.Builder dialog = new

AlertDialog.Builder(NoteEdit.this);

dialog.setTitle("About");

dialog.setMessage(R.string.about_us);

dialog.setPositiveButton("OK", new

DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog,

int which) {

dialog.cancel();

}

});

dialog.show();

return true;

case R.id.menu_delete:

if(note != null){

note.close();

note = null;

}

if(mRowId != null){

mDbHelper.deleteNote(mRowId);

}

finish();

return true;

case R.id.menu_save:

saveState();

finish();

default:

return super.onOptionsItemSelected(item);

}

}

private void saveState() {

String title = mTitleText.getText().toString();

String body = mBodyText.getText().toString();

if(mRowId == null){

long id = mDbHelper.createNote(title, body,

curDate);

if(id > 0){

mRowId = id;

}else{

Log.e("saveState","failed to create note");

}

}else{

if(!mDbHelper.updateNote(mRowId, title, body,

curDate)){

Log.e("saveState","failed to update note");

}

}

}

private void populateFields() {

if (mRowId != null) {

note = mDbHelper.fetchNote(mRowId);

startManagingCursor(note);

mTitleText.setText(note.getString(

note.getColumnIndexOrThrow(NotesDbAdapter.KEY_TITLE)));

mBodyText.setText(note.getString(

note.getColumnIndexOrThrow(NotesDbAdapter.KEY_BODY)));

curText = note.getString(

note.getColumnIndexOrThrow(NotesDbAdapter.KEY_BODY));

}

}

}

Kode Progam 6.16 Kode java NoteEdit.java

Pada kode program 6.16 menunjukkan kode program untuk NoteEdit.java.

NoteEdit.java berguna untuk melakukan pengubahan atau pembuatan catatan

dengan menggunakan layout note_edit.


/**

* Created by Yo on 15/01/2015.

*/

import android.content.ContentValues;

import android.content.Context;


import android.database.SQLException;

import android.database.sqlite.SQLiteDatabase;

import android.database.sqlite.SQLiteOpenHelper;

import android.util.Log;

public class NotesDbAdapter {

public static final String KEY_TITLE = "title";

public static final String KEY_DATE = "date";

public static final String KEY_BODY = "body";

public static final String KEY_ROWID = "_id";

private static final String TAG = "NotesDbAdapter";

private DatabaseHelper mDbHelper;

private SQLiteDatabase mDb;

private static final String DATABASE_CREATE =

"create table notes (_id integer primary key

autoincrement, "

+ "title text not null, body text not null,

date text not null);";

private static final String DATABASE_NAME = "data";

private static final String DATABASE_TABLE = "notes";

private static final int DATABASE_VERSION = 2;

private final Context mCtx;

private static class DatabaseHelper extends SQLiteOpenHelper

{

DatabaseHelper(Context context) {

super(context, DATABASE_NAME, null,

DATABASE_VERSION);

}

@Override

public void onCreate(SQLiteDatabase db) {

db.execSQL(DATABASE_CREATE);

}

@Override

public void onUpgrade(SQLiteDatabase db, int oldVersion,

int newVersion) {

Log.w(TAG, "Upgrading database from version " +

oldVersion + " to "

+ newVersion + ", which will destroy all old

data");

db.execSQL("DROP TABLE IF EXISTS notes");

onCreate(db);

}

}

public NotesDbAdapter(Context ctx) {

this.mCtx = ctx;

}

public NotesDbAdapter open() throws SQLException {

mDbHelper = new DatabaseHelper(mCtx);

mDb = mDbHelper.getWritableDatabase();

return this;

}

public void close() {

mDbHelper.close();

}

public long createNote(String title, String body, String

date) {

ContentValues initialValues = new ContentValues();

initialValues.put(KEY_TITLE, title);

initialValues.put(KEY_BODY, body);

initialValues.put(KEY_DATE, date);

return mDb.insert(DATABASE_TABLE, null, initialValues);

}

public boolean deleteNote(long rowId) {

return mDb.delete(DATABASE_TABLE, KEY_ROWID + "=" +

rowId, null) > 0;

}

public Cursor fetchAllNotes() {

return mDb.query(DATABASE_TABLE, new String[]

{KEY_ROWID, KEY_TITLE,

KEY_BODY,KEY_DATE}, null, null, null, null,

null);

}

public Cursor fetchNote(long rowId) throws SQLException {

Cursor mCursor =

mDb.query(true, DATABASE_TABLE, new String[]

{KEY_ROWID,

KEY_TITLE, KEY_BODY,KEY_DATE},

KEY_ROWID + "=" + rowId, null,

null, null, null, null);

if (mCursor != null) {

mCursor.moveToFirst();

}

return mCursor;

}

public boolean updateNote(long rowId, String title, String

body,String date) {

ContentValues args = new ContentValues();

args.put(KEY_TITLE, title);

args.put(KEY_BODY, body);

args.put(KEY_DATE, date);

return mDb.update(DATABASE_TABLE, args, KEY_ROWID + "="

+ rowId, null) > 0;

}

}

Kode Progam 6.17 Kode java NoteDbAdapter.java

Kode program 6.17 di atas menujukkan kode program

NoteDbAdapter.java. NoteDbAdapter yang merupakan adapater database yang

digunakan dalam aplikasi untuk menyimpan data catatan yang telah dibuat.

6.4 Uji Coba

Pada bagian ini berisi pengujian aplikasi dengan menggunakan kode

program yang telah dijelaskan pada bagian analisa dan pembahasan. Dalam uji

coba ini digunakan aplikasi emulator android yaitu Geniemotion dengan OS

Android 4.1.1.

6.4.1 Penggunaan Spinner, CheckBox, dan Radio Button

Pada bagian analisa dan pembahasan dijelaskan pembuatan dan

penggunaan spinner, checkbox, dan radio button pada aplikasi andoid. Berikut ini

pengujian aplikasi dengan menggunakan kode program yang terdapat pada bagian

analisa dan pembahasan di atas.

Gambar 6.13 Tampilan awal aplikasi

Pada gambar 6.13 menunjukkan tampilkan awal dari aplikasi yang telah

dibuat. Aplikasi ini bekerja dengan cara menampilkan informasi teks User

Biodata sesuai dengan informasi yang telah dimasukkan oleh pengguna. Berikut

ini hasil kerja aplikasi dalam menampilkan informasi biodata pengguna yang

ditunjukkan pada gambar 6.14.

Gambar 6.14 Tampilan hasil kerja aplikasi dalam menampilkan bioata pengguna

6.4.2 Aplikasi Proyek Kelompok

Pada bagian analisa telah dijelaskan mengenai aplikasi MemoPad yang

menjadi aplikasi proyek kelompok. Pada bagian ini berisi pengujian apilkasi

Memopad yang telah dijelaskan.

Gambar 6.15 Tampilan utama aplikasi MemoPad

Gambar 6.15 menujukkan tampilan utama aplikasi MemoPad. Pada

tampilan utama berisi daftar catatan yang telah dibuat dengan menampilkan

masing-masing judul dan tanggal pembuatannya atau tanggal terakhir

pengubahannya. Di bawah tampilan daftar catatan terdapat tombol Add untuk

membuat catatan baru.

Gambar 6.16 Tampilan pembuatan dan pengubahan catatan

Pada gambar 6.16 menujukkan tampilan pembuatan dan pengubahan

catatan. Terdapat du menu utama, yaitu SAVE untuk menyimpan catatan dan

DELETE untuk penghapusan catatan.

Gambar 6.17 perubahan daftar catatan setelah catatan disimpan

Pada gambar 6.17 menunjukkan perubahan daftar catatan setelah catatan

baru disimpan.

6.5 Simpulan

Kesimpulan yang dapat diambil dari pembahasan Bab VI ini antara lain

adalah sebagai berikut :

1. Spinner atau bisa juga disebut combobox (dalam sebagian bahasa

pemograman). Digunakan sebagai selected pemilihan cepat dengan item

yang jumlahnnya banyak.

2. Checkbox digunakan pada form yang bersifat check. Bisa di pilih atau bisa

juga tidak dan bersifat multiselect.

3. Radio button widget yang digunakan pada form yang bersifat selected one

atau hanya dipilih salah satu dari beberapa radio button.

4. RadioButtons dan CheckButtons cocok digunakan dalam pilihan suatu set

yang kecil jika pilihan sangat banyak maka dapat menggunakan spinner.

Documents

BAB VI MODUL IV