Merhaba arkadaşlar, geçen hafta sizlere Windows 8 JavaScript uygulamalarında Application Data ve Session kavramlarının neler olduğundan ve bunları nasıl kullanabildiğimizden bahsetmiştim. Bu hafta da sizlere Windows 8 JavaScript uygulamalarında sayfalar arasındaki geçişten bahsedeceğim. Bu sayfa geçişleri aslında temel olarak bir web sayfasının geçişlerinden farklı sayılmaz. Ancak sayfalar arası geçiş için kullanabileceğimiz birkaç yol daha mevcut. Bu hafta elimden geldiğince sizlere bu konu hakkında bilgi vermeye çalışacağım.
Normal web sitelerinde basit bir şekilde sayfalar arasında geçiş yapmak istiyorsak bunu kullanacağımız 'a' tagleri içerisinde belirtebiliriz. Bu tagın 'href' özelliğine gitmek istediğimiz sayfanın urlsini verdiğimizde bu linke tıklanıdğında verilen urlye sayfa yönlendirilecektir. JavaScript ile Windows 8 uygulaması geliştirdiğimizde de yine aynı şekilde uygulamamızın Html tarafında bu tagleri kullanarak diğer sayfalara geçiş yapabiliriz. Bunun için Html kodlarımızın arasında aşağıdaki gibi kodu ekleyebiliriz:
<a href="page2.html">link to page 2</a>
Bu şekilde sayfamıza gidebiliriz ancak bunun Windows 8 JavaScript uygulamalarında kullanılmaması bazı yerlerde bazı nedenlerden dolayı pek tavsiye edilmemektedir. Çünkü kullanıcı bu linke tıklayarak diğer bir sayfaya gittiğinde bir önceki sayfa ile alakası kalmamaktadır ve ileri seviye bir uygulama geliştirirken bu istemeyeceğimiz bazı problemlere neden olabilir. Bunun yerine Visual Studio'nun bize sunduğu bazı taslak projelerden gitmek daha mantıklı olacaktır.
Bizim sayfalar arasında geçiş yaparken kullancağımız sistemde linke tıklandığında başka sayfaya gidecek ama temelde diğer bir önceki sayfada kalmış gibi olacak ve sadece gitmek istediğimiz sayfanın arayüzü yüklenecek. Bu yükleneceği yere de 'content host' ismi veriliyor. Böylece hem istediğimiz sayfaya yönlendirmiş oluyoruz hem de önceki sayfanın özellikleri korunmuş oluyor. Bu özelliklerden kasıt da bir önceki sayfa kullandığımız değişkenler, scriptler ve stillerdir. Bunu koda dökmek için de aşağıdaki stepleri sırası ile yapmamız mümkün olacaktır:
- İlk olarak yeni bir proje açarak Visual Studio'nun Windows 8 JavaScript uygulamaları için bize sağladığı hazır arayüzlerden biri olan 'Navigation Application' seçeneğini seçiyoruz. Bu taslak ile projeyi açtığımızda JavaScript dosyalarımız arasında 'navigator.js' isimli bir JavaScript dosyası olduğunu göreceğiz. Eğer bu taslağı kullanarak projeyi açmıyorsak bile bunun yerine bu JavaScript dosyasını da kullanabiliriz.
- Şimdi bu JavaScript dosyamıza anasayfamızda referansını vermemiz gerekiyor:
Böylece JavaScript dosyamızı referans vermiş olduk.
- Şimdiki aşamamızda yukarıda bahsettiğim 'content hostu' sayfamıza eklememiz gerekiyor. Bunun için anasayfamıza aşağıdaki 'div' tagini eklememiz gerekiyor:
Böylece de 'content hostu' belirlemiş olduk. Tüm yapmamız gereken bu kadar. Bundan sonra sadece JavaScript kodumuzu aşağıdaki gibi sayfamıza ekleyerek gerekli yerlerde sayfalar arasında yönlendirme yapabiliriz:
WinJS.Navigation.navigate("/pages/page2/page2.html");
Eğer istersek bu yönlendirmeleri de yaparken ekstra olarak parametre yollamamız da mümkün. Bunu da aşağıdaki gibi yapabilmemiz mümkün olacaktır:
WinJS.Navigation.navigate("/pages/page2/page2.html", paramete);
Peki bu yönlendirmeler ne zaman olacak? Bunun için kullanıcı etkileşimi gereklidir. Kullanıcı etkileşiminden kasıt kullanıcının bir düğmeye basması vs. Şimdi bunun nasıl olacağına bakalım. Html sayfamıza bir adet düğme atıyoruz ve buna bir id veriyoruz, daha sonra verdiğimiz bu idye göre JavaScript tarafında düğmeye basıldığında bulunduğumuz sayfadan başka bir sayfaya yönlendirme yapacağız.
<button id="dugme1">Diğer sayfaya git</button>
Şimdi de JavaScript tarafında düğmeye tıklandığında diğer sayfaya yönlendirme işlemini gerçekleştireceğiz:
ready: function (element, options) {
document.querySelector("#dugme1").onclick = function (args) {
WinJS.Navigation.navigate("/pages/page2/page2.html", "test parametresi");
};
}
Bu kısımda gördüğümüz gibi Html tarafında vermiş olduğumuz düğmenin idsine göre o düğmeye ait olan tıklanma olayını yazdık. Bu olayın içerisine de sayfa yönlendirme kodumuzu yazdık. Ayrıca bu yönlendirme işlemi içerisinde de deneme amaçlı olarak bir parametre yolladık.
Windows 8 uygulamalarında sayfalar arasında geçiş konusunda anlatacaklarım bu kadar. Haftaya sizlere Xaml ve Html5 konusundan bahsedeceğim. Bunların avantajları ve dezavantajlarından bahsedeceğim. Görüşmek üzere...
Referanslar:
http://www.codefoster.com
0 yorum:
Yorum Gönder