Makale Özeti

Bu makalemizde Windows MetroStyle uygulamalarda çoğunlukla karşımıza çıkan App Bar kontrolünün kullanımını inceleyeceğiz. Bu kontrolün kullanımını HTML/JavaScript kullanarak inceleyeceğiz ve örnekler yapacağız.

Makale

Bu makalemizde Windows MetroStyle uygulamalarda çoğunlukla karşımıza çıkan App Bar kontrolünün kullanımını inceleyeceğiz.

Bu kontrolün kullanımını HTML/JavaScript kullanarak inceleyeceğiz ve örnekler yapacağız.

Öncelikle App Bar kontrolünden bahsetmek gerekirse, App Bar fare kullanıyorsanız bir uygulamada sağ tuşa tıkladığınızda, dokunmatik ekran kullanıyorsanız ekranın en alt noktasından yukarıya doğru bir dokunma hareketi gerçekleştirdiğinizde açılacaktır. Bazı app bar örneklerine bakacak olursak;

Öncelikle isterseniz HTML/JavaScript uygulamalarında AppBar'ın kullanımını inceleyelim.

Öncelikle Blank App olarak bir proje oluşturuyoruz.

Arkasından default.html dosyamıza gelerek, AppBar kontorlümüzü sayfamıza ekleyebiliriz. Bu ekleme işlemi için bir tane div elemanı oluşturuyor ve sayfamıza ekliyoruz. Bu div elemanının data-win-control özelliğine WinJS kütüphanesindeki kontrolün tipini vererek o kontrolün render edilmesini sağlayabiliyoruz. AppBar kontrolü oluşturmak istediğimiz için bu özelliğe WinJS.UI.AppBar değerini vermemiz gerekiyor.

Oluşturuğumuz bu div in içerisine eklediğimiz kontroller AppBar'ımızın içerisinde gözükecektir.

Oluşturduğumuz AppBar kontrolünün id'sini bottomBar olarak tanımlıyoruz ve içerisine buttonları button tagı ile ekliyoruz. Burada dikkat etmemiz gereken buttonlarin içerisine data-win-control özelliğine mutlaka WinJS.UI.AppBarCommand değerinin verilmesidir. Ayrıca bu Command ile ilgili özellikleri data-win-options isimli özelliğin içerisinde JSON formatında tanımlayabiliyoruz. Tüm WinJS kontrolleri için data-win-options kullanılabilmektedir. Örneğin AppBar'ımızın bottom'da çıkması için data-win-options içerisine placement:'bottom' komutunu yazmamız gerekiyor.

İsterseniz şimdi uygulamamızı çalıştıralım.

Kodumuz aşağıdaki gibi oluşuyor ve uygulamamızı çalıştırdığımızda ve AppBar'ı açtığımızda karşımıza aşağıdaki gibi bir örnek gelecektir:

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

    <!-- JavaScriptSample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="bottomBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPlay',label:'Oynat',icon:'play'}"></button>
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPause',label:'Duraklat',icon:'pause'}"></button>
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdStop',label:'Durdur',icon:'stop'}"></button>
    </div>

</body>
</html>

 

Ancak bu butonlara tıklanıldığı zaman herhangi bir aksiyon alınmamaktadır. İsterseniz butonların çalışır hale gelmesini sağlayalım. Bunun için her command oluşturduğumuz div için eventhandler'ları yazmamız gerekecektir. Bunları da js dosyasında yapacağız. Sayfamıza bir tane div koyuyoruz ve bu div nesnesinin içeriğini bu buttonlara basıldıkça değiştireceğiz.

Bu işlemleri yaptığımızda HTML ve Javascript kodumuz aşağıdaki gibi olacaktır:

HTML

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

    <!-- JavaScriptSample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="outputDiv">

    </div>
    <div id="bottomBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPlay',label:'Oynat',icon:'play'}"></button>
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPause',label:'Duraklat',icon:'pause'}"></button>
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdStop',label:'Durdur',icon:'stop'}"></button>
    </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.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
            loaded();
        }
    };

    function loaded() {
        var outputDiv = document.getElementById('outputDiv');
        document.getElementById('cmdPlay').addEventListener('click', function () { outputDiv.innerHTML = 'Müzik çalıyor' });
        document.getElementById('cmdPause').addEventListener('click', function () { outputDiv.innerHTML = 'Müzik duraklatıldı' });
        document.getElementById('cmdStop').addEventListener('click', function () { outputDiv.innerHTML = 'Müzik durduruldu' });
    }

    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();
})();

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

 

App bar kontrollerimizde standart button dışında kontroller de kullanmamız mümkündür. Bunun için farklı bir örnek yapalım. Bir textbox koyarak kullanıcıdan bilgi aldığımızı düşünelim. Bunun için yeni bir Appbar ekliyorum ve uygulamanın yukarısında açılmasını sağlıyorum. Standart AppBarCommand dışı nesneler kullanabilmek için AppBar'ın layout property'sini custom olarak belirlemek gerekiyor. Bu işlemi de daha önce bahsettiğim gibi data-win-options özelliği sayesinde yapıyorum. Bu işlemi yaptıktan sonra tüm html kontrollerini AppBar içerisinde kullanabiliyorum. Koymuş olduğum bu kontrollere JavaScript dosyasında document.getElementById metodunu kullanarak erişebiliyorum.

Bu işlemleri yaptığımızda HTML ve JavaScript kodumuz aşağıdaki gibi olacaktır:

HTML

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

    <!-- JavaScriptSample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="outputDiv" style="padding-top:100px">
    </div>
    <div id="bottomBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPlay',label:'Oynat',icon:'play'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPause',label:'Duraklat',icon:'pause'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdStop',label:'Durdur',icon:'stop'}"></button>
    </div>
    <div id="topBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'top',layout:'custom'}">
        <label>Şarkı Adı</label>
        <input type="text" id="txtSongName" />
        <button id="btnLoadSong">Şarkı Yükle</button>
    </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.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
            loaded();
        }
    };

    function loaded() {
        var outputDiv = document.getElementById('outputDiv');
        document.getElementById('cmdPlay').addEventListener('click', function () { outputDiv.innerHTML = 'Müzik çalıyor' });
        document.getElementById('cmdPause').addEventListener('click', function () { outputDiv.innerHTML = 'Müzik duraklatıldı' });
        document.getElementById('cmdStop').addEventListener('click', function () { outputDiv.innerHTML = 'Müzik durduruldu' });

        var songName=document.getElementById('txtSongName');
        document.getElementById('btnLoadSong').addEventListener('click', function () { outputDiv.innerHTML = songName.value + ' isimli şarkı yüklendi' });
    }

    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();
})();

Ekran görüntümüz ise aşağıdaki gibi oluyor.

Şimdi isterseniz 1-2 son ekleme ile örneğimizi bitirelim. Bu noktadan sonra yaptığım tüm örneklerin kodunu makalemin en sonunda paylaşıyor olacağım.

Şarkımızı yüklemeden önce Oynat, Duraklat, Durdur gibi komutları veremeyeceğimiz için uygulamamız açılırken bu button'ları disable yapabiliriz. Kullanıcı şarkıyı yüklediğinde bu button'ları aktif hale çevirebiliriz. Bunun için buttonlarımızın disabled property'lerini disabled olarak set edip kullanıcı şarkıyı yüklediğinde bu property'i enabled yapacağız.

Hemen bu işlemin arkasından kullanıcı App Bar'da bulunan bir button'a tıkladığında AppBar'ın otomatik olarak kapanmasını sağlayabiliriz. Bunun için de AppBar'ın hide metodunu kullanabiliriz. Ayrıca show metodunu AppBar'ı programatik olarak açmak için de kullanabiliriz. Bunun için button'larımın click event'i sonrasında AppBar'ı kapatması için gerekli kodu yazıyorum.

Bir Appbar'ı yapışkan yapmanız mümkündür. Yani kullanıcı uygulamanızla iletişim içinde olduğunda bu appbar'ın açık kalmasını sağlayabilirsiniz. Yani kullanıcı uygulamada herhangi bir yere tıkladığında AppBar kaybolmayacaktır. Bunun örneğini ise ekranıma bir tane TopBar ekleyip sticky özelliğini true yaparak sağlıyorum. Kullanıcı Appbar'ı açtığında ekranla etkileşim kurduğunda altta bulunan appbar kapanırken yukarıda bulunan ve sticky property'sini true yaptığım Appbar kapanmayacaktır. Kullanıcı sağ tık yaptığında veya dokunmatik olarak AppBar'ı kapadığında kapanacaktır.

En son olarak isterseniz AppBar'ın belli başlı event'lerine bakalım. AfterShow, BeforeShow, AfterHide, BeforeHide event'leri mevcut. İsimlerinden anlaşılabileceği gibi bir appbar açılmaya başladığında BeforeShow, açıldığında AfterShow kapanmaya başladığında ise BeforeHide, kapandığında ise AfterHide event'i fırlayacaktır. Bununla ilgili ufak bir örneği kodumuza ekleyerek makalemi sonlandırıyorum.

Uygulamamızın nihai hai aşağıdaki gibi olacaktır:

HTML

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

    <!-- JavaScriptSample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="outputDiv" style="padding-top:100px">
    </div>
    <div id="outputDiv2">
    </div>
    <div id="bottomBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPlay',label:'Oynat',icon:'play'}" disabled="disabled"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPause',label:'Duraklat',icon:'pause'}" disabled="disabled"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdStop',label:'Durdur',icon:'stop'}" disabled="disabled"></button>
    </div>
    <div id="topBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'top',layout:'custom',sticky:'true'}">
        <label>Şarkı Adı</label>
        <input type="text" id="txtSongName" />
        <button id="btnLoadSong">Şarkı Yükle</button>
    </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.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
            loaded();
        }
    };

    function loaded() {
        var bottomBar = document.getElementById('bottomBar');
        var outputDiv2 = document.getElementById('outputDiv2');

        bottomBar.addEventListener('aftershow', function (eventInfo) { outputDiv2.innerHTML = 'AppBar Açıldı' });
        bottomBar.addEventListener('afterhide', function (eventInfo) { outputDiv2.innerHTML = 'AppBar Kapandı' });

        document.getElementById('cmdPlay').addEventListener('click', function () { outputDiv.innerHTML = 'Müzik çalıyor'; bottomBar.winControl.hide(); });
        document.getElementById('cmdPause').addEventListener('click', function () { outputDiv.innerHTML = 'Müzik duraklatıldı'; bottomBar.winControl.hide(); });
        document.getElementById('cmdStop').addEventListener('click', function () { outputDiv.innerHTML = 'Müzik durduruldu'; bottomBar.winControl.hide(); });

        var songName=document.getElementById('txtSongName');
        document.getElementById('btnLoadSong').addEventListener('click', function () {
            outputDiv.innerHTML = songName.value + ' isimli şarkı yüklendi';
            document.getElementById('cmdPlay').disabled = '';
            document.getElementById('cmdPause').disabled = '';
            document.getElementById('cmdStop').disabled = '';
        });
    }

    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();
})();

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

Örnek Kodlar