Gelişmiş İnternet Uygulamaları ile
Tarayıcı İşlemleri Ve Arayüz Oluşturma
1. TARAYICI ĠġLEMLERĠ
1.1. Tarayıcı Yazılımının Rolü
İnternet sayfalarını görüntülemeyi sağlayan tarayıcı yazılımları, sade görünüĢlerinin
arka planında oldukça karmaĢık ve önemli iĢlemler yerine getirir. GeliĢmiĢ İnternet
uygulamaları tarayıcı üzerinde çalıĢan yazılımlardır. Bu nedenle tarayıcı yazılımıyla devamlı
olarak etkileĢim hâlindedir. Ayrıca tarayıcı yazılımı, İnternet uygulamalarının
gerçekleĢtiremeyeceği bazı iĢlemleri yerine getirebildiğinden, yapabileceklerimizin
sınırlarını geniĢletmek konusunda da iĢ birliği yapacağımız bir sistemdir.
Resim 1.1.: XAML uygulamalarının tarayıcıda çalıĢma prensibi
AMAÇ
ARAġTIRMA
ÖĞRENME FAALĠYETĠ–1
4
XAML tabanlı geliĢmiĢ internet uygulamalarında tarayıcı yazılımı kullanıcının
doğrudan etkileĢime geçtiği kısımdır. Uygulamanın tarayıcı tarafından kullanıcının
bilgisayarına yüklenmesi ve hatasız bir Ģekilde çalıĢtırılabilmesi son derece önemlidir.
Muhtemel hata durumlarında ise kullanıcının doğru ve yeterli bir Ģekilde bilgilendirilmesi ve
yönlendirilmesi gereklidir.
1.2. Sayfa Yükleme Olayları
1.2.1. Sayfa Yükleme
Resim 1.2: Sayfa yükleme
Bir internet sitesine bağlandığınızda tarayıcı yazılımı, adres satırında belirlediğiniz
web sunucusuna bağlanarak sayfanın görüntülenmesi için gerekli tüm içeriği sunucudan alır
ve bu içeriği öngörülen formatta görüntüler. Bu süreci sayfanın yüklenmesi olarak ifade
edebiliriz.
Resim 1.1.’de gösterildiği üzere XAML tabanlı internet uygulamanız “.XAP” uzantılı
bir dosyadır. Dolayısıyla XAML uygulaması bulunan bir sayfanın yüklenmesi, ilgili XAP
dosyasının indirilip görüntülenmesi demektir. GeliĢmiĢ internet uygulamaları zengin içerik
sağlamaktadır. Bu nedenle XAP dosyası büyük bir veri ihtiva ediyor olabilir. Özellikle
video, resim, animasyon gibi çoklu ortam ögeleri içeren geliĢmiĢ internet uygulamalarınızın
yüklenmesi esnasında kullanıcılar uzun süre beklemek zorunda kalabilir.
Resim 1.3: Sayfa yükleme animasyonu
Özellikle İnternet ortamında hızın son derece önemli olduğu günümüzde,
kullanıcıların yükleme iĢlemi sırasında uygulamanıza odaklanmalarını sağlamak için
“Yükleme ekranları (SplahScreen)” hazırlamak iyi bir yöntemdir. Resim 1.3’te sayfa
yükleme esnasında görüntülenen varsayılan yükleme animasyonu görülmektedir.
1.2.2. Yükleme Sayfasının ÇalıĢma Prensibi
Yükleme ekranları çok çeĢitli olabilir. Örnek olarak İnternet uygulamalarında en
yaygın olarak gördüğümüz, yükleme iĢlemindeki ilerlemeyi kullanıcıya yüzdelik değer
5
olarak bildiren basit geçiĢ sayfaları tasarlanabilir. Yükleme ekranını uygulamanızla
bağdaĢtırmayı öğrendikten sonra hazırlayabileceğiniz farklı yükleme ekranları yalnızca hayal
gücünüzle sınırlıdır.
Kendi yükleme ekranımızı hazırlarken üç özelliği kullanmak gerekecek:
splashscreensource:
Hazırladığımız yükleme sayfasının yolunu,
hmtl dosyasına bildirirken kullanacağımız
parametredir.
OnSourceDownloadProgressChanged
Yükleme iĢleminde ilerleme gerçekleĢtiğinde
tetiklenerek çalıĢan JavaScript olayıdır.
OnSourceDownloadComplete Yükleme iĢlemi tamamlandığında tetiklenen
JavaScript olayıdır.
Tablo 1.1: Yükleme parametre ve olayları
Hazırlanacak yükleme animasyonu sayfası projenin web tarafında yer almalıdır.
Böylece kullanıcının eriĢim isteğine öncelikle bu sayfa yüklenerek cevap verilecektir.
Hazırladığımız sayfa içerisinde, Tablo 1.1’de gösterilen JavaScript olayları sayesinde asıl
uygulamamızın tüm verilerinin aktarılıp aktarılmadığı kontrol edilecektir. ĠĢlem
tamamlandığında, asıl uygulamamız tarayıcı yazılımı tarafından görüntülenecektir.
Resim 1.4: Yükleme ekranı çalıĢma ilkesi
6
1.2.3. Yükleme Sayfası Hazırlama
Resim: 1.5: Yükleme sayfası hazırlama
Ġlk olarak Visual Studio 2010 içerisinde yeni bir Silverlight uygulaması oluĢturalım.
Uygulamamızın ismini “YuklemeSayfasi” olarak belirleyelim.
Web projemiz için çeĢitli ayarlamalar yapabileceğimiz bir iletiĢim kutusu
görüntülenecektir.
Resim 1.5’te gösterildiği üzere varsayılan ayarlarda herhangi bir değiĢiklik yapmadan
devam edelim.
7
Resim 1.6: Yükleme sayfası hazırlama
Ekranın sağ kısmında yer alan “Solution Explorer” bölümünde projemiz içerisinde yer
alan tüm dosyalar görüntülenmektedir.
Bu kısımdan YuklemeSayfasi.Web üzerinde sağ tıklayalım. Açılan menüde
“Properties” seçeneğine tıklayalım. Böylece web projemiz için gerekli ayarlamaları
yapabileceğimiz arayüz görüntülenecektir.
Sol kısımdaki “Web” sekmesini seçtiğimizde, projemizin “SpecificPage” özelliğinin
“YuklemeSayfasiTestPage.aspx” olarak belirlenmiĢ olduğunu görebiliriz.
Bu kısımdan SpecificPage özelliğini “YuklemeSayfasiTestPage.html” olarak
değiĢtirelim.
Resim 1.7: Yükleme sayfası hazırlama
Böylece, varsayılan olarak aspx türünde tanımlanan web sayfasını devre dıĢı bırakmıĢ
oluyoruz. Projemizi HTML üzerinden çalıĢtırmamız yeterli olacaktır. Web projemize
yükleme ekranı olarak kullanacağımız sayfayı ekleme aĢamasına gelmiĢ bulunuyoruz. Tekrar
YuklemeSayfasi.Web üzerinde sağ tıklayarak sırasıyla “Add”, “New Item” seçeneklerini
seçelim.
8
“Add New Item” penceresinden sol tarafta bulunan Silverlight sekmesini
iĢaretledikten sonra “Silverlight1.0 JScript Page” dosyasını seçelim. Sayfamızı
“YuklemeSayfam.xaml” olarak isimlendirelim ve “Add” butonuna tıklayalım.
Resim 1.8: Web projesine yükleme sayfasının eklenmesi
Sağ kısımdaki Solution Explorer penceresinde “YuklemeSayfam.xaml” ve
“YuklemeSayfam.js” isimlerine sahip iki yeni dosyanın daha yer aldığını görebilirsiniz.
Eğer otomatik olarak düzenlemek üzere görüntülenmemiĢ ise Solution Explorer
penceresinden seçerek YuklemeSayfam.xaml dosyamızı açalım. Hâlihazırda bir kod
bloğunun sayfamızda var olduğunu görebiliriz. Sayfadaki tüm kodları silelim. Bu noktadan
sonra tamamen isteğinize göre bir yükleme sayfası için gerekli XAML kodlarını sayfanıza
eklemelisiniz.
Bizim örneğimizde, yükleme iĢlemindeki ilerlemeyi yüzdelik değerler olarak
göstermek üzere iki adet TextBlock, bir elips Ģekli ve yükleme ilerlemesini temsil edecek
biçimde eni artacak bir dikdörtgen Ģeklinden oluĢan bir sayfa tasarımı yapacağız.
9
YuklemeSayfam.xaml dosyası için aĢağıdaki kodları kullanalım:
Kodlarımızı sayfamıza ekledikten sonra artık uygulamamız yüklenene kadar
kullanıcılara gösterilecek yükleme sayfamız hazırdır. Bir sonraki aĢamada hazırladığınız
sayfayı web projenizin html sayfası içerisinden çağırmanız gerekir.
Solution Explorer penceresinde düzenlemek üzere “YuklemeSayfasiTestPage.html”
dosyasına çift tıklayalım. Kodları incelediğimizde uygulamamızın etiketleri
arasında tanımlandığını görebiliriz. Bu kısımda var olan “param” etiketlerinin altına
aĢağıdaki satırları ekleyelim:
Ġlk satırdaki kod sayesinde daha önce Tablo 1.1’de belirtmiĢ olduğumuz
splashscreensource özelliğini belirlemiĢ oluyoruz. Varsayılan yükleme sayfası yerine bizim
hazırladığımız YuklemeSayfam.xaml sayfasının çağrılmasını sağlıyoruz.
10
Ġkinci satırda ise yükleme iĢlemini denetleyecek bir JavaScript olayı çağırılmaktadır.
Bu JavaScript olayını tanımlamak için Solution Explorer penceresinden
YuklemeSayfasiTestPage.html isimli dosyayı düzenlemek üzere açalım. Bu dosyadaki
blokları arasında bir takım JavaScript kodları mevcuttur. Bu JavaScript kodlarının
altına aĢağıdaki metod kodlarını yazınız.
function onSourceDownloadProgressChanged(sender, eventArgs)
{
sender.findName("textBlock1").Text =
Math.round((eventArgs.progress * 100), 0).toString();
sender.findName("cubuk").Width = eventArgs.progress*100;
}
Tanımladığımız bu onSourceDonwloadChanged fonksiyonu ile YuklemeSayfam.xaml
sayfamız içerisindeki TextBlock nesnemizde görüntülenecek değeri ve ilerlemeyi temsil
edecek dikdörtgen nesnesinin geniĢliğini güncelleyeceğiz.
EventArgs.Progress özelliği içinde yükleme ilerlemesi değeri bulunur. Bu değer 0 ile
1 arasında bir değerdir. % cinsinden ifade etmek için Progress değeri 100 ile çarpılmıĢtır.
Hem textBlock1 üzerinde gösterilmiĢ hem de alttaki yatay çubuk Ģeklindeki dikdörtgenin
geniĢlik özelliği bu değere göre artmıĢtır.
Böylece kendi yükleme sayfamızı hazırlamak için gerekli adımları tamamlamıĢ
oluyoruz. File menüsünden SaveAll seçeneğine tıklayarak tüm dosyalarımızı kaydedelim.
Projenizi derleyerek (F5 Kısayolunu kullanabilirsiniz) yükleme sayfanızın iĢleyiĢini test
edebilirsiniz.
Resim 1.9: Yükleme animasyonunun görüntüsü
Yükleme sayfalarını oluĢturma amacımızın büyük miktarda veri aktarılırken
kullanıcıyı bilgilendirmek olduğunu hatırlayalım. Bu yüzden hazırladığınız yükleme
sayfasını denerken resim, ses, video gibi büyük miktarda verilerden oluĢan bileĢenler içeren
bir geliĢmiĢ İnternet uygulamasını kullanmalısınız.
11
1.3. Sayfa Hata Olayları ve Hata Ayıklama
1.3.1. Hata Yönetimi
Yazılım geliĢtirme süreci de çok sayıda değiĢkene bağlı ve oldukça kompleks iĢlemler
gerektirir. Bu nedenle her yazılımın bir hata yönetimi boyutu vardır. Bu durum bizim
konumuz olan geliĢmiĢ İnternet uygulamaları için de geçerlidir.
Bir kullanıcı olarak kullandığınız uygulamanın bir hataya sebep olması durumunda
sizi haberdar etmesini, sorunun nereden kaynaklandığını açıklamasını ve mümkünse bu
sorunu nasıl çözebileceğinize dair sizi yönlendirmesini beklersiniz. Hata yönetimi,
uygulamalarımız için bu iĢlevleri yerine getiren bir destek mekanizması kurmak anlamına
gelir.
Resim 1.10: Örnek bir Silverlight hata mesajı
1.3.2. Hata Türleri
Hatalar farklı durumlardan kaynaklanabilir. Programcının tüm olası ihtimallere
karĢılık uygun bir tepki hazırlamamıĢ olmasından, yani istisnalar bulunmasından
kaynaklanan hatalara “Ġstisna (Exception)” adı verilir. “Exception” terimi artık her tür hata
durumunu ifade eden genel bir ifade hâline gelmiĢtir.
Hataları gerçekleĢtikleri zaman göre Ģöyle sınıflayabiliriz:
Derleme Hataları (Compile Errors)
Kod yazımından kaynaklı, uygulamanın
çalıĢtırılmasından önce meydana gelen
hatalar
ÇalıĢma Zamanı Hataları (Runtime
Errors)
Uygulama çalıĢtırıldıktan sonra meydana
gelen hatalar
Tablo 1.2 HatalarıN gerçekleĢtikleri zamana göre sınıflanması
Hatalar kaynaklandıkları nedenlere göre de çeĢitlilik arz eder. Uygulamanızın
niteliğine göre gerçekleĢme olasılığı diğerlerinden daha yüksek olan durumlar için kendi hata
yöneticinizi düzenlemek isteyebilirsiniz.
12
Web projemizin HTML sayfasında Silverlight uygulamamıza ait etiketleri
içerisinde varsayılan olarak bir hata iĢleyici fonksiyon tanımlanmıĢtır.
Aynı HTML sayfa içerisinde bu satırda iĢaret edilen “onSilverlightError” isimli
JavaScript fonksiyonu ise Ģöyle tanımlıdır:
13
ÇeĢitli hata türleri için hatanın nitelik ve kaynağına dair bildirimler üreten bu
JavaScript fonksiyonunu kendi ihtiyaçlarınıza göre yeniden düzenleyebilir ya da tamamen
yeni bir fonksiyonu baĢtan yazarak projenize dâhil edebilirsiniz.
1.3.3. Hata Ayıklama
Doğası gereği hatalara oldukça açık olan uygulama geliĢtirme sürecinde problemleri
tespit etme ve düzeltme iĢlemine “hata ayıklama”(debugging) adı verilir. Bu modülde konu
edindiğimiz Silverlight teknolojisi ile uygulama geliĢtirirken Visual Studio 2010 içerisinde
bulunan Hata Ayıklayıcı (Debugger) özelliği size çok yardımcı olacaktır.
Hata ayıklayıcı hem uygulamanızı kodlarken hem de çalıĢma zamanında denerken
problemleri denetleyecek ve size ayrıntılı raporlar sunacaktır. Bu özellik varsayılan olarak
aktif değilse aktifleĢtirmeniz gerekir.
Resim 1.11: Web projesi seçme
Ġlk olarak Visual Studio 2010 içerisinde, sağ kısımda bulunan Solution Explorer
penceresinden Web projemizi seçelim ve sağ tıklayalım.
Açılan menüde en alt kısımda bulunan “Properties” seçeneğine tıklayarak devam
edelim.
Ekranda görüntülenen “Properties” penceresinde sol kısımdan “Web” sekmesini
seçelim. Bu sekmede sayfanın en altında yer alan “Debuggers” alanında “Silverlight”
seçeneğini iĢaretleyelim ve projemizi kaydedelim.
14
Resim 1.12: Kaydetme
Hata ayıklama iĢlemlerine iliĢkin detaylı bilgiyi GeliĢmiĢ Ġnternet Uygulamalarında
Dinamik Programlama modülünde bulabilirsiniz.
15
UYGULAMA FAALĠYETĠ
ĠĢlem Basamakları Öneriler
Proje editör programını
kullanarak yeni bir
Silverlight projesi
oluĢturunuz.
FileNew ProjectSilverlightSilverlight
Application
Projenin web tarafına bir
xaml dosyası ekleyiniz.
Projenin web klasörünün üzerinde sağ tuĢ menüsünü
görüntüleyiniz.
AddNew ItemSilverlightSilverlight 1.0
Javascript Page
Xaml dosyası içerisine
yükleme animasyonunu
için gerekli xaml
kodlarını yazınız.
Üç adet Rectangle ve iki adet TextBlock kullanarak
aĢağıdaki gibi bir tasarım yapabilirsiniz (Üzerinde 0
yazan TextBlock ismi “textBlock1” ve alttaki küçük
kırmızı dikdörtgenin adı “kutu” olmalıdır.).
Projenin html uzantılı
olan dosyasını baĢlangıç
sayfası yapınız.
Sayfa üzerinde sağ tuĢa tıklayınız.
Set As Start Page komutunu tıklayınız.
Projenin html kodlarını
görüntüleyiniz.
bloğunun içine yan
taraftakine benzer
parametre tanımlamalarını
yapınız (Kendi
oluĢturduğunuz sayfa
adına göre).
JavaScript kod bloğu
içindeki kodların altına
yan taraftaki fonksiyon
tanımlamasını yapınız.
function onSourceDownloadProgressChanged(sender,
eventArgs)
{
sender.findName("textBlock1").Text =
Math.round((eventArgs.progress * 100),
0).toString();
sender.findName("cubuk").Width =
eventArgs.progress*100;
}
Projeyi çalıĢtırınız. F5 tuĢunu kullanınız.
UYGULAMA FAALĠYETĠ
16
KONTROL LĠSTESĠ
Bu faaliyet kapsamında aĢağıda listelenen davranıĢlardan kazandığınız beceriler için
Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) iĢareti koyarak kendinizi
değerlendiriniz.
Değerlendirme Ölçütleri Evet Hayır
1. Yükleme sayfalarının iĢlev ve gerekliliğini kavradınız mı?
2. HTML-JavaScript-Silverlight ortamları arasındaki iliĢkiyi
kavradınız mı?
3. Yükleme sayfasından asıl Silverlight uygulamasına geçiĢi
sağlayabildiniz mi?
DEĞERLENDĠRME
Değerlendirme sonunda “Hayır” Ģeklindeki cevaplarınızı yeniden gözden geçiriniz.
Kendinizi yeterli buluyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız “Evet”
ise “Ölçme ve Değerlendirme” bölümüne geçiniz.
17
ÖLÇME VE DEĞERLENDĠRME
AĢağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği iĢaretleyiniz.
1. Yükleme sayfası tasarımında kullanılan teknolojilerin iĢleyiĢ sırası hangisinde doğru
verilmiĢtir?
A) Silverlight-HTML-JavaScript
B) JavaScript-Silverlight-HTML
C) HTML-Silverlight-JavaScript
D) HTML-JavaScript-Silverlight
2. Bir yükleme sayfasının bulunması gereken yer aĢağıdakilerden hangisidir?
A)Silverlight projesi B) Silverlight Web projesi
C) Debug klasörü D) Herhangi Bir XAML dosyası
3. AĢağıdakilerden hangisi yükleme iĢleminin tamamlanıp tamamlanmadığını denetleyen
JavaScript olayıdır?
A) onError B) splashscreensource
C) onSourceDownloadComplete D) onLoad
4. AĢağıdakilerden hangisi HTML dosyası içerisinde yükleme sayfası kaynağını
belirleten parametredir?
A) object B) src
C) splashscreensource D) id
5. Silverlight uygulamasının veri aktarımının denetlenmesi gibi sistem kaynaklarıyla
ilgili bir görevi yerine getirmek için aracı olarak kullandığı ortam hangisidir?
A) JavaScript B) HTML C) XAML D) XML
6. Kullanıcının uygulamayla ilgili sorunlardan haberdar olması ve çözüme
yönlendirilmesi iĢine ne ad verilir?
A) Hata Düzeltici
B) Hata Yönetimi
C) Hata Ayıklama
D) Hata Yakalama
DEĞERLENDĠRME
Cevaplarınızı cevap anahtarıyla karĢılaĢtırınız. YanlıĢ cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz.
ÖLÇME VE DEĞERLENDĠRME
18
ÖĞRENME FAALĠYETĠ–2
GeliĢmiĢ İnternet uygulamalarında arayüz hazırlamayı öğreneceksiniz.
Masaüstü uygulamalarında ya da internette gezinirken bilgisayara bir komut
vermek ya da bir bilgi girmek için kullandığınız elemanların bir listesini
yapınız.
Bir uygulamanın kullanımında arayüzün etkisini arkadaĢlarınıza ve size ait
tecrübeleri derleyerek değerlendiriniz.
2. KULLANICI ARAYÜZÜ OLUġTURMA
XAML tabanlı geliĢmiĢ internet uygulamalarında butonlar, metin kutuları, liste
kutuları gibi kontrollerden faydalanarak çeĢitli arayüz tasarımları yapabilmekteyiz.
Resim 2.1: ÇeĢitli arayüz elemanları
2.1. Olaylar
GeliĢmiĢ İnternet uygulamaları hazırlarken en çok kullanacağımız programlama
kavramlarından birisi “olay”dır. Olaylar (Event), belirli durum veya eylemlerin
gerçekleĢmesi hâlinde yürütülecek iĢlemleri belirleyen yapılardır. Örneğin bir kontrole
tıklanması, bir metin girilmesi, bir nesnenin taĢınması
Tasarım editöründe bir kontrole olay eklemek için öncelikle nesne seçilir. Ekranın sağ
kısmındaki Properties penceresinde yer alan Events düğmesine tıklayarak o nesneye iliĢkin
kullanılabilecek olaylar listelenir.
AMAÇ
ARAġTIRMA
ÖĞRENME FAALĠYETĠ–2
19
Resim 2.2: Buton olayları
Kontrollere ait olayları programlayabilmek için kontrollere isim verilmesi
gerekmektedir.
XAML tabanlı uygulamalarda kontrollerin tümü için kullanılan ortak olaylar olduğu
gibi yalnızca bazı kontrollere özgü olaylar da mevcuttur.
Events panelinde kullanılmak istenen olayın sağ yanında bulunan alana çift tıklanarak
olay oluĢturulur. Böylece olayla ilgili kodlamanın yapılacağı C# kod sayfası görüntülenir.
Resim 2.3. Click olayına ait C# kod bloğu
Olay için hazırlanan metod içerisine ilgili olay gerçekleĢtiğinde yürütülmesi istenen
kodlar yazılır.
Resim 2.4: Click olayına ait örnek C# kodu
XAML tabanlı geliĢmiĢ internet uygulamaları içerisinde farklı ihtiyaçlar için çok
sayıda olay tanımlanmıĢtır. Arayüz programlarken en çok kullanılan bazı olaylar ve kısa
açıklamaları Tablo 2.1’de verilmiĢtir.
20
En çok kullanılan olaylar
Click Kontrol üzerine tıklanmasıyla tetiklenir.
MouseLeftButtonDown Farenin sol tuĢuna her basıldığında tetiklenir.
MouseLeftButtonUp Basılı durumdaki farenin sol tuĢu her bırakıldığında
tetiklenir.
MouseMove Fare hareket ettikçe tetiklenir.
KeyDown Klavyeden herhangi bir tuĢa basıldığında tetiklenir.
GotFocus Kontrol seçili hâle getirildiğinde tetiklenir.
MouseEnter Fare kontrol üzerine geldiğinde tetiklenir.
MouseLeave Fare kontrol üzerinden ayrılınca tetiklenir.
Tablo 2.1: Silverlight içerisinde en çok kullanılan olaylar ve tanımları
2.2. Metodlar
GeliĢmiĢ İnternet uygulamaları tasarlarken kullandığımız her kontrolün yerine
getirebildiği kendisine özgü iĢlemler bulunur. Bu iĢlemlere “metod” adı verilir.
Tasarım editöründe C# kod sayfasında ilgili kontrole verilen isim yazıldıktan sonra
“.”(Nokta) ayracı konulduğunda IntelliSense özelliği o kontrol için mevcut bulunan özellik,
olay ve metodları listeler. Bu liste içerisinde ġekil 7.1’de gösterilen simge metodları ifade
etmektedir.
Resim 2.5: Metod ekleme
2.3. Sürükle-Bırak ĠĢlemi
Sayfa tasarımında kullandığımız kontrolleri sayfa üzerinde istenilen bölgeye
taĢıyabilmek için ilgili nesnenin MouseLeftButtonDown, MouseLeftButtonUp ve
MouseMove olaylarını kullanmalıyız.
Sürüklenecek nesnenin bir canvas içerisinde bulunması gereklidir. Program koduyla
canvas içerisindeki nesnelerin üst konum özelliğini değiĢtirmek için Canvas.SetTop( )
metodunu kullanmalıyız. Benzer Ģekilde bir kontrolün üst konum değerini elde etmek için
Canvas.GetTop() metodu kullanılır.
Kontrollerin sol konum değerlerini almak için Canvas.GetLeft() metodu kullanılır.
Ayrıca sol konum değerlerini ayarlamak için Canvas.SetLeft() metodu kullanılmalıdır.
21
Örnek: Sayfa üzerinde bulunan bir elips nesnesinin fareyle istenen bölgeye
taĢınabilmesi için gerekli olay ve metodları kullanalım.
bool surukleniyor = false;
Point ilkkonum;
private void ellipse1_MouseLeftButtonDown(object sender,
MouseButtonEventArgs e)
{
surukleniyor = true;
ilkkonum = e.GetPosition(ellipse1);
}
private void ellipse1_MouseMove(object sender, MouseEventArgs e)
{
Point yenikonum=e.GetPosition(ellipse1);
if (surukleniyor)
{
Canvas.SetTop(ellipse1,Canvas.GetTop(ellipse1)+(yenikonum.Yilkkonum.Y));
Canvas.SetLeft(ellipse1, Canvas.GetLeft(ellipse1) + (yenikonum.X -
ilkkonum.X));
}
}
private void ellipse1_MouseLeftButtonUp(object sender,
MouseButtonEventArgs e)
{
surukleniyor = false;
}
Bu program kodlarının çalıĢma yöntemi ise Ģöyledir:
Kullanıcı elipsin üzerinde farenin sol tuĢuna bastığı anda MouseLeftButtonDown
olayı tetiklenir. Bu olay içerisinde surukleniyor değiĢkeni true yapılır ve farenin elips
üzerindeki koordinatları ilkkonum isimli değiĢkene alınır.
Kullanıcı fareyi her hareket ettirdiğinde farenin elips üzerindeki koordinatları
yenikonum isimli değiĢkene alınır. Ve ayrıca surukleniyor değiĢkeni kontrol edilir. Eğer bu
değiĢken true ise farenin sol tuĢu basılı haldeyken hareket ettiriliyor demektir. Bu Ģarta bağlı
olarak yenikonum ile ilk konum arasındaki fark kadar elipsin konumu kaydırılır.
Kullanıcı fareyi bıraktığında surukleniyor değiĢkeni false yapılır.
Ekran görüntüsü: Nesnenin fareyle sürüklenebildiği görülecektir.
22
Resim 2.6: Ekran görüntüsü
23
UYGULAMA FAALĠYETĠ
Uygulama: Yönergeleri takip ederek Silverlight ile temel sürükle-bırak iĢlemlerini
içeren bir geliĢmiĢ internet uygulaması hazırlayınız.
ĠĢlem Basamakları Öneriler
Proje editör
programını
kullanarak yeni bir
Silverlight projesi
oluĢturunuz.
FileNew ProjectSilverlightSilverlight Application
MainPage.xaml
sayfası üzerine bir
elips ekleyiniz.
Ġç dolgu rengi ve boyutlarını gerekli Ģekilde ayarlayınız.
Elipsin
MouseLeftButtonDo
wn metodunu
oluĢturunuz.
Elips seçildikten sonra Properties panelindeki Events
bölümünü kullanınız.
Metod içine gerekli
kodları yazınız.
private void ellipse1_MouseLeftButtonDown(object
sender, MouseButtonEventArgs e)
{
surukleniyor = true;
konum = e.GetPosition(ellipse1);
}
Elipsin MouseMove
metodunu
oluĢturunuz.
Elips seçildikten sonra Properties panelindeki Events
bölümünü kullanınız.
Metod içine gerekli
kodları yazınız.
private void ellipse1_MouseMove(object sender,
MouseEventArgs e)
{
Point mesafe=e.GetPosition(ellipse1);
if (surukleniyor)
{
Canvas.SetTop(ellipse1,Canvas.GetTop(ellipse1)+(mesafe.Ykonum.Y));
Canvas.SetLeft(ellipse1, Canvas.GetLeft(ellipse1) +
(mesafe.X - konum.X));
}
}
Elipsin
MouseLeftButtonUp
metodunu
oluĢturunuz.
Elips seçildikten sonra Properties panelindeki Events
bölümünü kullanınız.
Metod içine gerekli
kodları yazınız.
private void ellipse1_MouseLeftButtonUp(object
sender, MouseButtonEventArgs e)
{
surukleniyor = false;
}
Projeyi çalıĢtırınız. F5 tuĢunu kullanabilirsiniz.
UYGULAMA FAALĠYETĠ
24
KONTROL LĠSTESĠ
Bu faaliyet kapsamında aĢağıda listelenen davranıĢlardan kazandığınız beceriler için
Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) iĢareti koyarak kendinizi
değerlendiriniz.
Değerlendirme Ölçütleri Evet Hayır
1. Olay ve metod kavramlarını kavrayabildiniz mi?
2. Kontrollere olay ekleme iĢlemini gerçekleĢtirebildiniz mi?
3. Sürükle-Bırak iĢlemini sorunsuz bir Ģekilde gerçekleĢtirebildiniz
mi?
DEĞERLENDĠRME
Değerlendirme sonunda “Hayır” Ģeklindeki cevaplarınızı bir daha gözden geçiriniz.
Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız
“Evet” ise “Ölçme ve Değerlendirme” bölümüne geçiniz.
25
ÖLÇME VE DEĞERLENDĠRME
AĢağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği iĢaretleyiniz.
1. AĢağıdakilerden hangisi XAML tabanlı zengin internet uygulamalarında kullanılan bir
olaydır?
A) MouseMove B) Row
C) Column D) Width
2. Bir nesneyle ilgili belirli durumlarda gerçekleĢtirilecek iĢlemlerin
tanımlanacağı kod sayfasına eriĢmek için editör içinde hangi kısım kullanılır?
A) Objects AndTimeline paneli B) Events paneli
C) Properties penceresi D) Solution Explorer sekmesi
3. Bir nesnenin sol konum değerini ayarlamak için aĢağıdaki metodlardan hangisi
kullanılır?
A) Canvas.SetLeft() B) Top
C) Left D) Canvas.SetTo()
4. Bir nesnenin üst konum değerini ayarlamak için aĢağıdaki metodlardan hangisi
kullanılır?
A) Top B) Left
C) Canvas.SetTop() D) Canvas.SetLeft()
5. Biir nesnenin üzerinde farenin hareket ettirilmesi durumunda aĢağıdaki
olaylardan hangisi çalıĢır?
A) Click B) MouseLeave C) MouseMove D) MouseOut
DEĞERLENDĠRME
Cevaplarınızı cevap anahtarıyla karĢılaĢtırınız. YanlıĢ cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise “Modül Değerlendirme”ye geçiniz.
ÖLÇME VE DEĞERLENDĠRME
26
MODÜL DEĞERLENDĠRME
AĢağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği iĢaretleyiniz.
1. Yükleme sayfasının XAML projesine dahil edilmesinde hangisi kullanılır?
A) C# C) HTML
B) XAML D) XML
2. AĢağıdakilerden hangisi yükleme sayfası olarak kullanılmaya uygun değildir?
A) JOption sayfası
B) XAML sayfası
C) HTML sayfası
D) Grid kontrolü
3. AĢağıdakilerden hangisi bir sürükle-bırak iĢleminde kullanılan temel olaylardan birisi
değildir?
A) MouseLeftButtonDown C) MouseLeftButtonUp
B) MouseEnter D) MouseMove
4. AĢağıdakilerden hangisi XAML tabanlı geliĢmiĢ İnternet uygulamalarında hata
yönetimi için kullanılamaz?
A) Bir XAP dosyası C) Visual Studio 2010 Debugger
B) C# fonksiyonları D) JavaScript fonksiyonları
AĢağıdaki cümlelerin baĢında boĢ bırakılan parantezlere, cümlelerde verilen
bilgiler doğru ise D, yanlıĢ ise Y yazınız.
5. ( ) Söz diziminden kaynaklı sorunlar derleme hatası olarak isimlendirilir.
6. ( ) Visual Studio 2010 içerisinde entegre bir Silverlight hata ayıklayıcısı mevcuttur.
7. ( ) Uygulamanın kullanıcıyla etkileĢim kuran kısmına arayüz adı verilir.
8. ( ) Kontroller içerisinde bulundukları Layout kontrolünden bağımsız olarak daima
aynı Özellikler ile tanımlanır.
DEĞERLENDĠRME
Cevaplarınızı cevap anahtarıyla karĢılaĢtırınız. YanlıĢ cevap verdiğiniz ya da cevap
verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise bir sonraki modüle geçmek için öğretmeninize baĢvurunuz.
MODÜL DEĞERLENDĠRME
27
CEVAP ANAHTARLARI
ÖĞRENME FAALĠYETĠ-1’ĠN CEVAP ANAHTARI
1 D
2 B
3 C
4 C
5 A
6 C
ÖĞRENME FAALĠYETĠ-2’NĠN CEVAP ANAHTARI
1 A
2 B
3 A
4 C
5 C
MODÜL DEĞERLENDĠRME’NĠN CEVAP ANAHTARI
1 B
2 A
3 B
4 A
5 Doğru
6 Doğru
7 Doğru
8 YanlıĢ
CEVAP ANAHTARLARI
28
KAYNAKÇA
KARAKAġ, Yusuf, Silverlight’a GiriĢ, Ġstanbul, 2010.
GHODA, Ashish, IntroducingSilverlight 4, http://it-ebooks.info/book/461/,
(10.04.2013 / 14:00)
KAYNAKÇA
0 yorum
Yorum Gönder