Page 1 of 32
T.C.
MĠLLÎ EĞĠTĠM BAKANLIĞI
BĠLĠġĠM TEKNOLOJĠLERĠ
GELĠġMĠġ ĠNTERNET UYGULAMALARI
ĠLE TARAYICI ĠġLEMLERĠ VE ARAYÜZ
OLUġTURMA
Ankara, 2013
Page 2 of 32
Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve
Öğretim Programlarında yer alan yeterlikleri kazandırmaya yönelik olarak
öğrencilere rehberlik etmek amacıyla hazırlanmıĢ bireysel öğrenme
materyalidir.
Millî Eğitim Bakanlığınca ücretsiz olarak verilmiĢtir.
PARA ĠLE SATILMAZ.
Page 3 of 32
i
AÇIKLAMALAR ................................................................................................................... ĠĠ
GĠRĠġ .......................................................................................................................................1
ÖĞRENME FAALĠYETĠ-2.....................................................................................................3
1. TARAYICI ĠġLEMLERĠ.....................................................................................................3
1.1. Tarayıcı Yazılımının Rolü ............................................................................................3
1.2. Sayfa Yükleme Olayları................................................................................................4
1.2.1. Sayfa Yükleme ......................................................................................................4
1.2.2. Yükleme Sayfasının ÇalıĢma Prensibi...................................................................4
1.2.3. Yükleme Sayfası Hazırlama ..................................................................................6
1.3. Sayfa Hata Olayları ve Hata Ayıklama.......................................................................11
1.3.1. Hata Yönetimi......................................................................................................11
1.3.2. Hata Türleri..........................................................................................................11
1.3.3. Hata Ayıklama.....................................................................................................13
UYGULAMA FAALĠYETĠ ..............................................................................................15
ÖLÇME VE DEĞERLENDĠRME ....................................................................................17
ÖĞRENME FAALĠYETĠ–2 ..................................................................................................18
2. KULLANICI ARAYÜZÜ OLUġTURMA........................................................................18
2.1. Olaylar.........................................................................................................................18
2.2. Metodlar......................................................................................................................20
2.3. Sürükle-Bırak ĠĢlemi ...................................................................................................20
UYGULAMA FAALĠYETĠ ..............................................................................................23
ÖLÇME VE DEĞERLENDĠRME ....................................................................................25
MODÜL DEĞERLENDĠRME ..............................................................................................26
CEVAP ANAHTARLARI.....................................................................................................27
KAYNAKÇA.........................................................................................................................28
ĠÇĠNDEKĠLER
Page 4 of 32
ii
AÇIKLAMALAR
ALAN BiliĢim Teknolojileri
DAL / MESLEK Veri Tabanı Programcılığı
MODÜLÜN ADI GeliĢmiĢ Ġnternet Uygulamaları ile Tarayıcı ĠĢlemleri ve
Arayüz OluĢturma
MODÜLÜN TANIMI
GeliĢmiĢ internet uygulamaları ile tarayıcı iĢlemlerini
gerçekleĢtirmek ve kullanıcı arayüzü oluĢturmak için gerekli
bilgi, beceri ve tutumların kazandırıldığı bir öğrenme
materyalidir.
SÜRE 40/32
ÖN KOġUL “GeliĢmiĢ Ġnternet Uygulamalarında Kontroller ve Veri
Bağlama” modülünü tamamlamıĢ olmak
YETERLĠK Tarayıcı iĢlemlerini yapabilmek ve kullanıcı arayüzü
hazırlayabilmek.
MODÜLÜN AMACI
Genel Amaç
Bu modül ile; gerekli ortam sağladığında yazılım
geliĢtirebileceksiniz.
Amaçlar
1. Tarayıcı iĢlemlerini gerçekleĢtirerek sayfa olaylarını
düzenleyebileceksiniz.
2. Kullanıcı arayüzünü programlayabileceksiniz.
EĞĠTĠM ÖĞRETĠM
ORTAMLARI VE
DONANIMLARI
Ortam: Bilgisayar laboratuvarı
Donanım: Animasyon düzenleme yazılımını çalıĢtırabilecek
yeterlikte bilgisayar
ÖLÇME VE
DEĞERLENDĠRME
Modül içinde yer alan her öğrenme faaliyetinden sonra verilen
ölçme araçları ile kendinizi değerlendireceksiniz. Öğretmen,
modül sonunda ölçme aracı (çoktan seçmeli test, doğru-yanlıĢ
testi, boĢluk doldurma, eĢleĢtirme vb.) kullanarak modül
uygulamaları ile kazandığınız bilgi ve becerileri ölçerek sizi
değerlendirecektir.
AÇIKLAMALAR
Page 5 of 32
1
GĠRĠġ
Sevgili Öğrenci,
Her geçen gün önemini artıran ve yaygınlaĢan XAML tabanlı zengin internet
uygulamalarıyla çalıĢırken en sık karĢılaĢacağınız konulardan ikisi tarayıcı iĢlemlerini
yönetebilmek ve kullanıcı arayüzleri hazırlamaktır.
Tarayıcı üzerinden çalıĢan tüm uygulamaların verimliliği ve iĢlevselliği tarayıcı
kaynaklarının etkin kullanımına bağlıdır. Modülün içerisindeki konuları tamamladığınızda
uygulamanızın sağlıklı ve sorunsuz biçimde çalıĢmasını sağlayacak adımları atabileceksiniz.
Kullanıcılar açısından bir uygulamanın en önemli kısmı Ģüphesiz arayüzüdür. Bu
modülden faydalanarak arayüz elemanlarının rolleri, kullanım alanları ve birbirleriyle
iliĢkilendirilmeleri konularında bilgi ve beceri sahibi olabileceksiniz.
GeliĢmiĢ internet uygulamaları oluĢturabilmek için kullanılabilecek çok sayıda farklı
ürün mevcuttur. Bu modülde süreç XAML teknolojisi üzerinden ele alınacaktır.
Ġnternet üzerinde performansı yüksek ve görselliği yüksek uygulamalar
gerçekleĢtirmek için iyi bir kaynak olabilecek bu modülü baĢarıyla tamamlamanız dileğiyle.
GĠRĠġ
Page 6 of 32
2
Page 7 of 32
3
ÖĞRENME FAALĠYETĠ-2
Tarayıcı iĢlemlerini gerçekleĢtirerek sayfa olaylarını düzenleyebileceksiniz.
Yaygın internet tarayıcılarını inceleyerek benzerlik ve farklılıklarını tespit
ediniz.
Bir internet tarayıcısının yerine getirmesi gereken görevleri tartıĢınız.
ArkadaĢlarınızın internette gezinirken hata mesajlarıyla karĢılaĢıp
karĢılaĢmadıklarını, karĢılaĢmıĢlarsa mesajların ne tür içeriği olduğunu
araĢtırınız.
Yazılımların neden hata mesajları hazırladığını tartıĢınız.
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
Page 8 of 32
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
Page 10 of 32
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.
Page 11 of 32
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.
Page 12 of 32
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.
Page 13 of 32
9
YuklemeSayfam.xaml dosyası için aĢağıdaki kodları kullanalım:
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup- compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Ellipse Canvas.Left="132" Canvas.Top="100" Height="84"
Stroke="Black" Width="84" Fill="#FF4BCB12" StrokeThickness="5"/>
<TextBlock FontSize="20" Canvas.Left="174" Canvas.Top="126"
Height="23" Text="0" x:Name="textBlock1" FontWeight="Bold"
Foreground="#FFF1F8EE" />
<TextBlock Canvas.Left="145" Canvas.Top="126" FontSize="20"
FontWeight="Bold" Height="23" Text="%" Width="25"
Foreground="#FFF3F8F1" />
<Rectangle Canvas.Left="123" Canvas.Top="195" Height="11"
Stroke="Black" Width="100" Fill="Black" />
<Rectangle x:Name="cubuk" Canvas.Left="122" Canvas.Top="195"
Height="11" Stroke="Black" Width="7" Fill="Red" />
</Canvas>
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 <object> etiketleri
arasında tanımlandığını görebiliriz. Bu kısımda var olan “param” etiketlerinin altına
aĢağıdaki satırları ekleyelim:
<param name="splashscreensource"value="YuklemeSayfam.xaml"/>
<param name="onSourceDownloadProgressChanged"
value="onSourceDownloadProgressChanged"/>
Ġ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.
Page 14 of 32
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
<script type="text/javascript">
</script>
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.
Page 15 of 32
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.
Page 18 of 32
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.