Makale Özeti

Bugün Windows 8′de Oryantasyon ve Snap özelliğini inceleyeceğiz

Makale

Bugün Windows 8′de bir kademe daha atlayıp Oryantasyon ve Snap özelliğini inceleyeceğiz. Daha önceki makalemde Windows 8′e giriş olması amacıyla bir yazı yazmıştım.Bugün ise Windows 8 ‘de ekran boyutları ile incelemeler yapacağız.Bu boyutlar kullanıcının programı kullanmasıyla alakalı arayüzler tasarlanacaktır. Windows 8 ‘in kendine özgü ekran çeşitleri vardır

.Bunları aşağıda daha ayrıntılı inceleyeceğiz fakat ekran boyutlarına göre sizin programınızın arayüzünü tasarlamazsanız Windows Store’ den uygulamalarınız geri dönüyor.Oryantasyon ve snap özelliği gerçekten önemli bir konu.

Windows Store’den geçme kurallarından (http://msdn.microsoft.com/en-us/library/windows/apps/hh694083.aspx)  3.6 . maddeyi okumanızı tavsiye ederim.

  • Your app must support a snapped layout. In landscape orientation, your app’s functions must be fully accessible when the app’s display size is 1024 x 768. Your app must remain functional when the customer snaps and unsnaps the app.
  • Your app must neither programmatically close nor offer UI affordances to close it. Windows 8 Process Lifetime Management closes Windows Store apps automatically.
  • Your app must suspend and resume to a reasonable state.
  • If your app implements a bottom app bar, that bar must show up with a bottom-up swipe.
  • If your app implements a top app bar, that bar must show up with a top-down swipe.

 

Açılımı olarak en küçük ekran olarak 1024*768 ekrana göre tasarlanmalı ve işlevsel olmalıdır. Snapped özelliğini desteklemelidir.Alt veya Üst menüdeki çubuklar gösterilerek uygulama içerisinde gereksiz form elemanları kaldırılmalıdır.

  • 1024 x 768(Minimum ekran çözünürlüğü )
  • 320 x 768(En küçük ekran boyutu çözünürlüğü)
  • 1366 x 768 (Varsayılan ekran çözünürlüğü)

 


Peki Snap,Fill ve diğer ekran boyutları nedir ? Aşağıdaki resimde bir ekranda 4 farklı ekran seçeneği vardır.


 

Uygulamalarınız bu 4 ekran boyutu çözünürlüğünü destekler ise Windows Store ‘dan ekran çözünürlükleri ile ilgili bir hata dönmez.

Uygulamalarınızı başlatmak için 3 tane seçeneğiniz vardır:

 

  1. Simulator
  2. Local Machine
  3. Remote Machine

 


Simulator: Bu seçenekte çalıştırdığınız zaman sizin bilgisayarınız üzerinde sanal bir tane tablet simulatörü (Surface) yaratılır.Artık tıpkı tabletiniz elinizdeymiş gibi onun üzerinden işlemler yapabilirsiniz.

 

Local Machine: Kendi makineniz üzerinde direkt test ediyorsunuz

Remote Machine: Eğer elinizde Windows 8 li bir tabletiniz varsa bazı ayarlamalar yapıp ,uygulamanızı direkt canlı olarak tabletinizde test etmenizi sağlar.

 

ORYANTASYONU DESTEKLEME

Yaptığınız programda Windows Store’ye kabul ettirebilmek amaçlı hangi oryantasyonlara destek vereceğimizi seçmeliyiz. Sizin programınız tüm oryantasyonları desteklese bile bu alanlar işaretlenmediği zaman uygulamanız geri dönebilir. Oryantasyonu desteklemek için projenizde package.appxmanifest dosyası vardır. Bu dosyayı açtığınızda ;

 

 

özellikleri mevcuttur.Application UI sekmesinde hangi ekran çözünürlüklerini destekleyeceği,logo ve programınızın diğer ayarlarını yapabilirsiniz.

 

ORYANTASYON GÖRÜNTÜLEME

Normal şartlarda Javascript ile böyle birşey yapamazsınız fakat Windows 8 tarafından getirilen Windows.Graphics.Display.DisplayProperties API kütüphanesiyle bu özelliği yakalamanız artık mümkün oluyor.

 

function OryantasyonGuncelle() {
 
    switch (Windows.Graphics.Display.DisplayProperties.currentOrientation) {
 
        case Windows.Graphics.Display.DisplayOrientations.landscape:
            sonuc.innerText = "Landscape";
            break;
 
        case Windows.Graphics.Display.DisplayOrientations.portrait:
            results.innerText = "Portrait";
            break;
 
        case Windows.Graphics.Display.DisplayOrientations.landscapeFlipped:
            sonuc.innerText = "Landscape (flipped)";
            break;
 
        case Windows.Graphics.Display.DisplayOrientations.portraitFlipped:
            sonuc.innerText = "Portrait (flipped)";
            break;
 
        default:
            sonuc.innerText = "Unknown";
            break;
    }
}


Bu fonksiyonu çağıracak ana kütüphane ise aşağıdadır :


....
 
results = document.getElementById("resultText");
 
var dispProp = Windows.Graphics.Display.DisplayProperties;
dispProp.addEventListener("orientationchanged", OryantasyonGuncelle, false);
 
OryantasyonGuncelle(); //Opsiyonel olarak yazabilirsiniz
 
....
 


HAREKETE DUYARLI ORYANTASYON


Bu oryantasyon türüde Windows 8 ile gelen SimpleOrientationSensor API ‘si ile gelmiştir. API isimleri ileride lazım olabileceği için bunları bilmenizde fayda var.


....
 
switch (e.orientation) {
    case Windows.Devices.Sensors.SimpleOrientation.notRotated:
        sonuc.innerText = "Döndürülmedi";
        break;
 
    case Windows.Devices.Sensors.SimpleOrientation.rotated90DegreesCounterclockwise:
        sonuc.innerText = "90 Derece";
        break;
 
    case Windows.Devices.Sensors.SimpleOrientation.rotated180DegreesCounterclockwise:
        sonuc.innerText = "180 Derece";
        break;
 
    case Windows.Devices.Sensors.SimpleOrientation.rotated270DegreesCounterclockwise:
        sonuc.innerText = "270 Derece";
        break;
 
    case Windows.Devices.Sensors.SimpleOrientation.faceup:
        sonuc.innerText = "Yukarıya Doğru";
        break;
 
    case Windows.Devices.Sensors.SimpleOrientation.facedown:
       sonuc.innerText = "Aşağıya Doğru";
        break;
 
    default:
        results.innerText = "Oriyantasyon yok " + e.orientation;
        break;
}
 
....


Bu komutu çağırıcak ana fonksiyon:


....
 
sonuc = document.getElementById("resultText");
 
var sensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();
if ( sensor ) {
    sensor.addEventListener("orientationchanged", sensorOrientationChanged);
    sonuc.innerText = "Sensor Bulundu";
}
else {
    sonuc.innerText = "Sensor Bulunamadı";
}
 
....


Peki html sayfaların içeriğini ve css lerini yazmadan direkt JS ‘ye girdik diyebilirsiniz. Fakat önemli olan noktayı vurgulamak ve makaleyi çok uzatmamak adına makalenin sonunda sizlerle dosyayı paylaşacağım.

Şimdi yaptığımız uygulamanın ekran çıktılarını bir görelim

Snapping

Şimdi Windows Store bizden hangi tür ekran çözünürlüklerinde istediğine uygulama üzerinde bir bakalım

Landscape (Yatay) Modu: 


 

@media screen and (-ms-view-state: fullscreen-landscape)


Portrait (Dikey) Modu : 


 

@media screen and (-ms-view-state: fullscreen-portrait)


Snapped (Küçültülmüş)  Modu:


 

“İki uygulama yanyana açıldığı zaman soldaki ekran ”

@media screen and (-ms-view-state: snapped)


Fill (Doldurulmuş Ekran) Boyutu:


 

@media screen and (-ms-view-state: filled)


Örnek bir uygulamadan Snapped ve Landscape görüntüleri :

Landscape:

 

 

Snapped:


 

Görmüş olduğunuz gibi uygulamayı snapped moduna alınca tasarımsal olarak değişiklik gerçekleşiyor ve böylece kullanıcıya daha çok hitap etmesini sağlıyor.

Tabi bunların hepsi CSS ten olmaktadır. Ortanyasyon ve snapped yaptığımızda arka plan rengini CSS ‘den , değişen ekrana göre ekran türünün belirtilmesini Javascript tarafından yapılmaktadır.Bu ikisi birbirine karıştırılmaması lazımdır.

Uygulama2.rar

 

 

Yukarıdaki Uygulama2 adlı dosya yapmış olduğum örneklerin dosyasıdır. Burada HTML,CSS ve JS olarak tüm kodları görebilirsiniz.

Tekrar görüşmek dileğiyle..Sağlıcakla kalın…