ASP.NET AJAX Extension JavaScript İstemci Özellikleri (Bölüm 1 - Yapılar)

0 dakikada yazıldı

5801 defa okundu

Düzenle

ASP.NET AJAX Extension dediğimizde çoğunlukla aklımıza UpdatePanel,
Timer gibi sunucu kontrolleri gelir. Oysa ASP.NET AJAX Extension ile
beraber zengin bir JavaScript istemci kütüphanesi de geliyor. Bu makale
serisi boyunca benim Client Extensions olarak adlandırdığım ASP.NET AJAX
Extension'ın istemci taraflı özelliklerine bakacağız. Muhabbeti çok
uzatmadan ilk konumuz ile maratonumuza başlayalım.

Sınıf, Üye ve Kütüphane Yapısı

Class, Member ve Library kelimeleri bizim ASP.NET sunucu taraflı
programlamada özellikle nesne tabanlı programlama yaparken kullandığımız
yapılar nedeniyle tanıdık. Bu bölümümüzde bu yapıları JavaScript
tarafında nasıl kullanabileceğimizi inceleyeceğiz. Örneklerle konuya
girmeden önce hatırlatmak istediğim bir nokta var. ASP.NET AJAX
Extension ile beraber gelen JavaScript özelliklerini ve kütüphanelerini
kullanabilmeniz için bu özellikleri kullanacağınız sayfaların başında
birer ScriptManager yer alması şart. Sunucu kontrollerini kullanırken
zaten ScriptManager bulundurmak zorunda olduğumuzu biliyoruz, aynı durum
istemci taraflı işlevler için de geçerli.

Type.registerNamespace("Takim");

Örneğimize başlarken yukarıdaki kodumuz ile ilk hamlede Takim adinda bir
kütüphane tanımlıyoruz. Bu şekilde bir kütüphane tanımladıkta sonra
kütüphaneye istediğimiz sayıda farklı özellik ve fonksiyon
tanımlayabiliriz. Bir takımımız için oyuncular tanımlayacağız.

Takim.Oyuncu = function(adi,
soyadi, pozisyonu) {

this._adi = adi;
this._soyadi =
soyadi;

this._pozisyonu =
pozisyonu;

}

Tanımladığımız yeni fonksiyonu Takim kütüphanesi içerisinde Oyuncu
sınıfına eşitliyoruz. Aslında Oyuncu diye bir sınıf yoktu, biz eşitleme
işlemini yaparken tanımlanmış oldu. Oyuncu fonksiyonunu toplam üç adet
parametresi var. Bu parametreler fonksiyonu ait iç değişkenlere
aktarılıyor. this. ile başlayan değişkenleri VB.NET'teki private
değişkenlere benzetebiliriz. ASP.NET AJAX kütüphanesi _ (alt çizgi) ile
başlayan değişkenleri özel değişkenler olarak kabul edecek ve dışarıdan
ulaşılmalarına izin vermeyecektir. Peki bu değişkenlere dışarıdan nasıl
ulaşacağız?

Takim.Oyuncu.prototype = {

Adi: function() {
return this._adi;
},

Soyadi: function() {
return this._soyadi;
},

Detay: function() {
return this._adi + ', ' + this._soyadi + ', Pozisyonu:' + this._pozisyonu;
}
}

Oyuncu sınıfına ait üç farklı fonksiyon, bir anlamda property (özellik)
ekliyoruz. Bu fonksiyonlar sınıf yapısının kendisine has
değişkenlerinden değerleri alarak dışarıya sunuyorlar. İçerideki
verileri dışa sunuş şekli konusunda istediğimiz gibi kod yazma şansımız
var. Örneğin Detay fonksiyonu oyuncunun adini, soyadini alarak
pozisyonunu da ekleyerek bir metin döndürüyor.

Tanımlamalarımızı bitirdikten sonra sıra geldi sınıfımızın kaydını
yapmaya.

Takim.Oyuncu.registerClass('Takim.Oyuncu', null, Sys.IDisposable);

Bu kayıt sayesinde yarattığımız sınıf üzerinden oluşturacağımız
değişkenler yine ASP.NET AJAX tarafından kontrol edilerek, gerektiğinde
(dispose) yok edilecek. Tüm bu kodları eğer web sayfanızın direk
içerisine yerleştireceksiniz yapmanız gereken ek bir işlem yok. Fakat
eğerki sizde benim gibi ayrı bir JavaScript dosyası kullanacaksınız
kesinlikle sonunda aşağıdaki satırın bulunması gerekiyor.

if (typeof(Sys) !== 'undefined')
Sys.Application.notifyScriptLoaded();

Bu kod ile ScriptManager'ı JavaScript tanımlamalarımızın
tamamlandığından haberdar ediyoruz. JavaScript kodumuzu aşağıdaki
şekilde sonlandırıyoruz.

Type.registerNamespace("Takim");
 
Takim.Oyuncu = function(adi,
soyadi, pozisyonu) {

this._adi = adi;
this._soyadi =
soyadi;

this._pozisyonu =
pozisyonu;

}
 
Takim.Oyuncu.prototype = {

Adi: function() {
return this._adi;
},

Soyadi: function() {
return this._soyadi;
},

Detay: function() {
return this._adi + ', ' + this._soyadi + ', Pozisyonu:' + this._pozisyonu;
}
}
Takim.Oyuncu.registerClass('Takim.Oyuncu', null, Sys.IDisposable);
 
if (typeof(Sys) !== 'undefined')
Sys.Application.notifyScriptLoaded();

Son olarak hazırladığımız kütüphaneyi kullandığımız örnek bir sayfa ile
bölümümüzü tamamlayalım.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"\>

 
<html xmlns="http://www.w3.org/1999/xhtml"\>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1"
runat="server">

<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript" src="client.js"></script>
<script type="text/javascript" language="JavaScript">
function Yarat()
{
var Oyuncum = new Takim.Oyuncu(
'Oyuncu Adi', 'Oyuncu Soyadý', 'Pivot');
alert(Oyuncum.Detay());
return false;
}
</script>
 
<input id="Button1" onclick="Yarat()" type="button" value="TIKLA" /></div>
</form>
</body>
</html>\

Tüm yazdığımız JavaScript kodlarını Client.js adında bir dosyaya
kaydederek sayfamıza standard yollarla ekledikten sonra sayfa içi
JavaScript kodları ile kullanabiliyoruz. Kodumuzda Oyuncu sınıfından bir
Oyuncu türeterek adını, soyadını ve pozisyonunu da tanımladıktan sonra
oyuncuya ait Detay metodunu çalıştırarak aldığımız metni bir uyarı
kutusu ile gösteriyoruz.

Sıralar

Enumarations olarak bildiğimiz yapıları JavaScript tarafında da kullanma
şansımız var. Bunun için ilk olarak gerekli değerleri içeren
tanımlamalarımızı aşağıdaki şekilde yapmamız gerekiyor.

Type.registerNamespace("Sistem");
 
Sistem.Renk = function(){};

İlk olarak yukarıdaki şekilde Sistem adında bir kütüphane tanımlayarak
içerisine boş bir Renk metodu ekliyoruz. Şimdi de Renk metodu içerisinde
Enumaration tanımlıyor olacağız.

Sistem.Renk.prototype =
{
Mavi: 0x0000FF,
Yesil: 0x00FF00,
Beyaz: 0xFFFFFF
}

Örneğimizde şimdilik üç adet renk tanımlayalım, karşılığında değer
olarak da renkler Hex karşılığını koyalım. Tanımlamalarımız bittiğine
göre sıra geldi kütüphaneye kaydımızı yaptırıp dosyamızı kapatmaya.

Sistem.Renk.registerClass("Sistem.Renk");
 
if (typeof(Sys) !== 'undefined')
Sys.Application.notifyScriptLoaded();

JavaScript dosyamızın tam hali aşağıdaki şekilde olmalı;

Type.registerNamespace("Sistem");
 
Sistem.Renk = function(){};
Sistem.Renk.prototype =
{
Mavi: 0x0000FF,
Yesil: 0x00FF00,
Beyaz: 0xFFFFFF
}
Sistem.Renk.registerClass("Sistem.Renk");
 
if (typeof(Sys) !== 'undefined')
Sys.Application.notifyScriptLoaded();

Sayfamıza bu JavaScript dosyasını linklediğimizde aşağıdaki gibi
kullanabiliyor olacağız.

<script>
function Boya(Renk)
{
document.body.bgColor = eval("Renkler." + Renk);
}
</script>

Yukarıdaki kodumuzda yer alan Boya adındaki fonksiyon kendisine verilen
metin tipindeki renk adını alarak Renkler. metni ile birleştirerek eval
komutu ile JavaScript olarak çalıştıracak. Böylece JavaScript kodu
olarak Renkler.Mavi gibi kodlar ile önceden tanımladığımız Hex
değerlerine ulaşabiliyor olacağız.

Bir sonraki yazımda AJAX Extension'a ait istemci taraflı özelliklere,
JavaScript dizileri üzerinde çalışma yöntemleri ile devam ediyor
olacağız.

Hepinize kolay gelsin.