AHMET YESEVİ ÜNİVERSİTESİ 2013-2014 BİLGİSAYAR MÜHENDİSLİĞİ BÖLÜMÜ YÜKSEK LİSANS BİLİŞİM SİSTEMLERİ SEMİNERİ Windows 8 Mağaza Uygulamaları TBİL-653-01 HAZIRLAYAN : MEHMET AKİF SÖNMEZ ÖĞRENCİ NO : 122173032 DERS SORUMLUSU : Doç.Dr. Serçin KARATAŞ ARALIK 2013 i
ÖZET Bilgisayar Teknolojilerinin günlük hayatımızdaki yeri ve önemi, tartışılamayacak kadar büyüktür. Bu teknolojiler arasında da en büyük dilimi Bilgisayar ve bilgisayarları yönetmemizi sağlayan İşletim Sistemleri almaktadır. İşletim sistemleri bilgisayarı daha kolay kullanmamızı sağlarlar. Bu çalışmada günümüzde popüler olarak kullanılan işletim sistemlerinden Microsoft Windows 8 İşletim Sistemi, Windows 8 Metro Ara yüz Kullanımı (Windows Mağaza Uygulamaları), C# dili kullanılarak Windows Store App (Windows Mağaza Uygulamaları) nasıl yazılır ve Windows Mağazaya nasıl aktarılır konularına yer verilmiştir. Anahtar Sözcükler: Windows 8, C# Windows Store apps, Windows Metro Style, Windows Mağaza uygulamaları, XAML, Silverlight i
İçindekiler ÖZET... i İçindekiler... ii Şekiller... iv 1. Bölüm 1: Giriş... 1 1.1. Windows un Tarihçesi... 3 1.2. Windows 8... 4 1.3. Metro Stil Uygulama ( Yeni Adıyla Windows Store Application Windows Mağaza Uygulamaları)... 4 1.3.1. Charm Bar... 4 1.3.2. AppBar... 5 2. Bölüm 2: Visual Studio ile Store (Mağaza) uygulama Geliştirmek... 6 2.1. Gerekli Programların Kurulumu... 6 2.2. Windows 8 Store (Mağaza) Merhaba Windows 8 Uygulaması... 7 3. Bölüm 3: Uygulama ara yüzünü oluşturmak... 11 3.1. Doğru Ara yüzü Seçmek... 11 3.1.1. Uygulama Penceresi (Canvas)... 11 3.1.2. App Bar... 11 3.1.3. Charm... 12 3.1.4. Context... 12 3.1.5. Message Dialogs... 13 3.1.6. Flyouts... 13 3.1.7. Toast... 14 3.2. Uygulama Ara yüzünü Oluşturmak... 14 3.2.1. Yerleşim Düzeni Nedir... 14 3.2.2. Absolute Yerleşim Düzeni... 15 3.2.3. Dinamik yerleşim Düzeni... 15 3.2.4. StackPanel... 15 3.2.5. Grid... 16 3.3. Kontrol Eklemek ve Olayları Yönetmek... 17 3.3.1. Kontrol Eklemek... 17 3.3.2. Kontrole isim Vermek... 17 3.3.3. Kontrolün Özelliklerini Belirlemek... 17 3.3.4. Olay Oluşturmak ve Olay Yakalayıcı Metodu Yazmak... 18 3.4. Metin Girişi ve Güncelleme Kontrolleri... 19 ii
3.4.1. TextBox... 19 3.4.2. PasswordBox... 20 3.4.3. Dokunmatik Klavyeyi Kullanmak... 21 4. Bölüm 4: Windows 8 Metro Stil uygulamalarda görsel öğeler... 22 4.1. Multimedia ve Kullanıcı Etkileşimi... 22 4.1.1. Ses ve Video Oynatmak... 22 4.1.2. Medya Oynamayı Kontrol Etmek... 23 4.1.3. MediaElement Kullanarak Lokal Medya Dosyalarını Oynatmak... 24 4.2. WebCam Aracılığla Video Ön İzlemesi Yapmak... 25 4.2.1. Webcam Aracılığıyla Video Önizlemesi Yapmak... 25 4.3. App Bar Eklemek... 26 4.3.1. Programatik Olarak App Bar Açmak... 28 4.3.2. App Bar ı Sabitleştirmek... 29 4.4. Varsayılan Döşeme Oluşturmak... 30 Bir Döşemeyi Güncellemek... 31 4.5. Açılış Ekranı Eklemek... 32 Açılış Ekranı (Splash Screen) Eklemek... 32 5. Bölüm 5: Uygulama Kabiliyetlerini Belirleme ve Sensörler... 34 5.1. Sensörler... 34 Sensors and Metro style apps... 34 Sensör Grupları... 34 Sensörler için geliştirici desteği (Developer support for sensors)... 35 5.2. Windows.Media API'leri... 36 6. Bölüm 6: Windows Uygulamasının Mağazaya Aktarılması... 38 Kaynakça... 41 iii
Şekiller Şekil 1 - Charm Menüsü (Mehmet Akif SÖNMEZ)... 5 Şekil 2 - AppBar Menüsü(Mehmet Akif SÖNMEZ)... 5 Şekil 3 - İlk Projemiz (Mehmet Akif SÖNMEZ)... 7 Şekil 4 - Proje Kod Ekranı (Mehmet Akif SÖNMEZ)... 8 Şekil 5 - Projenin C# Kod Ekranı (Mehmet Akif SÖNMEZ)... 9 Şekil 6 - Projenin çalışır hali (Mehmet Akif SÖNMEZ)... 10 Şekil 7- Canvas gösterimi (Microsoft, 2012)... 11 Şekil 8 - AppBar Gösterimi (Microsoft, 2013)... 12 Şekil 9- Charms görüntüsü (Microsoft, 2013)... 12 Şekil 10 - Context menüleri gösterimi (Microsoft, 2013)... 13 Şekil 11 - Mesaj diyalog görüntüsü (Microsoft, 2013)... 13 Şekil 12 - Flyouts görüntüsü (Microsoft, 2013)... 14 Şekil 13 - AppBar görüntüsü (Microsoft Açık Akademi, 2013)... 27 Şekil 14 - Örnek bir Notification ( Döşeme) Ekranı (Microsoft, 2013)... 32 Şekil 15 - Windows 8 Mağaza Uygulaması Standart SplashScreen (Açılış Ekranı) Görüntüsü... 33 Şekil 16- Sensör Grupları (Microsoft, 2012)... 35 Şekil 17-3 Boyutlu hareket görüntüsü (Microsoft, 2012)... 35 Şekil 18 Windows 8 de kullanılan sensörler (Microsoft, 2012)... 36 Şekil 19 - Media elementleri (Microsoft, 2012)... 37 Şekil 20 - Package.apppxmanifest arayüz ekranı (Mehmet Akif SÖNMEZ)... 38 Şekil 21- Mağazaya uygulamayı yükleme aşamaları (Mehmet Akif SÖNMEZ)... 39 Şekil 22 - Dashboard (Uygulama rapor ekranı) ( Mehmet Akif SÖNMEZ)... 40 iv
1. Bölüm 1: Giriş Microsoft artık gözünü masaüstü ve dizüstü bilgisayarı pazarı yanında tablet ve diğer mobil cihazlara dikmiş durumdadır. Bunun temel nedeni ise giderek büyüyen bir pazar olmasıdır. Gartner raporlarına göre tablet pazarı 2012 yılında bir önceki yıla oranla yaklaşık %98 büyüyerek 119 milyona ulaşacak ve bu rakamlarla masaüstü ve laptoplara kafa tutar olacaktır. Böylesi bir öngörü sonrasında büyük oyuncuların da bu pazara göz dikmesi kaçınılmazdır. Bu pazardaki rakiplerine kıyasla biraz daha geç sahaya çıkan bir oyuncu olarak Windows un da doğaldır ki bir farkındalık yaratması gereklidir. Tabletlerle birlikte giderek değişen insan-bilgisayar etkileşiminde bir farklılık, ileri dönük bir hamle gerekliydi. İşte bu noktada Metro stilinin temelleri atılmaya başlanmıştır. Windows 8 ile birlikte Microsoft artık sadece masaüstü ve dizüstü bilgisayarlarda olmadığını bizlere güçlü bir şekilde göstermiştir. Bunların yanında artık tabletlerde de Windows u görüyoruz. Hatta Windows Phone Summit te de açıklandığı gibi Windows Phone 8 inde Windows 8 ile aynı çekirdeği paylaşacağını düşünecek olursak Windows un ulaşacağı noktaları hayal bile edemeyiz. Böylesi önemli değişiklikler doğaldır ki beraberinde biz yazılım geliştiricilerin alışkanlıklarını da etkileyecektir. En basitinden geliştirdiğimiz uygulamaların daha kullanıcı dostu, daha dokunmatik özelliklere sahip ve tabi ki daha sade ve hedefine uygun olması gerekir. Bunun içindir ki Microsoft karşımıza Metro konseptini çıkarmıştır. Sade, hedef odaklı, kullanıcı dostu (Microsoft, 2013). Şimdiye kadar x86 ve x64 mimari üzerinde çalışan bir işletim sistemi olan Windows un masaüstü ve dizüstü bilgisayardan sonra tabletlerde ve hatta akıllı telefonlarda yerini alabilmesi için öncelikle buralarda lider olan işlemcileri/komut setlerini desteklemesi gerekliydi. İncelediğimizde de kaçınılmaz olarak ARM tabanlı işlemcilerin desteklenmesi gerekliydi. Öncelikle işletim sistemi sadece x86 ve x64 tabanlı sistemleri desteklemekte, ARM desteği de sunmalıydı. Bu, Microsoft un kendi içerisinde çözemeyeceği kadar büyük bir problem değildi. Öte yandan mevcuttaki tüm uygulamalar x86 ya da x64 mimarilerine sahip işlemcilerde çalışmaktadır. Uygulamaların bilgisayar donanımı ile etkileşimi en nihayetinde işletim sisteminin sunduğu API ler üzerinden gitmekte ve mevcut Windows işletim sistemi API leri ARM tabanlı işlemcileri desteklemiyordu. Bu durumda kaçınılmaz olarak yeni API ler yazılmalı ki uygulama geliştiriciler bu mimari üzerinde de rahatlıkla uygulama geliştirebilirler. Böylesi bir yükün altına giriliyorsa işletim sisteminin mevcut destekleri yanında sadece ARM işlemcileri desteklemesi pek de akıl kârı bir durum değil; çünkü bugün ARM tabanlı işlemciler 1
popüler iken yarın belki de henüz adını bile bilmediğimiz bir x işlemcinin yıldızı parlayacak. Bu durumda yeni API platform bağımsız tasarlanmalıydı. Eskilerden de biraz ders alındıysa kesinlikle artık modern programlamanın olmazsa olması nesne tabanlı mimari de tasarlanmış bir API olmalıydı. Sınırlı ekran çözünürlüğü ve dokunmatik özellikleriyle tabletlerde kullanıcılar için önemli olan güzel bir çerçeve ve süslü butonları olan uygulamalar değil içerik, bilginin ön planda olması, kolay ve minimum çaba ile ulaşılabilir olması gerekiyor. Pazara domine edecek olan sistemler ve uygulamalar işte bunları yakalamayı başarabilenler olacaktır. Günümüze 3 yaşındaki bir çocuğun elinde bile tablet görmeye başladığımızı düşünecek olursak, öyle bir kavram gerekliydi ki 7 den 70 e hitap ederek herkes tarafından rahatlıkla ve yabancılık hissedilmeden kullanabilmeliydi. Mimari bağımsız ve nesnel tabanlı, modern bir API Windows 8 ile birlikte biz yazılım geliştiricilere sunulmalıydı. İşte Microsoft ta aynı şeyi düşünmüş olacak ki Windows 8 ile birlikte sunduğu bu yeni API yi, Windows Runtime ı ya da diğer adı ile WinRT yi. net framework ten esinlenerek; ama. net framework ü geliştirirken ki eksiklerinden de ders alarak geliştirdi (Nathan, 2013). Tablet cihazların en önemli sorunlarının batarya ömrü, sınırlı disk alanı ve hafıza olduğunu göz önüne alırsak, ARM tabanlı sistemler çalışacak olan Windows 8 RT sürümünde sadece Metro stilinde uygulama geliştirilebileceğini ve API olarak da bizlere WinRT sunuldu. Masaüstü ve dizüstü bilgisayarı kullanıcısından farklı olarak dokunmatik ekranlarla ve klavye/fare olmaksızın kullanıma alışkın olan tablet kullanıcıları için Windows 8 in ortak, dokunmatik için optimize edilmiş ve akıcı bir kullanıcı deneyimi sunabilmek adına bizlere yeni seçenekler sunduğunu da bilmelisiniz. Windows 8 ile birlikte sistem genelinde arama, paylaşım, yapılandırma ve temel hareketlere olanak sunan Charm Bar sayesinde tüm uygulamalar ortam bir kullanıcı deneyimi sunarak saydığım bu genel kullanıcı etkileşimleri için ortak bir arayüz sunabilecekler. 2
1.1. Windows un Tarihçesi Microsoft Windows, kullanıcıya grafik arabirimler ve görsel iletilerle yaklaşarak, yazılımları çalıştırmak, komut vermek gibi klavyeden yazma zorunluluğunu ortadan kaldıran, Microsoft şirketinin geliştirdiği dünyada en çok kullanılan bir işletim sistemi ailesidir. İlk Windows 1981 yılında satışa sunulmuştur. 1983 Windows'un beta sürümü çıktı ve Windows adı ilk kez kullanıldı. 1985 İlk Windows satışa sunuldu. 1991 Windows 3,1 tabanlı bir işletim sistemi olup taşınabilir aygıtlar için tasarlanmış ilk Windows olan; fakat 2002'de yerini Windows for Tablet PC'ye bırakan "Windows for Pen Computing" serisinin satışına başlandı. 1991 Windows 3,0 ün multimedya destekli sürümü çıktı. 1993 Windows 3.1x tabanlı olan Windows NT'nin ilk sürümü olan Windows NT 3.1 sürüldü. 1994 Çince konuşan ülkelere özel Windows sürümü Windows 3.2, Çin Halk Cumhuriyeti ve Tayvan gibi Çince konuşan ülkelerde raflardaki yerini aldı. 1995 Windows 95 piyasaya sürüldü. Başlat menüsü, Internet Explorer ve görev çubuğu ilk olarak bu sürümde sunulmuştu. 1998 taşınabilir aygıtlar için geliştirilmiş Windows'lar olan Windows CE satışa sunuldu. 1998 Windows 98 satışa sunuldu. 2000 İlk iş interneti olan işletim sistemi Windows 2000 satışa sunuldu. 2000 Windows 9x ailesinin son üyesi olup ilk internet oyunu, sistem geri alma gibi yazılımlar bulunan; fakat yeterince başarı elde edemeyen işletim sistemi Windows ME satışa sunuldu. 2001 Çoğu yeni özelliğin eklendiği günümüzdeki Windowsların öncüsü olan Windows XP satışa sunuldu. 2001 Windows 9x dönemi biterek iş ve ev sürümlerinin ikisi de NT tabanlı olmaya başladı. 2002 Windows for Tablet PC sürüldü. 2003 24 Nisan'da Windows Server 2003 satışa sunuldu. 2004 Windows'un ilk 64-bitlik versiyonu sayılabilecek Windows XP x64 Edition sürüldü. 2006 Windows Vista'nın beta sürümü satışa sunuldu. 2007 İlk DVD kayıt, RSS ve Phishing süzgeçi gibi özellikleriyle tanınan Windows Vista satışa sunuldu. 2007 İlk ev sunucusu olan işletim sistemi Windows Home Server satışa sunuldu. 2008 27 Şubat'ta Windows Server 2008 satışa çıktı. 3
2009 Windows 7 işletim sistemi piyasaya sürüldü. 2011 Windows 8'in RTM sürümü 1 Temmuz 2011'de çıkması beklendi; ama çıkmadı. 2011 Windows 8'in deneme sürümü (RTM) 15 Temmuz 2011'de kullanıma sunulmuştur. 2012 Windows 8'in 2012 ilkbaharında release preview versiyonu duyuruldu. 2012 4 Eylül'de Windows Server 2012 satışa sunuldu. 2012 25 Ekim'de Windows 8 lansmanı yapıldı ve resmi olarak satışa sunuldu. 2012 1 Kasım'da Windows 8'in Türkiye lansmanı yapıldı. 1.2. Windows 8 Windows 8; Microsoft firmasının kişisel bilgisayar kullanımı için Windows 7'nin halefi olarak ürettiği yeni nesil işletim sistemidir.26 Ekim 2012'de piyasaya çıkmıştır. Windows 8'de e-postalar sosyal hesaplar vb. eşitlenebilmekte ve o kullanıcı hesabıyla oturum açılmaktadır. Windows 95'ten beri var olan "Başlat" menüsü kaldırılıp yerine "Başlangıç" menüsü koyulmuştur. Bazı kullanıcılar bunu yadırgamışlardır. Metro ara yüz adında yeni bir görsel ara yüz ile gelen bu işletim sistemi, eski uygulamalarla uyumluluk adına desktop kullanımına da imkân vermektedir. Windows 8 bilgisayardaki donanım sürücülerini otomatik tanımaktadır. Resimli parola özelliği ve yüz tanıma özelliği ile oturum açılabilmektedir. Windows Mağaza özelliği eklenmiştir bu özellikte kullanıcılar buradan hemen istedikleri programları indirebileceklerdir. SkyDrive bulut özelliği vardır. Windows 8'de çekirdek çökmesini belirtmek için eski sürümlerden farklı olarak artık üzgün surat ve BSOD ekranı vardır. Windows 8, büyük diskleri (TB) daha iyi kullanacaktır. Windows 8'de enterge olarak Micorosft Security Essentials vardır. Windows 8 'de ismi değişip Windows Defender olmuştur. Windows 8'deki Windows Gezgini (Explorer) Ribbon ara yüzü vardır (Microsoft, 2012). 1.3. Metro Stil Uygulama ( Yeni Adıyla Windows Store Application Windows Mağaza Uygulamaları) Windows un yeni nesil ara yüzü üzerinde çalışan uygulamalar Metro Stil Uygulamalar olarak adlandırılıyor. Bu ara yüz bizleri Charm ve Appbar gibi yeni birimler ile tanıştırır. 1.3.1. Charm Bar Metro uygulamalarda kullanılan ve sabit butonlar barındıran bir menüdür. Ekranın sağ bölümünde yer alır. İçerisinde ara, paylaş, başlat, cihaz, ayarlar butonları bulunur. Bu butonlar her uygulamaya özel olarak çalışabilecek temel fonksiyonlardır (BURNS, 2012). 4
Şekil 1 - Charm Menüsü (Mehmet Akif SÖNMEZ) 1.3.2. AppBar Uygulamanın komut ara yüzü ya da uygulamaya özel işlevsel bir menü diyebiliriz. AppBar kullanılarak kullanıcı pencereler arasında yönlendirilebilir veya uygulamanın çeşitli işlevsellikleri burada sunulabilir (BURNS, 2012). Şekil 2 - AppBar Menüsü(Mehmet Akif SÖNMEZ) 5
2. Bölüm 2: Visual Studio ile Store (Mağaza) uygulama Geliştirmek 2.1. Gerekli Programların Kurulumu Windows 8 Mağaza uygulama geliştirmek için Visual Studio 2012 programına ihtiyaç vardır. Visual Studio yu indirmek ve kurmak için Visual Studio 2012 Express sürümünü ISO formatında indirmek için http://www.microsoft.com/visualstudio/11/en-us/downloads#express-win8 adresine girilir. Burada, ISO formatıyla ve vs2012_winexp_enu.iso ismiyle bilgisayara yüklenmeye başlayacaktır. Visual Studio'ya ait ISO dosyasını indirdiğimiz klasörü açıyoruz. ISO dosyasına çift tıklayarak, içeriğini görüntülüyoruz ve win8express_full isimli dosyayı çift tıklayarak, kurulum dosyasını açıyoruz. Lisans için gerekli kutucuğu işaretleyip, INSTALL butonuna tıklayarak kurulumu başlatıyoruz. Kurulum tamamlandığında LAUNCH üzerine tıklayarak, Visual Studio'yu başlatabiliriz. ( Likness, 2012). 6
2.2. Windows 8 Store (Mağaza) Merhaba Windows 8 Uygulaması Visual Studio 2012 Programı açalır. Geliştirme ortamı açıldığında File Menüsünün altında yer alan New > Project seçenekleri ile yeni bir proje oluşturmak için proje şablonunu seçilir. Açılan ekranda, sol taraftan Windows Store şablon grubu seçilir, sağ taraftaki Blank App (XAML) seçeneği tıklanır ve projeye Merhaba Windows 8 ismi verilir. OK butonu ile proje oluşturulur (Microsoft Açık Akademi, 2013). Şekil 3 - İlk Projemiz (Mehmet Akif SÖNMEZ) İlk projeyi oluşturulurken, ekranda görebileceğin Devoloper License penceresi ile karşılaşılır. Bu işlemin ardından, lisansın aktifleştirebilmesi için Microsoft Account un ile giriş yapılmalıdır. Microsoft Account olarak Hotmail, Windows live ya da MSN hesabını kullanabilir (Microsoft Blog, 2012). 7
Şekil 4 - Proje Kod Ekranı (Mehmet Akif SÖNMEZ) Lisans ve giriş işlemlerinin ardından ilk proje oluşturulacak ve Resim 4 deki görüntü elde edilecektir.visual Studio, varsayılan olarak App.xaml.cs dosyasını açılır, fakat uygulamanın başlangıç ekranını tasarlamak için açılması gereken dosya MainPage.xaml dosyasıdır. Visual Studio içerisinde sağ tarafta yer alan Solution Explorer penceresinden MainPage.xaml dosyasına çift tıklanır ve uygulamanın giriş sayfasının arayüzünü tasarlanacağı ekran açılır.toolbox penceresininden tasarım ekranına bir Button sürükleyip eklenir. Bunu yerine XAML ekranı kod yazarakta Button oluşturulabilir. XAML da yazan button kodunu ; <Button Content="DOKUN" FontSize="24" HorizontalAlignment="Left" Margin="613,361,0,0" VerticalAlignment="Top" Width="150"/> ile değiştirelim ve Button üzerindeki yazıyı DOKUN olarak değiştirmiş oluruz. Bunun için öncelikle XAML koduna Click olayı (event) eklenir. Click ifadesini eklediğimiz anda <New Event Handler> üzerine tıklayarak, çağrılacak metot adının otomatik bir şekilde oluşturulur. Buton kodu; <Button Content="DOKUN" FontSize="24" HorizontalAlignment="Left" Margin="613,361,0,0" VerticalAlignment="Top" Width="150" Click = "Button_Click" /> Şeklinde olacaktır. Butona tıkladığımızda Button_Click isimli metot çağrılacaktır. Şimdi XAML ekranında farenin sağ tuşunu kullanarak ve açılan menüden View code seçeneğini seçilir. Bu 8
işlemi F7 tuşu kullanarak da yapılabilir. Artık Butona kod yazılabilir. Butona tıklandığında ekranda bir mesaj görüntüleyelim. Bu işlem için aşağıdaki kodu kullanalım; private void Button_Click_1(object sender, RoutedEventArgs e) { MessageDialog md = new MessageDialog("Merhaba Windows 8", "Mesaj"); md.showasync(); } Programımızda MessageDialog nesnesini kullanabilmek için Windows.UI.Popups isim alanını kod sayfasının üst kısmına eklememiz gereklidir. Bunun için kod satırına; using Windows.UI.Popups; Ekleyelim. Kodlarımızı hazırladıktan sonra uygulamayı test etmek için çalıştırmamız gerekir. Bu amaçla Local Machine Butonuna veya klavyeden F5 tuşuna basmalıyız. Böylece programı kendi bilgisayarımızda (Windows 8 yüklü) test etmiş oluruz. Buna alternatif olarak ilgili menüden Simulatör veya Remote Machine seçilerek de testimizi yapabiliriz. Şekil 5 - Projenin C# Kod Ekranı (Mehmet Akif SÖNMEZ) Uygulama ilk açıldığında Splash Screen (Açılış Ekranı) görüntülenecek ve bir süre sonra uygulama başlayacaktır. Üzerinde DOKUN yazan buton nesnesine dokunulduğunda Şekil 6 daki ekran görüntülenecektir. 9
Şekil 6 - Projenin çalışır hali (Mehmet Akif SÖNMEZ) 10
3. Bölüm 3: Uygulama ara yüzünü oluşturmak 3.1. Doğru Ara yüzü Seçmek Metro stil uygulamalar içinde kullanabileceğimiz app window, pop-up, diyaloglar, barlar gibi birçok yüzey vardır. Doğru zamanda doğru yüzeyi seçmek, uygulamanın kolay kullanılabilir olması ile kullanışsız olması arasındaki farkı belirlemek için önemlidir (Lecrenski, Holland, Sanders, & Ashley, 2012). 3.1.1. Uygulama Penceresi (Canvas) Uygulama penceresi (app window) hazırlayacağımız ara yüzün temelidir, bazen canvas olarak çağrılır. Canvas, bütün içerik ve kontrollerini barındırır. Mümkün olduğunda ara yüz elementlerini bu yüzeyle bütünleşmiş etmek gerekir. Örneğin; bir hatayı göstermek için pop-up kullanmak yerine mesajı düzgünce gösterebilir ve gizleyebilirsin ya da kendi hazırladığın bir animasyon ile kaydırarak ekrana getirebiliriz. Ara yüzü düzgün sunmak, kullanıcıların uygulama deneyimini maksimize eder ve kullanıcıyı uygulama içinde tutmamızı sağlar. Şekil 7- Canvas gösterimi (Microsoft, 2012) 3.1.2. App Bar Uygulama penceresi dışında uygulamanın birincil komut Ara yüzü app bar olacaktır. Bununla kullanıcılara pencereler arasında yönlendirme gerçekleştirebilir, iş yaptırabilir ve çeşitli araçlar sunabiliriz. App bar, varsayılan olarak gizlidir. Kullanıcı ekranın aşağıda bittiği yerden yukarıya doğru birkaç santimetrelik bir kaydırma hareketi yaparak app bar ı ortaya çıkarabilir. Bu bar ın içeriğini istediğimiz gibi kodlayabiliriz. Tekrar gizlemek için aynı hareketi yapabilir veya uygulama penceresinin herhangi bir yerine dokunabiliriz (Microsoft Açık Akademi, 2013). 11
Şekil 8 - AppBar Gösterimi (Microsoft, 2013) 3.1.3. Charm Charm, her uygulamada kullanılabilen belirli butonlardan oluşan bir menüdür. Bu menü içinde arama, paylaşma, bağlanma, ayarlar ve başlat butonları bulunmaktadır. Bunlar her kullanıcının, o an hangi uygulamanın içinde olursa olsun yapmak istediği temel senaryolardır. Ayrıca bu butonları, uygulamana özel olarak kodlayabiliriz (Microsoft Açık Akademi, 2013). Şekil 9- Charms görüntüsü (Microsoft, 2013) 3.1.4. Context Menüler Context menü (bazen popup menü olarak da adlandırılır), uygulama içinde bir ara yüz elementi ya da bir metin üzerinde kullanıcının alabileceği aksiyonları gösterir. Hazırladığın her menüde en fazla 5 komut kullanabilirsin. Bu limit, context menünün düzenli ve kolay kullanılabilir olmasını; ayrıca sadece menüyü çıkardığın metin ya da nesne ile alakalı kalmasını sağlar. 12
Şekil 10 - Context menüleri gösterimi (Microsoft, 2013) Context menüleri uygulamanın birincil komut ara yüzü olarak kullanlmamalıdır. Bunun için app bar dan faydalanmalıdır (Microsoft Açık Akademi, 2013). 3.1.5. Message Dialogs Mesaj diyalogları, ekstra kullanıcı etkileşimi için gereken diyaloglardır. Uygulama penceresini bulanıklaştırır ve devam etmek için kullanıcıdan bir hareket bekler. Mesaj diyaloglarını sadece kullanıcıyı durdurmak ve ondan cevap almak istediğinde kullanılmalıdır (Microsoft Açık Akademi, 2013). Şekil 11 - Mesaj diyalog görüntüsü (Microsoft, 2013) 3.1.6. Flyouts Flyouts, kullanıcı tarafından görmezden gelinebilecek o an yaptığı hareketle ilgili olarak kısa süreli bir ara yüz elementi gösterir. Örneğin bir aksiyon için kullanıcıdan onay almak, app bar içinde yer alan bir butona tıkladığında açılır bir menü göstermek ya da bir öğe hakkında daha detaylı bir açıklama göstermek için flyouts kullanılabilir. Bu, mesaj diyaloglarından farklıdır. Flyouts, sadece kullanıcı bir dokunma ya da tıklama yaptığında ortaya çıkabilir ve kullanıcı başka bir yere dokunduğunda onu görmezden gelmek ve oradaki iş mantığını çalıştırmak gerekir (Microsoft Açık Akademi, 2013). 13
Şekil 12 - Flyouts görüntüsü (Microsoft, 2013) 3.1.7. Toast Toast, uygulaman arka planda çalışırken kullanıcıya gösterilen bildirimlerdir. Toast, kullanıcının gerçek zamanlı olarak öğrenmek istediği bilgi ile güncelleme geçmek için kullanışlıdır. Arka planda çalışan çevrimiçi mesajlaşma uygulamasının, aktif olarak çalışan hava durumu uygulamasının içinde son gelen mesajı kısa süreli olarak göstermesi, buna bir örnektir. Kullanıcı eğer mesaja dokunmaz ya da tıklamazsa, o an çalıştığı uygulama ile devam eder; eğer toast mesaja tıklarsa uygulamamız aktif olarak açılır (Microsoft Açık Akademi, 2013). 3.2. Uygulama Ara yüzünü Oluşturmak 3.2.1. Yerleşim Düzeni Nedir Yerleşim düzeni, uygulama ara yüzünde nesnelerin boyutları ve pozisyonlarının belirlenmesi sürecidir. Görsel nesneleri pozisyonlandırmak için onları bir Panel kontrolü ya da başka bir kapsayıcı nesne içine koyman gerekir. XAML framework Canvas, StackPanel ve Grid gibi çok sayıda Panel kontrolü sunar. Bunlar diğer nesneleri kapsayıcı görev görürler; aynı zamanda kontrolleri pozisyonlandırma ve düzenlememizi sağlarlar (Microsoft, 2013). XAML yerleşim düzeni sistemi hem absolute hem de dinamik yerleşim düzenini destekler: Absolute yerleşim düzeninde kontroller senin belirlediğin x ve y koordinatlarına pozisyonlanırlar. Bunun için kapsayıcı panel olarak Canvas kullanabiliriz. Dinamik yerleşim düzeninde, farklı ekran çözünürlükleri için arayüz otomatik olarak boyutlandırılır. Bunun için kapsayıcı panel olarak StackPanel ya da Gird kullanabiliriz. 14
3.2.2. Absolute Yerleşim Düzeni Absolute düzende panel içindeki bir elementi, içinde bulunduğu panele göre kesin lokasyonunu belirterek yerleştirilir. Bu şekilde pozisyonlandırma, ekran boyutunu dikkate alınmalıdır. Eğer uygulaman ara yüz elementlerinin kesin olarak pozisyonlanmasını gerektiriyorsa farklı ekran çözünürlükleri için farklı sayfalar tasarlanmalıdır. Ya da alternatif olarak ölçeklendirme kullanılmalıdır (BURNS, 2012). XAML, mutlak pozisyonlandırmayı desteklemek için Canvas kontrolünü sunar. Canvas içinde bir elementi yerleştirmek için kontrolün Canvas.Left ve Canvas.Top özelliklerini değiştirilmelidir. Visual Studio içinde bir kontrolü Canvas içine sürükleyip bıraktığımızda bu özellikler güncellenmektedir. 3.2.3. Dinamik yerleşim Düzeni Dinamik düzende kullanıcı ara yüzü farklı ekran çözünürlüklerinde her zaman düzgün gözükür. Alt elementleri, içinde bulunduğu panele göre nasıl düzenlenmesi ve gerektiğinde nasıl kaydırılması gerektiğine göre düzenlemeliyiz. Örneğin bir paneldeki kontrolleri yatayda kaydırılacak şekilde ayarlayabiliriz. Otomatik ya da oransal boyutlandırma kullanmak için yükseklik ve genişlik özelliklerine özel değerler vermek gerekir (BURNS, 2012). Dinamik düzen içine aşağıdaki önerilerden faydalanabiliriz: Kontrolün Height ve Width özelliklerine Auto değerini atayabilirsin. Grid yerleşim düzeni içinde bu değerleri kullandığında kontrol, kendisini içeren hücreyi doldurur. Kontroller, Grid ve StackPanel için otomatik olarak yeniden boyutlandırma desteklenir. Metin içeren kontroller için Height ve Width özelliklerini kaldır ve MinWidth ve MinHeight özelliklerini değer ata. Bu şekilde metin ifadelerin okunamayacak kadar küçük boyutlara ölçeklendirilmesinin önüne geçilir. Grid yerleşim düzeninde RowDefinition ve ColumnDefinition elementlerine oransal ölçeklendirme değerleri vermek için göreceli Height ve Width değerleri kullanmalıyız. 3.2.4. StackPanel StackPanel, alt elementlerini yatay ya da dikey olarak tek çizgide ayarlayan basit bir yerleşim düzeni panelidir. İçine yerleştirdiğimiz alt elementlerin yönünü belirlemek için Orientation özelliğini kullanırız. Bu özellik varsayılan olarak Orientation.Vertical değerine 15
sahiptir. StackPanel kontrolünü kullanabileceğimiz tipik senaryo, sayfamızda ara yüzün küçük bir alt parçasını düzenleme ihtiyacıdır. (BURNS, 2012). Bu XAML kodu, dikey öğelerden oluşan bir StackPanel kontrolünü nasıl oluşturacağımızı gösterir. <StackPanel Margin="30"> <Rectangle Fill="Yellow" Width="80" Height="80" Margin="8" /> <Rectangle Fill="Green" Width="80" Height="80" Margin="8" /> <Rectangle Fill="Blue" Width="80" Height="80" Margin="8" /> <Rectangle Fill="White" Width="80" Height="80" Margin="8" /> </StackPanel> 3.2.5. Grid Grid kontrolü çok satırlı ve çok sütunlu düzen ile kontrolleri düzenlemeye destek verir. Satır ve sütun tanımlamalarını, Grid kontrolünü tanımlar tanımlamaz RowDefinitions ve ColumnDefinitions özelliklerini kullanarak belirleyebiliriz. Grid.Column ve Grid.Row özelliklerini kullanarak Grid içindeki her bir hücreye ulaşabilir ve buralara nesneleri konumlandırabiliriz. Otomatik ya da yıldız boyutlandırma kullanarak satır ya da kolonların sahip olması gereken aralıklarını dağıtabiliriz. Grid.RowSpan ve Grid.ColumnSpan özelliklerini kullanarak içerikleri farklı sayıda satır ve sütunlara dağıtabiliriz. Örnekteki XAML kodu üç satır ve iki kolonlu bir Grid panelinin nasıl oluşturulduğunu göstermektedir. Birinci ve üçüncü satırların yüksekliği, metin ifade içermek için yeterince genişler. İkinci satırın genişliği ise, geriye kalan yüksekliği doldurur. Kolonların genişliği, panelin genişliğini eşit olarak bölecek şekildedir. <Grid Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> 16
<ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0" /> <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2" /> <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0" /> <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2" /> </Grid> 3.3. Kontrol Eklemek ve Olayları Yönetmek 3.3.1. Kontrol Eklemek Bir metro stil uygulamaya kontrol eklemenin birkaç yolu vardır: Microsoft Visual Studio 2012 RC içinde Toolbox kullanarak, XAML içerisinden, Kod içerisinden. Visual Studio ile uygulamanda kontrolleri eklediğin ve onlarla çalıştığın zaman Toolbox, Design görünümü, XAML görünümü ve Properties penceresi gibi programın özelliklerinden faydalanabiliriz. Visual Studio Toolbox uygulamanda kullanacağın kontrollerin çoğunu listeler. Uygulamana kontrol eklemek için istediğin birine çift tıkladığında, XAML görünümüne ilgili XAML kodu eklenecektir. <TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/> Bunun yanında Design View tarafına da kontrol ekleyebiliriz. 3.3.2. Kontrole isim Vermek Kod tarafında kontrol ile çalışmak için Name özelliğini belirlemeliyiz ve bu şekilde adı ile referans edilir. Name özelliğini Visual Studio Properties penceresinden ya da XAML içinden belirleyebiliriz. Properties penceresini kullanarak seçili kontrolün ismini nasıl değiştireceğini gösteriyor. Burada da XAML ile bir textbox kontrolünün ismi değiştirilir. 3.3.3. Kontrolün Özelliklerini Belirlemek Kontrollerin görünüşü, içeriği ve diğer niteliklerini belirlemek için özelliklerini kullanabiliriz. Kontrol özelliklerine Properties penceresinden, XAML ile ya da kod yazarak değer atayabiliriz. 17
Örneğin TextBox kontrolünün yazı rengini değiştirmek için kontrolün Foreground özelliğini belirleyebiliriz. (Lecrenski, Holland, Sanders, & Ashley, 2012). 3.3.4. Olay Oluşturmak ve Olay Yakalayıcı Metodu Yazmak Her kontrol, kullanıcı aksiyonları ve uygulamadaki bazı değişikliklere cevap verebilmeni sağlamak için çeşitli olaylara sahiptir. Örneğin bir buton kontrolü için, kullanıcı butona tablet ekranda dokunduğunda ya da masaüstü bilgisayarda tıkladığında tetiklenen Click olayına sahiptir. Sen tetiklenen bu olaya cevap verebilmek için bir metot yazılmalıdır. Bu metoda olay yakalayıcı denir. Olay yakalayıcıyı Properties penceresinden ya da XAML içinden oluşturulmalıdır. Aynı zamanda kod içinden yazarak da oluşturmak mümkündür (Novak, Balassy, Arvai, & Fülöp, 2012) Olayı ele alan metodu oluşturmak için önce ilgili kontrolü seçmeli ve ardından Properties penceresinin en üstünden Events tabına geçilmelidir. İlgili pencere, seçtiğimiz kontrol için kullanabileceğimiz bütün olayları listeler. TextBox kontrolü için bu listeyi görebiliriz: Varsayılan isim ile birlikte bir olay yakalayıcı metot oluşturmak için Properties penceresindeki olay isminin yanında TextBox kontrolüne çift tıklaman yeterlidir. Kendi vereceğimiz bir isimle olay yakalayıcı oluşturmak için çift tıklamadan önce istediğimiz metot adını TextBox içine yazabiliriz. Bu adımın ardından kod dosyasında metot oluşturulur ve karşına kod dosyası açılır. MyTB isimli TextBox için oluşturulan TextChanged olayına ait metodu görülür. Kullanıcı TextBox içindeki metini her değiştirdiğinde başka bir kontrol olan MyBlock isimli TextBlock kontrolünün Text özelliğine yazının son hali gösterilir. private void MyTB_TextChanged(object sender, TextChangedEventArgs e) { MyBlock.Text = "You entered text!"; } Bunun yanında XAML kullanarak da olay metodu oluşturabiliriz. XAML görünümünde ilgili kontrolün niteliklerini verirken istediğimiz olayın adını yazmaya başlanır. Editör, IntelliSense sayesinde uygun üyeleri listelemeye başlayacaktır. Listeden olaya karar verdikten sonra intellisense penceresindeyken olay isminin yanında görünen <New Event Handler> yazısına çift tıklanmalıdır. Bu şekilde varsayılan ismi ile birlikte olay metodunu oluşturmuş olunur. İşlem tamamlandıktan sonra oluşan XAML şu şekilde olacaktır: <TextBox Name="MyTB" Text="TextBox" TextChanged="MyTB_TextChanged"/> Aynı zamanda kod tarafında da olay yakalayıcı metodu oluşturabiliriz: 18
MyTB.TextChanged += new TextChangedEventHandler(MyTB_TextChanged); Olay yakalayıcı metot şuna benzer bir görünüme sahip olacaktır: private void MyTB_TextChanged(object sender, TextChangedEventArgs e) { //Yazı değiştiğinde yapılacak iş burada kodlanır } 3.4. Metin Girişi ve Güncelleme Kontrolleri Metin Kontrolü Seçmek Windows 8 için C# kullanarak Metro stil uygulamalar yazarken XAML çatısı iki temel metin giriş kontrolü sunmaktadır: TextBox PasswordBox Bunlardan hangisini kullanacağımız senaryoya göre değişecektir. Bir form içerisinden metin girişi yapmak ya da güncellemek istediğimizde TextBox kontrolü işimizi görecektir. Kullanıcıdan şifre almak istediğinde ise PasswordBox kullanmak gerekir. 3.4.1. TextBox Formatlanmamış metin girişi ve güncellemesi için TextBox kullanabilirsin. Kontroldeki yazıyı elde etmek ve değiştirmek için Text özelliğini kullanabiliriz. Text özelliği belirlenmiş bir TextBox kontrolünün XAML kodu: <TextBox Height="35" Width="200" Text="Hello World!" Margin="20"/> TextBox kontrolünün IsReadOnly özelliğine true değerini atayarak sadece okunabilir yapabiliriz. Çok satırlı TextBox kullandığında, yazıları aşağıya doğru kaydırmak istediği TextWrapping özelliğini Wrap ve AcceptsReturn özelliğini true yapmamız gerekir. TextBox içinde kullanıcının sadece seçtiği yazıyı elde etmek için SelectedText özelliğini kullanabilirsin. Kullanıcı kontrol içinde bir şey seçtiğinde ya da seçimi bıraktığında bir şeyler yapmak istiyorsan SelectionChanged özelliğini kullanabiliriz. TextBox içerisinde bir metin seçtiğinde, yazılar sadece okunabilir olan ikinci TextBox içinde gösteriliyor. SelectionChanged olayında yakalanan seçimin kaçıncı karakterden başladığı ve toplam kaç karakterden oluştuğu bilgileri ise iki ayrı TextBlock kontrolünde gösteriliyor. 19
Örneğin XAML ve C# kodu: XAMLKodu: <TextBox x:name="textbox1" Height="75" Width="300" Margin="10" Text="The text that is selected in this TextBox will show up in the read only TextBox below." TextWrapping="Wrap" AcceptsReturn="True" SelectionChanged="TextBox1_SelectionChanged" /> <TextBox x:name="textbox2" Height="75" Width="300" Margin="5" TextWrapping="Wrap" AcceptsReturn="True" IsReadOnly="True"/> <TextBlock x:name="label1" HorizontalAlignment="Center"/> <TextBlock x:name="label2" HorizontalAlignment="Center"/> C# Kodu: private void TextBox1_SelectionChanged(object sender, RoutedEventArgs e) { textbox2.text = textbox1.selectedtext; label1.text = "Selection length is " + textbox1.selectionlength.tostring(); label2.text = "Selection starts at " + textbox1.selectionstart.tostring(); } 3.4.2. PasswordBox PasswordBox kontrolüne kaydırma ve alt satıra inme seçenekleri olmadan tek satırlık içerik girmeyi sağlar. Kullanıcı girilen metini göremez. Girilen metini sadece şifre karakterleri temsil eder. Kontrolün PasswordChar özelliğini değiştirerek ekranda görünecek şifre karakteri belirlenebilir. Ayrıca MaxLength özelliği ile kullanıcının girebileceği maksimum karakter sayısına karar vermek mümkündür (YÖNDEM, 2013). Kullanıcının girdiği her karakteri kontrol etmek istendiğinde PasswordChanged olayı kullanabilir. PasswordBox kontrolünün varsayılan görüntüsü için XAML kodunu inceleyebiliriz. Kullanıcı şifre girişine başladığında ve devam ettiğinde sürekli tetiklenen PasswordChanged olayını kullanarak kontrole Password kelimesini yazıp yazmadığı kontrol ediliyor. Eğer yazmışsa kullanıcıya bir mesaj gösteriliyor. Burada ve birçok örnekte kullanılan TextBlock kontrolünden mesaj vb. metin ifadeleri kullanıcıya göstermek için faydalanılır. XAML Kodu: <PasswordBox x:name="pwbox" Height="35" Width="200" MaxLength="8 PasswordChanged="pwBox_PasswordChanged"/> 20
<TextBlock x:name="statustext" Margin="10" HorizontalAlignment="Center" /> C# Kodu: private void pwbox_passwordchanged(object sender, RoutedEventArgs e) { if (pwbox.password == "Password") { statustext.text = "'Password' is not allowed as a password."; } } PasswordBox kontrolü, içeriğindeki gizli yazıyı göstermek için kontrolün en sağında yer alan bir butona sahiptir. Buna dokunduğunda ya da tıkladığında şifre metnini görürsün, bıraktığında ise metin tekrar gizlenir. 3.4.3. Dokunmatik Klavyeyi Kullanmak Windows 8 işletim sistemi, uygulamanı dokunmatik ekranlarda kullandığında veri girişi yapman için dokunmatik bir klavyeye sahiptir. Bu klavye kullanıcı TextBox ve PasswordBox gibi güncellenebilir bir veri girişi kontrolüne dokunduğu anda otomatik olarak çağrılır. Kullanıcı veri girişi kontrolü dışında başka bir yere dokunduğunda ise kaybolur (YÖNDEM, 2013). 21
4. Bölüm 4: Windows 8 Metro Stil uygulamalarda görsel öğeler 4.1. Multimedia ve Kullanıcı Etkileşimi 4.1.1. Ses ve Video Oynatmak Metro stil uygulaman içerisinde ses ve video medyaları oynatmak için MediaElement sınıfını kullanılır. MediaElement nesnesi, medya dosyalarını oynatmak için çok sayıda özellik ve metot sunar. Bize kalan ise bu imkânları kullanmak için olay yakalayıcıları oluşturmaktır. Örneğin uygulamamızın içerisinde bir medyayı başlatma yeteneği sunmak istiyorsak, bunun için bir Button nesnesi oluşturur ve butonun Click olay metodunda medyayı başlatmak için MediaElement nesnesinin Play metodunu çağırırız (Novak, Balassy, Arvai, & Fülöp, 2012). Sayfana bir medya eklemek, XAML dosyana MediaElement eklemek ve oynatmak üzere vereceğin ses ya da video dosyasının URI (Uniform Resource Identifier) bilgisini sağlamak kadar kolaydır. Aşağıdaki örnekte, XAML içerisinde MediaElement nesnesini oluşturup Source özelliğine video dosyasının URI bilgisini atanabilir. Sayfa yüklendiğinde MediaElement, videoyu otomatik olarak oynatmaya başlar. Videonun otomatik olarak değil de kullanıcı tarafından başlatılmasını istenirse AutoPlay özelliğine false değeri verilebilir. <StackPanel> <MediaElement x:name="videom" Source="Videolar/final.wmv" Width="400" /> </StackPanel> MediaElement Özellikleri MediaElement sınıfı, medya oynatmaya özel birçok özellik sunar. En çok ihtiyaç duyacakların şunlar olacaktır: AutoPlay: MediaElement in sayfa açıldığında otomatik olarak çalmaya başlayıp başlamayacağını belirler. IsMuted: MediaElement in sessize alınıp alınmayacağını belirler. true değeri, MediaElement in sessize alınmasını sağlar. Bu özelliğin varsayılanı false değeridir. Stretch: Videonun MediaElement nesnesine nasıl yayılacağını belirler. Bu özelliğin alabileceği alternatif değerler şunlardır: o None o Uniform o UniformToFill o Fill Özelliğin varsayılanı Fill değeridir. 22
Volume: MediaElement nesnesinin ses ayarını belirtir. 0 ile 1 arasında değer alabilen bu özelliğin varsayılan değeri 0,5 dir. 4.1.2. Medya Oynamayı Kontrol Etmek MediaElement nesnesinin Play, Pause ve Stop metotlarını kullanarak medya çalma sürecini kontrol edebilirsin. Aşağıdaki örnek bir MediaElement nesnesi tanımlar ve birkaç tane buton ile medyayı kontrol eder (Novak, Balassy, Arvai, & Fülöp, 2012). XAML Kodu: <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <MediaElement x:name="videom" Source="microsoft.wmv" Width="300" Height="300" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" /> <! Medya çalmayı durdurur. --> <Button Click="MedyayiDurdur" Grid.Column="0" Grid.Row="1" Content="Durdur" /> <! Medya çalmayı duraklatır. --> <Button Click="MedyayiDuraklat" Grid.Column="1" Grid.Row="1" Content="Duraklat" /> <! Medya çalmayı başlatır. --> <Button Click="MedyayiBaslat" Grid.Column="2" Grid.Row="1" Content="Başlat" /> </Grid> C# Kodu: private void MedyayiDurdur(object sender, RoutedEventArgs e) { videom.stop(); } private void MedyayiDuraklat(object sender, RoutedEventArgs e) { videom.pause(); } private void MedyayiBaslat(object sender, RoutedEventArgs e) { videom.play(); } 23
4.1.3. MediaElement Kullanarak Lokal Medya Dosyalarını Oynatmak MediaElement kontrolü, internet üzerindeki çevrimiçi içeriğin yanısıra uygulamanın üzerinde çalışmakta olduğu bilgisayardaki ve bağlı bulunduğu ağ üzerindeki medya dosyaları da oynatılabilir. C# kullanarak yazılan metro stil uygulamalar da, MediaElement sınıfını kullanarak ses ve video oynatılabilir. Source özelliği, çalmak istenilen medya dosyasını belirlenmesini sağlar. Bu, ağ üzerindeki bir dosya olabileceği gibi uygulamanın içine dâhil edilmiş ya da çalıştığı cihaz üzerinde bir dosya da olabilir. Ağ üzerindeki ya da uygulamanın içine gömülmüş dosyalar için Source özelliğini atamak yeterli olur. Lokal sistem üzerindeki bir dosyayı açmak için ise, FileOpenPicker sınıfını kullanılmalıdır (BURNS, 2012). 1.adım: Uygulamanın yerel sistemdeki medya kütüphanesine erişebilmesi için, manifest dosyasına bu özelliği eklememiz gerekiyor. 1. Visual Studio içerisindeki Solution Explorer penceresinde yer alan ve uygulamanın manifest dosyası olan package.appxmanifest isimli dosyayı çift tıklayarak aç. 2. Capabilities öğesini seç. 3. İhtiyaca göre Video Library Access ya da Music Library Access kutusunu işaretliyoruz. 2.adım: Bir MediaElement nesnesi oluştur ve bir isim ver. Kontrole isim vermek, kod dosyasından erişmemizi kolaylaştırır. <MediaElement Name="medyaKontrolum" Height="400" /> 3.adım: Kullanıcının cihazındaki video kütüphanesinden medya dosyası seçmesi için FileOpenPicker sınıfı kullanılacaktır. FileOpenPicker sınıfının SuggestedStartLocation ve FileTypeFilter özelliklerini kullanılabilir. Dosya seçici pencereyi açmak ve seçilen dosyayı elde etmek için ise PickSingleFileAsync metodunu kullanabiliriz. C# Kodu: var dosyasecici = new Windows.Storage.Pickers.FileOpenPicker(); dosyasecici.suggestedstartlocation =Windows.Storage.Pickers.PickerLocationId.VideosLibrary; dosyasecici.filetypefilter.add(".mp4"); dosyasecici.filetypefilter.add(".wmv"); var dosya = await dosyasecici.picksinglefileasync(); 4.adım: Videonun kaynağını ata ve medyayı oynat. FileOpenPicker dialog penceresinden dönen StorageFile tipindeki dosya bilgisini, MediaElement kontrolünün kaynağı olarak belirlemek için stream açmaya ihtiyac vardır. StorageFile üzerindeki OpenAsync metodu, 24
MediaElement.SetSource metoduna parametre olarak geçebileceğin stream verisini döndürür. Ardından medyayı oynatmaya başlatmak için MediaElement kontrolünün Play metodunu çağırırız. C# Kodu: var stream = await dosya.openasync(windows.storage.fileaccessmode.read); // medyakontrolum, XAML içinde tanımladığın MediaElement kontrolüdür. medyakontrolum.setsource(stream, file.contenttype); medyakontrolum.play(); 4.2. WebCam Aracılığla Video Ön İzlemesi Yapmak 4.2.1. Webcam Aracılığıyla Video Önizlemesi Yapmak CaptureElement nesnesi ve Windows.Media.Capture isim alanı altındaki tipleri kullanarak webcam ya da kameradan canlı video önizlemesi veya kayıt yapabiliriz (Basu, 2013). 1.adım: Öncelikle VideoOnizleme isminde yeni bir proje oluşturalım ve uygulamanın manifest dosyasında, cihaz yeteneklerinden webcam öğesini seçmiş olmak gerekmektedir. Bu şekilde uygulamayı indiren kullanıcı, henüz yükleme yaparken hangi özellikleri kullanacağını bilir ve cihazının bu kaynağından faydalanacağını kabul eder. Bunun için; 1. Visual Studio da Solution Explorer penceresini açılır. Burada package.appxmanifest dosyasına çift tıklanır, 2. Capabilities grubunu seçilir. 3. Listeden Webcam i işaretlenir. 2.adım: Video oynatmak ve sayfada işlemek için CaptureElement nesnesi oluşturmamız gerekiyor. CaptureElement nesnesini XAML penceresinde oluşturabiliriz. XAML Kodu: <CaptureElement Name="onizleme" Height="400" /> 3.adım: MediaCapture nesnesini oluşturmalıyız. MediaCapture sınıfı, yakalanan videonun yönetilmesi ile ilgili metot ve özellikler içerir. Kameradan video çekmek ve bunun ön izlemesini yapmak için InitializeAsync and StartPreviewAsync metotlarını kullanabiliriz. 25
C# kodu: MediaCapture videoyoneticisi = new MediaCapture(); await videoyoneticisi.initializeasync(); 4.adım: Artık video ön izlemesini başlatabiliriz. Bunun için, CaptureElement nesnesinin Source özelliğine değer atamak ve StartPreviewAsync metodunu kullanarak ön izlemeyi başlatmaktır. // Video ön izlemesini başlat. // ön izleme değişkeni, XAML içinde tanımladığı CaptureElement nesnesidir. C# kodu: onizleme.source = videoyoneticisi; await videoyoneticisi.startpreviewasync(); 5.adım: Video ön izlemesini farklı bir yöne çevirerek izlemek istersek, MediaCapture nesnesinin SetPreviewRotation metoduna VideoRotation numaralandırıcısını parametre olarak geçmen gerekir. Bu numaralandırıcı, videonun ne kadar açıyla döndürüleceğini belirler; alabileceği alternatif değerler aşağıdadır: None, 0, 90, 180, 270, 360 Video ön izlemesini döndürürken için aşağıdaki kod kullanılır: videoyoneticisi.setpreviewrotation(videorotation.clockwise90degrees); Video ön izlemesini kayıt ederken görüntüyü döndürmek için aşağıdaki kod kullanılır: videoyoneticisi.setrecordrotation(videorotation.clockwise90degrees); 4.3. App Bar Eklemek Uygulamanda kullanıcılara navigasyon, çeşitli fonksiyonlara erişim ve araçlar sunmak için app bar kullanılmalıdır. App bar, varsayılan olarak gizlidir. Dokunmatik bir cihazda kullanıcılar ekranın en altından parmağıyla yukarı doğru kaydırarak; dokunmatik olmayan masaüstü ya da notebook makinelerde ise fare ile sağ tıklayarak app bar ın görünmesi sağlanabilir. Burası uygulamanın içeriğini barındırır. App bar ı açtığın şekilde ekranın alt kısmında parmağını tekrar kaydırarak ya da ekranın başka bir yerine dokunarak kapatılabilir. Ayrıca app bar ile programatik olarak da çalışabiliriz; yani kod ile açabilir ya da kapatabiliriz (Microsoft Açık Akademi, 2013). 26
Şekil 13 - AppBar görüntüsü (Microsoft Açık Akademi, 2013) XAML çatısı, ekranın alt kısmında kaydırma yapılarak arayüzde kolayca görünmesini sağlayan AppBar kontrolüne sahiptir. Dilersen ekranın üst kenarında da kullanabileceğin AppBar ile çeşitli sayfalara yönlendirmeler ya da bazı araçlar içeren bir menü şeridi oluşturabiliriz. Uygulamana app bar eklemek için Page nesnesinin TopAppBar ya da BottomAppBar özelliklerine bir AppBar nesnesini atılır. Üstteki app bar ı uygulamanın navigasyonunu yönetmek için kullanılır. Örneğin uygulamanın iç sayfaların anasayfana yönlendirme yapmak için burayı kullanabiliriz. Alt kenardaki app bar ı ise uygulamanın komut ve araçları için kullanılmalıdır. Örneğin listedeki bir öğeyi çıkarmak, listeyi yenilemek gibi komutlar ya da yardım bilgisini göstermek vb. Aşağıdaki örnek, uygulamanda alt kenarda kullanacağımız BottomAppBar ın sağ ve sol tarafında 2 ayrı grup olarak gösterilen butonlar içerir. XAML kodu: <Page.BottomAppBar> <AppBar x:name="bottomappbar" Padding="10,0,10,0"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"> <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar> 27
4.3.1. Programatik Olarak App Bar Açmak Varsayılan olarak app bar lar fare ile sağ tıklanırsa ya da ekranın alt ya da üst kenarından ters yöne doğru kaydırma hareketi ile açılır. Kullanıcı bu seçeneklerden birisini yaptığında, eğer varsa hem üst hem de alt app bar açılır. AppBar elementinin IsOpen özelliğine true değerini atayarak, programatik olarak app bar açabiliriz. Bunu yaptığımız zaman sadece özelliğine atama yaptığımız AppBar açılır (alttaki ya da üstteki). Hem XAML hem de C# ile AppBar ı programatik olarak açabiliriz (Microsoft Açık Akademi, 2013). 1.yol: Sayfa yüklenirken app bar açmak için, XAML içinde ilgili AppBar elementinin IsOpen özelliğine true değer vermek gerekir. XAML kodu: <AppBar IsOpen="True"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource PreviousAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource NextAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> </AppBar> 2.yol: App bar ı programatik olarak açmak için, AppBar elementinin IsOpen özelliğine kod tarafında true değer verilmelidir. Kod içerisinde app bar ı kullanabilmek için öncesinde XAML de bir isim vermiş olmamız gerekir. XAML kodu: <Page.TopAppBar> <AppBar x:name="topappbar"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource SaveAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource UploadAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> </AppBar> </Page.TopAppBar> 28
C# kodu: private void OpenButton_Click(object sender, RoutedEventArgs e) { topappbar.isopen = true; } Programatik olarak app bar açmaya genellikle kullanıcı uygulama içindeki bir öğe ile etkileşim içindeyken ona içerikle ilgili bazı komutlar göstermek için ihtiyaç duyarız. Örneğin kullanıcı uygulama içinde bir yazı seçtiğinde ona metni formatlayabilmesi için gerekli butonları içeren appbar ı gösterebiliriz. İçerikle ilgili komutları gösterdiğin zaman, app bar ın hemen kaybolmaması için modunu değiştirebiliriz. 4.3.2. App Bar ı Sabitleştirmek Varsayılan olarak app bar lar, kullanıcı uygulamanın başka bir yerine dokunduğunda kaybolur. App bar ve içindeki komutları görünür tutmak için IsSticky özelliğine true değer verebilirsin. Bunu yaptığın zaman app bar ı gizlemenin yolu, ekranın alt ya da üst kenarından ters yöne doğru parmağın ile kaydırmak ya da fare ile sağ tıklamaktır (Microsoft Açık Akademi, 2013). 1.yol (XAML) : Kullanıcı uygulama ile etkileşim içindeyken, app bar ın hala görünür olmasını sağlamak için XAML içinde ilgili AppBar elementinin IsSticky özelliğine true değer verelim. <AppBar IsSticky="True"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> </AppBar> 2.yol (Programatik) : Programatik olarak app bar ın görünür kalma modunu değiştirmek için kod tarafında AppBar nesnesinin IsSticky özelliğine true değeri verilir. AppBar elementine kod ile erişebilmek için XAML ile tanımlama yaptığımız yerde bir isim vermeliyiz. XAML Kodu: <Page.BottomAppBar> <AppBar x:name="bottomappbar"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> 29
</AppBar> </Page.BottomAppBar> C# Kodu: private void StickyButton_Click(object sender, RoutedEventArgs e) { bottomappbar.issticky = true; } 4.4. Varsayılan Döşeme Oluşturmak Bu bölümde uygulamanın başlangıç ekranına varsayılan döşeme (default tile) oluşturmak için gerekli adımları göreceksin. Bunu yaparken Windows 8 Manfest Editor aracını kullanacaksın. Burada amaç, yüklü gelen şablonları kullanarak Visual Studio ile yeni bir proje açmak ve manifest paketinde varsayılan döşeme ile döşemenin imajını tanımlamak (Microsoft Açık Akademi, 2013). Hazırlanması Gerekenler Başlangıç ekranı için kullanacağın 150x150 boyutlarında bir imaj dosyası gerekiyor. Aynı imaj dosyasının 30x30 boyutlarında küçük bir versiyonu. Bu boyuttaki imajı, döşeme için değil arama sonuç ekranı için kullanacağız. Döşeme için kullanılmak üzere bu imajın geniş versiyonunu hazırlanmalıdır. Eğer döşeme için bu imajı sağlarsak, döşemeyi geniş versiyonda da güncelleyebiliriz. Ancak bunun tercihi tamamen uygulamanın kullanıcısına aittir. 1.adım: Yeni bir metro stil uygulama açalım. 2.adım: Açılan projede Solution Explorer içinde package.appxmanifest dosyasına çift tıklayalım. Bu Manifest Editor penceresini açacaktır. 3.adım: Manifest Editor içinde Application UI bölmesini seçilir, Burada varsayılan bazı imajlar karşına çıkacaktır. Buradaki imajları, uygulamanın logolarıyla değiştir, Döşemede uygulamanın kısa adını gösterip göstermeyeceğini seç. Bu isim en fazla 13 karakter olabilir. Eğer kısa isim 13 karakterden uzun olursa ilk 13 karakterden sonrası kırpılarak kullanılır. Aynı zamanda logoyu ve ismi de gösterip göstermeyeceğini seçilir, Uygulama ismi metninin, arka plan rengine göre açık renk font mu koyu renk font mu kullanacağını seçilir, Ya varsayılan renkleri kabul eder ve değiştirmezsin ya da kendi renk bilgini belirleyebilirsin. Bu arka plan rengi, uygulamanın diğer açılardan renklenmesi için 30
kullanılacaktır. Örnek olarak diyalog kutularındaki butonun ve mağazadaki açıklama sayfamızın rengi gösterilebilir. Kullanıcı uygulamayı yükledikten sonra döşemedeki alanı güncellemeye başlayabilirsin, her zaman statik imajın orada görünmesine gerek yoktur. Bu şekilde uygulamanın biraz daha ilgi çekici olması sağlanır. Bir Döşemeyi Güncellemek Bu bölümde C# ve XAML kullanarak lokal döşeme bildirimlerini içermekte. Hazırlamamız Gerekenler Döşeme (tile) ve bildirim (notification) konseptleri hakkında bilgi. XML ile çalışmış olmalı, Windows Runtime API kullanarak C# ile basit metro stil uygulama yazabilme yeteneğine sahip olmalı, XAML ile metro stil uygulama için kod tarafınını nasıl oluşturulacağını anlamış olmalı. 1.adım: Gerekli isim alanı tanımlamalarını yap. Döşeme arayüzlerini kullanmak için Windows.UI.Notifications isim alanını eklemeli. using Windows.UI.Notifications; using Windows.Data.Xml.Dom; 2.adım: Döşeme için bir şablon seçilir ve onun xml içeriği alınır. Her ayrı bildirimin farklı bir şablon belirleyebileceği unutulmamalıdır. XmlDocument dosemexml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03; 3.adım: DOM (document object model) metotları aracılığıyla şablon içeriğini verilmelidir. Aşağıdaki örnek kod, tek bir metni 3 satıra kadar kaydırıp gösteren TileWideText03 şablonunu kullanılır. XmlNodeList tiletextattributes = dosemexml.getelementsbytagname("text"); int index = 1; foreach (XmlNode tiletextattr in tiletextattributes) { tiletextattr.innertext = "textfield " + Convert.ToString(index); index++; } 31
Şekil 14 - Örnek bir Notification ( Döşeme) Ekranı (Microsoft, 2013) 4.adım: Belirlediğimiz xml içeriğe uygun bir şekilde bildirimi oluşturalım. TileNotification dosemebildirimi = new TileNotification(dosemeXml); 5.adım: Bildirimin (notification) için bir sona erme süresi belirlemek gerekiyor. bildiriminin ömrü 10 dakika ardından sona erecek ve kaldırılacaktır. Burada dosemebildirimi.expirationtime = DateTimeOffset.UtcNow.AddSeconds(10); 6.adım: Bildirimi uygulama döşemesine gönderelim. TileUpdateManager.CreateTileUpdaterForApplication().Update(dosemeBildirimi) ; 4.5. Açılış Ekranı Eklemek Açılış Ekranı (Splash Screen) Eklemek Bütün metro stil uygulamalar bir açılış ekranına (splash screen) sahip olmalıdır. Bu ekran bir arka plan rengi ve bir açılış imajından oluşur ve her ikisi de özelleştirilebilir (Nathan, 2013). Kullanıcı uygulamayı açar açmaz uygulaman öncelikle açılış ekranını gösterir. Bu sayede sen arka planda uygulamanla ilgili kaynakları hazırlarken, kullanıcının anında uygulamanın içinde olmasını sağlar. Uygulama kullanıcı etkileşimine hazır olur olmaz, açılış ekranı otomatik olarak kapanır. İyi tasarlanmış bir açılış ekranı, uygulamanı daha davetkâr yapar. Windows Store, Şekil 15 deki abartısız açılış ekranı kullanmaktadır: 32
Şekil 15 - Windows 8 Mağaza Uygulaması Standart SplashScreen (Açılış Ekranı) Görüntüsü Bu açılış ekranı mavi arka plan rengi ve şeffaf bir PNG dosyasının birleştirilmesiyle oluşturulmuştur. Ayrıca SplashScreen sınıfını, uygulamanın açılış deneyimini özelleştirmek için de kullanılabilir. Uygulamanın ara yüzünü hazırlamak ya da bazı ağ operasyonlarını tamamlamak için ek süre kazanmak adına faydalanılabilir. Bunun dışında SplashScreen sınıfını, açılış ekranı kapandığı anda haberdar olmak ve ardından giriş animasyonu göstermek vb. aksiyonları alabilmek için kullanılabilir (Microsoft Açık Akademi, 2013). 33
5. Bölüm 5: Uygulama Kabiliyetlerini Belirleme ve Sensörler 5.1. Sensörler Windows 8 hakkında keşfedilmesi gereken ilk şey sistem düzeyindeki çalışmalarında bilgisayar kullanımlarına göre daha çok pil ömrünü koruyor olmasıdır. Sensors and Metro style apps Windows Runtime için özel olarak tasarlanmış olan bir sensör API si bulunuyor. Bu API'ler sayesinde, uygulama geliştiriciler herhangi bir Metro Style uygulamasının donanım üzerindeki sensörlerden faydalanarak zenginleşmesini sağlayabiliyorlar. Sensör API 'leri anlaşılır ve basit bir şekilde tasarlanmış olduğundan dolayı, uygulama geliştiriciler rahat ve kolay bir şekilde bunları kullanabiliyor ve tasarladıkları sanal gerçeklik ve artırılmış gerçeklik konularındaki uygulamalarda da sensörlerden topladıkları verileri kullanabiliyorlar. Ayrıca, tüm oyun geliştiriciler ve Masaüstü uygulama geliştiriciler için de Win32 API üzerinden sensörlere erişim mümkündür. Hatta Windows Runtime üzerinde Javascript kullanarak da uygulama geliştirip, yine javascript ile bu API dan faydalanmak mümkündür. Aşağıda, bununla ilgili basit bir örnek bulabilirsiniz. Bu örnek, ivmeölçerin verilerine çalışma zamanında nasıl erişilebileceğini göstermektedir. C# Kodu: var accelerometer; accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault(); accelerometer.addeventlistener("readingchanged",onaccreadingchanged); function onaccreadingchanged(e) { var accelx = e.reading.accelerationx; var accely = e.reading.accelerationy; var accelz = e.reading.accelerationz; } Windows 8 üzerinde Sensörleri kullanmakta olan uygulamaları inceleyebilir ve fikir edinebilir, sonrasında da kendi uygulamalarımızı geliştirmeye başlayabiliriz. Yalnız, unutmayalım ki bunu sadece Windows 8 işletim sistemine sahip bir bilgisayarda yapabilirsiniz. Sensör Grupları Sensörleri, Simple Data, Raw Sensor Data ve Sensor Fusion Data olarak 3 farklı gruba ayırabiliriz. Uygulama içerisinde sensörleri kullanabilmek için öncelikle, Windows.Devices.Sensors isimalanı altındaki sınıfları kullanmalıyız. 34
Şekil 16- Sensör Grupları (Microsoft, 2012) Cihazın alıştırma ve değişimini tespit edebileceğimiz, Simple Device Orientation Sensörü, Işık Sensörü (Light Sensor), İvmeölçer (Accelerometer), Gyro, Pusula (Compass), Inclinometer ve Device Orientation, Windows 8 ile birlikte kullanılabilecek olan sensörlere örnek olarak verilebilir. Sensörler için geliştirici desteği (Developer support for sensors) Windows 8 sensörleri genelde aşina olduğumuz özelliklere sahiptir. Oyunlar, Ticari uygulamalar, çeşitli araçlar ve yardımcı programlar, sensör özelliklerinin kullanımına birer örnek teşkil edebilirler. Sensörler, 3D Accelerometer (ivmeölçer) ve 3D Magnetometer (manyetik alan ölçer) destekleri ile oluşmaktadır. Bu birleşimlerde 6 eksenli hareket algılama ve yönlendirme sistemi meydana gelmektedir. Şekil 17-3 Boyutlu hareket görüntüsü (Microsoft, 2012) Sensörler sayesinde 3 boyutlu tüm hareketler algılanabiliyor. Bu sensörlerin kullanıldığı alanlar ise, gyro, accelerometer ve magnetometer'dır. Arayüzlerinde ise Pass-Through ve Sensor Fusion bulunmaktadır. 35
Şekil 18 Windows 8 de kullanılan sensörler (Microsoft, 2012) Bu sensörlerden biraz bahsedecek olursak, sensörler yardımıyla cihazların 3 boyutlu hareketlerini uygulamalarımız içerisinden ilgili parametreleri kullanarak elde edebiliyor ve bu hareketlere ait verileri işleyebiliyoruz. Herhangi bir sensöre erişebilmek için, Appication Manifest içerisinde, aşağıdaki kod bloğunda verilen örneğe benzer bir tanımlama yapmak gerekmektedir. XAML Kodu: <Capabilities> <DeviceCapability Name= location /> </Capabilities> Bu kodların kullanılmasının sebebi, özellikle sensörlerle çalışırken son kullanıcı tarafında güvenlik açıkları oluşmasının önüne geçmektir. Son kullanıcı tarafında hiç bir güvenlik açığı olmadan sensörlerin kullanılması için, yetkilendirme konusunda son kullanıcıyı bilgilendiren bu kodlar faydalı olacaktır. 5.2. Windows.Media API'leri Windows.Media API içerisinde mikrofon, video ve ses gibi özellikleri sensörlerle birlikte kullanabilmemiz için oluşturulmuş bir yapı bulunmaktadır. 36
Media elementi, kendi içerisinde CameraCaptureUI ve MediaCapture API özelliklerini barındırmaktadır. Bunlarla birlikte arka planda sık sık kullanabileceğimiz metotlar yardımı ile media elementinin video formatını belirleyebiliriz. Şekil 19 - Media elementleri (Microsoft, 2012) Uygulamalarınızda kamera ve mikrofonlara erişmek için application manifest içerisinde gerçekleştirmeniz gereken tanımlamalar aşağıdaki gibidir. XAML Kodu: <Capabilities> <DeviceCapability Name= webcam /> <DeviceCapability Name= microphone /> </Capabilities> 37
6. Bölüm 6: Windows Uygulamasının Mağazaya Aktarılması Uygulamayı mağazada yayınlayabilmek için aşağıdaki adımların yapılması gereklidir. Gerekli uygulamanın yazılması, Uygulama Package.appxmanifest dosya ayarlarının yapılması, Burada mağazada programımızın genel ayarları, ekran görüntüleri, Açılış ekran görüntüsü vb. adımlar yapılmaktadır. Türkiye mağazalarında uygulamamızı yayınlama izini alabilmek için mutlaka aşağıdaki kodu eklememiz gereklidir. <Resources> <!-- <Resource Language="x-generate"/> <Resource Language="en" />--> <Resource Language="tr" /> </Resources> Şekil 20 - Package.apppxmanifest arayüz ekranı (Mehmet Akif SÖNMEZ) Project Store Create Uplication Packages kullanılması, Bu adım sayesinde uygulamanın; 32 bit, 64 bit ve ARM işlemcilerinde çalışması için paketleme işlemi yapılmaktadır. Mağazada sergilenmek üzere gerekli ekran görüntülerinin hazırlanması, 38
Mağazada satış sırasında kullanılmak üzere gereken değişik ebatlardaki uygulama ekran görüntüleri hazırlanır. Mağazada yayınlamak için gerekli bazı adımların yapılması,(şekil 21) de gösterilen adımlar yapılmalıdır. App name: Uygulamanın mağazadaki görünen adı verilir. Selling details: Uygulamanın hangi ülkelerde yayınlanacağını (Package.appxmanifest dosya ayarı gerekir), Ücretlimi yoksa ücretsiz mi olacağı burada belirlenir. Services: Kullanılacak Azure servisleri burada belirtilir. Age rating and rating certificates: Uygulamanın yaş aralıkları ve içerdiği kriterler seçilir. (12+ Suitable for ages 12 and older en hızlı kabul gören seçenektir.) Packages: Oluşturulan paket dosyaları mağaza ortamına yüklenir. Description: Bu kısımda uygulamanın mağazadaki ekran görüntüleri, açıklamaları, hangi işletim sistemlerinde çalıştığı, sistem gereksinimleri, Lisans şartları, güvenlik gereksinimleri gibi adımlar bulunmaktadır. Bu adımdan sonra Microsoft uzmanları tarafından uygulamanın bu adımı incelenir ve 3-4 saat içerisinde geri dönüş yapılır. Varsa gerekli istenen düzenlemeler yapılır yoksa bir sonraki adıma geçmemize izin verilir. Notes to testers: Uygulama test aşamasındadır. 1-3 gün arasında uygulama Uzmanlar tarafından teste tabii tutulur ve bir rapor halinde sunulur. Testi geçerse uygulama mağazaya aktarılmış olur. Şekil 21- Mağazaya uygulamayı yükleme aşamaları (Mehmet Akif SÖNMEZ) 39
Mağazada bulunmak (Dashboard). (Şekil 22) gösterildiği gibi mağazada yayınlanan tüm uygulamalar hakkında geniş bir raporlama ( yüklenme sayısı, hangi ülkelerden yüklendiği, ne kadar oy kullanıldığı, uygulama hakkında yapılan yorumlar) bulunur. Edit menüsü kullanılarak uygulamada yapılan yenilikler tekrar mağaza ortamına aktarılması sağlanır. Şekil 22 - Dashboard (Uygulama rapor ekranı) ( Mehmet Akif SÖNMEZ) 40