Lembar Kerja IMK Android

Lembar Kerja IMK Android GUI

03 Desember 2013

Nama: Ahmad Haris NPM: 1402011003

Kerjakan lembar kerja berikut ini dengan melengkapi kotak yang disediakan dengan print-screen program. Lembar kerja dalam format PDF dikumpulkan hari Selasa 03 Desember 2013 pukul 12:00 melalui e-learning. Aplikasi Android sering tergantung pada data yang diberikan Pengguna. Pada tutorial ini Anda akan

membuat dan menggunakan beberapa kontrol umum yang digunakan untuk mengumpulkan data

dari Pengguna, yaitu:

1. The EditText control

2. The Spinner control

3. The Checkbox control

4. The Button control

Untuk tutorial ini, kamu akan mendesain dan mengimplementasikan sebuah form untuk aplikasi

Android yang akan kamu buat sehingga Pengguna dapat memberikan umpan balik kepada

pengembang. Pengguna diberikan beberapa pilihan untuk mengumpulkan umpab balik yang

berbeda. Umpan balik ini dapat dikirim ke pengembang melalui email.

Langkah 0: Buat proyek Android baru

Buat proyek Android baru: FormUmpanBalik-[Nama Mhs].

Langkah 1: Desain form yang dibuat

Pertama, pikirkan data apa yang kamu butuhkan dari Pengguna. Sebuah form mungkin memiliki

beberapa jumlah field. Pikirkan tipe data yang kamu butuhkan dan pilih kontrol yang sesuai. Sebagai

contoh:

1. Untuk mengumpulkan input teks, gunakan EditText controls

2. Untuk membatasi masukan pengguna ke beberapa pilihan, gunakan Spinner controls, mirip

dengan drop-down menu

3. Untuk mengumpulkan boolean input, gunakan CheckBox controls

4. Untuk men-trigger event pengguna, gunaan Button controls

Untuk tutorial ini, kamu akan mendesain sebuah form umpan balik. Form ini mengumpulkan 5 data

dari pengguna.:

1. Nama pengguna (string)

2. Email pengguna (string)

3. Tipe umpan balik (pilihan: Pujian, Keluhan, Saran atau Bug)

4. Pesan umpan balik (string)

5. Pilihan apakan pengguna menginginkan respon melalui email (boolean)

Langkah 2: Membuat the Layout Resource

Mulai dengan membuat layout resource untuk tampilan form. Form akan memiliki beberapa fields,

yang mungkin lebih besar dari tampilan satu halaman (tergantung ukuran layar), jadi kamu harus

pikirkan untuk membungkus keseluruhan form dengan ScrollView controls sehingga bisa ada

scrollbars. ScrollView harus memiliki paling tidak satu child view, pikirkan layout control yang paling

cocok untuk ditambahkan ke dalam form yang Anda buat. Form biasanya berada dalam LinearLayout

control yang berorientasi vertikal, sehingga form fields dapat memanjang secara vertikal.

Contoh layout resource untuk form yang sederhana adalah sebagai berikut:

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

<ScrollView

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

android:id="@+id/ScrollView01"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:scrollbars="vertical">

<LinearLayout

android:layout_width="fill_parent"

android:orientation="vertical"

android:layout_height="fill_parent">



</LinearLayout>

</ScrollView>

Langkah 3: Menambahkan TextView Control (Deskripsi Form)

Selanjutknya, Anda perlu menambahkan TextView control dalam LinearLayout control. TextView

control memanggil TextViewTitle untuk menampilkan deskripsi form dan tujuannya kepada

pengguna. Kontrol ini menampilkan sebuah string resource bernama @string/feedbacktitle, yang

didefinisikan dalam string resource file the /res/values/strings.xml.

Ini adalah kode XML yang ditambahkan ke dalam form layout resource file:

<TextView

android:id="@+id/TextViewTitle"

android:layout_width="wrap_content"


android:text="@string/feedbacktitle"

android:textSize="10pt">

</TextView>

Langkah 4: Add an EditText Control (Name)

Sekarang kamu perlu nambahkan EditText control dibawah TextView control yang baru kamu buat.

EditText control ini memanggil EditTextName yang berperan sebagai form field untuk nama

pengguna. Kamu dapat menggunakan hint attribute untuk menambahkan string ke dalam EditText

control ketika kosong (contoh. “Tuliskan namamu disini …”). Masukkan namu di bagian hint attribute

ini. Kamu juga dapat menambahkan atribut inputType di EditText control untuk memasukkan nama

yang sesuai logika yang ingin ditambahkan.


<EditText

android:id="@+id/EditTextName"


android:hint="@string/feedbackname"

android:inputType="textPersonName"

android:layout_width="fill_parent">

</EditText>

Langkah 5: Tambahkan EditText Control lain (Email)

Tambahkan EditText control kedua di bawah EditTextName. EditText control ini bernama

EditTextEmail sehingga pengguna dapat memasukkan alamat email. Sekali lagi, berikan hint

attribute berupa alamat emailmu untuk ditampilkan ketika kontrol ini kosong. Saat ini, set inputType

attribute menjadi textEmailAddress, sehingga Pengguna mudah menuliskan email.


<EditText

android:id="@+id/EditTextEmail"


android:hint="@string/feedbackemail"

android:inputType="textEmailAddress"


</EditText>

Langkah 6: Tambahkan Spinner Control (Tipe umpan balik)

Selanjutnya tambahkan sebuah Spinner control. Set namanya menjadi SpinnerFeedbackType

sehingga pengguna dapat memilih tipe feedback dari pilihan yang yang fix, yaitu: Pujian, Keluhan,

Saran atau Bug.

Pertama, definisikan pilihan berikut sebagai string resources dalam the strings.xml resource file.


<resources>



<string name="feedbacktype1">Pujian</string>

<string name="feedbacktype2">Keluhan</string>

<string name="feedbacktype3">Saran</string>

<string name="feedbacktype4">Bug</string>

</resources>

Kemudian, tambahkan string array resource menggunakan individual string resources sebagai

berikut dalam bagian /res/values/arrays.xml:


<resources>

<string-array name="feedbacktypelist">

<item>@string/feedbacktype1</item>




</string-array>

</resources>

Sekarang kamu perlu mengkonfigurasi Spinner control dalam form layout,. Mulai dengan

menambahkan prompt attribute, yang akan menambahkan string pada bagian Spinner control.

Kemudian spesifikasikan daftar pilihan string menggunakan the entries attribute – yang baru saja

kamu tambahkan: @array/feedbacktypelist.


<Spinner

android:id="@+id/SpinnerFeedbackType"


android:prompt="@string/feedbacktype"

android:layout_width="fill_parent"

android:entries="@array/feedbacktypelist">

</Spinner>

Langkah 7: Tambahkan a Multi-Line EditText Control (Feedback)

Kemudian, tambahkan EditText control dibawah Spinner control. EditText control ini bernama

EditTextFeedbackBody yang merupakan field berisi teks umpan balik. Tambahkan hint attribute

seperti sebelumnya. Saat ini pengguna akan memasukkan pujian, keluhan saran atau bug aplikasi,

maka kamu harus set inputType attribute menjadi textMultiLine dan tentukan banyaknya barisnya.


<EditText

android:id="@+id/EditTextFeedbackBody"


android:hint="@string/feedbackbody"

android:inputType="textMultiLine"

android:lines="5"


</EditText>

Langkah 8: T0061mbahkan CheckBox Control

Tambahkan CheckBox control dibawah EditText control yang kamu buat, beri nama

CheckBoxResponse. Pengguna dapat memilih apakah mereka mau menerima respons email dari

pengembang. Gunakan text attribute untuk menambahkan string yang akan ditampilkan setelah

CheckBox control.


<CheckBox

android:id="@+id/CheckBoxResponse"


android:text="@string/feedbackresponse"


</CheckBox>

Langkah 9: Tambahkan Button Control

Terkahir, tambahkan kontrol tombol. Jika kamu mengingkan button dengan gambar, gunakan

ImageButton control. Jika kamu menggunakan button control, pertama set teks yang akan muncul di

tombol pada bagian text attribute. Selanjutkan kamu dapat menambahkan handler pada bagian ini

menggunakan onClick attribute.


<Button

android:id="@+id/ButtonSendFeedback"


android:text="@string/feedbackbutton"

android:onClick="sendFeedback"


</Button>

Excellent! Sekarang kamu selesai mendesain form mu. Sekarang hanya perlu mengimplementasikan

method sendFeedback() dalam Activity.

Langkah 10: Implementasi Button click handler

Dalam Button control, spesifisikan onClick attribute sebagai sendFeedback. Sekarang kamu

mengimplementasikan method bernama sendFeedback() dalam Activity class. Contoh:

public void sendFeedback(View button) {

// Do click handling here

}

Langkah 11: Membaca Input dari EditText Controls

Sekarang desain form dan control selesai, kamu perlu mengumpulkan form data dari Pengguna

ketika Button control di klik.

Untuk EditText control, kamu dapat menggunakan method getText().

final EditText nameField = (EditText)

findViewById(R.id.EditTextName);

String name = nameField.getText().toString();

final EditText emailField = (EditText)

findViewById(R.id.EditTextEmail);

String email = emailField.getText().toString();

final EditText feedbackField = (EditText)

findViewById(R.id.EditTextFeedbackBody);

String feedback = feedbackField.getText().toString();

Langkah 12: Reading Input From Spinner Controls

Form anda memiliki Spinner control. Kamu dapat menggunakan method getSelectedItem() method

untuk membaca data dari control ini.

final Spinner feedbackSpinner = (Spinner)

findViewById(R.id.SpinnerFeedbackType);

String feedbackType = feedbackSpinner.getSelectedItem().toString();

Langkah 13: Membaca Input dari CheckBox Controls

Pada bagian ini ada flag yang menjelaskan aplikasi Anda di check atau tidak.

final CheckBox responseCheckbox = (CheckBox)

findViewById(R.id.CheckBoxResponse);

boolean bRequiresResponse = responseCheckbox.isChecked();

Kamu dapat menggunakan nilai boolean ini di aplikasimu.

Langkah 14 (bonus: 10 poin): Generate the Appropriate Email Details

Sekarang kamu sudah mendapatkan data umpan balik, kamu siap untuk membentuk pesan. Proses

semua fields dan buat pesan umpan balik yang sesuai. Sebagai contoh, kamu ingin menambahkan

message subject atau yang lainnya dalam message body. Kamu dapat menggunakan format string

untuk membantu membuat string yang tepat.

Contoh:

Sumber:

Android Essentials: Creating Simple User Forms oleh Shane Conder & Lauren Darcey on Jul 22nd

2010

Lembar Kerja IMK Android

Documents

Transcript of Lembar Kerja IMK Android