Makale Özeti

Bu makalemde sizlere Windows 8 Metro Style uygulama geliştirmede Menu kontrolünün nasıl kullanılabileceğinden bahsedeceğim. Menu kontrolü sadece Javascipt ile uygulama geliştirirken kullanabileceğimiz bir kontroldür ve temel olarak PopupMenu ve Popup kontrolleri ile benzerlik göstermektedir. Dolayısıyla bu kontrolün özelliğini XAML tarafında yine Popup kontrolü ile geliştirebiliriz.

Makale

Bu makalemde sizlere Windows 8 Metro Style uygulama geliştirmede Menu kontrolünün nasıl kullanılabileceğinden bahsedeceğim.

Menu kontrolü sadece Javascipt ile uygulama geliştirirken kullanabileceğimiz bir kontroldür ve temel olarak PopupMenu ve Popup kontrolleri ile benzerlik göstermektedir. Dolayısıyla bu kontrolün özelliğini XAML tarafında yine Popup kontrolü ile geliştirebiliriz.

Bu kontrolün özelliklerinden bahsedecek olursak :

Event'lar:
AfterHide: Menu kontrolü gizlendikten sonra fırlatılacak event'tir.
AfterShow: Menu kontrolü gösterildikten sonra fırlatılacak event'tir.
BeforeHide: Menu kontrolü gizlenmeden hemen önce fırlatılacak event'tir.
BeforeShow: Menu kontrolü gösterilmeden hemen önce fırlatılacak event'tir.

Metod'lar:
getCommandById(id): Menünün içerisinde belirtilen id ile belirlenmiş komutu döndürür. Dönüş tipi MenuCommand nesnesidir.
hide(): Menu'yü gizler.
hideCommands(commands): Menünün içerisinde array ile geçirilen MenuCommand nesnesine ait komutları menüden gizler. MenuCommand nesnesi referansları yerine komutların Id'leri de parametre geçirilebilmektedir.
Show(anchor, placement, alignment): Menü'yü göstermek için çağrılacak metoddur.
showCommands(commands): Menünün içerisinde array ile geçirilen MenuCommand nesnesine ait komutları menüde gösterir. MenuCommand nesnesi referansları yerine komutların Id'leri de parametre geçirilebilmektedir. Komutlar daha önceden gizlenmişse tekrar gösterilmesine yarar.
showOnlyCommands(commands): Menünün içerisinde array ile geçirilen MenuCommand nesnesine ait komutları menüde gösterir ve diğer komutları gizler. MenuCommand nesnesi referansları yerine komutların Id'leri de parametre geçirilebilmektedir.

Property'ler
alignment: Flyout'un nereye yaslanacağının belirlendiği özelliktir.
anchor: Flyout'un açılırken hangi elemana yaslı olacağını belirten özelliktir.
placement: Flyout'un Anchor ile belirtilen elemanın neresinde açılacağının belirlendiği özelliktir.
commands: Menü komutlarının array olarak saklandığı özelliktir. MenuCommand nesnesi tipinde değerler taşırlar.

Menü'lerin içerisine komutlar oluşturmaya yarayan MenuCommand nesnesini de incelemekte fayda var. İsterseniz şimdi bu nesnenin özelliklerini inceleyelim.

disabled: true veya false değerlerini alır. Belirtilen komutun enabled olup olmayacağını belirler.
extraClass: MenuCommand nesnesine extra stil eklemek için kullanılır.
flyout: Eğer kontrol tipi olarak flyout seçilmiş ise button'a tıklandığında hangi flyout kontrolünün açılacağı bu özellik sayesinde belirlenir.
hidden: Belirtilen komutun gözüküp gözükmediğini belirler.
id: Belirtilen komutun id'sini belirler. Bu aynı zamanda oluşturulacak komutun id'isidir.
label: Bu komut'un üzerinde text olarak ne gözükeceğinin belirlendiği özelliktir.
onclick: Bu komuta tıklandığında hangi fonksiyonun çağrılacağının belirlendiği özelliktir.
selected: Belirtilen komutun seçili olup olmadığını belirtildiği özelliktir.
type: oluşturulacak komut için hangi tip kontrolün kullanılacağının belirlendiği özelliktir. Değerleri button, toggle, flyout veya separator olabilir.

Şimdi isterseniz bu özelliklerin tamamını kullandığımız örnek bir demo yapalım.

Bunun için sayfamıza menüyü açabileceğimiz bir button ekliyoruz ve daha sonrasında menü kontrolümüzü oluşturuyoruz. Menü kontrolümü tüm WinJS kontrollerimiz gibi data-win-control özelliği içerisine tipi tanımlanarak oluşturuluyor.

Menu kontrolümüz içerisine ise MenuCommand nesnelerini oluşyutuyoruz. Bunun için button tag'ını kullanıp data-win-control özelliğine WinJS.UI.MenuCommand tipini veriyoruz daha sonra ise her button için yukarıda tanımlı özellikleri json formatında data-win-options özelliğine veriyoruz.

Button'umuzun click olayında ise menümüzü show metodunu çağırarak açıyoruz. Bu örnek uygulamada ayrıca menu nesnesinin event'lerini de nasıl kullanabileceğimizi görüyoruz. Uygulamanın kodunu inceleyecek olursak:

HTML

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

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

    <input type="button" value="Menüyü Göster" id="btnShowMenu" />
    <div id="menu" data-win-control="WinJS.UI.Menu">
        <!-- Menümüzün içerisine normal bir button oluşturuyoruz. -->
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'cmd1',label:'Button ',type:'button'}"></button>
        <!-- Menümüzün içerisine disabled bir button oluşturuyoruz. -->
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'cmd2',label:'Disabled Button ',type:'button',disabled:'true'}"></button>
        <!-- Menümüzün içerisine seçilmiş button oluşturuyoruz. -->
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'cmd3',label:'Selected Button',type:'button',selected:'true'}"></button>
        <!-- Menümüzün içerisine toggle button oluşturuyoruz. -->
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'cmd4',label:'Toggle Button ',type:'toggle'}"></button>
        <!-- Menümüzün içerisine seperatör oluşturuyoruz. -->
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'cmd5',type:'seperator'}"></button>
        <!-- Menümüzün içerisine tıklandığında bir flyout kontrolünü açacak button oluşturuyoruz. -->
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'cmd6',label:'Flyout Button ',type:'flyout',flyout:'fo'}"></button>
    </div>

    <div id="fo" data-win-control="WinJS.UI.Flyout">
        <label>Ad Soyad</label>
        <input type="text" />
        <input type="button" value="Gönder" />
    </div>
    <div id="log" style="margin-left:250px">

    </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()
    {
        btnShowMenu.addEventListener('click', function () { menu.winControl.show(btnShowMenu, 'bottom'); });
        document.getElementById('cmd1').addEventListener('click', tiklandi);
        document.getElementById('cmd2').addEventListener('click', tiklandi);
        document.getElementById('cmd3').addEventListener('click', tiklandi);
        document.getElementById('cmd4').addEventListener('click', tiklandi);
        document.getElementById('cmd5').addEventListener('click', tiklandi);
        document.getElementById('cmd6').addEventListener('click', tiklandi);

        menu.winControl.addEventListener('beforeshow', function () { log.innerHTML += 'menu açılıyor<br>'; });
        menu.winControl.addEventListener('aftershow', function () { log.innerHTML += 'menu açıldı<br>'; });
        menu.winControl.addEventListener('beforehide', function () { log.innerHTML += 'menu kapanıyor<br>'; });
        menu.winControl.addEventListener('afterhide', function () { log.innerHTML += 'menu kapandı<br>'; });
    }
    function tiklandi(cmd)
    {
        log.innerHTML += cmd.srcElement.innerText+ ' tıklandı<br>';
    }

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

En son olarak uygulamamızın çalışır haldeki ekran görüntüsüne bakıyoruz.

Örnek Kodlar