Index of /Kuliah2016-2017/Struktur & Pemakaian Teknologi Game

69

BAB 4

70

4.1

Tujuan Pembelajaran

1.

Memahami tentang Menu, baik Option maupun Context Menu dan bagaimana

penggunaannya.

4.2

Dasar Teori

Sebagaimana halnya aplikasi-aplikasi untuk desktop dan beberapa sistem operasi pada

mobile

, Android mendukung

activity

dengan menu-menu aplikasi. Pada Android, ini

disebut

option

menu. Beberapa telepon Android akan memiliki sebuah kunci khusus untuk

melakukan

pop menu

dari

option menu,

dan beberapa yang lainnya akan menawarkan

alternatif untuk men-

trigger

menu agar muncul, seperti

on-screen button

, dan sebagainya.

Di samping itu, sebagaimana

GUI toolkit

, Anda dapat membuat

context menu

untuk

aplikasi Android. Pada perangkat

mobile

,

context menu

biasanya muncul saat user

melakukan

tap

(mengetuk) dan

hold

(menahan) pada

widget

tertentu.

4.2.1

Option Menu

Option menu

menampilkan informasi yang berhubungan di dalam

activity

.

Menu ini beroperasi dalam satu ataupun dua mode, yaitu

icon

dan

expand

. Saat

user

pertama kali menekan tombol Menu,

icon

mode akan muncul, menampilkan enam

buah menu pilihan yang terletak pada bagian bawah layar. Jika menu memiliki lebih

dari enam buah pilihan, maka tombol keenam akan diberi label

“More”

. Memilih

pilihan

“More”

akan mengarah ke mode expand, menunjukkan pilihan yang

tersedia tidak terlihat pada menu reguler. Menu tersebut dapat terlihat jika user

menggeser pilihan menu reguler.

4.2.2

Context Menu

Context menu

akan terlihat saat dilakukan

tap-and hold

pada widget.

Berbeda dengan

Option Menu

(yang dieksekusi hanya sekali dalam satu

activity

),

71

Context Menu

dihilangkan setelah selesai dipanggil atau digunakan. Oleh karena itu,

Anda tidak mungkin untuk menahan (

hold

) pada objek

Context Menu

secara terus

menerus, hanya terdapat satu kesempatan untuk membuild kembali menu tersebut

untuk melengkapi kebutuhan

activity

berbasis

on-demand

.

72

Workshop 5

Option dan Context Menu

A.

Tujuan

1.

Memahami macam-macam variasi dari XML Layout

2.

Memahami penggunaan dari Basic Widget

B.

Tugas Pendahuluan

1.

Pelajari Option dan Context Menu Android

C.

Percobaan

a.

Percobaan 1: Menggunakan Option dan Context Menu

Langkah 1: Buat project Android baru pada Eclipse

Langkah 2: Ketikan kode berikut pada main.xml

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

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

android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >

<EditText

android:id="@+id/edtMess1" android:text="Hello World"

android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="5dp" />

<EditText

android:id="@+id/edtMess2" android:text="Welcome"

android:layout_width="fill_parent" android:layout_height="wrap_content"

73

android:layout_margin="5dp" />

/>

<TextView

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:text="Press the MENU key or Long press text-boxes" android:gravity="center_vertical" />

</LinearLayout>

Langkah 3: Tambahkan statement berikut pada MenuActivity.java

package com.example.menu; import android.app.Activity; import android.os.Bundle; import android.text.Html; import android.text.Spanned; import android.view.ContextMenu;

import android.view.ContextMenu.ContextMenuInfo; import android.view.Menu;

import android.view.MenuItem; import android.view.View; import android.widget.EditText; import android.widget.TextView;

public class MenuActivity extends Activity {

/** Called when the activity is first created. */

EditText edt1, edt2;

Integer[] arrayPointSize = {10, 20, 30, 40, 50}; @Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.main);

edt1 = (EditText)findViewById(R.id.edtMess1); edt2 = (EditText)findViewById(R.id.edtMess2);

// you may register an individual context menu for each view

registerForContextMenu(edt1); registerForContextMenu(edt2); }

public boolean onCreateOptionMenu(Menu menu){ // only one Option menu per activity

populateMyFirstMenu(menu);

return super.onCreateOptionsMenu(menu); }

74

@Override

public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {

super.onCreateContextMenu(menu, v, menuInfo); // decide what context menu needs to be made

if(v.getId() == edt1.getId()) // create a menu for etMessage1 box

populateMyFirstMenu(menu); if(v.getId() == edt2.getId()){ // create a menu for etMessage2 box

populateMySecondMenu(menu); }

}

private void populateMyFirstMenu(Menu menu){ int groupId= 0;

int order= 0;

//arguments: groupId, optionId, order, title

menu.add(groupId, 1, 1, "10 points"); menu.add(groupId, 2, 2, "20 points"); menu.add(groupId, 3, 3, "30 points"); menu.add(groupId, 4, 4, "40 points"); menu.add(groupId, 5, 5, "50 points"); menu.add(groupId, 6, 8, "Red text"); menu.add(groupId, 7, 7, "Green Text"); menu.add(groupId, 8, 6, "Blue text"); } //populateMyMenu

private void populateMySecondMenu(Menu menu){ int groupId= 0;

int order= 0;

//arguments: groupId, optionId, order, title

menu.add(groupId, 9, 1, "Bold"); menu.add(groupId, 10, 2, "Italic"); menu.add(groupId, 11, 3, "Normal"); }//populateMySecondMenu

@Override

public boolean onContextItemSelected(MenuItem item) { return(applyMenuOption(item));

}

@Override

public boolean onOptionsItemSelected(MenuItem item) { return(applyMenuOption(item));

}

private boolean applyMenuOption(MenuItem item){ int menuItemId= item.getItemId(); // 1, 2, 3, ...11

String strMsg2 = edt2.getText().toString(); if(menuItemId<= 5) {

// first five option are for setting text size

int newPointSize= arrayPointSize[menuItemId-1]; edt1.setTextSize(newPointSize);

75

edt2.setTextSize(newPointSize);

} else{

// either change color on text1 or style on text2

if(menuItemId== 6)

edt1.setTextColor(0xffff0000); // red

else if(menuItemId== 7)

edt1.setTextColor(0xff00ff00); // green

else if(menuItemId== 8)

edt1.setTextColor(0xff0000ff); // blue

else if(menuItemId== 9)

edt2.setText(beautify(strMsg2, "BOLD")); //bold

else if(menuItemId== 10)

edt2.setText(beautify(strMsg2, "ITALIC")); //italic

else if(menuItemId== 11)

edt2.setText(beautify(strMsg2, "NORMAL")); //normal

}

return false; } //applyMenuOption

// changing text style using HTML formatting

// Spanned is text to which you could add formatting features

private Spanned beautify (String originalText, String selectedStyle){ Spanned answer = null;

if(selectedStyle.equals("BOLD"))

answer = Html.fromHtml("<b>"+ originalText+"</b"); else if(selectedStyle.equals("ITALIC"))

answer = Html.fromHtml("<i>"+ originalText+"</i>"); else if(selectedStyle.equals("NORMAL"))

answer = Html.fromHtml("<normal>"+ originalText+"</normal"); return answer;

} //beautify

}

Langkah 4: Tekan F11 untuk mendebug aplikasi pada emulator Android

Langkah 5: Kemudian, akan muncul output sebagai berikut :

76

Gambar 26 Tampilan Option dan Context Menu

Langkah 6 : Lakukan click pada text box atau click [Menu] pada

hardware

keyboard

, maka outputnya adalah :

Pada textbox “Hello World”

Pada textbox “Welcome”

77

b.

Percobaan 2: Menggunakan Option dan Context Menu (lanjut)

Langkah 1: Gunakan project Menu pada percobaan sebelumnya

Langkah 2: Lakukan

replace

pada method populateMyFirstMenu() menjadi

seperti berikut ini :

private void populateMyFirstMenu(Menu menu){ int groupId= 0;

//arguments: groupId, optionId, order, title

MenuItem item1 = menu.add(groupId, 1, 1, "10 points"); MenuItem item2 = menu.add(groupId, 2, 2, "20 points"); MenuItem item3 = menu.add(groupId, 3, 3, "30 points"); MenuItem item4 = menu.add(groupId, 4, 4, "40 points"); //MenuItem item5 = menu.add(groupId, 5, 5, "50 points");

MenuItem item6 = menu.add(groupId, 6, 8, "Red text"); MenuItem item7 = menu.add(groupId, 7, 7, "Green Text"); MenuItem item8 = menu.add(groupId, 8, 6, "Blue text");

item1.setIcon(R.drawable.emo_im_angel); item2.setIcon(R.drawable.emo_im_cool); item3.setIcon(R.drawable.emo_im_crying);

item4.setIcon(R.drawable.emo_im_foot_in_mouth);

// shortcuts using device’s keyboard-keypad

// on a G1 open slide open the keyboard and

// type letter u (same as pressing menu UNO)

item1.setShortcut('1', '1'); item2.setShortcut('2', '2'); item3.setShortcut('3', '3'); item4.setShortcut('4', '4');

// adding a sub-menu as fifth entry of this menu

// .addSubMenu(intgroupId, intitemId, intorder, CharSequencetitle)

int smGroupId= 0; // don't care, same as Menu.NONE

int smItemId= 5; // fifth element

int smOrder= 5; // don't care, same as Menu.NONE

SubMenu mySubMenu5 = menu.addSubMenu(smGroupId, smItemId, smOrder,

"Sub-Menu-CINCO");

mySubMenu5.setHeaderIcon(R.drawable.btn_rating_star_on_pressed); mySubMenu5.setIcon(R.drawable.btn_rating_star_on_normal);

// .add(intgroupId, intitemId, intorder, CharSequencetitle)

MenuItem sub51 = mySubMenu5.add(smGroupId,5,1,"Sub Menu 5-1"); MenuItem sub52 = mySubMenu5.add(smGroupId,5,2,"Sub Menu 5-2"); MenuItem sub53 = mySubMenu5.add(smGroupId,5,3,"Sub Menu 5-3"); } //populateMyMenu

78

Langkah 5: Kemudian, akan muncul output sebagai berikut :

Gambar 28 Contoh Tampilan Awal Menu

Langkah 6 : Click pada text box atau click [Menu] pada

hardware keyboard

,

maka outputnya adalah :

79

Gambar 29 Tampilan pilhan menu

Langkah 6 : Click pada salah satu menu, misalnya pada [10 points], maka font

dalam text box berubah ukurannya sesuai dengan menu :

80

Langkah 7 : kemudian, terdapat “Sub-Menu-Cinco”, click, maka akan muncul

output sebagai berikut :

Gambar 31 Tampilan Submenu

Langkah 8 : jika di-click “Blue Text”, maka teks akan berubah warna menjadi

biru, outputnya :

75

edt2.setTextSize(newPointSize);

}

else{

// either change color on text1 or style on text2

if(menuItemId== 6)

edt1.setTextColor(0xffff0000); // red

else if(menuItemId== 7)

edt1.setTextColor(0xff00ff00); // green

else if(menuItemId== 8)

edt1.setTextColor(0xff0000ff); // blue

else if(menuItemId== 9)

edt2.setText(beautify(strMsg2, "BOLD")); //bold

else if(menuItemId== 10)

edt2.setText(beautify(strMsg2, "ITALIC")); //italic

else if(menuItemId== 11)

edt2.setText(beautify(strMsg2, "NORMAL")); //normal

}

return false;

} //applyMenuOption

// changing text style using HTML formatting

// Spanned is text to which you could add formatting features

private Spanned beautify (String originalText, String selectedStyle){ Spanned answer = null;

if(selectedStyle.equals("BOLD"))

answer = Html.fromHtml("<b>"+ originalText+"</b"); else if(selectedStyle.equals("ITALIC"))

answer = Html.fromHtml("<i>"+ originalText+"</i>"); else if(selectedStyle.equals("NORMAL"))

answer = Html.fromHtml("<normal>"+ originalText+"</normal"); return answer;

} //beautify }

Langkah 4: Tekan F11 untuk mendebug aplikasi pada emulator Android

Langkah 5: Kemudian, akan muncul output sebagai berikut :

76

Gambar 26 Tampilan Option dan Context Menu

Langkah 6 : Lakukan click pada text box atau click [Menu] pada

hardware

keyboard

, maka outputnya adalah :

Pada textbox “Hello World”

Pada textbox “Welcome”

77

b.

Percobaan 2: Menggunakan Option dan Context Menu (lanjut)

Langkah 1: Gunakan project Menu pada percobaan sebelumnya

Langkah 2: Lakukan

replace

pada method populateMyFirstMenu() menjadi

seperti berikut ini :

private void populateMyFirstMenu(Menu menu){

int groupId= 0;

//arguments: groupId, optionId, order, title

MenuItem item1 = menu.add(groupId, 1, 1, "10 points"); MenuItem item2 = menu.add(groupId, 2, 2, "20 points"); MenuItem item3 = menu.add(groupId, 3, 3, "30 points"); MenuItem item4 = menu.add(groupId, 4, 4, "40 points");

//MenuItem item5 = menu.add(groupId, 5, 5, "50 points");

MenuItem item6 = menu.add(groupId, 6, 8, "Red text"); MenuItem item7 = menu.add(groupId, 7, 7, "Green Text"); MenuItem item8 = menu.add(groupId, 8, 6, "Blue text");

item1.setIcon(R.drawable.emo_im_angel);

item2.setIcon(R.drawable.emo_im_cool);

item3.setIcon(R.drawable.emo_im_crying);

item4.setIcon(R.drawable.emo_im_foot_in_mouth);

// shortcuts using device’s keyboard-keypad

// on a G1 open slide open the keyboard and

// type letter u (same as pressing menu UNO)

item1.setShortcut('1', '1'); item2.setShortcut('2', '2'); item3.setShortcut('3', '3'); item4.setShortcut('4', '4');

// adding a sub-menu as fifth entry of this menu

// .addSubMenu(intgroupId, intitemId, intorder, CharSequencetitle)

int smGroupId= 0; // don't care, same as Menu.NONE

int smItemId= 5; // fifth element

int smOrder= 5; // don't care, same as Menu.NONE

SubMenu mySubMenu5 = menu.addSubMenu(smGroupId, smItemId, smOrder, "Sub-Menu-CINCO");

mySubMenu5.setHeaderIcon(R.drawable.btn_rating_star_on_pressed);

mySubMenu5.setIcon(R.drawable.btn_rating_star_on_normal);

// .add(intgroupId, intitemId, intorder, CharSequencetitle)

MenuItem sub51 = mySubMenu5.add(smGroupId,5,1,"Sub Menu 5-1"); MenuItem sub52 = mySubMenu5.add(smGroupId,5,2,"Sub Menu 5-2"); MenuItem sub53 = mySubMenu5.add(smGroupId,5,3,"Sub Menu 5-3"); } //populateMyMenu

78

Langkah 5: Kemudian, akan muncul output sebagai berikut :

Gambar 28 Contoh Tampilan Awal Menu

Langkah 6 : Click pada text box atau click [Menu] pada

hardware keyboard

,

maka outputnya adalah :

79

Gambar 29 Tampilan pilhan menu

Langkah 6 : Click pada salah satu menu, misalnya pada [10 points], maka font

dalam text box berubah ukurannya sesuai dengan menu :

80

Langkah 7 : kemudian, terdapat “Sub-Menu-Cinco”, click, maka akan muncul

output sebagai berikut :

Gambar 31 Tampilan Submenu

Langkah 8 : jika di-click “Blue Text”, maka teks akan berubah warna menjadi

biru, outputnya :