Silverlight ile istemci tarafına ZIP arşivi yükleyerek içeriğini kullanmak ve Preloader uygulaması

0 dakikada yazıldı

4914 defa okundu

Düzenle

Silverlight ile beraber gelen belki de en güzel özelliklerden biri
Silverlight animasyonlarında kullanabileceğiniz harici içeriği sunucudan
istemciye indirirken bir ZIP paketi şeklinde indirerek
kullanabiliyor olmanız. Aşağıdaki örnekte uygulamamız bir ZIP paketini
sunucudan indirerek içerisinde bir resim dosyasını ekranda göstermek
üzere bir Silverlight Image nesnesine aktaracak. Tüm bunları
yaparkan söz konusu ZIP paketi yüklenirken bir de yüklenme durumunu
gösteren görsel çubuk hazırlayacağız.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

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

  Width="300"
Height
="300"

  Background="White"

  x:Name="Page"

  >

  <Rectangle
Width
="245" Height="38"
Stroke
="#FF000000" Canvas.Left="28"
Canvas.Top
="23" x:Name="DurumCubugu">

    <Rectangle.Fill>

      <LinearGradientBrush EndPoint="0.988,0.5"
StartPoint
="0.012,0.5">

        <GradientStop
Color
="#FF000000" Offset="0"/>

        <GradientStop
Color
="#FF885656" Offset="0.772"/>

        <GradientStop
Color
="#FF000000" Offset="1"/>

      </LinearGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

  <TextBlock
Width
="153" Height="19"
Canvas.Left
="40" Canvas.Top="34"
TextWrapping
="Wrap" x:Name="DurumMetin"
Foreground
="#FFFFFFFF"></TextBlock>

  <Image
Width
="245" Height="189"
Canvas.Left
="28" Canvas.Top="80"
x
:Name="Foto"/>

</Canvas>

Yukarıdaki Silverlight animasyonu içerisinde dosyanın yüklenme durumunu
gösterecek olan DurumCubugu adında bir dikdörtgenimiz var. Bu
dikdörtgenin genişliğini değiştirerek yükleme işlemini görsel olarak
kullanıcıya yansıtacağız. Söz konusu dikdörtgenin üzerine denk gelecek
şekilde bir de TextBlock yerleştirilmiş. DurumMetin adındaki bu
TextBlock içerisinde 40% şeklinde yükleme durumunu yazılı olarak
göstereceğiz. Son olarak yüklediğimiz ZIP dosyasındaki bir resmi
göstermek için de adı Foto olan bir Image nesnemiz bulunuyor.

Gelin şimdi ilk olarak sunucudan asenkron bir şekilde ZIP paketini
indirecek olan downloader nesnemizi yaratacağımız kodları
inceleyelim.

    var yukleme =
control.CreateObject("downloader");

    yukleme.AddEventListener("Completed", Bitti);

    yukleme.AddEventListener("DownloadProgressChanged", DurumDegisti);

    yukleme.Open("GET", "paket.zip");

    yukleme.Send();

Yukarıdaki kod Silverlight uygulaması ilk çalıştırıldığında hemen
devreye girecek. handleLoad event handler içerisinde bulunan
control parametresinden yola çıkarak yukleme adındaki
downloader nesnemizi yaratıyoruz. Bu nesneye toplam iki tane
EventListener ekleyeceğiz. Download işlemi tamamlandığımda
çalıştırılmak üzere Bitti adındaki bir JavaScript fonksiyonunu
Completed durumuna referans olarak veriyoruz. Ayrıca download
durumunda her değişiklik olduğunda çalıştırılmak üzere bir de
DurumDegisti adında bir JavaScript fonksiyonunu
DownloadProgressChanged durumuna bağlıyoruz. Bu her iki fonksiyonu
da ayrıca birazdan yazacağız. Son olarak sunucudan alacağımız dosya olan
paket.zip dosyasını da belirterek Send() metodu ile talebimizi
sunucuya gönderiyoruz.

Gelelim yükleme durumu değiştiğinde çalıştırılacak olan DurumDegisti
fonksiyonunu yazmaya.

function DurumDegisti(sender,
eventArgs)

{

sender.FindName("DurumCubugu").Width =
sender.DownloadProgress * 245;

sender.FindName("DurumMetin").Text
= Math.floor(sender.DownloadProgress * 100) + "%";

}

Her durum değişikliğinde ilk olarak DurumCubugu adındaki Silverlight
dikdörtgenimizi bularak genişliğini değiştiriyoruz. Söz konusu
dikdörtgenin maksimum genişliği 245 şeklinde olduğu için bize bir
üzerinden gelen DownloadProgress özelliğini doğrudan 245 ile
çarparak dikdörtgenin genişliğine aktarıyoruz. Sonrasında da yine aynı
değeri 100 ile çarparak yüz üzerinden ne kadar yükleme yapıldığını
bularak bu sefer de DurumMetin adındaki TextBlock nesnemizin içerisine
yazdırıyoruz. Bunu yaparken gelen değeri Math.floor adındaki klasik
bir JavaScript fonksiyonu ile yuvarlıyoruz.

Peki download işlemi bittiğinde ne yapacağız? ZIP içerisinden dosyamızı
alarak nasıl Image nesnesine aktaracağız?

function Bitti(sender, eventArgs)

{

sender.findName("Foto").SetSource(sender, "IMG_5237.jpg");

}

Yukarıda da gördüğünüz üzere aslında durum oldukça basit. Image
nesnemiz olan Foto nesnesini bulduktan sonra SetSource metodunu
kullanıyoruz. Kaynak olarak sender, yani ZIP dosyamızdan gelen
veriyi gösterdikten sonra kaynak paketteki dosya adını da vermemiz
yeterli oluyor.

Silverlight uygulamasının tam JavaScript kodu aşağıdaki şekilde
sonlanıyor.

if (!window.UntitledProject4)

  window.UntitledProject4 = {};

 

UntitledProject4.Page = function()

{

}

 

UntitledProject4.Page.prototype =

{

  handleLoad: function(control,
userContext, rootElement)

  {

    var yukleme =
control.CreateObject("downloader");

    yukleme.AddEventListener("Completed", Bitti);

    yukleme.AddEventListener("DownloadProgressChanged", DurumDegisti);

    yukleme.Open("GET", "paket.zip");

    yukleme.Send();

  }

}

function Bitti(sender, eventArgs)

{

sender.findName("Foto").SetSource(sender, "IMG_5237.jpg");

}

function DurumDegisti(sender,
eventArgs)

{

sender.FindName("DurumCubugu").Width =
sender.DownloadProgress * 245;

sender.FindName("DurumMetin").Text
= Math.floor(sender.DownloadProgress * 100) + "%";

}

Hepinize kolay gelsin.