Makale Özeti

Bu yazımızda Silverlight 2.0 Beta 2 ile beraber gelen XAP dosyalarının yayınlanma sistemini incelerken özel ön yükleme arayüzleri oluşturmaya dair de ufak bir örnek yapıyoruz.

Makale

Silverlight 2.0 Beta 2 ile beraber 1.0 sürümüne göre uygulamaların dağıtım sistemi değişti ve karşımıza XAP dosyaları çıktı. Bu dosyaları standart HTML veya herhangi bir sunucu taraflı programlama altyapısında kullanmanın yolu da aslında eskiden Flash tarafında alışık olduğumuz Object taglarına dönüştü. Bu durumun tabi ki güzel yanları var, Silverlight 1.0'da olduğu gibi harici JavaScript dosyalarına (Silverlight.js) ve DIV elementlerine vs ihtiyacımız olmuyor. Şimdi gelin beraber Silverlight 2.0 uygulamalarını sayfalarımıza yerleştirirken kullanacağımzı OBJECT tagları ile gelen yenilikleri inceleyelim.

Yeni bir Silverlight 2.0 projesi

Visual Studio 2008 içerisinde yeni bir Silverlight 2.0 projesi yarattığımızda bizim için test amaçlı olarak örnek bir de HTML dosyası hazırlanıyor. Bu dosya içerisinde bir Silverlight uygulamasının gösterimi için konulmuş kodları yavaş yavaş inceleyelim.

    <div id="silverlightControlHost">

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

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

            <param name="onerror" value="onSilverlightError" />

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

 

            <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">

                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

            </a>

        </object>

        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

    </div>

En dışta silverlightControlHost adında bir DIV elementi bulunuyor. Aslında böyle elementin bulunmasına hiç gerek yok, sadece CSS ile Silverlight uygulamasının boyutu ayarlanabilsin diye yerleştirilmiş bu DIV elementinin başka herhangi bir işlevselliği olmadığı için rahatlıkla koddan kaldırılabilir.

Esas OBJECT tagımıza geçtiğimizde karşımıza dört farklı özellik çıkıyor. Bunlardan Data özelliği OBJECT taglarının farklı tarayıcılarda farklı işlevselliklerle karşılaşmasından dolayı yerleştirilmiş. Data özelliği olmayan OBJECT tagları bazı tarayıcılarda sorun çıkartabiliyor. TYPE özelliği tarayıcıya Silverlight Plug-In'in bu OBJECT tagından sorumlu olduğu bilgisini verirken width ve height ise uygulamanın sayfadaki boyutunu belirtiyor.

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

            <param name="onerror" value="onSilverlightError" />

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

OBJECT tagları arasında bazı parametreler var. Bu parametreler uygulamanın özelliklerine göre değişecektir, hatta burada tanımlanmamış olan bazı farklı parametreler de kullanmak mümkün. Mevcut parametreler arasında Source parametresi istemciye yüklenecek olan XAP dosyasının adresini taşırken onerror parametresi ise hata durumunda istemci tarafında çalıştırılacak olan JavaScript metodunun adını saklıyor.

            <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">

                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

            </a>

Buradaki kod ise aslında istemcide Silverlight Runtime yüklü olmadığında gösterilecek olan içeriği tanımlıyor. Gördüğünüz gibi basit bir şekilde "Get Microsoft Silverlight" logosu gösterilerek microsoft.com'da bir web sayfasına yönlendirilmiş. Artık SL 1.0'da olduğu gibi Silverlight Plug-In'in hangi sürümünün veya hangi platforma özel yüklemesinin yapılacağına JavaScript ile istemci tarafında karar vermiyoruz. Herhangi bir şekilde yükleme gerektiğinde doğrudan Microsoft sitesine yönlendirme yaparak tüm işi Microsoft'a bırakıyoruz. Bu biz yazılım geliştiriciler için çok daha rahat bir sistem.

Eğer isterseniz yukarıdaki HTML kodunu değiştirerek Silverlight RunTime yüklü olmadığında ekranda gösterilecek içeriği farklı bir şekilde tanımlayabilirsiniz. Önemli olan tek nokta herhangi bir şekilde bir link ile kullanıcıları doğru adrese yönlendirerek Microsoft sitesinden RunTime paketini indirmelerine olanak tanımak.

    <div id="silverlightControlHost">

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

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

            <param name="onerror" value="onSilverlightError" />

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

 

            <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">

                <img src="silverlightyok.jpg" alt="Microsoft Silverlight Yükle" style="border-style: none"/>

            </a>

        </object>

        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

    </div>

Örneğin yukarıdaki kod içerisindeki HTML sayesinde eğer istemci tarafında Silverlight Runtime yüklü değil ise silverlightyok.jpg adında bir resim gösteriliyor ve tıklandığında RunTime yüklenmek üzere Microsoft web sitesine yönlendiriliyor.

        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

Bu da nesi? Bu tamamen Safari tarafında bir önbellekleme sorununu gidermek için yerleştirilmiş normalde kullanılmayan bir IFRAME. Safari tarayıcısında bir sayfada eğer bir IFRAME varsa sayfa hiçbir şekilde önbelleğe alınmıyor.

Bunların haricinde Visual Studio'da yaratılan sayfa içinde hata yakalama için onSilverlightError adında bir JavaScript fonksiyonu ve errorLocation adında bir DIV elementi bulunuyor. Bahsi geçen bu JavaScript fonksiyonu herhangi bir hata durumunda hata mesajını alarak errorLocation içerisine yazdırmakla sorumlu.

Hepinize kolay gelsin.

Daron Yöndem
MVP, MCT, MCPD, MCITP, MCTS
MCSD, MCAD, MCDBA, MCP, ACP, ICSD
Blog: http://daron.yondem.com
Sorularınız için: http://daron.yondem.com/tr/sorusor