Windows 8 Uygulamalarında Javascript Kullanımına Giriş

     Merhaba arkadaşlar, en son yayınımda sizlere Windows 8 uygulamalarında veritabanı kullanımına ilişkin konudan bahsetmiştim. Bu haftadan itibaren sizlere Javascript kullanarak Windows 8 uygulamaları geliştirmeye yönelik konulardan bahsedeceğim. Bu hafta genel bir giriş niteliğinde olacak ilerleyen haftalarda  
temel konulara değinip örnek uygulamalar yapacağız.

     Javascript kullanarak Windows 8 uygulaması geliştirmek istiyorsak Javascript hakkında daha önceden biraz bilgi sahibi olmamız bize kolaylık sağlayacaktır. Bu konuda aşağıdaki siteden faydalanabilirsiniz:
http://www.w3schools.com/js/js_examples.asp

       Jquery kodlarını da Windows 8 uygulamalarına entegre ederek kullanılan uygulamalar vardır ancak Windows 8'in bize sağladığı metodlarla da bunları yapabilmemiz mümkün olacaktır. Öncelikle sizlere Visual Studio ile gelen uygulama stillerinden bahsedeceğim, Visual Studio ile Javascript seçerek Windows 8 uygulaması açarken karşımıza 5 adet seçenek çıkacaktır. Bunlardan proje yapımıza en uygun olanı seçerek başlayabiliriz.

Blank App
Boş bir uygulama arayüzü ile başlamamızı sağlar. İçerisinde önceden tanımlanmış herhangi bir kontrol yoktur.
Split  Application
2 sayfaya ayrılmış bir proje düzenidir. İlk sayfada bir grup içerisinden seçim yapmamızı sağlayan bir düzen ikinci sayfada da ilk sayfada seçilen elemana ait bilgilerin detaylarına erişebileceğimiz bir sayfa bulunmaktadır.
Fixed Layout Application
Belirli bir oranda ekran görüntüsü ile gelen uygulama arayüzüdür.
Navigation Application
Önceden sayfalar arasında geçiş için hazırlanmış kontrollerle gelen bir uygulama arayüzüdür.
Grid Application
Çok sayfalı bir uygulama arayüzüdür. Temelde "Split Application" düzenine benzemektedir ancak seçimler ve sayfalar daha çoktur.

     Biraz da Javascript ile yeni bir uygulama açtığımızda karşımıza gelen dosyalara bakalım.

     Gördüğümüz gibi referanslar klasörü, "css" klasörü, "images" klasörü, "js" klasörü olmak üzere 5 adet klasör karşımıza çıkıyor. "Css" klasöründe uygulamamızın tasarımına ait kodları içeren stil dosyaları bulunuyor."Images" klasöründe uygulamamızın temelde varolan resimleri var,"js" klasöründe de javascript kodlarımızı içeren dosyalar oluyor. Ana kökte ise html dosyamız var. Bu html dosyasına javascript ve css dosyalarımızın referansını veriyoruz ve içeriğimizi burada düzenliyoruz.

     Biraz genel işleyişten bahsedeyim. Görünüm için html dosyamızın içerisinde istediğimiz kontrolleri atıyoruz. Zaten bu kontroller "button, text, submit" vs. gibi klasik bir html sayfasında varolan kontrollerdir. Bunlarla sayfamıza temel şeklini veriyoruz ve daha güzel görünümler elde etmek için "css" dosyalarımızın içerisine html sayfasında attığımız kontrollerin id'lerine göre "css" kodlarımızı yazıyoruz. Daha sonra html dosyasında kullandığımız kontrollere tıklandığında, üzerine gelindiğinde vs. gibi olaylarda neler yapılmasını istiyorsak bunların kodlarını da "js" dosyalarımıza yazıyoruz. İlerleyen yazılarımda yapacağımız örnek projeler üzerinden anlamamız daha da kolaylaşacaktır.

     Html sayfalarımızda kullanacağımız kontrollerden haftaya detaylı olarak bahsedeceğim ama aklımızda bir fikir oluşması açısından aşağıdan bakabilirsiniz:

     Daha önce web sayfası yapmışsak bu kontroller tanıdık gelecektir. Windows 8 uygulamalarında javascript  ile uygulama geliştirme istiyorsak size faydalı olabilecek birkaç kaynakta bahsetmek istiyorum.

     Microsoft'un kendi sitesinde bu konuyla ilgili birkaç yazı var, aşağıdaki linkten takip edebilirsiniz.
http://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx

     CodeProject'in sitesinde Javascript ile ilgili temel giriş bilgileri bulunuyor:

http://www.codeproject.com/Articles/338916/Windows-8-JavaScript-Metro-Application-Getting-Sta

     Javascript kullanarak Windows 8 oyun uygulaması yapmak isteyenler için de aşağıdaki link bir başlangıç olabilir:

http://www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-game-basics-createjseaseljs/

     

     İlerleyen yazılarımda yine kaynaklar paylaşacağım.    

     Son olarak da ilerde çok sık kullanacağımız temel bir javascript kodundan bahsetmek istiyorum. Html sayfalarımıza attığımız kontrollere erişmek için aşağıdaki kodu kullanabiliriz:

   var kontrol= document.getElementById("kontrol id'si");  

      Buradan da görüldüğü gibi html sayfsındaki kontrolün id'si ile kontrole erişebiliyoruz. Daha sonra istediğimiz özellikleri buradan yazabiliriz.

     Bir sonraki yazımda Javascript ile Windows 8 uygulaması geliştirirken kullanacağımız kontrollerden bahsedeceğim. Takipte kalın ;)

Referanslar:

http://www.codeproject.com/Articles/338916/Windows-8-JavaScript-Metro-Application-Getting-Sta

http://www.ilkaytaskiran.com/index.php/windows-8-javascript-giris.html

http://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx