Tekrar merhabalar,
Bugünkü yazımda ASP.NET ile pek çok cep telefonunda bulunan WML destekli WAP Browser’lar üzerinde gösterilebilen sayfaların nasıl generate edildiğini inceleyeceğiz.
WML nedir ?
Cep telefonlarının hayatımıza ilk girdiği dönemlerde pek çoğunun üzerinde WAP browser vardı. Günümüzde cep telefonlarının üzerlerinde javascript bile çalıştırabilen gelişmiş tarayıcılar var ancak bu telefonların fiyatları hala oldukça yüksek. Kurumsal ve büyük projelerde firmalar mobile uygulamaların kullanım maliyetlerini en asgaride tutmak istediklerinden genellikle en ucuz cep telefonlarına yöneliyorlar. Haliyle bu cep telefonlarının üzerinde de sadece WAP browser’lar oluyor.
ASP.NET ile WML arasında ne farklar Var ?
Aslında hiçbir fark yok. WAP browser bir istekte bulunduğunda IIS bu isteği ISAPI bileşenleri ile derlemeye çalışıyor. ASP.NET konfigürasyonundaki Machine.config dosyasına bakarak, istekte bulunan cihazın tipini belirlemeye çalışıyor ve kabiliyetlerini gözden geçiriyor. Buna göre sayfadaki görsel öğeleri cihazın kabiliyetleri doğrultusunda WML kodu haline getirerek istemciye iletiyor. WML çok daha “sınırlı” yeteneklere sahip olduğundan, Machine.config dosyasının doğru bir şekilde ayarlanmış olması çok önemli!
Örnek WML uygulaması
Örneğimiz aslında çok basit. Bir form oluşturacağız ve bu formun üzerinde 2 textbox’ımız olacak. Bunlardan biri sadece numarik değer kabul edecek diğerine ise istediğimiz herhangi birşeyi yazabileceğiz. Butona bastığımızda başka bir sayfaya gidecek ve bu kutulara girdiğimiz değerleri göstereceğiz.
Mobile Web Form
Mobile Web Form, sayfamızın WML kullanılarak derlenmesi gerektiğini IIS tarafına anlatan bir yapı. Aslında normal Web Form ile aralarında hiçbir fark yok sadece başka bir sınıftan türüyorlar.
Öncelikle mobileTest adında bir ASP.NET Web Site projesi oluşturuyorum
Daha sonra Solution Explorer içinden default olarak projeyi oluşturduğumuzda hazırlanan Default.aspx ve kendisiyle ilgili tüm dosyaları siliyorum. Neden siliyorum ? Çünkü bu dosya standard bir ASP.NET sayfasının özelliklerini taşıyor. Mobil cihazların çoğu ile uyumsuz.
Şimdi, mobil cihazlar ile uyumlu bir Page’i projemize ekleyelim. Bunun için, proje üzerinde sağ-klik yaparak Add New Item diyorum ve Mobile Web Form nesnesini seçiyorum.
Default.aspx adında yeni bir Mobile Form projemize eklendi. Dikkat edecek olursanız ASPX kaynağında aşağıdaki gibi bir tag göreceksiniz :
<mobile:Form id=”Form1″ runat=”server”> </mobile:Form>
İşte ilk farklılık burada. Form taglarinin başında mobile ibaresi var.
Eğer ASPX sayfamızın dizaynına bakacak olursanız ikinci bir farklılık göreceksiniz :
Formumuz artık tam sayfa değil, bir çerçeve ile sınırlandırılmış durumda. Form1 çerçevesinin dışına koyacağınız, yazacağınız herhangi birşey doğru olarak derlenemeyebilir. Derlense bile cihaz tarafından doğru gösterilemeyebilir. Biz tüm bileşenlerimizi bu çerçevenin içine yerleştireceğiz.Form içine Adınız ve Yaşınız şeklinde 2 textbox yerleştireceğim. Dikka ederseniz, toolbox üzerinde bulunan Mobile Web Forms kategorisindeki elemanların artık pasif olmadığını görebilirsiniz. Eğer bu kategoriyi göremiyorsanız Toolbox üzerinde sağ-klick yaparak Show All seçeneğini seçebilirsiniz. Biraz kalabalık olacak ama Mobile Web Forms da görüntülenecek.
Bu kategoriden aldığım bir Label kontrolünü form üzerine bırakıyorum.
Dikkat ettiyseniz Label tüm form genişliği kapladı. İşte limitasyonlarımızdan biri. WML destekli sayfalarda tasarım anlamında harikalar yaratamıyorsunuz L Ama biz limitleri zorlayacağız. Hemen ardından bir de Textbox kontrolü bırakıyorum form üzerine.
Eğer bu noktada Internet Explorer ile önizleme yapmak isterseniz bakın sayfamız şu şekilde gözükecek :
Şimdi gelelim Textbox’un Label’ın yanından başlamasına. Alt alta görünsün istemiyoruz. Önce Label üzerindeki metni değiştiriyorum. Label’ın Text özelliğini “Adınız : ” olarak değiştirdikten sonra BreakAfter özelliğini ise False yapıyorum. BreakAfter True olduğunda, runtime sırasında, bu kontrolün derlenmesinden sonra bir line break konularak diğer kontrollerin derlenmesine başlanması. Biz textbox’ın label’dan hemen sonra çizilmesini istediğimiz için BreakAfter’ı False yapıyoruz. Son durum şu hale geliyor :
Aynı şeyi diğer kutumuz için de yapalım. Yine bir label ve ardından bir textbox koyuyoruz. Label’ın Text özelliğini “Yaşınız : “ yapıyoruz ve BreakAfter özelliğini FALSE yapıyoruz. Textbox içine sadece numerik bilgi girebileceğiniz için Numeric özelliğini TRUE yapıyoruz. Son durum aşağıdaki gibi :
Son olarak bir buton yerleştiriyoruz. Bu buton bizi diğer bir sayfaya gönderecek ve textbox’lar içindeki metinleri okumamızı sağlayacak.
Şimdi butonu kodlayalım. Designer üzerinde buton üzerinde double-click yapıyorum ve codebehind içindeki event handler koduna erişiyorum. Aşağıdaki kodu event handler içerisine yazıyoruz:
protected void Command1_Click(object sender, EventArgs e)
{
string strAdiniz = “”;
string strYasiniz = “”; strAdiniz = TextBox1.Text;
strYasiniz = TextBox2.Text;
this.RedirectToMobilePage(“goster.aspx?var1=” + strAdiniz + “&var2=” + strYasiniz);
}
Son olarak, goster.aspx adında yeni bir mobile form oluşturuyoruz ve aşağıdaki kodu Page Activate içerisine yazıyoruz.
protected void Form1_Activate(object sender, EventArgs e)
{
Response.Write(“Adınız : “ + Request.QueryString["var1"].ToString());
Response.Write(“Yaşınız : “ + Request.QueryString["var2"].ToString());
}
Form üzerine girdiğimiz bilgileri diğer sayfaya taşımak için query string kullandık. var1 ve var2 değişkenlerine değerlerimizi yükleyerek RedirectToMobilePage() metodundan faydalandık. Gittiğimiz goster.aspx sayfası Activate olduğunda (yani OnLoad gibi) query string kolleksiyonunu okuyarak ekrana gerekli girişleri yazdı. Default.aspx sayfasını Start Page olarak belirlemeyi unutmayın!
Mobile Web Formlarına giriş yaptık. Eğer bir hosting imkanınız varsa, projenizi derleyip sunucuya yerleştirdikten sonra cep telefonunuz ile de deneyebilirsiniz. Ya da pek çok mobile device emulator’dan herhangi birini kullanabilirsiniz. Google bunlarla dolu.Umarım işinize yarar.
Tekrar görüşmek üzere J
