full programlar-oyun yamalari-dizi arsivi-msn-cep-telefonu-ipod  

'ATLAS' kontrolleri

Webmaster kategorisinde ve Asp , AspNet Scriptler forumunda, bulunan 'ATLAS' kontrolleri konusunu görüntülemektesiniz. ASP.NET ‘ATLAS’ zengin istemci tarafli uygulama gelistirme için bir tane framework sunar. Bu framework istemci tarafina yüklenen ve sayfada referans ...


Geri Git   full programlar-oyun yamalari-dizi arsivi-msn-cep-telefonu-ipod > Webmaster > Asp , AspNet Scriptler

Bu sayfayı tekrar yükle 'ATLAS' kontrolleri

Maşaallah

Kayıt SSS Üye Listesi Takvim Konuları Okundu İşaretle



Sayfayi E-Mail olarak gönder Bu konudan arkadaşınızında haberdar olmasını istermisiniz? Tıklayın konuyu arkadaşınızla paylaşın!




Yeni Konu Gönder Cevap Yaz

 

LinkBack Konu Araçları Mod Seç
Eski 10-03-2008, 11:45   #1 (permalink)
Poll 'ATLAS' kontrolleri
ASP.NET ‘ATLAS’ zengin istemci tarafli uygulama gelistirme için bir tane framework sunar. Bu framework istemci tarafina yüklenen ve sayfada referans olarak kullanilan javascript kütüphanelerini içerir. Developer’lar bu framework’ü kullanarak, farkli tarayicilarda ayni kodun çalismasi saglanir. Bu sayede her tarayiciyi desteklemek için ayni islemi gerçeklestiren sadece bir kod blogu yazilir. JavaScript içinde varolan nesne tabanli prensipleri kullanarak, kontroller ve bilesenler ile çalisabileceginiz sekilde JavaScript kütüphaneleri tasarlanmistir. Asagida geleneksel yollarla ‘ATLAS’ bilesenlerini kullanabileceginiz bir örnek uygulama ile, dekleratif olarak ayni islemleri, javascript kullanmadan nasil gerçeklestirebileceginizi görebilirsiniz. Böylece giris olarak ATLAS'in neler getirdigini ve ne sekilde bir farklilik yarattigini anlayabilirsiniz.
Öncelikle Visual Studio 2005’de bir tane Atlas uygulamasi açin. Bir tane .asx sayfasi ekleyin ve için asagidaki kodlari body taginin arasina kopyalayip yapistirin. Ya da asagida anlatilanlarin [LinkLeri Görmek İçin Lütfen Üye oLunuz Üye oLmak için tıkLayın] indirebilirsiniz.
<atlas:ScriptManager runat="server" ID="ScriptManager1"/>
<div id="panel">
Asagidaki DropDown kontrolündeki seçimlerinize göre bu
bölümün rengi degisecektir.
</div><br />
Renk Seçin : <select name="select" class="itemselect" id="colorSelect">
<option value="normal">Normal</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="notset">NotSet</option>
</select><hr />
<input name="text" type="text" id="textBox"/><br/>
<input name="button" type="button" class="buttonstyle"
id="visibilityButton" value="Görünürlügü Degistir" />
<input name="button" type="button" class="buttonstyle"
id="enabledButton" value="Seçilebilirligini Degistir" />
<hr />

<script type="text/javascript">
//Kontrollerden sonra JavaScrip yaziliyor.
var g_panel;
var g_selColor;
var g_label;
var g_tbx;

//Sayfa yüklenirken ATLAS kontrolleri olusturuluyor.
function pageLoad()
{
// Atlas Panel'i yaratiliyor ve ilk css degeri veriliyor.
g_panel = new Sys.UI.Control($('panel')); //document.getElementById("panel");
//yaratilan ATLAS panelin özellikleri baslangiç konumuna getiriliyor
g_panel.initialize();
//ATLAS panel'in css özelligi degistiriliyor.
g_panel.set_cssClass('normal');

g_selColor = new Sys.UI.Select($('colorSelect'));
g_selColor.initialize();
//ATLAS seçim aracinin degeri degistigi anda hangi fonksiyonun kullanilacagi
//belirleniyor
g_selColor.selectionChanged.add(onSelectColor);
g_tbx = new Sys.UI.TextBox($('textBox'));
g_tbx.initialize();
g_tbx.set_text("Basit Bir Textbox Örnegi");
g_tbx.set_cssClass("textBox");

var btnVisibility = new Sys.UI.Button($('visibilityButton'));
btnVisibility.initialize();
//ATLAS butonuna tiklandigi zaman hangi fonksiyonun çalisacagi belirleniyor
btnVisibility.click.add(onSetVisibilityClick);

var btnEnabled = new Sys.UI.Button($('enabledButton'));
btnEnabled.initialize();
btnEnabled.click.add(onSetEnabledClick);
}
//onSelectColor fonksiyonu ile DropDown kontrolün onchange() olayinda
//gerçeklesecek islemleri içerir
function onSelectColor(sender, args) {
g_panel.set_cssClass(g_selColor.get_selectedValue( ));
}
//Buton'un OnClick() olayinda gerceklesecek islemleri içerir
function onSetVisibilityClick() {
g_tbx.set_visible(!g_tbx.get_visible());
}
//Buton'un OnClick() olayinda gerceklesecek islemleri içerir
function onSetEnabledClick() {
g_tbx.set_enabled(!g_tbx.get_enabled());
}
</script> g_tbx = new Sys.UI.TextBox($('textBox')); satiri aslinda document.getElementById("textBox"); ile aynidir. Sayfa içinde kullanilan TextBox HTML kontrolünün id'si ile ATLAS kontrolü yaratiliyor ve bu kontrolün set_cssClass() metodu ile css özelligi atanmis oluyor. Ya da ayni sekilde buton HTML kontolü ATLAS kontrolü ile iliskilendiriliyor ve click.add() metodu ile butona tiklandiginda çalisacak fonksiyon tanimlaniyor.

pageLoad() fonksiyonu ile sayfa yüklendigi anda ATLAS istemci kontrolleri yaratiliyor. Bu istemci kontrolleri Sys.UI.Control($('panel')) örnegindeki gibi yaratiliyor. Daha sonra ilgili ATLAS kontrolünün özellikleri initialize ediliyor ve bazi özelliklerine set_cssClass, get_cssClass, set_enabled veya set_visible ile erisilip istenildigi takdirde de degistirilebiliyor. Sayfa içindeki bu kontrollerin hepsine ATLAS'in bize saglamis oldugu Framework'ü kod yazarak kullanmis oluyoruz. Geleneksel JavaScript kodlamasina benzese de yazim dili farklidir. Her ne kadar yazim dili farkli olsa da yazilan JavaScript'in neler yaptigini anlayabiliyoruz. Bu sekilde de Atlas'i kullanabilecegimiz gibi bu islemlerin aynisini deklaratif olarak da yapmamiz mümkün. Asagida, yukaridaki kodun aynisini yapan islemleri deklaratif olarak xml benzeri bir kodlamayla nasil yapilabilecegini görebilirsiniz.
<atlas:ScriptManager runat="server" ID="ScriptManager1"/>
<div class="description">
<div id="panel">
Asagidaki DropDown kontrolündeki seçimlerinize göre bu bölümün
rengi degisecektir.
</div>
<br />
Renk Seçin :&nbsp;<select id="colorSelect" class="itemselect">
<option value="normal">Normal</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="notset">NotSet</option>
</select>
<span id="colorLabel"></span>
<hr />
<input id="textBox" type="text"/>
<input type="button" id="visibilityButton" class="buttonstyle"
value="Toggle Visibility Property" />
<input type="button" id="enabledButton" class="buttonstyle"
value="Toggle Enabled Property" />
</div>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<control id="panel" cssClass="normal">
<bindings>
<binding id="setCss" dataContext="colorSelect" dataPath="selectedValue"
property="cssClass" />
</bindings>
</control>
<select id="colorSelect">
<selectionChanged>
<invokeMethod target="setCss" method="evaluateIn" />
<setProperty target="colorLabel" property="text" value="Selected color" />
</selectionChanged>
</select>
<textBox id="textBox" text="Simple text box control" cssClass="textBox">
<bindings>
<binding id="setEnabled" dataContext="textBox" dataPath="enabled"
property="enabled" transform="Invert" automatic="false" />
<binding id="setVisibility" dataContext="textBox" dataPath="visible"
property="visible" transform="Invert" automatic="false" />
</bindings>
</textBox>
<button id="visibilityButton">
<click>
<invokeMethod target="setVisibility" method="evaluateIn" />
</click>
</button>
<button id="enabledButton">
<click>
<invokeMethod target="setEnabled" method="evaluateIn" />
</click>
</button>
<label id="colorLabel" text="" />
</components>
</page>
</script> Yukaridaki koda dikkat edecek olursak <page></page> kök elementleri arasina sayfa da kullanilacak 'ATLAS' kontrollerini ve bu kontrollerin ilk degerlerini ve gerceklesen olaylar çerçevesinde hangi islemleri gerçeklestirecegini <components></components> elementleri arasina yaziyoruz. Asagida bu elementleri ve hangi attributes'larin ne ise yaradigini sirasiyla inceleyelim
<control id="panel" cssClass="normal">
<bindings>
<binding id="setCss" dataContext="colorSelect" dataPath="selectedValue" property="cssClass" />
</bindings>
</control>
<control id="panel" cssClass="normal"> ile id'i panel olan DIV html kontrolünü ATLAS kontrolü olarak kullanacagimizi ve bu kontrolün baslangiç CSS'inin normal oldugunu belirtiyoruz.
<binding id="setCss" dataContext="colorSelect" dataPath="selectedValue" property="cssClas /> ile id'si panel olan DIV kontrolünün (artik ATLAS kontrolü olarak kullanacagiz) id'si colorSelect olan DropDown kontrolü ile iliskilendiriyoruz. Bu iliskiyi düzeyini ise property özelliginde cssClass olarak belirliyoruz. cssClass özelliginin degerini de dataPath özelliginde belirliyoruz. dataPath özelliginin DropDown kontrolünün seçilen degerine göre degisecegini söylüyoruz. Yani id'si colorSelect olan DropDown kontrolündeki degerlerin, id'si panel olan DIV kontrolünün css özelligini degistirecegini gösteriyoruz.
<select id="colorSelect">
<selectionChanged>
<invokeMethod target="setCss" method="evaluateIn" />
<setProperty target="colorLabel" property="text" value="Selected color" />
</selectionChanged>
</select> Yukaridaki deklaratif ifade, id'si colorSelect olan DropDown kontrolündeki degerlerin degistiginde handi özelliklerin nasil degisecegini bildiriyoruz. Aslinda bir nevi fonksiyon yaziyoruz. Fakat bunu deklaratif olarak yapacagiz.
selectionChanged elementi ile hangi olayda nelerin yapilacagini belirliyoruz. Buradaki klasik JavaScript'teki olay gibi DropDown'in degerinin degismesi olayi atesleniyor. Yani JavaScript'den alisik olunan OnChange() olayidir.
<invokeMethod target="setCss" method="evaluateIn" /> ile <binding/> elementleri arasinda belirledigimiz olayin olmasini sagliyoruz. DropDown'in degeri degistiginde id'si setCss olan binding'de tanimlanan iliskilerin gerçeklesmesini sagliyoruz. DropDown'in degeri degistiginde, degisen degeri al ve bunu css özelligine yaz diyoruz. Böylece her degisimde DIV'in css'i degismektedir.
<setProperty target="colorLabel" property="text" value="Selected color" /> ile de DropDown'da seçilen degerin text özelligi alinip id'si colorLabel olan SPAN kontrolüne yazdirilmasi saglaniyor. DropDown'daki seçimin text özelligi yazdiriliyor
<textBox id="textBox" text="Simple text box control" cssClass="textBox">
<bindings>
<binding id="setEnabled" dataContext="textBox" dataPath="enabled" property="enabled" transform="Invert" automatic="false" />
<binding id="setVisibility" dataContext="textBox" dataPath="visible" property="visible" transform="Invert" automatic="false" />
</bindings>
</textBox>
burda da textbox'in ilk degerleri text ve cssClass'in ne olacagi ayarlaniyor. Binding ile hangi özelligin ne ile degistirilecegi belirleniyor ve bu degisim
<button id="visibilityButton">
<click>
<invokeMethod target="setVisibility" method="evaluateIn" />
</click>
</button>
Buton'un click özelligi ile iliskilendirilip <invokeMethod/> ile <binding/> tagi içindeki tanimlanan özelliklerin olusmasini sagliyor. Yani textbox'in visible özelligini degistiriyor.
Deklaratif yöntemde dikkat ettiginiz gibi JavaScript bilgisine gerek kalmadan sayfa içerisindeki kontrollerin özelliklerini deklaratif yöntemle degistirdik. Bu sistemle JavaScript bilgisine gerek duymadan her türlü tarayicida yapilmasi istenen islemlerin çalismasini saglayabilirsiniz. Yazilim gelistiricilerin JavaScript yazarken en çok zorlandiklari kisim internet explorer ve firefox'da ayni islemlerin sorunsuz çalismasini saglamaktir. Genelde bunun için ayni islemi yapan farkli kodlar yazilir. Fakat bunun yönetilmesi ve esnekligi zordur. Bu fonksiyonlar içerisinde yapacaginiz degisiklikleri her iki fonksiyonda da yapmaniz ve bunun dogru bir sekilde çalismasini garanti etmelisiniz.
Diyelim ki çok iyi bir sekilde JavaScript yazdiniz ve her iki tarayicida (IE, FF) unit testlerini yaparak dogru bir sekilde çalistirdiniz. Fakat asil test sirasinda her iki tarayicida da islemlerin dogru çalistiginin garanti edilmesi gerekmekte. Bu da test islemini 2 kat zorlastirir ve 2 kat daha fazla zaman harcamaniza neden olur. 'ATLAS' sayesinde tek bir sefer de deklaratif olarak kodlamanizi yapar ve diger tarayicilarda çalismasini saglarsiniz.
Çok yeni bir teknik olmasindam dolayi yazim diline alismakta zorlanabilrisiniz. Ama yazim diline asina olduktan sonra uygulama gelistirme isini çok daha kisa surede yapabilirsiniz. Zaten web uygulamalarinin dogasinda hizli gelistirme esastir. Projelerin çok hizli bir sekilde gelistirilip hayata geçirilmesi gerekmekte. 'ATLAS' bize bu dezavantajin boyutunu küçültmemizi saglamaktadir.
__________________


Ne ağlayacak kadar günahkarım
Nede göklere çıkabilecek kadar masum
Geçmişte yaşadıklarımdan huzursuzum
Ne şu an yaptıklarımdan mutlu
Sırlar içinde bir dünyam var
Birde sen varsın içimde
Ne seni kaybedecek kadar cesurum
Nede seni kazanacak kadar güçlü !!
WebbiLişiM Çevrimdışı  
Alıntı Yaparak Cevapla
Cevap Yaz

« ASP sayfalarındaki hataların anlamaları | ASP.NET AJAX ve Kurulumu »

Şu an bu konuyu görüntüleyen üye sayısı: 1 (0 üye ve 1 misafir)

 
Konu Araçları
Mod Seç
Linear Mode Linear Mode

Gönderme Kuralları
Yeni konu açamazsınız
Yeni cevap yazamazsınız
Eklenti gönderemezsiniz
Mesajlarınızı düzenleyemezsiniz
BB code is Açık
SimgelerAçık
[IMG] kodu Açık
HTML kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık
Hızlı Geçiş