Android Native Menü PhoneGap ile nasıl kullanılır?

9 Nisan 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

PhoneGap ile uygulama geliştirirken, uygulama geliştirdiğiniz platformuna ait özelliklerin bazılarını kullanmanız mümkün. Bu yazıda Android cihazınızın menü butonuna basıldığından karşımıza çıkan seçenekler menüsünü PhoneGap ile nasıl kullanılabileceğine bir göz atalım.

Öncelikle cihazınızın “Menü” butonuna basıldığında neler gerçekleştiğini teknik olarak inceleyelim.

Cihazınızın “Menü” butonuna basıldığında Android tarafında “onCreateOptionsMenu” metodu çağırılır. Çağırılan “onCreateOptionsMenu” metodu içerisinde “MenuInflater” kullanılarak bir XML dosyasından “Menu” nesnesi oluşturulur. Java “Object” sınıfından türetilen “MenuInflater“, Native seçenekler menüsünde kullanılacak olan XML dosyasını çağırır. Bu XML dosyasına, native seçenekler menüsü oluşturmak için kullanılan bir yapılandırma dosyası diyebiliriz.

Örneğimiz için kullanacağımız ve projemizdeki “menu” klasöründe oluşturacağımız “mymenu.xml” adını verdiğim menü yapılandırma dosyasının içeriği aşağıdaki gibidir.

Kod   
<?xml version="1.0" encoding="utf-8"?>
 
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:id="@+id/hakkinda" android:titleCondensed="Hakkında" android:icon="@drawable/menu_hakkinda"></item>
   <item android:id="@+id/cikis" android:titleCondensed="Çıkış" android:icon="@drawable/menu_cikis"></item>
</menu>

Not:mymenu.xml” içerisinde android:icon=”@drawable/menu_hakkinda” ve android:icon=”@drawable/menu_cikis” bölümlerinde belirttiğimiz ikonları ise projemiz içerisindeki “drawable” klasöründe saklamamız gerekiyor. İkon boyutları hakkında bilgi için Android Developer sayfasındaki bu bağlantıdan faydalanabilirsiniz.

Hazırladığımız “mymenu.xml” dosyasını, Android ortamından menünün oluşturulduğu yer olan “onCreateOptionsMenu” metodunu aşağıdaki gibi çağırabiliriz.

Kod   
public boolean onCreateOptionsMenu(Menu menu) {
	MenuInflater inflater = getMenuInflater();
	inflater.inflate(R.menu.mymenu, menu);
	return true;
}

mymenu.xml” içerisinde tanımladığımız menü seçenekleri tıklandığında “onOptionsItemSelected” metodu çağırılır ve hangi menüye tıklandığı bu metod içerisinde yakalanır. Bu metod, parametre olarak “MenuItem” tipinde bir değer almaktadır. “MenuItem” ise hazırlanmış olan bir menü seçeneğine direkt erişim sağlayan bir Interface‘tir. Daha basit anlamıyla seçenekler menüsünden hangi seçeneği seçmişseniz “MenuItem” tipinde bir değer olarak “onOptionsItemSelected” metoduna gönderilir ve MenuItem Interface’i kullanılarak alınan değere göre menü yönlendirme işlemi yapılır.

Buna göre örneğimizde aşağıdaki gibi oluşacaktır.

Kod   
public boolean onOptionsItemSelected(MenuItem item)
{
	switch(item.getItemId()) {
		case R.id.hakkinda:
			this.appView.sendJavascript("navigator.app.loadUrl('file:///android_asset/www/hakkinda.html');");
			break;
		case R.id.cikis:
			this.appView.sendJavascript("navigator.app.exitApp();");
			break;
		default:
			break;
	}
	return true;
}

Böylelikle “mymenu.xml” içerisinde tanımladığımız “id” değerine sahip seçilen menüye göre işlem yapabiliriz.

Üstteki kod örneğinde de görebileceğiniz gibi, Native taraftan web tarafında Javascript komutlarını “this.appView.sendJavascript” şeklinde gönderebiliyoruz.

navigator.app.loadUrl” kullanarak “www” klasörünüz içerisindeki bir “html” dosyasını çağırabildiğiniz gibi, “navigator.app.exitApp()” kullanarak uygulamanızdan çıkış yapabilirsiniz.

Bir Problem / Bir Çözüm: Örneğimizi gerçeklediğimizde şöyle bir problemle karşılaşacağız. Örneğimize göre “Hakkında” menüsünü tıkladığımızda tekrar ana sayfaya yani “index.html” sayfasına geri dönmemiz gerekiyor. Ancak bu işlemi yaptığımızda gerçekleşmediğini göreceğiz. Bunun için bu işlemi bizim kontrol altına almamız gerekiyor. Bunun için “hakkinda.html” sayfası içerisinde aşağıdaki gibi bu kod parçası kullanmamız gerekecek.

Kod   
document.addEventListener("deviceready",onDeviceready,false);
 
function onDeviceready()
{
	document.addEventListener("backbutton", backButtonFonksiyonu, false);
}
 
function backButtonFonksiyonu() {
	navigator.app.loadUrl('file:///android_asset/www/index.html');
}

hakkinda.html” sayfası yüklendiğinde (onDeviceready), “backbutton” olay dinleyicisini kullanarak eğer geri butonuna basıldıysa “backButtonFonksiyonu” nu çağırarak sayfayı tekrar “index.html” sayfasına geri göndermiş olacağız.

Küçük bir hatırlatma..

Bu işlem yazımızın başlığında da belirttiğimiz gibi Android Native’ine ait seçenekler menüsünü kullanmak içindir. PhoneGap ile cross platform mobil uygulama geliştirirken genel olarak işletim sistemine özel olan bileşenleri kullanmak yerine desteklenen tüm işletim sistemlerinde çalışan sistemler tasarlamak daha doğru bir yöntem olacaktır. Ama örneğimizde olduğu gibi yalnızca Android ortamı için geliştirme yaparken böyle bir yöntemi rahatlıkla kullanabilirsiniz.

Yazıdaki uygulama örneğini aşağıdaki linkten indirebilirsiniz.

 

Kaynaklar

http://simonmacdonald.blogspot.com/2012/11/building-native-menu-with-phonegap.html
http://developer.android.com/reference/android/view/MenuItem.html
http://developer.android.com/reference/android/app/Activity.html#onOptionsItemSelected(android.view.MenuItem)
https://developer.android.com/guide/practices/ui_guidelines/icon_design_menu.html
http://developer.android.com/reference/android/view/MenuInflater.html

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. 10 Nisan 2013 - 00:11

    Bu alana Türkçe içerik sağladığınız için çok teşekkürler. Emeğinize sağlık.

  2. :DeliPenguen
    10 Nisan 2013 - 00:41

    Ben teşekkür ederim. Umarım ilgilenen herkes için faydalı olur.

  3. sisi
    14 Eylül 2014 - 15:15

    kaynak pek yok. onun için teşekkürler