Android üzerinde PhoneGap’le parametreli link kullanmak

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

Android için PhoneGap kullanarak hazırladığım bir uygulama için ilginç bir bug ile karşılaşmıştım.  Bu bug ile ilgili biraz araştırma yaptığımda bu sorunun Andoid 3.x ve üzeri sürümlerde yaşandığını okudum ancak daha alt sürümlerde test etme imkanım yoktu. Gelelim problemin detayına ve çözümüne..


Hazırlamış olduğum PhoneGap uygulamasını, arayüzünde JQuery Mobile kullanarak tek sayfa içerisinde tamamladım. Ancak uygulama bittiğinde alt tarafta çok sağlam operasyonlar döndüğünden önemli bir performans sorunu ile karşılaştım. Bunun için sitemi tek sayfadan çıkarıp, farklı html sayfaları içerisinde kullanmaya başladım. Performans çok iyi duruma geldi ancak parametreli olarak farklı html sayfalarını çağırdığımda büyük bir sıkıntının olduğu ortaya çıktı. Android, “index.html?id=5” şeklinde ki parametreli gönderimleri yapamıyordu. Üstelik duruma bakılacak olursa 9 Haziran 2011’den beri durum böyle. Bkz. Issue 17535

Birden fazla sayfa kullanılan ve veritabanı operasyonlarının bulunduğu uygulamalarda bu çok ciddi bir problem. Bu sebeple sorun çözülene kadar biz de kendi çözümümüzü üretmek zorundayız. Bunun için JavaScript’ten faydalanabiliyoruz.

Öncelikle linkimizi aşağıdaki gibi düzenleyelim.

Kod   
<a href="#" onclick="callPage('5')">Linkim</a>

Burada “callPage” ismini verdiğim fonksiyona göndereceğimiz parametrenin değerini verip, aşağıdaki gibi fonksiyonu hazırlıyorum.

Kod   
function callPage(idVal){
        window.location = "test.html?id="+idVal;
}

Fonksiyon tetiklendiğinde windows.location’ı kullanarak yeni urlye yönlenmesini sağlıyoruz. Bildiğiniz üzere “window.location“, geçerli sayfa adresini belirtilen adrese yönlendirmesini sağlıyor. Bilgi için Bkz. JavaScript Window.Location

Parametreli linklerin bu şekilde kullanılmasının handikapları da yok değil. Örneğin; projenizde mobil arayüz olarak JQuery Mobile kullanmışsanız “data-transition” parametresini kullanarak çok güzel efektli geçişler yapmanız mümkün. Ancak bu tarz kullanımda tetiklemeyi HMTL Markup’ı değil de JavaScript yaptığı için maalesef “data-transition” bir işe yaramıyor.

Linki yeni sayfaya gönderdiğimize göre parametre değerini nasıl yakalayacağız?

Bunun için aşağıdaki gibi bir fonksiyon yazabiliriz.

Kod   
function htmlQueryYakala() {
   var parametreDegeri = window.location.search.substring(1);
   var deger = parametreDegeri.replace("id=","");
   return deger;
}

Burada kullandığım “window.location.search” geçerli sayfa URL’sinin içeriğinde soru işareti (?) dahil olmak üzere, bir URL sorgu parçası geri döndürür. Ancak soru işaretini almamak için yukarıdaki örneğimizde olduğu gibi substring(1) şeklinde çağırdığımızda bize geçerli URL adresimiz olan “test.html?id=5” adresinden “id=5” değeri dönecektir. Replace metodu ile de “id=” bölümünü temizlersek rahatlıkla parametre değerini elde etmiş oluruz.

Parametre değerini yakalama şeklimiz çok sağlıklı bir yöntem olmadı. Üstelik birden fazla parametre için de uygun değil. O halde şimdi kodumuzu biraz daha geliştirelim. Bu sefer göndereceğimiz parametreleri 3’e çıkartalım ve Linkimizi aşağıdaki gibi düzenleyelim.

Kod   
<a href="#" onclick="callPage('5,10,20')">Linkim</a>

Buna göre fonksiyonumuzun yeni hali de aşağıdaki gibi oluşacaktır.

Kod   
function callPage(idVal, idVal2, idVal3){
  window.location = “test.html?id=+idVal+”id2=+idVal2+”id3=+idVal3;
}

Göndereceğimiz parametredeki fonksiyonumuzu da aşağıdaki ile değiştirelim.

Kod   
function htmlQueryYakala(strVal)
{
	var parametreler = window.location.search.substring(1);
	var degerler = parametreler.split('&');
	for (var i = 0; i < degerler.length; i++)
	{
		var parametreAdi = degerler[i].split('=');
		if (parametreAdi[0] == strVal)
		{
			return parametreAdi[1];
		}
	}
}

Yukarıdaki fonksiyonumuza göre artık kolaylıkla ve parametreleri yakalayabiliriz.

Kod   
var IDValue = htmlQueryYakala("id")
var ID2Value = htmlQueryYakala("id2")
var ID3Value = htmlQueryYakala("id3")

Bir sonraki yazıda görüşmek üzere..

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. hece
    10 Ekim 2013 - 14:13

    projede farklı html sayfaları kullansak bile “index.js” javascript dosyamızdan tüm html sayfalardaki elementlere id ile ulaşabiliyoruz. ya da en tepede tanımladığımız değişkene atadığımız değeri gezdiğimiz tüm sayfalarda kullanabiliyoruz. yani tüm html dosyalar içinde ayrı ayrı scriptler yazmak yerine tek bir js dosyadan tümünü kontrol edebiliyoruz. bu durumun dezavantajı var mıdır sizce? eğer yok ise parametreli kullanımaa zaten gerek kalmayacaktır sanırım.

  2. :DeliPenguen
    10 Ekim 2013 - 16:01

    Merhaba hece,

    Buradaki konu elementlerin id’lerine ulaşmaktan çok bir sayfadan diğer sayfaya değer göndermek ile alakalı bir durum. Tüm HTML sayfaları için ayrı ayrı script hazırlamak hem avantaj hem dezavantaj sayılabilir. Dezavantajdır; çünkü bakımını yapacağın ve yöneteceğin dosya sayısı artar. Avantajdır; mobil uygulamanın yüklenme miktarını düşüreceğinden hız performansı artacaktır. Ancak makalede bir yöntem olarak anlatılan konuyu yönetmenin en güzel tarafı global değişkenler ile HTML5 localStorage kullanımı yapılarak attribute kullanılması en doğru yöntem olacaktır. Şöyle ki; bir “li” etiketine tıklandığında “li mydata=’12′” gibi bir kullanım yapılarak diğer sayfalara taşıma işlemi yapılabilir. Bu yöntemi de inşallah uygun bir arada yazar, yayınlamaya çalışırım.