Silverlight 2.0 için özel ön yükleme ekranları geliştirmek. (PreLoader)

0 dakikada yazıldı

6804 defa okundu

Düzenle

Silverlight 2.0 uygulamaları hazırladığınızda sunucu tarafına yükleme
işlemini yaptığınız gibi XAP dosyanızın büyüklüğüne göre Silverlight
Runtime tarafından otomatik olarak bir ön yükleme sistemi
gösterilecektir. Kullanıcılar sitenizi ziyaret ettiğinde XAP dosyasının
istemciye inme sürecini gösteren bu yükleme göstergelerini isterseniz
rahatlıkla özelleştirebilir ve değiştirebilirsiniz. Tabi tüm bunları XAP
dosyanız dışında daha XAP dosyası yüklenmeden bir şekilde yine
Silverlight ile yapabiliyor olmamız gerek.

Silverlight ile beraber gelen standart ön yükleme animasyonu.
Silverlight ile beraber gelen standart ön yükleme animasyonu.

Aslında bu yükleme ekranını değiştirirken belki de eski Silverlight 1.0
günlerini biraz hatırlayacaksınız. XAP dosyası yüklenmeden önce bu
şekilde bir yükleme animasyonu gösterebilmemiz için animasyonu
oluşturacak ayrı bir XAML ve download durumunu kontrol edecek ayrı bir
JavaScript koduna ihtiyacımız var.

Görsel kısmı halledelim...

İlk olarak ön yükleme işlemini gösterecek olan animasyonu ve görsel
öğeleri düzenleyelim. Tüm bu görsel öğelerin tabi ki XAP dosyası dışında
olması gerek. Bu durumda tek bir alternatif kalıyor, o da
hazırlayacağımız tüm XAML kodunun harici bir dosya olarak sunucuda
tutulması. Eğer Visual Studio ile bir Silverlight projesi yarattıysanız
büyük ihtimal ile yanında bir de ASP.NET siteniz olacaktır. İşte tam da
o ASP.NET sitesine bir XAML dosyası eklemeliyiz. Bunu ister Visual
Studio içerisinde yapın ister Expression Blend içerisinde, önemli olan
projeleri karıştırmayarak XAML dosyasını kesinlikle web sitesinde
tarafında bir dosya olarak yaratmanız.

Maalesef bu noktadan sonra Expression Blend bize pek yardımcı olamayacak
çünkü Web sitesindeki XAML dosyasının tam olarak ne tür bir projeye ait
olduğunu algılayamayacak. O nedenle çoğu kodu elle yazmak zorunda
kalacağız.

[XAML]

<StackPanel
Orientation="Horizontal"
xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        x:Name="LayoutRoot"
Background="White"
Height="104">

  <Rectangle
Height="33" x:Name="Progress"
Fill="#FF00FF00"/>

  <TextBlock
Height="18" Text="Yükleniyor..."/>

</StackPanel>

Yukarıdaki kodumuz bizim önyükleme ekranının tasarımı olacak. Tasarım
oldukça basit; bir StackPanel içerisinde TextBlock ile Rectangle
kullanarak işi çözüyoruz. Tabi siz örneklerinizde farklı tasarımlar
kullanabilirsiniz. Bizim örneğimizde ekranda sürekli "Yükleniyor..."
yazacak ve yanında da 0 pikselden 100 piksele doğru genişleyecek olan
bir Rectangle yer alacak. Böylece kullanıcıya standart görselden farklı
bir şekilde XAP dosyasının  yüklenmesine ait süreci göstermiş olacağız.

Bu kod içerisinde en önemli nokta Rectangle nesnesinin adının Progress
olması. İleriki aşamalarda yazacağımız JavaScript kodları ile bu nesneyi
bularak gerekli değişiklikleri yapacağız.

Ortamı hazırlayalım...

Silverlight uygulamamızı sayfaya yerleştirdiğimiz OBJECT tagları
içerisinde bazı ek parametreler tanımlamamız gerekiyor. Böylece
Silverlight Runtime XAP dosyasının indirirken nerede ve nasıl bir
progress göstermesi gerektiğini bilebilecek. Gelin uygun bir OBJECT
tagına göz atalım.

[XAML]

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

            <param name="splashscreensource" value="Scene1.xaml"/>   

<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

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

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

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

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

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

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

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

            </a>

        </object>

Gördüğünüz üzere kod içerisinde kalın olarak yazılı üç farklı nokta var.
Bunlardan birincisi OBJECT taglarına vermiş olduğumuz ID olan SL ismi.
OBJECT taglarımızı bu şekilde isimlendirmek zorundayız çünkü birazdan
JavaScript ile bu OBJECT taglarına yani Silverlight uygulamamıza
ulaşmamız gerekecek. Son olarak ayarlamamız gereken iki tane de
parametre bulunuyor. Bu parametrelerden ilki XAP dosyası yüklenmeden
önce ve yüklenirken gösterilecek olan XAML dosyamızın tam yolu olacak.
splashscreensource adındaki bu parametreye biz örneğimizde basit bir
şekilde Scene1.xaml değerini verdik. Bu dosya içerisinde bir önceki
adımda yazdığımız ve içerisinde Progress Rectangle'ının bulunduğu
XAML yer alıyor. Son olarak onSourceDownloadProgressChanged
event'ına da yine aynı isimde bir JavaScript event-listener ekleyerek
XAP dosyasının download durumu ile ilgili değişiklikleri takip
edebiliyoruz. Gelelim yazacağımız bu JavaScript event-listener koduna...

Biraz da JavaScript...

Bir önceki adımda hazırladığımız OBJECT tagının parametrelerinden
birinde onSourceDownloadProgressChanged adında bir event-listener
tanımlamıştık. Bu event-listener içerisinde ilk olarak sayfamızdaki
OBJECT tagını ve içerisindeki Silverlight uygulamamızı bulmamız
gerekiyor. Bu yapı Silverlight 1.0 günlerinden hatırladığımız bir yapı.
Aşağıdaki kodumuzda SL adını verdiğimiz OBJECT taglarını bulduktan sonra
içeriğine bakarak findName ile Progress adındaki Rectangle'ımızı
bulmuş olduk.

[JavaScript]

        function
onSourceDownloadProgressChanged(sender, eventArgs) {

            var Progress =
document.getElementById("SL").content.findName("Progress");

            if (eventArgs.progress)

                Progress.Width = eventArgs.progress * 100;

            else

                Progress.Width = eventArgs.get_progress() * 100;

        }

Son olarak söz konusu Rectangle'ın genişliğini elimizdeki yükleme
durumuna göre değiştireceğiz. Yükleme durumunu bize 1 üzerinden decimal
olarak verecek olan şey tarayıcı tipine göre ya bir Property ya da bir
metod olacağı için bir IF kontrolü ile onu de kontrol ederek gerekli
işlemi yapıyoruz.

Artık Silverlight Runtime ile beraber gelen ön yükleme animasyonlarından
kurtulabilir ve kendi özgür iradeniz ile :) kendi tasarımlarınızı
kullanabilirsiniz.

Hepinize kolay gelsin.