Merhaba arkadaşlar; geçen hafta sizlere Windows 8 uygulamalarını JavaScript ile geliştirirken kullandığımız kontrollerden bahsetmiştik. Aslında bu kontrollerin çoğunluğu klasik bir web sayfası geliştirirken kullandığımız kontroller ile aynıydı. Bu hafta da ilk basit uygulamamızı geliştireceğiz.
Bunun için ilk olarak Visual Studio programını açıyoruz ve yukarıdaki menüden File->New->Project yolunu izliyoruz.
Sol taraftan programlama dilini seçip, onun altındaki 'Winodows Store' başlığını seçiyoruz ve karşımıza geliştireceğimiz proje için daha önceki haftalarda bahsettiğim taslaklardan kendi projemize en uygun olanı seçiyoruz. Biz bu projede 'Blank App' proje taslağını seçiyoruz ve alt tarafta proje ismimizi veriyoruz.
Anasayfamızın tasarımını aşağıdaki gibi olacak şekilde ayarlıyoruz:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-light.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>
<h1 class="headerClass">Hello, world!</h1>
<div class="mainContent">
<p>What's your name?</p>
<input id="nameInput" type="text" />
<button id="helloButton">Say "Hello"</button>
<div id="greetingOutput"></div>
<label for="ratingControlDiv">
Rate this greeting:
</label>
<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
</div>
<div id="ratingOutput"></div>
</div>
</body>
</html>
Burada kontrol olarak bir adet 'input text', bir adet 'button' ve 'rating kontrol' kullandık. 'Hello World' yazsını içeren başlığımıza bir 'class' ismi verdik, çünkü bu ismi 'Css' dosyamızda belirterek bu başlığa yukardan ve aşağıdan 'margin' vererek bu yazının biraz daha sayfanın ortasına doğru gelmesini sağlayacağız. Yine ana içeriğimizi içeren 'div' içerisinde de bir 'class' belirttik ki sayfanın içeriğinin nerden başlaması gerektiği ve ayrıca istediğimiz özellikler varsa, arka plan rengi, yazı biçimi vs gibi özelliklerini ayarlayabilelim. 'Css' kodlarımızı da aşağıdaki gibi olacak:
body {
}
.headerClass {
margin-top: 45px;
margin-left: 120px;
}
.mainContent {
margin-top: 31px;
margin-left: 120px;
margin-bottom: 50px;
}
#greetingOutput {
height: 20px;
margin-bottom: 40px;
}
@media screen and (-ms-view-state: fullscreen-landscape) {
}
@media screen and (-ms-view-state: filled) {
}
@media screen and (-ms-view-state: snapped) {
}
@media screen and (-ms-view-state: fullscreen-portrait) {
}
Bu 'Css' kodlarında değinmek istediğim bir konu var. Eğer 'html' sayfamızdaki bir kontrole 'id' verdiysek ve bu verdiğimiz 'id' yi kullanarak 'Css' dosyamızda bu kontrol üzerinde değişiklikler yapmak istiyorsak '#idmiz' şeklinde 'Css' dosyamıza yazabiliriz. Örneğin elimizde 'id' si 'mybutton' olan bir 'input' kontrolümüz varsa bunu 'Css' dosyamızda '#mybutton{}' içerisine yazmalıyız. Eğer kontrolümüzde 'class' ismi kullandıysak aynı şekilde bunu da '.mybutton{}' içerisine yazarak kontrolümüz üzerinde istediğimiz görsel değişiklikleri uygulayabiliriz.
Burada sayfamızın yukarıdan, aşağıdan ve soldan ne kadar içeride olacağını ve 'buttona' tıklandığında gelecek yazının özellikleri gibi özellikleri ayarladık. Sayfamızı çalıştırdığımızda karşımıza aşağıdaki gibi bir ekran görüntüsü çıkacaktır:
Burada 'buttona' tıklandığında girdiğimiz yazıyı bir 'divin' içerisine bastırıyoruz ve örnek olarak da bir 'rating' kontrol kullanımı var. JavaScript kodlarımızı da aşağıdaki gibi olacak:
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
// Retrieve our greetingOutput session state info,
// if it exists.
var outputValue = WinJS.Application.sessionState.greetingOutput;
if (outputValue) {
var greetingOutput = document.getElementById("greetingOutput");
greetingOutput.innerText = outputValue;
}
}
args.setPromise(WinJS.UI.processAll().then(function completed() {
// Retrieve the div that hosts the Rating control.
var ratingControlDiv = document.getElementById("ratingControlDiv");
// Retrieve the actual Rating control.
var ratingControl = ratingControlDiv.winControl;
// Register the event handler.
ratingControl.addEventListener("change", ratingChanged, false);
// Retrieve the button and register our event handler.
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandler, false);
// Retrieve the input element and register our
// event handler.
var nameInput = document.getElementById("nameInput");
nameInput.addEventListener("change", nameInputChanged);
// Restore app data.
var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
// Restore the user name.
var userName =
Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
if (userName) {
nameInput.value = userName;
}
// Restore the rating.
var greetingRating = roamingSettings.values["greetingRating"];
if (greetingRating) {
ratingControl.userRating = greetingRating;
var ratingOutput = document.getElementById("ratingOutput");
ratingOutput.innerText = greetingRating;
}
}));
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function buttonClickHandler(eventInfo) {
var userName = document.getElementById("nameInput").value;
var greetingString = "Hello, " + userName + "!";
document.getElementById("greetingOutput").innerText = greetingString;
// Save the session data.
WinJS.Application.sessionState.greetingOutput = greetingString;
}
function ratingChanged(eventInfo) {
var ratingOutput = document.getElementById("ratingOutput");
ratingOutput.innerText = eventInfo.detail.tentativeRating;
// Store the rating for multiple sessions.
var appData = Windows.Storage.ApplicationData.current;
var roamingSettings = appData.roamingSettings;
roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
}
function nameInputChanged(eventInfo) {
var nameInput = eventInfo.srcElement;
// Store the user's name for multiple sessions.
var appData = Windows.Storage.ApplicationData.current;
var roamingSettings = appData.roamingSettings;
roamingSettings.values["userName"] = nameInput.value;
}
app.start();
})();
Burada 'buttonClickHandler', 'ratingChanged', 'nameInputChanged' olmak üzere 3 temel 'event' metodu kullandık. Kodun aşağıdaki kısmında yazı girdiğimiz kontrolün içerisindeki yazıyı 'SessionState' de tutuyoruz. Daha sonra bu yazıyı 'buttonun' 'click' olayında tekrar 'SessionState' den alıp sayfamızda tanımladığımız 'dive'
bastırıyoruz. İlerleyen haftalarda 'SessionState' konusuna daha detaylı bir biçimde değineceğim.
'ratingChanged' metodunda ise tıklanan yıldız miktarını alıp gene önceden sayfamızda tanımladığımız bir 'div' içerisine bastırıyoruz. Bu proje 'msdn' sayfasındaki örnek projedir. Aşağıdaki linkten indirdiğinizde ikinci 'Hello World ' projesidir. Kodu indirip inceleyebilirsiniz:
http://code.msdn.microsoft.com/windowsapps/Getting-started-with-310271df/file/63880/20/Getting%20started%20with%20JavaScript%20Complete%20code%20for%20the%20tutorial%20series.zip
Gördüğümüz gibi aslında uygulamanın ana yapısı oldukça basit. Görsel olarak görünmesini istediğimiz kontrolleri 'html' sayfamızın içerisine atıyoruz ve bu kontrollerin tıklanma, üzerine gelme vs. gibi olaylarını da 'JavaScript' dosyalarımızın içerisinde yazıyoruz. Bu 'JavaScript' dosyalarını da 'html' sayfamızın içerisinde referans veriyoruz ki hangi dosyayı kullanacağını program anlayabilsin. Tasarımını özelleştirmek istediğimiz kontrolleri ise 'Css' dosyalarımız içerisinde kontrolün 'id' veya 'class' isimlerine göre gereken değişiklikleri yazıyoruz. Aynı 'JavaScript' dosyalarını referans verdiğimiz gibi bu 'Css' dosyalarını da 'html' sayfamız içerisinde referans olarak gösteriyoruz ve program hangi 'Css' dosyasının hangi 'html' üzerinde işlendiğini anlayabilsin.
Bu haftalık anlatacaklarım bu kadar. Çok zor olmayan bir örnek üzerinden gittik. Siz de benzer örnekler yaparak, farklı tasarımlar üzerinde denemeler yapabilirsiniz. Haftaya 'Application Bar' ve 'Message Dialog' kullanımından bahsedeceğim. Görüşmek üzere...
Referanslar: http://code.msdn.microsoft.com/windowsapps/Getting-started-with-310271df#content
0 yorum:
Yorum Gönder