Yazdır

Windows 8.1 System Contracts

Fatih Bekdemir tarafından yazıldı. Aktif . Yayınlanma Windows 8

Merhaba Herkese,

Bu yazımda Windows 8/8.1 sistem özelliklerinden Search, Share ve Settings özelliklerini uygulamalarınız içerisinde nasıl kullanabileceğinizi anlatacağım.

 

Windows 8 ile birlikte kullanmaya başladığımız bu fonksiyonlar Windows 8.1 ‘in piyasaya sürülmesiyle birlikte yeni ve geliştirilmiş özellikleriyle karşımıza çıktı. Windows charms bar olarak adlandırdığımız mouse’ımızı sağa çektiğimizde gelen menüde ortaya çıkan Search Share Settings gibi menüleri yalnızca Windows’u kullanırken değil, uygulama içerisinde de arama yaptığımızda yada bir paylaşım yapmak amacıyla kullanabiliyoruz.

Search

Search yapısını inceleyecek olursak, Mouse ile üzerine geldiğimizde yada Windows + Q tuşlarına bastığımızda Search Bar’ı açmış oluyoruz.

Öncelikle elimizde ne var buna bakalım. Search Bar’ı açtığımda Eveywhere seçeneğini görüyorum. Bu kısmı genişlettiğimde Settings, Files, Web Images, Web Videos gibi seçeneklerimin olduğunu da görüyorum. Yani spesifik olarak sadece bu alanlarda arama yapabiliyorum. Everywhere seçili olduğu için, aradığım kelimeyi bu kısımlarla da ilişkilendirerek sonuçlar döndürüyor.

Gördüğünüz gibi yazdığım yazı ile ilgili bilgisayarımda ki uygulamalar, dosyalar, settings kısmından ayarlar ve Bing tarafından query suggestions şeklinde yazdığımla şeyler internetteki benzer ögeleri getiren bir Search Bar’a sahibiz.

Uygulama içerisinden Arama fonksiyonunun nasıl kullanıldığına bir örnek olarak, Windows Store’da ki Tureng Sözlük uygulamasına bakabilirsiniz. Uygulama açıldığında Search Bar’ı açıp arama kriteri olarak Everywhere yerine Tureng’i seçtiğinizde yazdığınız kelime uygulama içinde ki interface’e bind edilecektir.

Windows 8.1 ile gelen yenilikleri kısaca Windows’unuz içerisinde ve internette akıllı arama fonksiyonu ve uygulama içi arama konusunda en hızlı seçenek olduğunu özetleyerek devam edebiliriz.  Akıllı arama konusunda kişi bazlı olarak spesifik aramalar öne çıkıyor. Örneğin search box’a Marilyn Monroe yazın ve test edin. Gelen sonuç gördüğünüz üzere gayet şık ve bilgi verici bir formartta bizi karşılıyor.

Aynı şeyi Search Box’a İstanbul ve ya İzmir yazarak da deneyebilirsiniz. Bir harita ve şehir hakkında bilgilendirme kutucukları Bing’in akıllı arama özelliği ile kullanımımıza sunuluyor.

SearchBox

Win 8.1 ile gelen yeni özelliklerden biri de SearchBox oldu. Kendisi nedir nerdedir diye soracak olursanız şu an için Microsoft’un kendi uygulamaları olan Finans, Hava durumu, Sağlık, Seyahat gibi uygulamaları içerisinde görebiliriz. Kırmızı butona bastığımızda aşağıda ki resim gibi genişleyen bir textBox’ımız var.

Nasıl Kullanıyoruz ?

Daha önceden yaptığım Yemek Kitabı uygulamasına gidiyorum. MainPage.xaml’ı açıp Toolbox’dan bir SearchBox atıyorum. Butonu daha önceden koyduğum grid’in üzerine gelmeyecek şekilde yerleştiriyorum. İstersek şu şekilde kodunu yazabiliriz.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <GridView x:Name="gridviewPhotos" Margin="88,64,58,62" ItemTemplate="{StaticResource DataTemplatePhotos}"/>

        <SearchBox x:Name="srcBox" Margin="1153,32,50,704" QuerySubmitted="srcBox_QuerySubmitted"/>

    </Grid>

Butonu yerleştirdikten sonra ilk yapacağı iş olarak, üzerine gelinip bir şeyler yazılmaya başlandıktan sonra enter’a basıldığında bunu işleyip göndermesini isteyelim. Bunun için QuerySubmitted metodunu kullanıyoruz. Butonun Event handlers’ına gelip QuerySubmitted’a çift tıklayarak MainPage.xaml.cs klasında butonun metodunun oluşmasını sağlayalım.

        privatevoid srcBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
        {
            var queryText = args.QueryText;
            Photos data = newPhotos();
            gridviewPhotos.ItemsSource = data.getByCountry(queryText);
        }

Yukarıda ki kodda basit olarak arama alanine gireceğimiz text’I tanımladık ve önceden hazırlamış olduğum Photos class’ındaki resimlerin item source’unu vererek tanımladığım Country’lere göre arama işlemini yaptım.

Bu şekilde yaptığımızda farkedersiniz ki Almanya,Fransa ve Çin hariç bir değer aradığımda tüm view’lar ortadan kaybolacak çünkü aradığı değeri bulamayacak. Peki search box’da hiçbir değer yok ise ne yapmasını gerektiğini tanımlayalım. Aşağıdaki kod ile bunu sağlıyor ve srcBox_QuerySubmitted metodumuzun içini biraz daha structured bir yapı haline getiriyoruz.

            var queryText = args.QueryText;
            Photos data = newPhotos();

            if(String.IsNullOrEmpty(queryText))
            {
                gridviewPhotos.ItemsSource = data.getAllPhotos();
            }
            else
            {
                gridviewPhotos.ItemsSource = data.getByCountry(queryText);
            }

Bu kod ile eğer searchBox’ın içi boş ise tüm fotoları getiriyor, dolu ise arama işlemini yapıyor. Bu kodu da ekleyip çalıştırarak öncelikle Çin için gelen resimleri görüp, daha sonra kutu içerisinden Çin’I silip enter’a basarak tüm resimlerin geldiğini görebilirsiniz.

SearchBox özelliklerini kullanmaya devam edelim. Uygulama içerisinde herhangi bir yerde iken yazı yazmaya başladığımızda bunun searchBox’a işlenmesi & focus’lanması için ne yapmalıyız ? Uygulamamızın MainPage.xaml tarafına gelip Properties sekmesinden focusOnKeyboardInput’u bularak işaretliyoruz.

CheckBox’I işaretledikten sonra kaydedip çalıştırıyoruz. Siz SearchBox’a tıklamamış olsanız bile bir şey yazmaya başladığınızda bu yazınız direk SearchBox’a iletilecektir.

Search Result Page

Search Result Page, search box kullanılarak yapılan aramalarda arama sonuçlarını  ile kullanılır. Proje dosyamıza sağ tıklayıp Add -> New Item ve oradan Search Result Page’I bularak bir isim veriyoruz ve projemize ekliyoruz.

Ekledikten sonra ilk başta SearchResultPageCountry.xaml sayfasında InvalidMarkup hatası alabilirsiniz. Lütden sadece xaml ekranını kapatin ve uygulamayı rebuild edin. İşlem tamamlandığında ve xaml ekranını açtığınızda uygulama ekranının açıldığını görebilirsiniz.

Gördüğünüz SearchResult sayfasında bir gripView, page title, resultText, queryText gibi elementleri görmekteyiz. Kısaca arama sonuçlarını göstereceğimiz sayfayı bu kısımda hazırlayacağız.

Şimdi hatırlarsanız, MainPage.xaml sayfasında fotolarımızı içerisinde gösteren gridviewPhotos Grid elementi bulunuyordu. Visual Studio’nun sol tarafında ki Document Outline’a geliyoruz ve oradaki gridviewPhotos’un üzerine gelerek tıklıyoruz ve klavye kısayolumuz ile kopyalıyoruz. Daha sonra SearchResultPageCountry.xaml sayfasına geliyoruz ve bu ekranda bulunan ve içerisinde hiçbirşey bulunmayan typicalPanel elementini siliyoruz ve yerine az önce kopyaladığımız gridviewPhotos’u yapıştırıyoruz.

 SearchResultPageCountry.xaml sayfasının son durumu şu şekilde olmalı.

Sayfadan taşan kısımları içeri doğru kaydırdıktan sonra devam ediyorum. SearchBox’a yazdığım query’nin SearchResultPage içerisinde görüntülenmesi lazım. Bunun için MainPage.xaml.cs tarafında ki srcBox_QuerySubmitted'a geliyorum ve içerisini şu şekilde değiştiriyorum.

        privatevoid srcBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
        {
            var queryText = args.QueryText;
            Frame.Navigate(typeof(SearchResultsPageCountry), queryText);
        }

Burada yaptığımız iş, query’yi yani SearchBox içerisine yazdığımız değeri aldığımızda SearchResultPageCountry sayfasına yönlendirmek olacaktır. Daha önce burada yaptığımız SearchBox boşsa tüm resimleri getir ve bir ülke girildiğinde onunla ilgili resimleri getirme metodlarını ise, SearchResultPageCountry.xaml.cs sayfasında ki navigationHelper_LoadState metodunun içerisine atıyoruz. Dolayısıyla geride kalan tüm mantıksal işlerimizi LoadState’de tanımlamış oluyoruz.

        privatevoid navigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {
            var queryText = e.NavigationParameter asString;

            Photos data = newPhotos();
            if (String.IsNullOrEmpty(queryText))
            {
                gridviewPhotos.ItemsSource = data.getAllPhotos();
            }
            else
            {
                gridviewPhotos.ItemsSource = data.getByCountry(queryText);
            }
        }

 

Uygulamamızı çaıştıralım ve Çin için arama yapalım.

Clearing Search History

Uygulamanızı her defasında açtığınızda farketmişsinizdir ki searchBox’ımızda daha önce arattığımız kelimeler bir liste halinde önümüze geliyor. Bunu silmenin tabiki bir yolu var. Settings charm bar’ına ekleyeceğiniz bir WinRT API’I ile bu işi halledebiliyoruz.

            var searchManager = new Windows.ApplicationModel.Search.Core.SearchSuggestionManager();

            searchManager.ClearHistory();  

Yukarıdaki kod parçası sayesinde search history’de bulunan data’larım silinmiş olacak. Bununla ilgili uygulamayı en sonra uygulamamıza SettingsFlyout eklediğimiz zaman yapacağız.

 

 

 

 

 

 

 

 

 

 

Uygulamada Charm Bar’da ki Share Özelliğini Nasıl Kullanırız ?

Uygulamamız içerisinde facebook, twitter, mail, OneNote, Box, EverNote gibi uygulamalara paylaşım yapılmasını sağlayan bir system hazırlayabiliriz. Öncelikle, Windows 8.1 App Samples içerisinde ki ShareSource örneğini inceleyelim.

Input kısmında çeşitli paylaşım yöntemleri ve içeriklerini görmekteyiz. Sağ tarafta ise de paylaşacağımız içeriğin başlığı, tanımı, içeriği gibi ögeleri görmekteyiz. Paylaşım yapma kontrolü olarak ortadaki Share butonu veya Windows + H kısayolu ise Paylaşım menüsünü açabiliyoruz.

Örnek olarak e posta göndermek için paylaşımı açtığında az önce belirlediğim Title’ın ve içeriğin geldiğini görebiliriz.

Aynı özelliği diğer Input’lar ile de deneyebilir ve uygulamanız içerisinde kullanabilirizsiniz.

Peki sizin uygulamanızın Share alanine görüntülenmesi, yani paylaşılacak hedefin sizin uygulamanız olmasını nasıl sağlayacağız ? Bunun içinde öncelikle bir örnek görelim ve daha sonra kendi uygulamamıza entegre edelim.

Windows 8.1 App Samples içerisinde ki Sharing Content Target App Sample’I çalıştırıyoruz. Uygulama çalıştığında bizde paylaşım yapılabilecek bir içerik istiyor. Örneğin Bing News’dan bir haber açtığımda ve haberi paylaşmak için Share’I açtığımda az önce Visual Studio ile açtığım uygulamamı görmekteyim. Bu demektir ki ben bu uygulamayı paylaşım yapmak için kullanabileceğim.

Gelelim bu özellikleri nasıl kendi uygulamamıza ekleyeceğimize. Öncelikle basit olarak bir text nasıl paylaşabiliriz buna değinelim. Yemek Kitabı uygulamamız içerisinde ki DetailPage.xaml.cs sayfasını açıyoruz ve aşağıda ki Public DetailPage() metodunun altına şu kodları yazıyoruz.

        privatevoid RegisterForShare()
        {
            DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();

            dataTransferManager.DataRequested += newTypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.ShareTextHandler);
        }
        privatevoid ShareTextHandler(DataTransferManager sender,DataRequestedEventArgs e)
        {
            DataRequest request = e.Request;
            request.Data.Properties.Title = selectedImage.Title;
            request.Data.Properties.Description = selectedImage.Description;
            request.Data.SetText(selectedImage.Title);
        }

 

Daha sonra bunun uygulama açıldığında çalışabilmesi için public DetailPage() metodunun içerisine this’lerin altına yapıştıralım.

 

RegisterForShare();

 

 Yukarıda ki kodda görüldüğü üzere dataTransferManager adında bir parametre oluşturuyoruz ve içerisine data request olarak ShareTextHandler’I veriyoruz çünkü bir altta tanımladığımız metod seçtiğimiz resmin bilgilerini text olarak gönderme üzerine olacak.

Uygulamamız çalıştığında bir resim seçip paylaşımı açtığımızda seçtiğimiz resmin Title’ını ve Description’da ki özelliklerini mail üzerinden aktarabilmiş olduğumuzu görürüz.

Aynı şeyi fotoğraf paylaşımı için yapalım. Bu sefer textHandler yerine ImageHandler’I kullanacağız. Yine aynı şekilde title ve description tanımladıktan sonra resimlerimize ulaşmak için StorageFile’I kullanıyorum ve resmin bulunduğu konum uzantısında sorun yaşanacağı için Replace işlemi yapıyorum. Kod şu şekilde olacak.

        privateasyncvoid ShareImageHandler(DataTransferManager sender,
    DataRequestedEventArgs e)
        {
            DataRequest request = e.Request;
            request.Data.Properties.Title = selectedImage.Title;
            request.Data.Properties.Description = selectedImage.Description;
            DataRequestDeferral deferral = request.GetDeferral();
            try
            {
                StorageFile thumbnailFile =
                  awaitPackage.Current.InstalledLocation.GetFileAsync(selectedImage.Url.Replace('/','\\'));
                request.Data.Properties.Thumbnail =
                    RandomAccessStreamReference.CreateFromFile(thumbnailFile);
                StorageFile imageFile =
                   awaitPackage.Current.InstalledLocation.GetFileAsync(selectedImage.Url.Replace('/', '\\'));
               request.Data.SetBitmap(RandomAccessStreamReference.CreateFromFile(imageFile));
            }
            finally
            {
                deferral.Complete();
            }
        } 

Bu işlemi tanımladıktan sonra biraz yukarıda ki RegisterForShare içerisinde ki ShareTextHandler’ı ShareImageHandler ile değiştirmemiz gerekiyor. Çünkü az önceki örnekte sadece text paylaşımı yapmıştık. Bu sefer resim göndereceğimiz için bu şekilde güncelliyoruz.

        privatevoid RegisterForShare()
        {
            DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();

            dataTransferManager.DataRequested += newTypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.ShareImageHandler);
        }

Tüm işlemleri kaydederek uygulamamızı çalıştırıyoruz. Bir yemek resmine tıklıyoruz ve Charm bar’da ki Share sekmesini açıyoruz. Mail’e tıkladığımızda gördüğünüz gibi mailbox’ımıza otomatik olarak resimi göndermeyi başardık.

Settings ( Ayarlar ) Charm Bar’ına Ayar Ekleme

Her Windows 8 uygulamasında olması gereken bir Ayarlar sayfası yada menüsü, Charm Bar üzerinde ki Setting kısmında tutulabilir bir şekilde yapılandırabiliyorsunuz.

Şimdi öncelikle vericeğimiz komutların doğruluğundan emin olmak için MainPage.xaml sayfamıza bir TextBlock tanımlıyoruz. Settings kısmında bir ögeye tıkladığımızda onu ekranın bir yerinde yazdırmasını istiyoruz. Kodu şu şekilde yazalım ve TextBlock’u da aşağıdaki gibi sol üst köşeye koyalım.

 

<TextBlock x:Name="txtNotify" HorizontalAlignment="Left" Margin="88,32,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="27" Width="615" FontSize="24"/>

 

Daha sonra MainPage.xaml.cs tarafına geliyorum ve Settings Bar’ına erişimimizi sağlayacak olan CommandsRequested’I kullanıyoruz. Daha sonra SettingsPane metodunu çağırarak bir General elementi bir de Help oluşturuyoruz. Tıklandığı anda hangi işlemleri yapacağını ya da hangi sayfaya yönlendirilebileceğini siz değiştirebilirsiniz. Bu örnekte az önce tanımladığımız TextBlock içerisine bir text halinde gönderecektir.

        protectedoverridevoid OnNavigatedTo(NavigationEventArgs e)
        {
            SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested;
        }

        protectedoverridevoid OnNavigatedFrom(NavigationEventArgs e)
        {
            base.OnNavigatedFrom(e);
 
            SettingsPane.GetForCurrentView().CommandsRequested -= onCommandsRequested;
        }
        void onCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs e)
        {
            SettingsCommand generalCommand = newSettingsCommand("general", "General",
                (handler) =>
                {
                    txtNotify.Text="You selected the 'General' SettingsComand";
                });
            e.Request.ApplicationCommands.Add(generalCommand);
 
            SettingsCommand helpCommand = newSettingsCommand("help", "Help",
                (handler) =>
                {
                    txtNotify.Text = "You selected the 'Help' SettingsComand";
                });
            e.Request.ApplicationCommands.Add(helpCommand);
        }

 

Resimde gördüğünüz gibi az önce yarattığım General objesine tıkladığımda TextBlock içerisine yarattığıma dair gerekli yazıyı yazdırdım. Siz uygulama fikrinize göre bu alanda Login ekranına yönlendirme, Üye olma ya da bir uygulama ayarı kaydetme gibi özellikler tanımlayıp kullanabilirsiniz.

Add a Settings Flyout

Ayarlar sayfamızı Flyout ile görüntüleyerek içerisine Search yaptığımız alanı temizleyen bir Clear Search metodu tanımlayabiliriz. Bunun için, projemize sağ tıklayıp add -> new item diyoruz ve listeden Settings Flyout’u buluyoruz.

Daha sonra içerisinde ki Xaml kodunu şu şekilde değiştiriyoruz. Başlığı düzenliyoruz ve içerisine bir buton yerleştiriyoruz.

<SettingsFlyout
    x:Class="YemekKitabı.SettingsFlyout1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YemekKitabı"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="Clear History"
    d:DesignWidth="346">
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Clear Search History" />
        </StackPanel>
        <Button Content="Clear History" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="Button_Click"/>
    </StackPanel>
</SettingsFlyout>

Daha sonra Clear butonumuzun içeriğini tanımlıyoruz. Basıldığı anda Search alanında ki eski aramalarımızı silmesini istiyoruz.

        privatevoid Button_Click(object sender, RoutedEventArgs e)
        {
            var searchManager = new Windows.ApplicationModel.Search.Core.SearchSuggestionManager();
            searchManager.ClearHistory(); 
        }

Flyout’umuz hazır durumda. Sadece yapmamız gereken bunu uygulamamız içerisinden çağırmak olacak.

voidOnCommandRequested metodu içerisinde en alt kısma aşağıdaki kodu yazarak metodumuzu çağırabiliriz.

SettingsCommand clearCommand = newSettingsCommand("clear", "Clear History",
                (handler) =>
                {
                    SettingsFlyout1 sf = newSettingsFlyout1();
                    sf.Show();
                }
                );
            e.Request.ApplicationCommands.Add(clearCommand);

Örnek çıktıyı görelim. Clear History butonuna bastığımızda daha önceki History’miz de bulunan bilgilerin silindiğini görürüz.

Teşekkürler…