Makale Özeti

Bu makalemde sizlere Windows 8 RT kontrollerinden MessageDialog'dan bahsedeceğim. MessageDialog alışılagelmiş masaüstü uygulamalarında sıklıkla kullandığımız MessageBox kontrolünün görevini yapmaktadır diyebiliriz. MessageDialog nesnesinin ne gibi özellikleri olduğunu inceledikten sonra bu özelliklerin kullanımlarını gerek HTML/JavaScript gerek ise XAML/C# kullanarak yapacağımız örneklerle pekiştireceğiz.

Makale

Bu makalemde sizlere Windows 8 RT kontrollerinden MessageDialog'dan bahsedeceğim.

MessageDialog alışılagelmiş masaüstü uygulamalarında sıklıkla kullandığımız MessageBox kontrolünün görevini yapmaktadır diyebiliriz. MessageDialog nesnesinin ne gibi özellikleri olduğunu inceledikten sonra bu özelliklerin kullanımlarını gerek HTML/JavaScript gerek ise XAML/C# kullanarak yapacağımız örneklerle pekiştireceğiz.

Constructor'lar :

MessageDialog(string content) : Bu contructor'da MessageDialog içerisinde gösterilecek mesajı content parametresi ile belirleyebilirsiniz.
MessageDialog(string content,string title) : Bu constructor'da ise MessageDialog içerisinde gözükecek mesajı content parametresiyle, MessageDialog'un başlığını ise title parametresiyle belirleyebilirsiniz.

Metodlar :

ShowAsync() : Bu metod ile hazırlamış olduğunuz MessageDialog'u kulanıcıya gösterebilirsiniz. MessageDialog'un gösterilmesi asenkron olarak başlayacaktır.

İsterseniz MessageDialog nesnesinin özelliklerini incelemeden önce şimdiye kadar incelediklerimizle hem c# hem de javascript örnekleri yapalım.

XAML/C# Örneği

MainPage.xaml dosyamıza 2 tane button ekliyoruz ve click event'lerine aşağıdaki kodu yazıyoruz:

XAML

<Page
    x:Class="MessageDialogXAML.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MessageDialogXAML"
    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}">
        <Button x:Name="btnSample1" Content="Örnek 1" HorizontalAlignment="Left" Margin="28,28,0,0" VerticalAlignment="Top" Height="76" Width="276" Click="btnSample1_Click"/>
        <Button x:Name="btnSample2" Content="Örnek 2" HorizontalAlignment="Left" Height="76" Margin="28,128,0,0" VerticalAlignment="Top" Width="276" Click="btnSample2_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 MessageDialogXAML
{
    /// <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 btnSample1_Click(object sender, RoutedEventArgs e)
        {
            ShowMessageDialogSample1();
        }

        private void btnSample2_Click(object sender, RoutedEventArgs e)
        {
            ShowMessageDialogSample2();
        }

        private async void ShowMessageDialogSample1()
        {
            Windows.UI.Popups.MessageDialog md = new Windows.UI.Popups.MessageDialog("Message Dialog Denememizi Başarıyla Yaptık");
            await md.ShowAsync();
        }

        private async void ShowMessageDialogSample2()
        {
            Windows.UI.Popups.MessageDialog md = new Windows.UI.Popups.MessageDialog("Message Dialog Denememizi Başarıyla Yaptık", "Message Dialog Denemesi");
            await md.ShowAsync();
        }

    }
}

 

Button'ların click event'leri içerisinde MessageDialog'un bir instance'ını alıyoruz ve ShowAsync metodu ile kullanıcıya gösteriyoruz:

HTML/JavaScript Örneği

HTML

 

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

    <!-- MessageDialogJavaScript references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <button id="btnSample1" style="width:276px;height:76px">Örnek 1</button>
    <br /><br />
    <button id="btnSample2" style="width:276px;height:76px">Örnek 2</button>
</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()
    {
        document.getElementById('btnSample1').addEventListener('click', ShowMessageDialogSample1);
        document.getElementById('btnSample2').addEventListener('click', ShowMessageDialogSample2);
    }

    function ShowMessageDialogSample1()
    {
        var md = new Windows.UI.Popups.MessageDialog('Message Dialog Denememizi Başarıyla Yaptık');
        md.showAsync()
    }

    function ShowMessageDialogSample2()
    {
        var md = new Windows.UI.Popups.MessageDialog('Message Dialog Denememizi Başarıyla Yaptık', 'Message Dialog Denemesi');
        md.showAsync();
    }

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

 

Gördüğünüz gibi javascript ile kodlama yaparken de durum C#'a göre çok farklı değil, yine buttonların click metodlarının içerisinde MessageDialog nesnesinin bir instance'ını alıyoruz ve showAsync metodunu çağırıyoruz.

Çalıştırdığımız kodun Ekran görüntülerine bakacak olursak, iki görüntü arasında bir fark olmadığını göreceksiniz. Ayrıca görüntülerde MessageDialog'un bir dialog penceresi olarak açıldığını ve arkasında bulunan kontrollere erişimi engellediğini de göreceksiniz.

C#

JavaScript


Şimdi isterseniz MessageDialog nesnesinin özelliklerini inceleyelim.

CancelCommandIndex: Cancel command olarak belirlemek istediğiniz command'ın index numarasıdır. Cancel command kullanıcı Esc tuşuna bastığında çalışacak komuttur.
Commands: MessageDialog kutusu açıldığı zaman belirecek komutlar bu collection'da tutulmaktadır.
Content: Kullanıcıya gösterilecek olan mesajdır.
DefaultCommandIndex: Default(Varsayılan) command olarak belirlemek istediğiniz command'ın index numarasıdır. Cancel command kullanıcı Enter tuşuna bastığında çalışacak komuttur.
Options: MessageDialog için belirlenmiş seçenekleri buradan belirleyebilirsiniz. Seçenekler None veya AcceptUserInputAfterDelay olabilir. None varsayılan değerdir ve kullanıcı MessageDialog ile hemen etkileşime girebilir ancak AcceptUserInputAfterDelay seçildiğinde kullanıcı bir süre geçmeden MessageDialog ile etkileşime giremez. Yanlışlıkla onay verme gibi durumların önüne geçilmesi veya güvenlik amaçlı bazı noktalarda kullanılabilir.
Title: MessageDialog üzerinde çıkacak olan başlıktır. Boş bırakıldığında başlık çıkmaz.

Ayrıca command'ları oluşturmak için UICommand nesnesini oluşturacağımız için bu nesneyi de inceleyelim.

UICommand nesnesinde Label, Id ve Invoked özellikleri vardır, Id kontrolün Id'si iken, Label kullanıcıya bu komut için gösterilecek metin, Invoked ise bu komut çalıştığı zaman tetiklenecek handler'dır.

Bu konuları daha iyi pekiştirmek için, şimdi isterseniz kullanıcıya bir konu hakkında devam etmek isteyip istemediğini soran bir MessageDialog açalım ve kullanıcının seçimini ekrana yazdıralım.

Bunun için yukarıda gördüğümüz gibi MessageDialog'u tanımlamamız gerekiyor. Bundan sonrasında tanımlamış olduğumuz MessageDialog'un Command özelliğine gözükmesini istediğimiz komutları tanımlamamız ve bu komutlar seçildiğinde hangi işlemin yapılacağını belirlememiz gerekiyor. Bunu aşağıda gördüğünüz kod ile yapabilirsiniz:

XAML

<Page
    x:Class="MessageDialogXAML.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MessageDialogXAML"
    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}">
        <Button x:Name="btnSample1" Content="Örnek 1" HorizontalAlignment="Left" Margin="28,28,0,0" VerticalAlignment="Top" Height="76" Width="276" Click="btnSample1_Click"/>
        <Button x:Name="btnSample2" Content="Örnek 2" HorizontalAlignment="Left" Height="76" Margin="28,128,0,0" VerticalAlignment="Top" Width="276" Click="btnSample2_Click"/>
        <Button x:Name="btnSample3" Content="Örnek 3" HorizontalAlignment="Left" Height="76" Margin="28,228,0,0" VerticalAlignment="Top" Width="276" Click="btnSample3_Click"/>
        <TextBlock x:Name="tbOutput" HorizontalAlignment="Left" Height="130" Margin="28,328,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="1304" FontSize="48"/>

    </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.Popups;
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 MessageDialogXAML
{
    /// <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 btnSample1_Click(object sender, RoutedEventArgs e)
        {
            ShowMessageDialogSample1();
        }

        private void btnSample2_Click(object sender, RoutedEventArgs e)
        {
            ShowMessageDialogSample2();
        }

        private void btnSample3_Click(object sender, RoutedEventArgs e)
        {
            ShowMessageDialogSample3();
        }

        private async void ShowMessageDialogSample1()
        {
            Windows.UI.Popups.MessageDialog md = new Windows.UI.Popups.MessageDialog("Message Dialog Denememizi Başarıyla Yaptık");
            await md.ShowAsync();
        }

        private async void ShowMessageDialogSample2()
        {
            Windows.UI.Popups.MessageDialog md = new Windows.UI.Popups.MessageDialog("Message Dialog Denememizi Başarıyla Yaptık", "Message Dialog Denemesi");
            await md.ShowAsync();
        }

        private async void ShowMessageDialogSample3()
        {
            Windows.UI.Popups.MessageDialog md = new Windows.UI.Popups.MessageDialog("Devam Etmek İstediğinize Emin misiniz?", "Onay");
            //Burada yeni bir komut nesnesi oluşturuyoruz.
            Windows.UI.Popups.UICommand cmdYes = new Windows.UI.Popups.UICommand();
            cmdYes.Label = "Evet";
            cmdYes.Invoked = YesInvoked;
            md.Commands.Add(cmdYes);

            //Burada da constructor'unu kullanarak oluşturuyoruz.
            md.Commands.Add(new UICommand("Hayır", NoInvoked));

            //Enter ve Esc buttonları için varsayılan command'ları atıyoruz.
            md.DefaultCommandIndex = 0;
            md.CancelCommandIndex = 1;

            await md.ShowAsync();
        }
        private void YesInvoked(IUICommand cmd)
        {
            tbOutput.Text = "Kullanıcı Evet'i seçti işleme devam ediliyor";
        }
        private void NoInvoked(IUICommand cmd)
        {
            tbOutput.Text = "Kullanıcı Hayır'ı seçti işlem iptal ediliyor";
        }

    }
}

Şimdi isterseniz aynı kodu HTML ve JavaScipt ile yazalım ve ne kadar benzerlik gösterdiğine bakalım.

HTML

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

    <!-- MessageDialogJavaScript references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <button id="btnSample1" style="width:276px;height:76px">Örnek 1</button>
    <br /><br />
    <button id="btnSample2" style="width:276px;height:76px">Örnek 2</button>
    <br /><br />
    <button id="btnSample3" style="width:276px;height:76px">Örnek 3</button>
    <br /><br />
    <div id="tbOutput" style="font-size:36px"></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() {
        document.getElementById('btnSample1').addEventListener('click', ShowMessageDialogSample1);
        document.getElementById('btnSample2').addEventListener('click', ShowMessageDialogSample2);
        document.getElementById('btnSample3').addEventListener('click', ShowMessageDialogSample3);
    }

    function ShowMessageDialogSample1() {
        var md = new Windows.UI.Popups.MessageDialog('Message Dialog Denememizi Başarıyla Yaptık');
        md.showAsync()
    }

    function ShowMessageDialogSample2() {
        var md = new Windows.UI.Popups.MessageDialog('Message Dialog Denememizi Başarıyla Yaptık', 'Message Dialog Denemesi');
        md.showAsync();
    }

    function ShowMessageDialogSample3() {
        var md = new Windows.UI.Popups.MessageDialog('Devam Etmek İstediğinize Emin misiniz?', 'Onay');

        //Burada yeni bir komut nesnesi oluşturuyoruz.
        var cmdYes = new Windows.UI.Popups.UICommand();
        cmdYes.label = "Evet";
        cmdYes.invoked = YesInvoked;
        md.commands.append(cmdYes);

        //Burada da constructor'unu kullanarak oluşturuyoruz.
        md.commands.append(new Windows.UI.Popups.UICommand("Hayır", NoInvoked));

        //Enter ve Esc buttonları için varsayılan command'ları atıyoruz.
        md.defaultCommandIndex = 0;
        md.cancelCommandIndex = 1;

        md.showAsync();
    }
    function YesInvoked(cmd) {
        tbOutput.innerHTML = "Kullanıcı Evet'i seçti işleme devam ediliyor";
    }
    function NoInvoked(cmd) {
        tbOutput.innerHTML = "Kullanıcı Hayır'ı seçti işlem iptal ediliyor";
    }

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

Her iki uygulamayı da çalıştırdığımızda aynı ekran görüntüsünü elde edeceğiz. Elde edeceğimiz ekran görüntüsü aşağıdaki gibi olacaktır.

Şimdi bir komuta tıklayalım ve ekran görüntüsüne tekrar bakalım.


Windows 8 Metro Style uygulama geliştirmede kullanabileceğiniz MessageDialog kullanımını bu şekilde enine boyuna incelemiş olduk.

Örnek Kodlar C#

Örnek Kodlar JavaScript