Silverlight ile DVD ve CD arayüzleri hazırlamak!

0 dakikada yazıldı

14672 defa okundu

Düzenle

DVD veya CD arayüzleri hala bilgisayar dünyasında ciddi bir yere sahip.
İçeriğin paylaşımı adında internet ciddi bir yol almış olsa da hala CD
ve DVD medyalarını kullanarak içeriğin dağıtımı bazı senaryolarda çok
daha işlevsel olabiliyor. Bu gibi durumlarda doğal olarak bir arayüz ile
söz konusu içeriği bir CD veya DVD içerisinde sunmak gerekiyor. Peki bu
arayüzü geliştirmek için hangi teknolojileri kullanabiliriz?

Gelin beraberce sıralayalım;

HTML - Pufff!
Flash - ActionScript? Pufff!
WPF - .NET Framework yükletmek? Puff!
Silverlight - Oley! İşte bu!

Şaka bir yana :) aslında bir CD veya DVD arayüzü geliştirirken
ihtiyacımız olan şey hem arayüz içerisinde her tür data işlemini
yapabilimek hem de güzel bir arayüz tasarlayabilmektir. Varsayalım bir
ürün kataloğu yapıyorsunuz, büyük ihtimal ile söz konusu ürünler
arasında arayüzde arama da yapılabilmelidir. İşte ufak da olsa bir
programlama noktası karşımızda. Olabildiğince rahat programlamak ve
bildiğimiz bir dili kullanmak önemli. HTML ile JavaScript veya Flash ile
ActionScript bir .NET developer için çok da ferah bir gelecek
vaadetmeyecektir. Ayrıca HTML ile zaten güzel bir arayüz, zengin bir
kullanıcı deneyimi sağlamak da pek mümkün değil.

Alternatiflerden bir diğeri WPF olabilir ve aslında çok da güzel olur.
Fakat bu sefer de .NET Framework gereksinimi ile karşı karşıya
kalıyoruz. Eh hadi DVD'nin içine koyalım ama insanların bir DVD
arayüzünü görebilmek için .NET Framework kurup (en az 5dk) makinelerine
restart atacaklarından emin misiniz?

Tüm bu senaryonda en güzeli Silverlight! Hem bildiğimiz VB, C# hem
Expression Blend ile süper kullanıcı deneyimi hem de 4MB Runtime ve 5
saniye yükleme süresi. Hem MAC desteği de var! Eh gönül daha ne ister?

Tamam da şimdi tarayıcıda açtırmak da pek hoş olmuyor!

Kesinlikle! Bir CD veya DVD arayüzünün tarayıcı içerisinde açılması
benim en uyuz olduğum noktalardan birisidir özünde. Neden mi? Çünkü
ister istemez bir web sitesi hissiyatı yaratıyorsunuz ve en azından
bende "çok uğraşılmamış" efekti oluşturuyor. Yani "adamlar web sitesi
yapıp koymuş DVD'ye!" gibi abuk bir yorumun gelmesi olasılığı ciddi
yüksek. O nedenle tarayıcıdan kurtulmamız gerek.

HTML Application = HTA!

HTA'larla ilk tanışdığımda "İşte bu" demiştim :) Sanırım SQL 2000'in
yükleme CD'sinin arayüzünde görmüştüm. Arayüz ilgimi çekmişti çünkü bir
tarayıcı gibi içinde HTML olduğunu hissetmiş fakat ortada bir tarayıcı
görmemenin de şaşkınlığını yaşamıştım. Sonra biraz CD'yi karıştırınca
HTA'larla tanıştım. HTA aslında HTML vs bir scripting dili ile
yazılabilir uygulamalar şeklinde tanımlanabilir. Bu uygulamalar
"Microsoft HTML Applicatio Host" adında özel bir uygulama tarafından
Windows içerisinde host edilir. Arka planda Internet Explorer kullanılır
fakat kullanıcılar bunu görmez. HTA uzantılı bir dosya rahatlıkla
Notepad ile açılabilen birer HTML dosyasıdır aslında.

[HTA]

<HTML>

  <head>

  <link href="img/styles.css" type="text/css" rel="stylesheet" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <TITLE>

      Internet Explorer 8 -DVD

    </TITLE>

 

    <HTA:APPLICATION

     APPLICATIONNAME="IE8DVD" 

     MAXIMIZEBUTTON="no"

     MINIMIZEBUTTON="no"

     SINGLEINSTANCE="yes"

     ICON="setup.ico"

     SCROLL="no" />

  </HEAD>

 

<body style="margin:0px;">

 

    <script for="window" event="onload">

   window.resizeTo(820,640);

   window.moveTo((screen.width - 820) / 2, (screen.height - 640) / 2);

</script>

</body>

</html>

Yukarıda gördüğünüz kod basit bir HTA dosyasının içeriği. Aslında
içerisinde pek birşey yok. İlk anlamamız gereken şey aslında bir HTML
ile çalışıyor olduğumuz. Tabi biz arayüzü oluşturmak için HTML değil
Silverlight kullanacağız. Önemli olan ilk şey tabi ki dokümanın TITLE
kısmını ayarlamak çünkü bu uygulamanızın açılan penceresinin başlığı
olacak. Aşağıda gördükleriniz ise uygulama parametreleri.

[HTA]

    <HTA:APPLICATION

     APPLICATIONNAME="IE8DVD" 

     MAXIMIZEBUTTON="no"

     MINIMIZEBUTTON="no"

     SINGLEINSTANCE="yes"

     ICON="setup.ico"

     SCROLL="no" />

Uygulamanın açılacağı pencerede pencereyi büyütme, küçültme vs gibi
düğmeleri isteyip istemediğinizi belirtebilir hatta uygulamanın tek
oturumunun olmasını da yukarıdaki parametreler ile sağlayabilirsiniz.
Uygulama ikonunu da ayarladıktan sonra önemli noktalardan biri
Scroll özelliği NO şeklinde set etmek. Malum biz bu HTML
içerisinde arayüz olarak Silverlight koyacağımız için zaten gerekli
scroll işlemlerini de SL içerisinde halledebiliriz.

[HTA]

    <script for="window" event="onload">

   window.resizeTo(820,640);

   window.moveTo((screen.width - 820) / 2, (screen.height - 640) / 2);

</script>

Yukarda basit bir JavaScript kodu görüyorsunuz. Bu kod uygulamanızın
penceresinin boyutunu ayarlayacağı gibi pencerenin de ekranın tam
ortasında gözükmesini sağlayacaktır. HTA'lar içerisinde hem JavaScript
hem VBScript kullanabilirsiniz. Her script ait olduğu nesneye for
özelliği ve ait olduğu nesnenin hangi event'ını dinleyeceğine de
event parametresi ile bağlanır.

Bu noktadan sonra tabi ki sizin ilk olarak Silverlight uygulamanızı
hazırlamanız gerek. Arayüz olarak kullanılacak Silverlight uygulaması
hazırlandıktan sonra bu HTA içerisine uygun şekilde yerleştirilebilmesi
çok önemli.

[HTA]

<HTML>

  <head>

  <link href="img/styles.css" type="text/css" rel="stylesheet" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <TITLE>

      Internet Explorer 8 -DVD

    </TITLE>

 

    <HTA:APPLICATION

     APPLICATIONNAME="IE8DVD" 

     MAXIMIZEBUTTON="no"

     MINIMIZEBUTTON="no"

     SINGLEINSTANCE="yes"

     ICON="setup.ico"

     SCROLL="no" />

  </HEAD>

 

<body style="margin:0px;">

    <div id="silverlightControlHost">

        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

            <param name="source" value="ClientBin/Interface.xap"/>

            <param name="background" value="white" />

            <param name="minRuntimeVersion" value="2.0.31005.0" />

            <param name="autoUpgrade" value="true" />

            <img style="cursor:pointer;"
ID="SLInstall" border="0"
src="images/install.jpg" />

        </object>

    </div>

 

    <script for="window" event="onload">

   window.resizeTo(820,640);

   window.moveTo((screen.width - 820) / 2, (screen.height - 640) / 2);

</script>

     <SCRIPT FOR="SLInstall" EVENT="onclick" LANGUAGE="VBScript">

      Dim objShell

      Dim lngReturn

 

      on error resume next

 

      set objShell = CreateObject(
"WScript.Shell" )

 

        lngReturn = objShell.Run ("Silverlight.2.0.exe", 4, 1)

 

      set objShell = Nothing

      document.execCommand("Refresh")

 

    </SCRIPT>

</body>

</html>

İşte esas noktaya geldik. Yukarı gördüğünüz OBJET tagları klasik bir SL
uygulamasının bir HTML sayfaya yerleştirildiği taglardan farklı değil.
Bir tek minik fark var o da OBJECT tagları içindeki HTML kodu!
Hatırlarsanız tarayıcılar eğer OBJECT taglarını render edemezse
içlerindeki HTML'i gösteriyorlardı. Bu gibi bir durumda Silverlight
hedef makinede yüklü değilse bu demektir de tarayıcı OBJECT taglarını
render edemeyecek bir OBJECT içerisindeki HTML'i kullanıcıya gösterecek.

[HTML]

      <img style="cursor:pointer;"
ID="SLInstall" border="0"
src="images/install.jpg" />

Yukarıdaki şekilde güzel bir resim Silverlight yüklü değilken
gösterilecek resim olarak seçilebilir. Tabi bu resmin tasarımında
kullanıcıya uygun mesajı bir metin olarak göstermeniz şart. Diğer yandan
bu resim nesnesinin fare ile üzerine geldindiğinde el işareti
gösterilmesi için uygun CSS'in kullanılması da gerekiyor. Son olarak bu
IMG'ye bir de ID veriyoruz çünkü bu resme tıklandığında Silverlight
Runtime yüklemesini başlatmalıyız!

[VBScript]

     <SCRIPT FOR="SLInstall" EVENT="onclick" LANGUAGE="VBScript">

      Dim objShell

      Dim lngReturn

 

      on error resume next

 

      set objShell = CreateObject(
"WScript.Shell" )

 

        lngReturn = objShell.Run ("Silverlight.2.0.exe", 4, 1)

 

      set objShell = Nothing

      document.execCommand("Refresh")

 

    </SCRIPT>

Yukarıda bir VBScript kodu görüyorsunuz. Silverlight Runtime
yüklemesine ait EXE dosyasının HTA ile aynı klasöre koyduktan
sonra uygun zamanda yüklemeyi başlatmak şart. Bunun için bir Shell
nesnesi yaratarak yüklemeyi başlatabiliyoruz. Yükleme bitince de sayfaya
Refresh atıyoruz böylece kullanıcı yüklemeyi yaptıktan sonra ekranı
kapatıp açmadan hemen arayüzü görebiliyor. Bu scriptin FOR ve
EVENT özelliklerine bakarsanız bizim bir önceki adımda yarattığımız
IMG nesnesinin onclick durumunda çalışacağını görebilirsiniz.

Diskten birşey çalıştırmak istersek?

Biliyorsunuz Silverlight'ın çalıştığı makinedeki diske erişimi yok.
Bunun nedeni Silverlight'ın çalıştığı yer olan tarayıcı içerisindeki
alandan yani bir web sitesinden de hedef makinedeki diske ulaşamıyor
olmamız. HTA'lar bu konuda biraz farklılar. HTA'larda rahatlıkla diske
erişebilirsiniz. Aslında bir önceki örnekte biz bu işi zaten yapmadık
mı? HTA içerisinden gidip Silverlight Runtime'ı yüklemek demek harici
bir EXE'yi çalıştırmak demek değil mi? Aynen öyle. Peki biz bunu
Silverlight içerisinden nasıl yapabiliriz?

Silverlight içerisinde çıkıp VBScript'e ulaşıp, parametre göndererek
VBScript ile de diske erişebiliriz.

[VBScript]

     <SCRIPT LANGUAGE="VBScript">

             sub Getir(byval address)

      Dim objShell

      Dim lngReturn

 

      on error resume next

 

      set objShell = CreateObject(
"WScript.Shell" )

 

        lngReturn = objShell.Run (address, 4, 1)

 

      set objShell = Nothing

            end sub

    </SCRIPT>

Yukarıda gördüğünüz VBScript metodu tek bir parametre alarak Shell
nesnesi yaratıp parametreden gelen adresi diskte çalıştırmaya çalışıyor.
Bu durumda biz bu metodu Silverlight tarafından çağırıp uygun
parametreyi verebilirsek işlem tamamlanmış demektir.

[VB]

    Private Sub btnSource_Click(ByVal sender As Object,
ByVal e As System.Windows.RoutedEventArgs) Handles btnSource.Click

        System.Windows.Browser.HtmlPage.Window.Invoke("Getir", New String("samples/Hedehodo.exe"))

    End Sub

İşte bu kadar basit. Silverlight'tan DOM'a çıkarak Getir adındaki
metodumuzu çalıştırıp bir de String parametre gönderiyoruz. Söz konusu
String parametre aslında çalıştırmak istediğimiz uygulamanın HTA
dosyasının bulunduğu yere göre relative Uri'sini içeriyor. Böylece bu
parametre VBScript'e aktarılacak, oradan da Shell üzerinden
çalıştırılabilecek.

Süper değil mi?

Şimdi yapabileceklerinizi bir düşünün :) Silverlight uygulaması
içerisinde yapabildiğiniz herşey bir anda bir DVD arayüzüne
dönüştürülebiliyor. SaveFileDialog, OpenFileDialog, Socket bağlantılar!,
Desktop moduna geçip makineye anında yükleme yapabilmek! ve daha bir çok
Silverlight özelliğini bir anda kullanabilir hale geliyorsunuz! Bu
gerçekten muhteşem!