Makale Özeti

Bu makalemde sizlere Windows 8 Metro Style uygulama geliştirmede JavaScript yaklaşımını kullandığımızda DataBinding işlemini nasıl yapabileceğimizden bahsedeceğim.

Makale

Bu makalemde sizlere Windows 8 Metro Style uygulama geliştirmede JavaScript yaklaşımını kullandığımızda DataBinding işlemini nasıl yapabileceğimizden bahsedeceğim.

DataBinding uygulama geliştirme yaklaşımlarında nesne içerisindeki verileri kontrollere kolay bir şekilde bastığı için çok önemli bir adımdır. Bu makalemde databinding işleminin JavaScript tarafında nasıl yapılacağını incelerken aynı zamanda bazı kontrolleri de inceliyor olacağız. Bu kontroller ListView, Itemtemplate'dir.

Deklaratif DataBinding kullanılması işimizi çok kolaylaştıran bir özelliktir. Yani bir nesnenin bir özelliğindeki değeri bir kontrolün bir özelliğine direk olarak atayabiliyor olacağız. Bunu da javascript kodu yazmadan html kodu içerisinde yapacağız ki bu da işlemimizi çok kolaylaştırıyor olacaktır.

DataBinding yaptığımızda genellikle collection'ları bind ederiz. Eskiden bunu yapmak için çeşitli döngüler yazmak zorunda kalırdık. Ancak WinJS kütüphanesindeki Listview kontrolü sayesinde bu döngüleri yazmadan çok kolay bir şekilde nesnelerimizi bind edebiliyor olacağız. Listview her nesnemiz için ui render ederken ItemTemplate dediğimiz kontrolü kullanacaktır. ItemTemplate'den bahsetmek gerekirse WinJS kütüphanesinde bulunur ve render edilecek tek bir nesnenin hangi formatta render edileceğini belirler. ItemTemplate içerisinde tüm kontrolleri kullanabilir ve nesnelerimizdeki özellikleri bu kontrollerin özelliklerine atayabiliriz.

Şimdi isterseniz, bu iki nesnenin nasıl kullanıldığına dair bir örnek yapalım.

Bunun için öncelikle ListView nesnemizi aşağıdaki gibi oluşturuyoruz:

<div id="listUsers" data-win-control="WinJS.UI.ListView"></div>

Ancak Listview kullandığımız her zaman datasource'da bulunan her nesnenin ekrana render edilmesi gerekmektedir. Bu render işleminin nesne başına nasıl olacağını belirlenmesi için ItemTemplate kullanılması gerekmektedir. ItemView'i ise aşağıdaki gibi oluşturabiliriz. Gördüğünüz gibi div'imizin data-win-control özelliğine WinJS.Binding.Template tipini veriyoruz. Bu kontrolün içerisinde ise istediğimiz kontrolü kullanabiliyoruz. Datasource'da bulunan her nesne için render edilecek kontroller de bunlar olacaktır. Kullandığımız bu kontrollerin özelliklerine datasource'umuzdaki özellikleri atamak için data-win-bind özelliğini kullanıyoruz. Bu özelliğin içerisine kullandığımız kontrolün hangi özelliğine datasource'daki hangi özelliğin atanacağını kontrolözelliği:DataSourceÖzelliği şeklinde atıyoruz.

<div id="itemTemplateUsers" data-win-control="WinJS.Binding.Template">
    <div style="margin:5px">
        <img data-win-bind="src:UserImage" style="width:150px;height:150px" />
        <div data-win-bind="innerText:UserName" style="text-align:center"></div>
    </div>
</div>

Şimdi ise oluşturmuş olduğumuz bu ItemTemplate'in ListView tarafından kullanılmasını sağlamak. Bunun için ListView kontrolümüzün data-win-options özelliğine oluşturacağımız json nesnesi ile bu tanımlamayı yapmamız gerekiyor. Bu tanımlamayı aşağıdaki gibi yapabiliyoruz. ListView'in itemRenderer özelliğine oluşturmuş olduğumuz ItemTemplate'in id'sini vererek bu işlemi yapıyoruz. Bu sayede listview içerisinde oluşturulacak her nesne için itemTemplateUsers div'inin render edilmesini sağlıyoruz.

<div id="listUsers" data-win-control="WinJS.UI.ListView" data-win-options="{itemRenderer:itemTemplateUsers}"></div>

Bunun yanı sıra Windows 8 uygulamalarında GridLayout veya ListLayout isminde iki çeşit Layout söz konusudur. Grid Layout Windows 8 'in başlangıç ekranında gördüğünüz biçim olurken ListLayout sadece aşağıya doğru tekrar eden bir layout'tur. Ben bu örnekte öncelikle GridLayout kullanacağım. Bunu ListView'in type özelliğinde belirtiyorum:

<div id="listUsers" data-win-control="WinJS.UI.ListView" data-win-options="{itemRenderer:itemTemplateUsers,layout:{WinJS.UI.GridLayout}}"></div>

Şimdi ise örnek bir data oluşturup ListView'imize bağlayalım. Burada önemli bir nokta itemtemplate div'inin her zaman listview div'inden yukarıda olması gerektiğidir.

Javascript kodumuzda ise aşağıdaki kodu yazıyoruz:

function loaded() {
    var usersArray = [
        { image: '/images/user/1.jpg', name: 'Ayşe' },
        { image: '/images/user/2.jpg', name: 'Ali' },
        { image: '/images/user/3.jpg', name: 'Ahmet' },
        { image: '/images/user/4.jpg', name: 'Mehmet' },
        { image: '/images/user/5.jpg', name: 'Mustafa' },
]

    var dataList = new WinJS.Binding.List(usersArray);

    var usersList = document.getElementById('listUsers').winControl;
    usersList.itemDataSource = dataList.dataSource;
}

Uygulamamızı çalıştırdığımızda tüm kodumuz ve ekran görüntümüz aşağıdaki gibi olacaktır:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DataBinding</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>

    <!-- DataBinding references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
     <!-- ItemTemplate'imizi oluşturuyoruz. -->
    <div id="itemTemplateUsers" data-win-control="WinJS.Binding.Template">
        <div style="margin:5px">
            <img data-win-bind="src: image" style="width:150px;height:150px" />
            <div data-win-bind="innerText: name" style="text-align:center"></div>
        </div>
    </div>
    <!-- Öncelikle ListView kontrolümüzü oluşturuyoruz-->
    <div id="listUsers" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate : select('#itemTemplateUsers')}"></div>

</body>
</html>

JavaScript

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    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.
                args.setPromise(WinJS.UI.processAll());
                loaded();
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }

        }

    };
    function loaded() {
        var usersArray = [
            { image: '/images/user/1.jpg', name: 'Ayşe' },
            { image: '/images/user/2.jpg', name: 'Ali' },
            { image: '/images/user/3.jpg', name: 'Ahmet' },
            { image: '/images/user/4.png', name: 'Mehmet' },
            { image: '/images/user/5.png', name: 'Mustafa' },
        ]

        var dataList = new WinJS.Binding.List(usersArray);

        var usersList = document.getElementById('listUsers').winControl;
        usersList.itemDataSource = dataList.dataSource;
    }
    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().
    };

    app.start();
})();

 

Örnek Kodlar