Makale Özeti

Bu makalemde sizlere Windows 8 Metro Style uygulama geliştirmede Flyout'ların nasıl geliştirilebildiğinden bahsedeceğim.

Makale

Bu makalemde sizlere Windows 8 Metro Style uygulama geliştirmede Flyout'ların nasıl geliştirilebildiğinden bahsedeceğim.

Flyout'lar ekranın üzerinde etkileşimde bulunulduğunda açılan popuplar olarak değerlendirilebilir. Windows 8'in Consumer Preview versiyonunda Hava Durumu uygulamasında yeni bir şehir eklemek için Flyout kullanılmaktaydı. Ancak Release Preview versiyonunda bu özellik değiştirildi. Flyout'a ait bir örneği Resimler uygulamasında Geri Bildirim göndermek için açılan ekranda görebilirsiniz. Flyout'lar genellikle AppBar tarafından açılırlar. Örnek bir FlyOut ekranını aşağıda görebilirsiniz.

Biz yapacağımız uygulamada FlyOut'un açılmasını AppBar'dan ziyade bir button'a tıklayarak tetikleyeceğiz. Yapılacak işlem her ikisinde de aynı, yapacağımız tek farklı işlem AppBar'da bulunan button'un click event'ine kod yazmaktansa direkt ekranda bulunan bir button'un click eventine kod yazmak olacaktır.

İsterseniz öncelikle XAML ve C# kullanarak bir demo uygulaması gerçekleştirelim. XAML uygulamalarında JavaScript uygulamaları gibi direkt Flyout kontrolü olmasa da Popup kontrolü ile aynı özelliği sağlayabilmekteyiz.

Öncelikle sayfama bir adet Popup kontrolü koyuyorum ve bu kontrolün içerisine istediğim kontrolleri koyuyorum. Popup kontrolü IsOpen property'si true olmadıkça gösterilmez. Dolayısıyla sayfamı açtığımda karşıma hiçbirşey gelmeyecektir. Popup kontrolümü sayfam yüklendiğinde açabileceğim gibi sayfam üzerindeki bir button'dan da tetikleyebilirim. Bunun için sayfama bir tane button ekliyorum ve button'un click event'ine popup'un açılmasını sağlayacak kodumu yazıyorum. Yazmış olduğum bu kodları aşağıda bulabilirsiniz.

XAML

<Page
    x:Class="FlyoutXAML.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlyoutXAML"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Popup x:Name="popupHelloWorld" Margin="0,0,954,684">
            <Grid Background="#FFE5E5E5" Height="70" Width="400">
                <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Adınız Soyadınız : " VerticalAlignment="Top" Height="50" Width="107" FontSize="13"/>
                <TextBox x:Name="tbName" HorizontalAlignment="Left" Height="50" Margin="122,10,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="127"/>
                <Button x:Name="btnSayHello" Content="Merhaba De" HorizontalAlignment="Left" Height="50" Margin="254,10,0,0" VerticalAlignment="Top" Width="136"/>

            </Grid>
        </Popup>
        <Button x:Name="btnOpenPopup" Content="Popup Aç" HorizontalAlignment="Left" Height="66" Margin="435,138,0,0" VerticalAlignment="Top" Width="292" Click="btnOpenPopup_Click"/>

    </Grid>
</Page>

C#

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace FlyoutXAML
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void btnOpenPopup_Click(object sender, RoutedEventArgs e)
        {

            popupHelloWorld.Margin = new Thickness(btnOpenPopup.Margin.Left, btnOpenPopup.Margin.Top + btnOpenPopup.Height + 5, 0, 0);
            popupHelloWorld.IsOpen = true;
        }

    }
}

Görüdüğünüz gibi ayrıca popup kontrolümü göstermeden önce açılacağı lokasyonu da belirtiyorum. Eğer dinamik bir lokasyon belirleme ihityacım olmasaydı bu lokasyonu xaml kodunun içerisinde de belirleyebilirdim.

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

 

Javascript tarafına baktığımızda ise durum çok daha kolay. WinJS kütüphanesi içerisinde hazır bir FlyOut kontrolü bulunuyor.

İsterseniz şimdi bu kontrolün özelliklerini ve metodlarını inceleyelim.

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

Metodlar :
Hide(): Flyout'u gizlemek için çağrılacak metoddur.
Show(anchor, placement, alignment): FlyOut'u göstermek için çağrılacak metoddur.

Özellikler
Alignment: Flyout'un nereye yaslanacağının belirlendiği özelliktir.
Anchor: Flyout'un açılırken hengi elemana yaslı olacağını belirten özelliktir.
Placement: Flyout'un Anchor ile belirtilen elemanın neresinde açılacağının belirlendiği özelliktir.

Şimdi isterseniz tüm bu özellik ve metodların kullanıldığı bir örnek yapalım.

Örneğimizde sayfamıza bir tane button ekliyoruz ve sonrasında bir tane flyout kontrolü ekliyoruz. Hatırlayacağınız gibi WinJS kütüphanesindeki kontroller div kontrolünün içerisinde data-win-control özelliğine tip verilerek oluşturuluyordu. Bu kontrolümüzü oluşturduktan sonra içerisine html kontrolleri kullanabiliyoruz. İçerisine kontrollerimizi de ekledikten sonra javascript kodunda oluşturduğumuz button'un click event'inde flyout'umuzun show metodunu çağırarak gösterilme işlemini gerçekleştiriyoruz.

Bu temel işlemin ardından diğer özellikleri de incelemek için bir log div'i oluşturuyor ve sayfa üzerinde yaptığımız işlemlerin buraya loglanmasını sağlıyoruz. Bunun için Flyout kontrolünün event'lerini kullanıyoruz.

Kodu inceleyecek olursak:

HTML

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

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

        <input type="button" id="btnOpenPopup" value="Popup Aç"/>

        <div id="flyoutDiv" data-win-control="WinJS.UI.Flyout">
            <label>Adınız Soyadınız:</label>
            <input type="text" id="tb" />
            <input type="button" id="btnSayHello" value="Merhaba De"/>
        </div>
        <div id="log" style="margin-top:150px"></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() {
        btnOpenPopup.addEventListener('click', function () {
            flyoutDiv.winControl.show(btnOpenPopup, 'bottom');
        });
        btnSayHello.addEventListener('click', function () { log.innerHTML += 'Merhaba ' + tb.value + '<br>'; flyoutDiv.winControl.hide(); });

        flyoutDiv.winControl.addEventListener('beforeshow', function () { log.innerHTML += 'flyout açılıyor<br>'; });
        flyoutDiv.winControl.addEventListener('aftershow', function () { log.innerHTML += 'flyout açıldı<br>'; });
        flyoutDiv.winControl.addEventListener('beforehide', function () { log.innerHTML += 'flyout kapanıyor<br>'; });
        flyoutDiv.winControl.addEventListener('afterhide', function () { log.innerHTML += 'flyout kapandı<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();
})();

Ve en son olarak oluşturduğumuz uygulamanın ekran görüntüsü aşağıdaki gibi oluyor.

Örnek Kodlar C#

Örnek Kodlar JavaScript