Merhaba arkadaşlar, geçen hafta Windows 8 uygulamalarında JavaScript kullanarak ilk uygulamamızı yapmıştık, bu hafta da sizlere uygulamalarımızda Application Bar ve Message Dialog kullanımından bahsedeceğim.
İlk olarak Message Dialog kullanımına değinelim ve daha sonra Application Bar kullanımına değindikten sonra her iki kontrolü de içeren bir uygulama yapalım. Message Dialog herhangi bir düğme veya diğer kontrollerin olaylarında kullanıcıya bilgi vermek amacı ile ekrana çıkarılan bir diyalogdur. Görünümü aşağıdaki gibidir:
Bunu uygulamamızda kullanmamız için yapmamız gerek çok basit. Hangi olayda kullanmak istiyorsak o fonksiyonun içerisine aşağıdaki kodu ekliyoruz:
var md = new Windows.UI.Popups.MessageDialog("Add button pressed!");
md.showAsync();
Burada 'md' isminde Message Dialog tanımadık ve içerisine istediğimiz uyarı yazısını ekledik ve 'showAsync' metodu ile kullanıcıya gösterdik.
Ekran görüntüsünden gördüğümüz gibi Message Dialog'da sadece kapat düğmesi varsayılan olarak geliyor. Ekstradan iptal etme vs. gibi düğmelerin diyalogda gözükmesini istiyorsak aşağıdaki kodları da eklememiz gerekiyor:
md.commands.append(new Windows.UI.Popups.UICommand("OK",
actionHandler, 0));
md.commands.append(new Windows.UI.Popups.UICommand("Cancel",
actionHandler, 1));
md.commands.append(new Windows.UI.Popups.UICommand("Ignore",
actionHandler, 2));
Burada 3 adet düğme ekledik ve tıklama olaylarına da 'actionHandler' fonksiyonunu belirttik. Bu fonksiyon da aşağıdaki gibi olacak:
function actionHandler(command) {
//writeMsg(command.label);
//Create action for each button.
switch (command.id) {
case 0:
break;
case 1:
break;
case 2:
break;
}
}
Bu kısımda da 'switch' ile düğmeye yukarıda parametre olarak verdiğimiz idler ile hangi düğmeye tıklandığında ne yapmak istiyorsak onu yazıyoruz. Message Dialog kullanımı bu kadar. Şimdi Application Bar kullanımına bakalım.
Uygulamalar ilk açıldığında Application Bar direk gelmiyor. Öncelikle Application Bar'ın tam olarak ne olduğundan bahsedelim. Application Bar aslında temelde bir menü tarzında bir kontrol. İçerisine uygulamamızın ihtiyacına göre bazı kontroller atıp bunu menü ayarlar menüsü gibi kullanabiliyoruz. Bunu kullanmak istiyorsak kendimiz uygulamamıza eklememiz gerekiyor. Ayrıca Application Bar'dan bir seçenek seçildiğinde tekrar kayboluyor ancak istediğimiz takdirde bunu engellememiz mümkün oluyor.
Şimdi bu kontrolü nasıl kullanacağımıza bakalım. Bunun için boş bir Windows 8 JavaScript uygulaması açıyoruz ve 'html' dosyamızın içine aşağıdaki kodu yapıştırıyoruz:
<div id="appbar" data-win-control=
"WinJS.UI.AppBar">
</div>
Bu kodu ekleyip uygulamamızı çalıştırdığımızda ekranda başka kontroller yoksa ekran boş gözükecektir. Çünkü bu 'div' içerisine bir kontrol koymadık. Boş gözükmesini engellemek için bu 'div' içerisine 'AppBarCommand ' kontrolü koymamız gerekiyor. Burada gördüğümüz gibi Application Bar kontrolünü uygulamamıza eklemek istiyorsak, aslında temelde yapmamız gereken şey bir adet 'div' eklemek ve bunun 'data-win-control' özelliğine 'WinJS.UI.AppBar' yazmak. Bunun sonrasında da içerisinde gözükmesini istediğimiz
'AppBarCommand' kontrolleri içerisine eklememiz gerekiyor.
Şimdi açtığımız boş proje içerisine bir adet 'html' dosyası açalım ve ismini 'appbar.html' olarak verelim. Bu html dosyamızın kodları aşağıdaki gibi olacak:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App bar demo</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>
<!-- App_bar_demo references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/appbar.js"></script>
</head>
<body>
<!-- BEGINTEMPLATE: Template code for an app bar -->
<div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',label:'Add',icon:'add',
section:'global',tooltip:'Add item'}">
</button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',
section:'global',tooltip:'Remove item'}">
</button>
<hr
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{type:'separator',section:'global'}" />
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',
section:'global',tooltip:'Delete item'}">
</button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',
section:'selection',tooltip:'Take a picture'}">
</button>
</div>
<!-- ENDTEMPLATE -->
<div id="statusMessage"></div>
</body>
</html>
Gördüğümüz gibi ana 'div' içerisine 4 adet düğme ve bir adet bölmeler arasına çizgi çekmek için 'hr' attık. Burada en önemli değinilmesi gereken nokta daha önceden de bahsettiğim gibi bu Application Bar içerisine attığımız kontrollerin 'data-win-control' özelliklerinin 'WinJS.UI.AppBarCommand' olması gerektiği. Ayrıca kontrollerin aldığı diğer bir özellik de 'data-win-options' özelliği, bu özellik de kontrolümüzün id, ekranda Application Bar üzerinde gözükecek kontrol etiketi, kontrol ikonu, kontrol üzerine gelindiğinde açıklayıcı yazı gibi ayrıntıları içeriyor. Html dosyamızın içerisine 'head' taglari içerisinde kullanacağımz CSS ve JavaScript dosyalarımızın referansını da verdik.
Şimdi de gelelim JavaScript kodlarımıza. Bunun için de 'js' klasörü içerisine bir adet JavaScript dosyası ekliyoruz ve içerisine aşağıdaki kodları ekliyoruz:
(function () {
"use strict";
var page = WinJS.UI.Pages.define("appbar.html", {
ready: function (element, options) {
document.getElementById("cmdAdd")
.addEventListener("click", doClickAdd, false);
document.getElementById("cmdRemove")
.addEventListener("click", doClickRemove, false);
document.getElementById("cmdDelete")
.addEventListener("click", doClickDelete, false);
document.getElementById("cmdCamera")
.addEventListener("click", doClickCamera, false);
},
});
// Command button functions
function doClickAdd() {
var md = new Windows.UI.Popups.MessageDialog("Add button pressed!");
md.showAsync();
}
function doClickRemove() {
var md = new Windows.UI.Popups.MessageDialog("Remove button pressed");
md.showAsync();
}
function doClickDelete() {
var md = new Windows.UI.Popups.MessageDialog("Delete button pressed");
md.showAsync();
}
function doClickCamera() {
var md = new Windows.UI.Popups.MessageDialog("Camera button pressed");
md.showAsync();
}
WinJS.log = function (message) {
var statusDiv = document.getElementById("statusMessage");
if (statusDiv) {
statusDiv.innerText = message;
}
};
})();
Şimdi bu JavaScript kodlarını açıklayayım biraz. Html kısmında düğmelere verdiğimiz id değerlerine göre burada düğmelerin 'click' olaylarını belirtiyoruz. Hangi düğme tıklandığında hangi fonksiyonun çalışacağını belirtiyoruz. Daha sonra da düğmelere ayrı ayrı fonksiyonlar yazıyoruz ve içerlerine tıklandığında ne yapmak istiyorsak bu kısımda yazıyoruz. Ben örnek olarak düğmelere basıldığında hangi düğmeye basıldıysa o düğme basıldı şekline 'Message Diaolg' gösterdim. Siz de uygulamanıza göre kendiniz düzenleyebilirsiniz.
Uygulamayı çalıştırıp ekrana sağ tıkladığımızda Application Bar gözükecektir. Ekran görüntüsü aşağıdaki gibidir:
Evet arkadaşlar bu haftalık anlatacaklarım bu kadar, haftaya 'Promise' kullanımından bahsedeceğim. Görüşmek üzere...
0 yorum:
Yorum Gönder