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

0 dakikada yazıldı

22650 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]

    \\         \\             \ \                 Text="back" Click="BackApplicationBar\_Click"/\>\             \ \                 Text="forward" Click="ForwardApplicationBar\_Click"/\>\             \\                 \\                 \<shell:ApplicationBarMenuItem Text="JS Çalıştır" Click="ApplicationBarMenuItem_Click" />\             \\         \\     \\>

"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

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

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]

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

Ş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.