Merhaba arkadaşlar, geçen hafta sizlere Windows 8 JavaScript uygulamalarında veri bağlama olayının nasıl yapıldığından örneklerle bahsetmiştim. Bu hafta da sizlere Application Data ve Session kullanımından bahsedeceğim. Öncelikle bu kavramların ne olduğundan biraz bahsedelim. Application Data ve Session uygulamalarımızdaki önemli bir ayarı veya kullanıcı bilgileri gibi verileri saklayabileceğimiz yapılardır. Kullanıcı uygulamayı tekrar çalıştırdığında eski ayarlarının gelmesi vs. bunlarla yapılabilir. Konunun açıklamasına geçmeden önce sizlere biraz Windows 8 uygulamalarının nasıl çalıştığından, kullanıcı uygulamayı kapattığında temelde ne gibi olaylar olduğundan biraz bahsedeceğim.
Kullanıcı başka uygulamalar arasında gezinirken diğer uygulamalar temelde askıya alınır. Kullanıcı geri geldiğinde uygulama sanki hiç kapatılmamış gibi kendi yaptığı değişiklikleri görebilir. Bazen de Windows o an kullanılmayan bir uygulamayı hafızdan yer edinmek için tamamen kapatabilir bu durumda uygulama askıya alınmış değil tamamen kapatılmış olur. İyi bir kullanıcı deneyimi sunmak için uygulama sanki hiç kapatılmamış, kullanıcının yaptığı değişiklikler korunmuş olarak kullanıcıya bir uygulama sunmamız gerekir, aksi takdirde kullanıcı uygulamaya tekrar döndüğünde yaptığı değişiklikleri göremezse uygulamaya olan güveni azalır bu da programcının kullanıcı kaybetmesine sebep olabilir. İşte kullanıcı uygulamaya geri döndüğünde biz kullanıcıya ait bu bilgileri tekrar getirmemiz gerekir. Bu bilgiler de Application Data ve Session denilen yapılarda saklanır.
Şimdi sizlere en basitinden Application Data kavramının nasıl kullanıldığından bahsedeceğim. Bunun için boş bir Windows 8 JavaScript projesi açıyoruz. Html kısmında bir adet 'input text' kontrolü ekliyoruz ve bunun id özelliğine 'nameInput' idsini veriyoruz. Bu id ile daha sonra JavaScript dosyamızdan bu kontrole erişebileceğiz. Ayrıca Html kısmında bir adet düğme atıyoruz ve bunun idsine de 'Save' idsini veriyoruz. Bu projede amacımız input olarak girdiğimiz yazıyı attığımız düğmeye bastığımızda Application Data olarak kaydetmek olacak. Böylece girdiğimiz yazı bizim için saklanmış olacak. Html sayfamız bu değişikliklerin sonucunda aşağıdaki gibi şekillenmiş olacak:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- HelloWorld references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<input id="nameInput" type="text" />
<button id="helloButton">Say "Hello"</button>
</body>
</html>
Sayfamızda gereken kontrolleri attıktan sonra şimdi de düğmeye tıklandığında girdiğimiz yazıyı Application Data olarak kaydetmeye geçelim. Bunun için JavaScript dosyamızı açıyoruz. Uygulama çalıştırıldığında çalışan ilk metodumuz olan 'app.onactivated' metodunda düğmenin tıklanma olayını belirtiyoruz. Bunun için aşağıdaki kodu ekliyoruz:
var saveButton = document.getElementById("Save");
helloButton.addEventListener("click", buttonClickHandler, false);
Şimdi de bu tıklanma olayının metodunu yazıyoruz. Bunun için de aşağıdaki metodu JavaScript dosyamızın içerisine ekliyoruz:
function buttonClickHandler(eventInfo) {
var nameInput = document.getElementById("nameInput");
var appData = Windows.Storage.ApplicationData.current;
var roamingSettings = appData.roamingSettings;
roamingSettings.values["userName"] = nameInput.value;
}
Şimdi bu tıklanma olayının metodunu baştan aşağı inceleyecek olursak, ilk olarak 'input text' kontolümüzü daha önce veridiğimiz id ile getirdik. Daha sonra Application Data için değişkenimizi tanımladık ve 'roamingSettings' ile bu veriyi kaydetmek için girdiğimiz yazıyı 'userName' adlı Application Data'ya aktardık. Bütün olay bundan ibaret. Eğer bu aktardığımız veriyi başka yerlerde kullanmak istiyorsak atayacağımız değişkeni 'roamingSettings.values["userName"]' verisine eşitlememiz yeterli olacaktır.
Gördüğümüz gibi Application Data kavramı ile basit bir yazıyı kaydetmiş olduk ve istediğimiz yerde artık bu veriyi çağırıp kullanabiliriz.
Şimdi de Session kullanımından bahsedelim. Web sitesi yapımı ile uğraşan arkadaşlar Session kavramına zaten aşina olacaklardır. Burada da Session Web sitelerindeki ile aynı manada kullanılmaktadır. Session kavramını biraz açılayacak olursak, kullanıcı uygulamayı açtığında uygulama kapatılana kadar saklanan verilerdir. Basit bir örnek ile açıklayacak olursak, bir e-ticaret uygulamasında kullanıcının satın alıp sepetine eklediği ürünler Session'da tutulur. Kullanıcı uygulamayı kapatıp açtığında o sepetteki ürünler tekrar gelmez. Ancak önceki alışverişleri vs. gibi veriler tekrar geliyorsa bunlar Session değil muhtemelen bir veri tabaından getirilen verilerdir.
Session kavramın biraz açıkladıktan sonra yine basit bir örnek ile bu Session kullanımına bakalım. Bunun için yine boş bir Windows 8 JavaScript uygulaması açıyoruz. Html kısmını aynı yukarda kullandığımız html gibi değiştiriyoruz bu sefer yapacağımız tek farklı işlem girdiğimiz yazıyı Application Data içerisinde değil de Session'da saklamak olacak.
JavaScript dosyamızda yine Html tarafında kullandığımız düğmenin tıklanma olayını çağırıyoruz. Bu olayın metodunu da aşağıdaki gibi yazıyoruz:
function buttonClickHandler(eventInfo) {
var userName = document.getElementById("nameInput").value;
var greetingString = "Merhaba, " + userName + "!";
// Save the session data.
WinJS.Application.sessionState.greetingOutput = greetingString;
}
Bu kodları biraz açıklayacak olursak, girdiğimiz yazıyı Html tarafındaki 'input text' kontrolünün idsine göre aldık ve bir değişkene 'Merhaba+ Kullanıcı Adı' olacak şekilde atadık. Daha sonra da bu değişkeni Session'a atadık. Örneğin yazı olarak Orçun girelim. Bu yazıyı bu kısımda alıp 'Merhaba Orçun' şeklinde Session'a kaydediyoruz ve istediğimiz yerde tekrar buradan çağırıp kullanabiliriz. Bunu tekrar çağırmak için de istediğimiz yerde aşağıdaki gibi çağırabiliriz:
var kullanici= WinJS.Application.sessionState.greetingOutput;
Daha sonra da bu 'kullanici' adlı değişkeni istediğimiz kontrole atayıp gösterebiliriz. Bu haftalık bu kadar, haftaya Windows 8 JavaScript uygulamalarında sayfa geçişlerinden bahsedeceğim. Görüşmek üzere...
Referanslar:
http://msdn.microsoft.com/en-us/library/windows/apps/hh986966.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh986964.aspx
0 yorum:
Yorum Gönder