Makale Özeti

Bir Silverlight projesi birden çok JavaScript dosyasından oluşur. Bu dosyalarının yapılarını, içeriklerini ve Silverlight animasyonlarının HTML sayfalarına yerleştirilmesini incelediğimiz bu makalede Expression Blend 2 ile yarattığımız bir Silverlight projesini masaya yatırıyoruz.

Makale

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.

Daron Yöndem
MCT, MCPD, MCITP, MCTS, MCSD, MCAD
MCDBA, MCP, ACP, ICSD, IEL'03
http://daron.yondem.com