Ekin Özçiçekçiler [MVP] - Kişisel Blog

Windows Mobile 6.5 - Widget Geliştirmek

Bu yazımızda yakın zamanda hayatımıza hızlı bir giriş yapacak olan Windows Mobile 6.5’ un developer tarafında getirdiği belkide en heyecanlı yenilik olan Widget kavramını tanıyacak, Windows Mobile 6.5 üzerinde çalışabilecek örnek bir widget geliştireceğiz.
Önümüzdeki sene çıkarılması hedeflenen ve mobil cihaz deneyimimizi tamamen değiştirecek Windows Mobile 7 için çalışmalar hızla süredursun, Microsoft süpriz bir kararla belkide bu süre zarfında Windows Mobile kullanıcıları ve Windows Mobile üzerine uygulama geliştiren uygulama geliştiricileri belirli bir süre tatmin edecek seviyede bir “ara” işletim sistemi geliştirdi ; Windows Mobile 6.5 !

Windows Mobile 6.5’ un yeniliklerine genel olarak bakıldığında iş süreçleri, son kullanıcı ve developer gibi farklı kategorilerde birçok yenilik göze batmaktadır. SkyMarket (MarketPlace), yepyeni kullanıcı arayüzü, geliştirilmiş dokunmatik altyapı gibi yenilikler Windows Mobile 6.5’ u piyasadaki rakiplerinden öne çıkarmakta, son kullanıcıya ise daha önceki sürümleri ile karşılaştırıldığında daha kullanışlı gelmektedir.
Bu yazımızda ise belki türkçe kaynaklarda çok fazla detayına inilmeyen, yakın zamanda ortalığı kasıp kuvaracak, Windows Mobile 6.5 Developer tarafındaki belkide en heyecanlı kavramdan bahsedeceğiz, Widget ‘ lar ! Hiç vakit kaybetmeden Widget kavramının Windows Mobile 6.5’ ta (Bu noktadanitibaren WM olarak anılacaktır) ne ifade ettiğinden ve genel yapısından bahsedelim.

Widget Nedir ?

Temel olarak bakıldığında Windows Vista üzerinde HTML ve CSS gibi web uygulama geliştirme noktasındaki iki gücü bir araya getirerek ve JavaScript’ in istemci taraflı yeteneklerini bir araya getirerek Web üzerinden veri çekebilen, masaüstümüzü renklerdiren ve farklı amaçlara yönelik binlerce örneği geliştirilen bir kavram söz konusuydu, Gadget’ lar.
Gadget’ lar farklı bir uygulama geliştirme metodolijisiyle, web uygulama geliştirme teknikleri ile birlikte kullanıcıların masaüstlerinde hayatlarını ciddi anlamda kolaylaştıran, minik programcıklar olarak ifade edilebilmektedir. Gadget’ lar ile anlık hava durumu, borsa bilgileri, trafik bilgileri gibi bilgileri tek tıklamayla alabilmekte, tüm bunları tek noktadan gerçekleştirebilmekteydik.
Widget’ lar için yukarıdaki tanıma bakarak, HTML, DHTML ve CSS’ in tasarımsal gücü ile JavaScript ve AJAX’ ın istemci tarafındaki gücünü biraraya getiren, Windows Mobile cihazımız üzerinde çalıştırılabilecek web tabanlı küçük programcıklar diyebilmekteyiz.
Widget ve Internet Explorer Mobile :
Yukarıdaki tanımları okuyan birçok uygulama geliştiricisinin aklındaki en temel soru şu olmaktadır : “Biz Internet Explorer Mobile ile mobil cihazımız üzerinden internet üzerindeki verilere zaten ulaşabilmekteyiz, Widget’ ın ne farkı varki ?”
Genel olarak bakıldığında Widget ile Mobil cihazımız üzerinden IE Mobile ile ulaştığımız web sitelerinden aynı verileri çekebilmekteyiz. İşte bu noktada ciddi anlamda farklar ortaya çıkmaktadır.
İlk olarak düşünüldüğünde, standart bir web sitesi / uygulaması üzerinde bir istekte bulunduğumuzda sunucu üzerinde gerçekleştirilecek postback çağrılarında beklemeler yaşanabilecek, mobil cihazımız ile operatörümüz arasında ciddi bir network trafiği yaşanacaktır. Peki Ajax kullansak bile bu trafik aynımı kalacaktır ? Tabiki hayır, Ajax teknolojisi bu network trafiğini ciddi anlamda azaltmakta, fakat her koşulda bir web çağrısında HTML, CSS v.b. yapılar uzak noktadan çağrılmakta, anlamsız bir web trafiği oluşmaktadır.

Widget’ lara bakıldığında ise ciddi anlamdaki ilk farkı bu noktada görebilmekteyiz. Widget’ lar HTML, CSS, Script gibi yapıları makinemizin lokalinden kullanan, uzaktan bir çağrıya bu kavramlar için ihtiyaç duymayan yapılardır. Sadece uzak bir veriye ihtiyaç duyulduğunda uzak çağrı gerçekleştirilmektedir, bunun dışındaki imajlar, html verileri, css v.b. yapılar lokalde depolandığından bu çağrılar gerçekleştirilmemekte, network trafiği ciddi anlamda azaltılmaktadır.

Bunun dışında standart web uygulamalarından farklı olarak, JavaScript ortamından Widget API’ sine yapılacak çağrılar ile makinemizin fiziksel SoftKey’ lerine menüler atayabilme, lokalde veri depolayabilme gibi web uygulamalarında olmayan özelliklere sahip olabilirsiniz.

Widget’ lar tam ekran olarak çalıştırılan uygulamalardır. Bu uygulamalar çalıştırıldığında kullanıcılar çalıştırılan uygulamanın Widget olup olmadığını tek görüşte anlayamamaktadırlar. Bunun sebebi bu küçük web tabanlı uygulamayı Start Menü altından açabilmekte, çalıştırıldığında formatı gereği Internet Explorer Mobile üzerinden çalıştırılmamaktadır.

Dahada enteresan olarak Widget’ lar arka planda Internet Explorer Mobile’ ın güçlü motorunu kullanmaktadır.

Widget Genel Yapısı

Widget olarak adlandırılan programcıklar temel olarak 3’ ü gerekli toplam 6 parçanın bir araya gelmesinden oluşmaktadır.

.html – Widget’ ın HTML içeriğinin bulunduğu HTML dosyası. (Gerekli)
config.xml – Widget metadata bilgisinin tutulduğu konfigürasyon dosyasıdır. (Gerekli)
Widget için *.ico, *.png, *.jpg – Widget’ ın kurulumundan sonra widget’ ın start menü’ de hangi resim ile görüleceğini belirtir. (Gerekli)
*.js – HTML dosyası içerisinde kullanılan ekstra script dosyaları (Gerekli Değil)
*.css – HTML dosyası içerisinde kullanılan CSS dosyası. (Gerekli Değil)
Ekstra Kaynaklar – Ekstradan kullanılan resimler, flash dosyaları v.b (Gerekli Değil)

İsterseniz hiç vakit kaybetmeden hızlı bir şekilde örnek Widget’ ımızı adım adım geliştirmeye başlayalım. İlk aşamada Widget’ ımızın içeriğini oluşturacak olan HTML dökümanımızı, yani content elementi üzerinde çalışalım.



Yukarıdaki kod bloğunda basit anlamda bir HTML dökümanı oluşturulmakta, sayfa içerisine yerleştirilen button’ a tıklandığında JavaScript fonksiyonu ile ekrana bir mesaj kutusu getirilmektedir.

Dosyamızı WidgetContent.html ismiyle kaydediyoruz.

İşte Widget’ ımız hazır ! Sıra geldi Widget’ ın paketlenmesi için gerçekleştirilmesi gereken çalışmalara.

Widget genel yapısı bölümünde ifade edildiği üzere Widget’ ın mobil cihazımız tarafından tanınabilmes, kurulabilmesi ve çalıştırılabilmesi için “gerekli” olan bazı yapılar bulunmaktadır. Bunlardan ilki olan kaynak HTML dökümanını oluşturmuş olmamız Widget’ ın çalıştırılabileceği anlamına gelmemektedir.

Widget’ ın işletim sistemi üzerinde tanınabilmesi ve çalıştırılabilmesi için ilk olarak “manifest” adı verilen ve belirli kurallara göre oluşturulması gereken bir xml konfigürasyon dosyası oluşturulmalıdır.
Bu dosyanın adı config.xml olarak kaydedilmeli ve Widget’ ı oluşturan diğer parçalar ile aynı lokasyonda olmalıdır.

Peki bi config.xml dosyasını hangi structure’ a göre oluşturacağız ? Widget’ ın doğru çalışabilmesi için xml structure’ ı ne olmalıdır ?

Microsoft, Widget altyapısını hazırladıktan sonra bu standartizasyon ile ilgili W3C üzerinde hızlı bir şekilde bir standart oluşturdu ve olması gereken xml structure’ ını bu şema üzerinden belirledi.

Bu standartizasyona http://www.w3.org/TR/2008/WD-widgets-20081222/ adresinden ulaşabilir, hangi element’ in altına hangi elementlerin gelebileceğine ve tüm özelliklerine detaylı olarak bakabilirsiniz. Bu yazımızda konfigürasyon konusunda detaylı olarak eğilmeden standart konfigürasyon yapısını örneklendireceğiz.

Genel olarak bakıldığında config.xml dosyası Widget standartlarında olabilmesi için root elementi ile başlaması gerekmektedir. Bu elementin altına ihtiyaçlar doğrultusunda aşağıdaki elementler yerleştirilmelidir.

Widget’ ın network erişimi ile ilgili ayarları yapmanıza olanak sağlar.

Widget’ ı geliştiren kişi ile ilgili detaylı bilgilendirme vermeye yarar. Opsiyonal olarak href, email ve img attribute’ ları ile ekstra detaylı bilgiler verilebilmektedir.

Kesin olarak eklenmesi gereken alt elementtir. Bu element’ in src attribute’ u ile Widget’ ın HTML dökümana olan bağlantısı belirlenir.

Widget hakkında detaylı bilgilendirme yapılabilir. Bu element’ e verdiğiniz değer yükleme esnasında ekranda görünmektedir.

Bu element ile Widget kurulduktan sonra Start Menu’ de hangi ikon ile görüneceğini belirleyebilirsiniz. Src attribute’ u ile dosyanın adını belirleyebilirsiniz.

Widget’ a kullanıcı dostu bir isim vermek için kullanabilirsiniz. Bu isim Start Menu ve Remove Programs ekranlarında görülebilmektedir.

Yukarıdaki bilgilerin ışığında örnek Widget’ ımız için config.xml dosyamızı şekildeki gibi oluşturuyoruz.

İşte config.xml dosyamız hazır ! Dikkat edilecek olursa Widget’ ın Start Menu’ de görünebilmesi için bir icon değeri belirledik. Bu dosyası bu isimde diğer dosyalarla aynı lokasyona yerleştirmeliyiz.

En son olarak aşağıdaki görünümü elde etmeliyiz ;

Dikkat edilecek olursa ilgili 3 dosyayı aynı lokasyona yerleştirdik.

Ve sıra geldi en heyecanlı noktaya ; Widget Paketleme !

Widget Paketleme

Microsoft Widget’ ların paketlenmesi ve dağıtımı ile ilgili inanılmaz mantıklı bir yöntem uygulamaktadırlar. Widget genel olarak iki şekilde cihazınız üzerine yüklenebilmektedir. Birincisi Skymarket olarak adlandırılan servis üzerinden belirli bir ücret karşılığında, yada self- deployment olarak ifade edilen “kopyala – yapıştır” yöntemiyle. Biz bu yazımızda Cihaz Emülatörü üzerine widget dosyamızı kopyalayarak yükleme işlemini gerçekleştirecek ve Widget’ ımızı çalıştıracağız.

Peki Widget dosyamızı nasıl oluşturacağız ? Bu iş sandığınızdan çok daha kolay.

Yukarıdaki ekran görüntüsünde gördüğünüz dosyaları seçerek biz *.zip dosyası haline getirelim. Ve bu zip dosyasının uzantısını *.wgt olarak değiştirelim. İşte bu kadar !



Önce zipledik !



Daha sonra uzantısını değiştirdik ! Artık bu dosyayı emulatör yada fiziksel cihazımız üzerine kopyalarak Widget’ ımızı kurabilir ve kullanmaya başlayabiliriz.

Hiç vakit kaybetmeden Windows Mobile 6.5 Emulatörümüzü başlatıyoruz.



Emülatörümüzü seçip üzerine sağ tıkladıktan sonra Connect seçeneğine tıklıyoruz.



Emülatör açıldıktan sonra Ayarlarından “Shared Folder” olarak wgt dosyamızın bulunduğu lokasyonu belirliyoruz. Bu seçenek ile Emülatör üzerinde “Storage Card” olarak bu klasöre erişebilir, dosyamızı çalıştırabiliriz.

Emülatörden dosyanın üzerine tıklıyoruz ve yüklemeye başlıyoruz ;



Eğer konfigürasyon dosyasında herhangi bir hatamız yok ise Widget dosyamızın üzerine tıkladığımızda ;



Yes ‘ e tıklıyoruz ;



İşte Widget’ ımız ! Widget, FullScreen olarak sanki native bir uygulamaymış gibi ekranımıza gelmektedir. Widget üzerindeki tuşa tıkladığımızda ise ;



İşte bu kadar. Widget’ a istediğimiz zaman Start Menu altından erişebiliriz.



Yazımızın sonuna gelmeden önce belirtmek gerekirki bu yazıda değinilmeyen birçok konuya sonraki yazılarda değinilecektir.

Başka bir yazıda daha görüşmek dileğiyle.

Etiketler: widget, windows mobile 6.5