WAP – Mobil Aygıta Göre Sayfaların Render Edilmesi
06.02.2008 13:20:35
Merhaba arkadaşlar, bu makalemizde WAP kontrollerinden device specific kontrolünden bahsedeceğiz. Bu kontrol bize telefon modeline göre sonucun WML, HTML, XHTML, CHTML olarak render edilmesini sağlıyor.
Puan:
     
Daha önceki makalem de Wap kontrollerini anlatırken çok kısa da olsa bu kontrolün ne işe yaradığını anlatmıştım. Hatırlatmak gerekirse; Cep telefonlarının desteklediği markup diline göre kodumuzun render edilmesini sağlar. Örneğin html destekleyen bir telefonda sonuç html üretilir, WML destekleyen bir telefonda sonuç WML olarak üretilir. XHTML destekleyen telefonda da XHTML olarak üretilir.

Bu kontrolü niçin kullanırım?

Bir wap uygulaması geliştirdiğimizde her ziyaretçinin uygulamayı sorunsuz şekilde kullanabilmesi için bu kontrolü kullanırız. Kullanıcı arka planda telefonun ne desteklediğini bilemeyeceğinden yada bu uygulama bu telefon da çalışmaz diyemeyeceğimizden bu kontrol ile uygulamamızın tüm telefonlar da çalışmasını sağlarız.

Choice

Render edilecek Markup dili belirliyor. WML render edilecekse içerisine WML’e göre kod yazıyoruz. Html ise Html'e göre yazıyoruz.

ContentTemplate

Her yerde olduğu gibi burada da ContentTemplate çıkıyor karşımıza. Content Template içerisine Choice’de seçilen dile göre content template içerisindeki kod render edilecek.

DeviceSpecific Kullanımı

Uygulamanın WML ve HTML destekleyen telefonlar da çalışabilmesi için aşağıdaki gibidir;

<mobile:Panel ID="Panel1" runat="server">

    <mobile:DeviceSpecific ID="DeviceSpecificControl" Runat="server">

 

        <Choice Filter="isWML11">

            <ContentTemplate>

                <!— WML Render Edilecek -->

            </ContentTemplate>

        </Choice>

 

        <Choice Filter="isHTML32">

            <ContentTemplate>

                <!-- HTML Render edilecek -->

            </ContentTemplate>

        </Choice>

 

    </mobile:DeviceSpecific>

    </mobile:Panel>

 

Bu kodun çalışması için WebConfig dosyasına Tanımlı DeviceFilter’ları eklememiz gerekir. Genel olarak 2 DeviceFilter kullanılsa da farklı devicefitlerlar’da bulunmaktadır. Aşağıda bazı device filter’lar gösterilmiştir.

<deviceFilters>

<filter name="isWML11" compare="PreferredRenderingType" argument="wml11" />

<filter name="isHTML32" compare="PreferredRenderingType" argument="html32" />

<filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10" />

<filter name="isMyPalm" compare="Browser" argument="MyPalm" />

<filter name="isPocketIE" compare="Browser" argument="Pocket IE" />

<filter name="isJPhone" compare="Type" argument="J-Phone" />

<filter name="isEricssonR380" compare="Type" argument="Ericsson R380" />

<filter name="isNokia7110" compare="Type" argument="Nokia 7110" />

<filter name="supportsColor" compare="IsColor" argument="true" />

<filter name="supportsCookies" compare="Cookies" argument="true" />

<filter name="supportsJavaScript" compare="Javascript" argument="true" />

<filter name="supportsVoiceCalls" compare="CanInitiateVoiceCall" argument="true" />

</deviceFilters>

Farklı bir Filter(örneğin CHTML ve PocketIE) ile render yapılmasını istiyorsak; aşağıdaki gibi kullanırız.

<mobile:Panel ID="Panel1" runat="server">

    <mobile:DeviceSpecific ID="DeviceSpecificControl" Runat="server">

 

        <Choice Filter=" isCHTML10">

            <ContentTemplate>

                <!— WML Render Edilecek -->

            </ContentTemplate>

        </Choice>

 

        <Choice Filter=" isPocketIE ">

            <ContentTemplate>

                <!-- HTML Render edilecek -->

            </ContentTemplate>

        </Choice>

 

    </mobile:DeviceSpecific>

    </mobile:Panel>

 

Örnek

Konu ile basit bir örnek yapalım. Örneğimizde WML ve HTML destekleyen basit bir sayfa hazırlayacağız. Projemize yeni bir Mobile Form ekleyelim. Mobile Formumuza bir DeviceSpecific kontrolü ekleyelim. Yukarıda anlattığım DeviceFilter’ları da webCofig’e ekleyelim.

Formum yukarıdaki gibi bir görüntü oluştu. Şimdi html kısma gidelim; aşağıdaki kodları yazalım.

DeviceSpecific.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DeviceSpecific.aspx.cs" Inherits="WAPSamples_DeviceSpecific" %>

 

<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<body>

    <mobile:Form ID="Form1" Runat="server">

        <mobile:Panel ID="Panel1" Runat="server">

            <mobile:DeviceSpecific ID="DeviceSpecificControl" Runat="server">

                <Choice Filter="isWML11">

                    <ContentTemplate>

              Bu Sayfa WML ile Render Edilmiştir...

           

</ContentTemplate>

                </Choice>

                <Choice Filter="isHTML32">

                    <ContentTemplate>

               Bu Sayfa HTML ile Render Edilmiştir...

           

</ContentTemplate>

                </Choice>

            </mobile:DeviceSpecific>

        </mobile:Panel>

    </mobile:Form>

</body>

</html>

 

Gördüğünüz gibi çok basit. Şimdi sayfamızı test edelim.

Evet; farklı telefonlar da farklı sonuçlar aldık. Birde Web’den bakalım

Evet artık wap uygulamalarımızı her yerde çalıştırabiliyoruz J

Bu makalenin de sonuna geldik. Bir sonraki makale de görüşmek üzere. İyi çalışmalar dilerim

Sem Göksu
sem.goksu@yazilimgunlugu.com
www.semgoksu.com | www.yazilimgunlugu.com

Kaynaklar

http://www.w3schools.com
http://www.msdn.com

 
 
Puan: