Makale Özeti

Makale serimde şu ana kadar JavaScript ile Windows 8 Metro Style uygulama geliştirmek için gerekli olan birçok kontrolü inceledik. Bu makalemde ise geri kalan ufak kontrolleri topluca incelemeye çalışacağız. Bu kontroller DatePicker, Rating ve Toggle Switch kontrolleridir. Tüm kontroller için anlatımı ayrı ayrı yaptıktan sonra tek bir örnek içerisinde hepsinin demosunu yapacağız.

Makale

Makale serimde şu ana kadar JavaScript ile Windows 8 Metro Style uygulama geliştirmek için gerekli olan birçok kontrolü inceledik. Bu makalemde ise geri kalan ufak kontrolleri topluca incelemeye çalışacağız.

Bu kontroller DatePicker, Rating ve Toggle Switch kontrolleridir. Tüm kontroller için anlatımı ayrı ayrı yaptıktan sonra tek bir örnek içerisinde hepsinin demosunu yapacağız.

DatePicker Kontrolü

Adından da anlaşılacağı üzere bu kontrol kullanıcıya tarih seçtirmek için kullanılır. Bu kontrolü kullanmak için bir div oluşturup data-win-control özelliğine WinJS.UI.DatePicker değerini vermeniz gerekmektedir. İsterseniz şimdi bu kontrolün özelliklerini inceleyelim.

OnChange: DatePicker'ın seçili tarihi değiştirildiğinde fırlatılacak eventtir.
Current: DatePicker kontrolünde seçili olan değeri almaya veya bir değeri seçmeye yarar.
DatePattern: Tarihin gösterileceği formatı taşıyan özelliktir.
Disabled: Kontrolün enable dolup olmadığının belirlendiği özelliktir.
MaxYear: Seçilebilecek en büyük yıl değerini okuyabileceğimiz veya değiştirebileceğimiz özelliktir.
MinYear: Seçilebilecek en küçük yıl değerini okuyabileceğimiz veya değiştirebileceğimiz özelliktir.

Bu özellikleri gerek JavaScript kodundan gerek ise json nesnesi olarak data-win-options özelliğine vererek kontrolünüzü özelleştirebilirsiniz.

Rating Kontrolü


 

Rating kontrolü belirli bir içeriği veya bir nesneyi değerlendirmek için kullanabileceğiniz bir kontroldür. Temel olarak kaç puan vermek istiyorsanız o kadar yıldız seçmenize bakar. Bu kontrolü kullanmak için bir div oluşturup data-win-control özelliğine WinJS.UI.Rating değerini vermeniz gerekmektedir. İsterseniz şimdi bu kontrolün özelliklerini inceleyelim:

OnChange: Kullanıcının rating kontrolü üzerindeki seçimini değiştirdiği zaman fırlatılacak event'tir.
AverageRating: Ortalama puanın okunduğu veya belirlendiği özelliktir. Ortalama puan farklı bir renkte yıldızlar üzerinde gösterilecektir.
Disabled: Kontrolün enable dolup olmadığının belirlendiği özelliktir.
MaxRating: En fazla kaç puan verilebileceğinin belirlendiği özelliktir.
UserRating: Kullanıcının kaç puan verdiğinin okunması veya kullanıcının puan vermesi için kullanılan özelliktir.

Bu özellikleri gerek JavaScript kodundan gerek ise json nesnesi olarak data-win-options özelliğine vererek kontrolünüzü özelleştirebilirsiniz.

Toggle Switch Kontrolü

 

Toggle switch kontrolü genellikle bir özelliğin açık veya kapalı veya iki farklı durumdan hangisinde olduğunu belirlemek için kullanılan bir kontroldür. Bu kontrolü kullanmak için bir div oluşturup data-win-control özelliğine WinJS.UI.ToggleSwitch değerini vermeniz gerekmektedir. İsterseniz şimdi bu kontrolün özelliklerini inceleyelim:

OnChange: Kullanıcının rating kontrolü üzerindeki seçimini değiştirdiği zaman fırlatılacak event'tir.
Checked: Kontrolün on veya off durumunda olduğunun okunabildiği veya programatik olarak belirlenebildiği özelliktir.
Disabled: Kontrolün enable dolup olmadığının belirlendiği özelliktir.
LabelOff: Kontrolün off olduğu durumda yazacak olan değerdir.
LabelOn: Kontrolün on olduğu durumda yazacak olan değerdir.
Title: Her durumda kontrolün başında yazacak olan metindir.

Bu özellikleri gerek JavaScript kodundan gerek ise json nesnesi olarak data-win-options özelliğine vererek kontrolünüzü özelleştirebilirsiniz.

Şimdi isterseniz bu tüm özelliklerin demosunu kontrollerimize bu özelliklerin bazılarını atayarak yapalım.

HTML kodumuz aşağıdaki gibi olacaktır.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JavaScriptControls</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- JavaScriptControls references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
     <label>Doğum Tarihi</label>
    <div id="dp" data-win-control="WinJS.UI.DatePicker" data-win-options="{minYear:2011,maxYear:2015}"></div>
    <br /><br />
    <label>Puan</label>
    <div id="r" data-win-control="WinJS.UI.Rating" data-win-options="{maxRating:5,averageRating:5,userRating:3}"></div>
    <br /><br />
    <label>Memnun Kaldı mı?</label>
    <div id="ts" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{labelOff:'Hayır',labelOn:'Evet'}"></div>
</body>
</html>

Ekran görüntümüz ise aşağıdaki gibi olacaktır:

Örnek Kodlar