Windows Phone 8 için HTML5-JS ile uygulama geliştirenlere ipuçları

0 dakikada yazıldı

22771 defa okundu

Düzenle

Windows Phone 8'de HTML/JS uygulamalar Windows 8'de olduğu gibi native
olmaktan çok uzak. Fakat hala çoğu developer ve firma mobile
uygulamalarında HTML5 kullanma konusunda ısrarlılar :) Sanırım bu son
cümlemden de pek HTML5/JS fanatiği olmadığımı belli etmişimdir. Aslına
bakarsanız bu konuda antipatim sadece mobil uygulamalarla sınırlı, yoksa
HTML/JS ile alıp veremediğim bir şey yok. Neyse, konuyu uzatmayayım ve
esasn olaya geçelim. Bu yazıda Windows Phone 8 için HTML/JS ile uygulama
yazmaya karar verirseniz kullanabileceğiniz bazı ipuçları ve
taktiklerden bahsetmek istiyorum.

Windows Phone 8 için HTML 5 Projesi oluştururken.
Windows Phone 8 için HTML 5 Projesi oluştururken.

Öncesinde çok kısa olarak bu HTML5 hikayesi tam olarak nasıl
gerçekleşiyor Windows Phone 8'de konusunu aydınlatalım. Daha önce de
dediğim gibi Windows 8'deki gibi doğrudan WinRT Projeksiyonu yok. Yani
aslında yazdığınız JavaScript tarayıcı içerisinde çalışıyor, HTML de
aynı şekilde. C# veya VB ile yazılabilen Native bir uygulamanın içine
WebBrowser kontrolü konularak, içine de uygulamanın içine gömülmüş HTML
içeriği kondurularak olay tamamlanıyor :) Tekrar etmek gerekirse,
içerisinde WebBrowser olan bir native app'den farklı bir şeyden
bahsetmiyoruz. Yukarıdaki gibi HTML5 seçeneğini seçmeniz de aslında size
sadece içinde hazır olarak WebBrowser kontrolü konmuş bir uygulama
getirecek. Şimdiden uyariyim, bu konu Windows Phone 8.1'de inanılmaz
değişecek. Demedi demeyin :) Tabi "değişecek" derken HTML5/JS
desteğinden bahsediyorum yoksa yukarıdaki şekilde yazacağınız bir
uygulamanın WP8.1'de çalışması ile ilgili bir sıkıntı olmayacak
kesinlikle.

.NET kodundan JavaScript'e ulaşmak.

İlk yapmak isteyecebileceğiniz şeylerden biri .NET kodundan yani
arkadaki native taraftaki C# veya VB'den tarayıcı içerisinde çalışan
HTML/JS'ye ulaşmaya çalışmak olabilir. Boş bir HTML5 App yarattıktan
sonra ben hemen HTML kısmına örnek bir JavaScript metodu koydum test
için.

[HTML/JS]

<script type="text/javascript">
    function selamlar(param)
    {
        alert(param);
    }
</script>

Yukarıdaki metodu WebBrowser içerisinde açılacak HTML'in içine koydum.
Basit bir şekilde gönderdiğimiz metni bir MessageBox ile gösterecek. Bir
sonraki adımda amacımız arkadaki C# kodundan buraya parametre gönderip
"selamlar" adındaki JavaScript kodunu çalıştırmak. Bunu test edebilmek
için de uygulamaya yeni bir AppBarButton ekleyelim.

[XAML]

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
            <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/appbar.back.rest.png" IsEnabled="True" 
               
Text
="back" Click="BackApplicationBar_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/appbar.next.rest.png" IsEnabled="True" 
               
Text
="forward" Click="ForwardApplicationBar_Click"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="home" Click="HomeMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="JS Çalıştır" Click="ApplicationBarMenuItem_Click" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

"JS Çalıştır" adındaki düğmenin arkasına da esas işi yapacak kodu
yazıyoruz.

[C#]

private void ApplicationBarMenuItem_Click(object sender, EventArgs e)
{
    Browser.InvokeScript("selamlar""yeni bir selam");
}

Örneğimizdeki WebBrowser nesnesinin instance adı "Browser" şeklindeydi.
Hemen onun üzerinden "InvokeScript" diyerek çalıştıracağımız metodun
adını ve parametresini veriyoruz. Bu noktada sadece sizin tanımladığımız
JavaScript metodlarını değil JavaScript contextindeki her şeyi
çalıştırabilirsiniz. Örneğin "InvokeScript"'in ilk parametresini
"eval" derseniz ikinci parametreye string olarak vereceğiniz
JavaScript kodu doğrudan çalıştırılacaktır. Bu hali ile aslında klasik
JavaScript'teki "eval" komutunu çalıştırmış oluyoruz.

JavaScript'ten .NET'e ulaşmak

Tahmin ettiğiniz üzere bu sefer de amacımız tam ters yönde ilerlemek.
Yani JavaScript kodundan arkadaki CS/VB koduna ulaşmak. Buradaki
metodumuz bir önceki gibi generic olmayacak. WebBrowser kontrolünün
ScriptNotify özelliğini kullanacağız. Gelin adım adım ilerleyelim. İlk
olarak HTML kodumuzun içerisinde durumu test edebilmek adına bir düğme
ve JavaScript kodu yerleştirelim.

HTML/JS

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <title>Windows Phone</title>
        <script type="text/javascript">
            function CSCagir()
            {
                window.external.notify("Selam");
            }
        </script>
    </head>
    <body>
        <div>
            <p>MY APPLICATION</p>
        </div>
        <div id="page-title">
            <p>page title</p>
            <input type="button" onclick="CSCagir()"
        </div>
    </body>
</html>

Yukarıdaki kod içerisinde iki önemli nokta var. Bunlardan ilki test için
eklediğimiz en alttaki düğme ve ikincisi de o düğmenin tıklandığında
çağırdığı CSCagir metodu. CSCagir'ın içine baktığınızda "notify"
işleminin kullanıldığını göreceksiniz. İşte bu metod bizim arkadaki
CS/VB koduna ulaşabilmemizi sağlayacak. JavaScriptten istediğimiz bir
parametreyi alıp notify ile arkaya atmış oluyoruz. Arkaya atılan bu
verinin yakalanması için WebBrowser kontrolünün ScriptNotify
event'inin dinlenmesi gerekiyor.

[XAML]

<phone:WebBrowser x:Name="Browser"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  Loaded="Browser_Loaded"
                  NavigationFailed="Browser_NavigationFailed"
                  ScriptNotify="Browser_ScriptNotify"/>

Gerekli event-listener'ı da yukarıdaki gibi ataçladıktan sonra CS/VB
tarafına geçip implementasyonumuzu tamamlayabiliriz.

[CS]

private void Browser_ScriptNotify(object sender, NotifyEventArgs e)
{
    MessageBox.Show(e.Value);
}

Ben yine örnek olması amacı ile konuyu süper basit tutuyorum. Arka
tarafa gelen değeri e.value argümanı üzerinden alabiliyoruz.
Örneğimizde bunu bir messageBox ile göstermek test için yeterli
olacaktır.

Tarayıcı Paylaşımı ve Cache Problemleri

Problemlerin en büyüğü aslında uygulamanızı sistem tarayıcısını
kullanıyor olması ve normal tarayıcı instance'ında yaratılan tüm cookie
ve cache'in sizin uygulamanızın içindeki tarayıcı için de geçerli
olması. Bu bazı durumlarda kullanıcıların aslında uygulamanızın bir web
sitesi olduğunu anlamalarına neden olabilir ve siz de bunu
istemeyebilirsiniz. O nedenle aşağıdaki iki komut ile ortalığı
temizlemek güzel bir fikir olabilir.

[C#]

await Browser.ClearCookiesAsync();
await Browser.ClearInternetCacheAsync();

Highlight olayını kaldırsak?

Bir diğer can sıkıcı nokta da normal native uygulamalarda olmayan fakat
HTML5 uygulamalardan kendini gösteren "Highlight" durumu. Tarayıcı
içerisindeki tüm kontrollerde touch ile interaction oluştuğunda gözüken
gri bir dikdörtgen var. Bu dikdörtgen uygulama içerisindeki HTML içeriği
ele veren tasarım öğelerinden biri oluyor. İşte bundan da kurtulabilmek
için aşağıdaki meta attribute'u kullanabilirsiniz.

[HTML]

<link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
<meta name="msapplication-tap-highlight" content="no" /> 
<title>Windows Phone</title>

Şimdilik benden bu kadar. Sizin de aklınıza gelenler varsa aşağıdaki
yorum olarak paylaşabilirsiniz. Şu an için çoğu JavaScript kütüphanesini
WP için de HTML5 uygulamalarında kullanabilirsiniz. Aynı şekilde çoğu
HTML5 özelliği de mevcut.

Görüşmek üzere.