Silverlight ile istemci tarafına ZIP arşivi yükleyerek içeriğini kullanmak ve Preloader uygulaması
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.