Silverlight Projelerinin Yapı Taşları

0 dakikada yazıldı

6014 defa okundu

Düzenle

Bir Silverlight projesi farklı dosyalardan ve yapılardan oluşur. Bu
yapılar neredeyse tamamı ister Visual Studio içerisinde ister
Expression Blend 2 içerisinde bir Silverlight projesi yarattığınızda
otomatik olarak oluşturularak karşınıza çıkar. Her şey ne kadar otomatik
olsa da belirli noktalarda işlemlere müdahale edebilmek açısından bizim
için otomatik olarak hazırlanan şeylerin neler olduğunu biliyor olmak
önemlidir. Bu yazımızda bir Silverlight projesinin doğumundan
bahsedeceğiz.

İlk olarak Expression Blend 2 içerisinde yeni bir Silverlight Web Site
yaratalım ve bakalım "Project Explorer" içerisinde neler var.

Expression Blend 2 içerisinde Silverlight projesindeki dosyalar.
Expression Blend 2 içerisinde Silverlight projesindeki dosyalar.

Gördüğünüz üzere bizim için yaratılmış olan birden çok dosya bulunuyor.
İlk olarak gelin default.html dosyasından başlayalım.

default.html

Herhangi bir Silverlight animasyonu tek başına çalışma yetisine sahip
değildir. Silverlight nesnelerinin bir şekilde bir web sayfası
içerisinde sunuluyor olması gerekir. Bu nedenle bizim projemizde de
Expression Blend 2 bizim için otomatik olarak bir HTML dosyası yaratarak
söz konusu HTML dosyası içerisinde Silverlight animasyonumuzu
yerleştirmiş durumda. Bu HTML dosyasının içeriğine baktığımızda ilginç
yapılarla karşılaşıyoruz.

  <script type="text/javascript" src="Silverlight.js"></script>

  <script type="text/javascript" src="Default_html.js"></script>

  <script type="text/javascript" src="Page.xaml.js"></script>

İlk dikkatimizi çeken yukarıdaki şekli ile üç farklı JavaScript
dosyasının sayfaya eklenmiş olması. Bu dosyaların ne işlemler yaptığına
birazdan sırası ile göz atacağız. HTML sayfamızı incelemeye devam
edelim.

  <style type="text/css">

    #silverlightControlHost {

      height: 480px;

      width: 640px;

    }

    #errorLocation {

      font-size: small;

      color: Gray;

    }

  </style>

Sayfa içerisinde yukarıdaki gördüğünüz gibi CSS sınıfları yer alıyor. Bu
sınıflar # deyimi ile tanımlandığı için sayfada kendi adlarındaki HTML
elementlerini bularak onları etkileyeceklerdir.
SilverlightControlHost adındaki element birazdan kodunu göreceğimiz
ve içerisinde Silverlight animasyonunu barındıracak olana DIV
elementinin ta kendisi. Bu elementin yükseklik ve genişliğini buradan
tanımlayarak aslında Silverlight animasyonunun genel yükseklik ve
genişliğini de tanımlamış oluyoruz. Bu genişlik ve yükseklik tanımlama
işlemi için aslında faydalanabileceğimiz başka bir yer daha var. Ondan
da ileriki adımlara bahsedeceğiz. Konuyu CSS kullanmadan çözmek de
mümkün.

Diğer CSS sınıfı olan errorLocation ise yine sayfada
errorLocation adındaki DIV elementini etkileyecek. Bu element
Silverlight animasyonunda herhangi bir hata olursa söz konusu hataya ait
mesajın gösterileceği elementin ta kendisi.

  <div id="silverlightControlHost">

    <script type="text/javascript">

      createSilverlight();

    </script>

  </div>

 

  <!-- Runtime errors from Silverlight will
be displayed here.

  This will contain debugging information
and should be removed or hidden when debugging is completed -->

  <div id='errorLocation'></div>

Bir önceki adımda incelediğimiz ve detaylarından bahsettiğimiz CSS
sınıfları yukarıdaki DIV elementlerini etkiliyorlar. Bu elementlerden
özellikle SilverlightControlhost elementi çok önemli. Bu element
içerisinde Silverlight animasyonumuz yerleştiriliyor olacak. Yerleştirme
işlemini yapan JavaScript fonksiyonu da createSilverlight
fonksiyonu. createSilverlight fonksiyonu sayfada herhangi bir yerde
olabilir veya herhangi bir şekilde çalıştırılabilir.

Şimdi gelelim sırasıyla sayfamıza linklenmiş olan JavaScript
dosyalarının ne işe yaradığına.

Silverlight.js

Silverlight JavaScript dosyası sayfanın en üstünde yer almalıdır. Bu
dosya içerisindeki kodlar istemci tarafında Silverlight Plug-In'in yüklü
olup olmadığı kontrol ederek gerekli mesajların, görsel uyarıların
gösterilmesini sağlayacaktır. Eğer bu görsel uyarıları bir şekilde
değiştirmek istiyorsanız Silverlight.js dosyası doğru hedeftir.

Default_html.js

Bu dosya içerisinde aslında tek bir JavaScript fonksiyonu bulunuyor;
createSilverlight. Hatırlarsanız bu fonksiyon bizim HTML dosyamızda
sayfaya Silverlight animasyonumuzu yüklemek için kullandığımız
fonksiyondu. Söz konusu fonksiyon doğrudan Default_html.js
içerisinde tanımlanıyor.

  var scene = new UntitledProject9.Page();

  Silverlight.createObjectEx({

    source: "Page.xaml",

    //Silverlight animasyonu için yüklenecek
olan XAML kaynağı.

    parentElement: document.getElementById("silverlightControlHost"),

    //Animasyonun yerleştirileceği HTML
elementinin ID bilgisi.

    id: "SilverlightControl",

    //Animasyona verilen ID bilgisi.

    properties: {

      width: "100%",

      height: "100%",

      version: "1.0"

    },

Yukarıdaki kod createSilverlight fonksiyonunun sadece bir parçası.
Silverlight nesnemiz yaratılırken tabi ki bazı parametrelerin verilmesi
gerekiyor. Bu parametreleri olabildiğince yukarıdaki kod içerisinde
satır aralarında anlatmaya çalıştım. Silverlight animasyonumuzda
kullanılacak olan kaynak XAML kodunun geleceği adresten tutun,
animasyonun sayfada yükleneceği konumun HTML elementine ait ID bilgisine
kadar herşey burada belirleniyor. Özellikle Silverlight animasyonuna da
bu noktada bir ID bilgisi verildiğini atlamamak gerek. Silverlight
uygulamasının programlanması noktasında bu ID bilgisi üzerinden
Silverlight nesnesine ulaşılacaktır.

Son olarak animasyon alanının toplam genişlik ve yüksekliğinin buradan
da ayarlandığını bilmekte fayda var. Varsayılan hali ile yaratılan
projelerde genişlik ve yükseklik ayarları CSS ile düzenlenmiş durumda.
Oysa burada da gerekli ayarlar yapılarak herhangi bir CSS kullanmadan da
ilerlenebilir.

Version bilgisi altında şu an için 1.0 bulunuyor. İleride Silverlight'ın
farklı sürümleri de yayınlandığında bu noktadaki bilgiye uygun işlemler
Plug-In tarafından yapılacaktır.

    events: {

      onLoad: Silverlight.createDelegate(scene, scene.handleLoad),

      onError: function(sender,
args) {

        var errorDiv =
document.getElementById("errorLocation");

        if (errorDiv != null) {

          var errorText =
args.errorType + "- " +
args.errorMessage;

 

          if (args.ErrorType == "ParserError") {

            errorText += "<br>File:
"
+ args.xamlFile;

            errorText += ", line
"
+ args.lineNumber;

            errorText += " character
"
+ args.charPosition;

          }

          else if (args.ErrorType == "RuntimeError") {

            errorText += "<br>line
"
+ args.lineNumber;

            errorText += " character
"
+  args.charPosition;

          }

          errorDiv.innerHTML = errorText;

        } 

Yukarıdaki kod içerisinde aslında iki işlem yapılıyor. Bu işlemlerden
ilki Silverlight animasyonunun yüklenmesi yani onLoad durumunda
çalıştırılmak üzere bir JavaScript metodunun aktarılması. Söz konusu bu
metodu başka bir dosya içerisinde yazıyor olacağız. İkincisi ise
onError yani Silverlight animasyonu içerisinde herhangi bir hata
olursa çalıştırılacak olan JavaScript fonksiyonunun hazırlanması. Bu
fonksiyon doğrudan kod içerisinde yazılmış. Şu andaki kod hatanın
mesajını alarak errorDiv adındaki bir HTML elementinin içerisine
yerleştiriyor. Söz konusu element de errorLocation adındaki HTML
elementinden yakalanıyor. errorLocation elementini HTML dosyamızın
içerisinden hatırlıyoruz.

Page.xaml.js

Son olarak sıra geldi esas Silverlight JavaScript kodlarımızı
yazacağımız Page.xaml.js dosyamıza. Bu dosyayı kabaca bir code-behind
dosyası olarak kabul edebilirsiniz. Dosya içerisinde bizim için yazılmış
olan örnek kodlar bulunuyor.

  handleLoad: function(control,
userContext, rootElement)

  {

    this.control = control;

 

    // Sample event hookup: 

    rootElement.addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));

  },

Bu dosya içerisinde özellikle handLoad JavaScript fonksiyonundan
bahsetmek istiyorum, çünkü bu fonksiyon bir önceki adımda
default_html.js içerisinde Silverlight animasyonunun onLoad
durumuna bağlanmıştı. Söz konusu fonksiyon HTML sayfası açıldıktan ve
createSilverlight fonksiyonu çalıştırıldıktan sonra hemen
çalışacaktır. Yani Silverlight animasyonun yüklenmesinden sonra yapmak
isteyeceklerinizi hemen burada yazabilirsiniz. handlLoad içerisindeki
örnek kodları da gönül rahatlığı ile silebilirsiniz.

Böylece yeni başlayan bir Silverlight projesindeki dosyaları ve neyin
nasıl çalıştığını incelemiş olduk.

Hepinize kolay gelsin.