Merhaba arkadaşlar, geçen hafta Windows 8 uygulamalarını Javascript ile geliştirme konusuna genel bir giriş yapmıştım bu hafta da Windows 8 uygulamalarını Javascript ile geliştirirken kullanacağımız kontrollerden bahsedeceğim. Bu kontrol aslında html kontrolleri ile aynı, yani html bilenler bu konuda pek sıkıntı yaşamayacaktır.
Visual Studio ile yeni bir Windows 8 Javascript uygulaması açtığımızda araç kutusunda (toolbox) aşağıdaki kontrolleri görüyoruz:
Gördüğümüz gibi zaten kontrollerin hepsi html yazısının altında gruplandırılmış. Kontrollerin genel görünümleri ise aşağıdaki gibi:
Şimdi bu kontrollerden teker teker bahsedeceğim.
Input (Button): Bildiğimiz html "button" kontrolü. Onlclick vs gibi olaylarını javascript tarafında yazabiliyoruz. Böylece tıklandığında neler yapılacağını belirleyebiliyoruz. "Toolbox'tan" sürükleyip bıraktığımızda html tarafında aşağıdaki gibi kod oluşturuluyor:
Burada input tipimiz, ve button üzerinde yazan yazı belirtiliyor. Bir id veriliyor ve biz bunu javascript tarafında olayları tetiklemek için kullanıyoruz. Bu kontrolün de temel özelliklerini "Properties" penceresini kullanarak değiştirebiliyoruz. Şimdi bu kontrolün en temel olayı olan tıklama olayını nasıl tetikleyeceğimize bakalım. Kontrolümüzü sürükleyip html sayfasının olduğu yere bırakıyoruz. Javascript dosyamıza geliyoruz ve aşağıdaki gibi değişiklikleri yapıyoruz:
(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.
}
args.setPromise(WinJS.UI.processAll());
var helloButton = document.getElementById("Button1");
helloButton.addEventListener("click", deneme, false);
}
};
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 deneme() {
var md = new Windows.UI.Popups.MessageDialog("Hello World!");
md.showAsync();
};
app.start();
})();
Gördüğümüz gibi alt tarafta deneme adlı bir fonksiyon oluşturduk ve içersine de "buttona" tıkladığımızda asit bir mesaj kutusu göstermek için kodumuzu yazdık. Yukarı kısımda ise "onactivated" fonksiyonu içerisine
aşağıdaki kodları yazdık:
var helloButton = document.getElementById("Button1");
helloButton.addEventListener("click", deneme, false);
Bu kısımda "button" idsine göre kontrolümüzü getirdik ve tıklama olayına deneme adlı fonksiyonumuzu belirttik. "Buttona" tıklandığında aşağıdaki gibi bir mesaj kutusu gösterilecektir:
Input (reset) kontrolü: Aynı form içerisindeki form girişlerini temizler.Sürükleyip bıraktığımızda html tarafına aşağıdaki kod oluşturulacaktır:
<input id="Reset1" type="reset" value="reset" />
Burada değinilmesi gereken en önemli nokta form girişlerinin temizlenebilmesi için "reset input" kontrolü ve diğer form giriş kontrollerinin aynı form içerisinde olmasıdır. Aksi halde form girişleri temizlenmeyecektir.
Input(text) kontrolü: Kullanıcıdan giriş yapması istendiği zamanlarda kullanılır:
<input id="Text2" type="text" />
Input(file) kontrolü: Bilgisayardan dosya seçmek için kullanılır:
<input id="File1" type="file" />
Input(password) kontrolü: Text kontrolünden farkı şifre girişlerinde kullanılmak için özelleşmiş olmasıdır. Yanındaki göz simgesine tıklandığında şifre görünebilir.
Input(chcekbox) kontrolü: Kullanıcıdan seçim yapmasını istediğinde kullanılabilir. Örneğin bir form doldurulması sırasında cinsiyet seçiminde kullanılabilir:
<input id="Checkbox1" type="checkbox" />
Input(radio) kontrolü: Birçok seçenek arasından birinin seçilebileceği yerlerde kullanılır.
<input id="Radio1" type="radio" />
Input(radio) kontrolü: Sayfada gösterilmesini istemediğimiz gizli bir değeri tanımlamak için kullanılır.
<input id="Hidden1" type="hidden" />
Textarea kontrolü: Birden fazla satır barındıran yazı girişidir, içerisindeki scroll ile yukarı aşağı kaydırabilmemizi sağlar:
<textarea id="TextArea1" cols="20" rows="2"></textarea>
Table kontrolü: Sayfa içerisinde tablo kullanmak istersek, kullandığımız kontrolleri satır ve sütunlar halinde bir düzen içerisinde kullanmak istiyorsak bu kontrolü kullanmamız faydalı olacaktır:
<table style="width: 100%;">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Image kontrolü: Sayfa içerisine resim koymak için kullanılır. "Src" ve "alt" "attributleri" vardır. "Src" kullanacağımız resmin yolunu belirtir, "alt" ise resim olası bir durumda yüklenmediğinde resimle ilgili yazıyı görmemizi sağlar.
<img alt="" src="" />
<select id="Select1">
<option>seçenek 1</option>
<option>seçenek 2</option>
<option>seçenek 3</option>
<option>seçenek 4</option>
</select>
Horizontal Rule kontrolü: Sayfa içerisinde paralel bir çizgi çizmemizi sağlayan kontroldür.
Div kontrolü: Sayfa içerisinde bölümler halinde kontrollerimizi kullanmamızı sağlar. Html bilenlerin en çok kullandığı kontrollerden birisidir. Genişlik, yükseklik,"border" vs. gibi özellikleri yaygın kullanılan özelliklerindendir.
Bu bahsettiğimiz kontroller dışında "toolboxta" gözükmeyen başka kontroller de var.
Progress kontrolü: Bir işlem sürecinde işlemin devam ettiğine dair kullanıcıya göstereceğimiz hareketli bir kontroldür.
<progress></progress>
Input type (range) kontrolü: Belirli bir aralıkta seçim yapmamızı sağlayan kontroldür.
Bu "inputların" dışında email, telefon numarası, url, tarih, hafta vs gibi girişler yapabileceğimiz kontroller de vardır. Type kısmına gelip ctrl+space tuşlarına bastığımızda diğer tipleri de görebiliriz.
Kontrollerin genel kullanımından bahsettik. Bir tane daha örnek göstermek istiyorum. Örneğin "select" konrolü kullanarak bir örnek yapalım. Bu örnekte hangi seçimi yaptıysak ona göre bir mesaj kutusu gösterelim. Bunun için html tarafındaki kodu aşağıdaki gibi yapıyoruz:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App2</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>
<!-- App2 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<select id="Select1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
Burada bir adet "select" kontrolü attık ve içerisine 4 adet seçenek belirttik. Şimdi bu seçeneklerin seçimi değiştirildiğinde neler yapacağımızı gösterelim. Bunu için javascript kodumuzu aşağıdaki gibi düzenliyoruz:
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?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.
}
args.setPromise(WinJS.UI.processAll());
var secenekler = document.getElementById("Select1");
secenekler.addEventListener("change", deneme, false);
}
};
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 deneme() {
var secenekler = document.getElementById("Select1");
if (secenekler.selectedIndex == 0) {
var md = new Windows.UI.Popups.MessageDialog("1. seçenek seçildi");
md.showAsync();
}
if (secenekler.selectedIndex == 1) {
var md = new Windows.UI.Popups.MessageDialog("2. seçenek seçildi");
md.showAsync();
}
};
app.start();
})();
Burada en başta yaptığımız "button click" örneğimizdeki gibi kontrolümüzü idsine göre getirip "change" olayına deneme adlı fonksiyonu yazdık. Fonksiyonumuzun içerisinde ise seçilen seçeneğin indexine göre bir mesaj gösterdik.
Diğer kontrollerin de olaylarını inceleyerek kendiniz örnekler yaparsanız mantık daha da oturacaktır. Kontrollerin kullanımı için ayrıca Micorosftun sitesindeki ekitabı indrip 4. bölümü inceleyebilirsiniz. Kitabı istediğiniz formatte aşağıdaki linkten indirebilirsiniz:
http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebook-programming-windows-8-apps-with-html-css-and-javascript.aspx
Haftaya Windows 8 uygulamalarında Javascript kullanarak ilk uygulamamızı yapacağız. Görüşmek üzere...
0 yorum:
Yorum Gönder