Animation Extender Kullanımı ve effect -i "Row Highlight"

Güzel bir cumartesi gecesinden hepinize merhabalar. Gecenin bir vakti sıcak kahvemi yudumlarken ve animasyon konusunda başıma dert olmuş bir problemi çözüme kavuşturmuş olmanın rahatlığı ile web'de keyifle gezinirken birden bunu paylaşmam gerektiği düşüncesi ile Blogger ın başına oturdum. (amma uzun cümle oldu :)


Sözünü ettiğim olay Gridview e animasyon uygulamaya kalkıştığımda oluştu. Hepimiz türlü yöntemler ile GridView e "row higlight" efekti vermişiszdir. Genellikle mouse üzerine geldiğinde rengi değiştiren basit bir JavaScript kodu ile bunu yaptık. Ama bunun animasyonla daha sinematik bir şekilde yapılıp yapılamayacağı sorusu aniden aklıma takılınca işe koyuldum.

AnimationExtender ile bir süre boğuştuktan sonra olayı çözdüm ve şimdi sizlerle paylaşmak istiyorum. Doğrudan olaya giriş yapmak yerine önce biraz hatırlatma yapmak yerinde olacaktır sanırım. Çünkü animasyon konusu malum biraz derin bi konu ve kolayca unutulabiliyor. Çoğunuzun temel kısımlarını bildiğini biliyorum ama izninizle önce bir hatırlayalım :


AnimationExtender hangi parametreyi daha en baştan olmazsa olmaz istiyordu?
Cevap : “TargetControlID”.  Bu özellik daha en üst tagda belirtilmesi gerekir. Şöyle ki :

TargetControlID animasyonu başlatacak olan controldür. Bu control herhangi bir html, asp.net ya da bir AjaxControlToolKit controlünün ID si olabilir. ID adı string olarak çift tırnak arasında TargetControlID özelliğine verilir. Animasyonlarımız burada belirtilen controle uygulanan olaylarla tetiklenecektir. Ve eğer bunu belirtmez isek program hata verecektir.

Hedef controlü belirttiğimiz gibi, hedefe uygulanacak olayları da belirtmeliyiz. Yani hedefin hangi olayında hangi animasyonlar başlayacak?? Bunları da Animation tagı içinde belirtiriz. bu Konuda AnimationExtender in hemen her controle uygulayabileceği olayları mevcuttur :

• OnLoad 
• OnClick 
• OnMousever 
• OnMouseOut 
• OnHoverOver 
• OnHoverOut

Bunlar bir dökümanın tüm html kontrolleri için geçerli olabilecek standart olaylardır. Özellikle JavaScript ile uğraşmışsanız hemen anımsadınız. Akla takılabilecek tek olay OnLoad olabilir, bu olay sayfanın kendisi yüklendiği anda tetiklenir. Yani sayfa başına animasyon bağlamak için karmaşık JavaScript olayları handle etmeye gerek yoktur. Bu iş için AnimationExtender in OnLoad olayını kolayca kullanabiliriz.

Bu arada yukarıdaki listenin haricinde, AjaxControlToolKit in bazı kontrollerine özel daha başka olaylara animasyon bağlanabilir ve bu animasyonlar doğrudan bu kontrollerin içinde "Animations" tagı içinde belirtilir. Buradaki olaylar sadece o kontrole özeldir. Örneğin ContextMenuExtender in OnShow ve OnHide olayları gibi, yada ModalPopupExtender in OnShowing, OnShown, OnHiding olayları gibi. Örnekleri artırmak mümkün ama bu makalemizin doğrudan konusu değil. Sadece onların özel olaylarına da animasyon uygulanabildiğini şimdilik bilelim yeter. 

Buraya kadar anlattıklarımız ışığında şablona genel olarak gözatar isek şöyle :

Şimdi biraz bu şablon üzerinde konuşmamız gerek; çünkü örnek olarak verdiğim bu şablonu aynen bu şekilde yazarsanız çalışmaz :)  En dışta AnimationExtender tagı ve onun hemen içinde Animations tagı bulunuyor. Ve onun da içinde OnLoad, OnClick, OnMousever vs.. gibi olay tagları yer alıyor. Biz bu örnekte sadece tek bir olay tagını kullandık. Yani OnClick i. Ama daha fazla da kullanabilirdik. Olay taglarını alt alta yazarak devam edebilirsiniz. Hiçbir problem yoktur. Bir AnimationExtender da bütün olaylar için animasyon tanımı yapabilmeniz gayet doğaldır. Dolayısı ile olay taglarının hepsini alt alta yazarak tek bir animasyonda kullanabilirsiniz.

Asıl mesele bir olay tagının içinde tanımlı olan animasyonlardır. Burada animasyonları dilediğiniz kadar kullanabilirsiniz; hiçbir sınır yoktur. Ama animasyonları kapsayan ve onların oynanış sırasını ya da oynayıp oynamayacağına karar veren durum tagları vardır ki bunları kullanırken biraz dikkat etmek gerekir. Yoksa program çalışmaz. Mesela yukarıda gösterdiğim gibi hepsini alt alta yazıp kullanamazsınız. Yüksek ihtimalle hata verir. Ben sadece örneklerini göresiniz diye orada listeledim. Önce isimlerini vererek başlayalım. Adına durum tagları dediğim animasyonları içeren bu yardımcı taglar : Sequence, Parallel, Condition, ve Case dir. Olay taglarının hepsi alt alta gelebilir ve bir animasyon bütün olaylara sahip olabilir demiştik. Ancak bir olay tagının içinde en dışta mümkünse tek bir durum tagının olması kodun daha sorunsuz olmasını sağlayacaktır. Kaldıki birazdan örneklerini göreceğiniz gibi durum tagları birbirini içerebilir.  Yani dışta tek bir durum tagının olması sınırlama değildir. Şimdi her birinin ne işe yaradığını açıklayarak örneklere geçelim.

Sequence :

İçinde tanımlanan animasyon ya da varsa diğer durum tag blokları sırası ile işletilir. İlk sıradaki ilk oynar, sonra peşi sırası ile devam eder. Biri bitmeden ötekine geçmez.

Parallel : İçindeki tüm animasyon ve varsa diğer durum tag blokları aynı anda başlar. 

Condition : İçindeki blok belli bir şarta bağlı olarak oynar. bu şartı bool tipte değer döndüren bir javascript fonksyonu runtime da dinamik olarak sağlar. 

Case : İçindeki animasyonlardan tek bir tanesinin oynamasını ve bunun yine runtime da dinamik olarak karar verilmesini istiyorsak bunun çözümü Case dir. Birazdan örnek vericem.

Pratikte Sequence ve Parallel durum tagları çok yoğun olarak kullanılır. Ve bu iki tag birbirini içerdiğinde (ki sık sık içermesi gereken durumlar olur) örneğin :

Dikkat ederseniz OnClick olay tagının içinde sadece Sequence durum tagı var. Burada Sequence doğal olarak animasyonları sıra ile oynatmaya başlıyor. Ve mavi panel önce FadeOut ile görünmez oluyor, hemen ardından FadeIn ile tekrar görünür hale geliyor, ardından bir sonraki adım olan Parallel bloğu devreye alınıyor. Dikkat edin Parallel durum tagı burada Sequence içinde ve 3. sırada. O da sıranın kendisine gelmesini bekledikten sonra çalıştırıldığında içindeki 2 animasyon aynı anda işletiliyor. Bunun sonucundada örnek çıktıda gördüğünüz gibi bir yandan küçülürken bir yandan da görünmez oluyor. Ve animasyonumuz böylelikle tamamlanıyor.

Squence ve Parallel durum taglarının yoğun kullanıldıklarını ve birbirini içerebildiklerini hep aklınızda tutunuz. Burada eklemem gereken birşey de AnimationTarget özelliğidir. Bu özellik o animasyonun hangi taga uygulanacağını gösterir. AnimationTarget eğer yukarıdaki örnekteki gibi durum taglarının içinde verilir ise o tag içindeki tüm animasyonlar aksi belirtilmediği sürece bu hedefe animasyon uygular. Burada belirtmek yerine her animasyonun içine tek tek AnimationTarget belirtebiliriz. Böylece her animasyon farklı hedeflere sahip olabilir. Ama parent durum tagında belirtirse aksi belirtilmediği sürece o blog içindeki tüm animasyonların hedefi odur.


Birazdan Continental ve Case durum taglarını inceleyeceğiz. Ama onlara geçmeden önce dilerseniz kullanabileceğimiz animasyonları şöyle bir listeleyelim ve elimizde neler var bir görelim...

Her biri için bir örnekleme yapacağım. Alt alta yazacağım. Ve diğer tagları yazmayacağım. Maksat animasyonları listelemek hatırlatırım. İçlerindeki değerleri rastgele atıyorum. Siz istediğiniz animasyonu uygulamanıza ekler ve değerlerini de şekilde değiştirirsiniz :

Şimdi isterseniz bunların kısa açıklamalarını yapalım. Evet web deki bütün AnimationExtender makaleleri bu Fade effectleri ile örneklerini veriyor ve artık benim de sizin gibi bu ikisinden midem bulandı :) ama kısaca söyleyip geçelim ki :  FadeIn belirtilen bir blur tondan belirginleşerek belirme efektidir. FadeOut ise tam tersi olarak belirgin halden blur halde kaybolme effectidir. Eğer hiçbir tonaj belirtilmez ise blur ton tamamen sıfır kabul edilir. Yani ekranda tamamen kaybolur. minimumOpacity ve maximumOpacity değerleri de tam bu parametredir. Yani blurluğun miktarı.. 1 tam sayısı tam görünür, 0 ise hiç görümez değerdir. Öyle ise arada kalan bütün blur tonları da bu iki rakam arasındaki ondalıklı sayılardan biri olabilir. Fadeout tek başına parametresiz uygulandığında, normal halden bir yaklaşık saniye içinde opaklığı azalarak kaybolur. FadeIn parametresiz verildiğinde, eğer hedef element görünüyorsa önce aniden görünmez olur sonra yaklaşık bir saniye içinde opaklığı artarak görünür duruma geçer. FadeIn animasyonunu birşeye dikkar çekmek için yada görünmez halde olan bir elementi dikkat çekici bir şekilde ekrana getirmek için kullanabiliriz.

Pulse animasyonu en sevdiğim animasyonlardan biridir. En basit tanımla yinelenen yanıp sönme efekti yapar. Eğer uygulamanızda birşeye dikkat çekmek istiyorsanız, örneğin bir bildirim kutusu, güncellenen bir kayıt ya da veri bölgesi gibi orayı belli sayıda yanıt sönme yaptırarak kullanıcının dikkatini oraya vermek isteyebilirsiniz. Pulse animasyonu sizi karmaşık işlemler yaptırmaktan kurtarır kullanımı yukarıda gördüğünüz gibi çok basittir. Buradaki Iterations parametresi yanıp sönme sayısıdır. Çok şık bir animasyon...

HideAction adı üstünde birşeyi anında gizleyip görünür hale getirmenin kestirme yoludur. Duration süresi bunlarda işe yaramaz. Birşeye HideAction komutu vermişseniz anında görünmez olur. İki türlü kullanımı var, eğer parametresiz HideAction derseniz AnimaTionTarget da belirtilmiş olan element anında görünmez olur. Tekrar görünür hale getirmek için komutu Visible=true şeklinde vermelisiniz.

OpacityAction da AnimationTarget daki elementin opaklık değerinde anlık değişimlere neden olur. Normal JavaScript ile bizi az da olsa uğraştıran bu iş burada kolay ve güçlü bir araç ile çoook kolay :) Bu arada  Opacity parametresi ile 0 ile 1 arasında bir değer belirtmeyi unutmayın.


Discrete oldukça ilginç bir animasyon. İçine dizi olarak verdiğimiz değerleri sırası ile AnimationTarget da belirtilen elemente uygular. Elinizle manuel yapmaya kalksanız heralde saç baş yolarsınız. Burada gördüğünüz gibi tek komutla iş bitmiş. Uygulama başarısı sizin yaratıcılığınıza kalmış...


Move sıkça kullanılabileceğini düşündüğüm bir araç. Gerçi çok fazla havada uçuşan paneller kullanıcının canını sıkabilsede günümüzde bu tür numaralar "şık numara" olarak kabul ediliyor. Repertuarınızda bulunsun derim :)

Length örnektede anlayacağınız üzere bir elementin belirtilen özelliğini genişlik veya yüksekliğini değiştirir.
aslında Length ile Resize bu konuda birbirine yakın animasyonlar olarak kabul edilebilir. Tabi uygulamaları biraz farklı.

Scale olayı aslında yine bu genişleme ve daralma olayı ama bunu ölçekleyerek yapabilir hatta yazı fontlarına bile uygulayabilirsiniz.

Color animasyonu en çok kullanılan ve bana göre en kullanışlı animasyonlardan biri. Her türlü özelliğin rengini değiştirebilir. Kesinlikle çok faydalı, yukarda bir kaç örnek de de olay açıklığa kavuşuyor yeterince,, sanırım.

ve tabiki StyleAction...  ooabilecek bütün style özelliklerini bunun ile değiştirebilirsiniz. Fazla söze gerek yok. Yine yukarıda bir kaç örnekleme yaptım.

Evet illaki saymadığım başka animasyonlar da var. Ama  sadece bunlar bile son derece yeterli bana göre. Zamanla zaten sürekli yenilerini eklerler diye düşünüyorum.Şimdi isterseniz az önce bahsettiğim  Continental ve Case durum taglarını birer basit örnek ile açıklayalım. İlk örneğimiz Continental ile ilgili olsun :


Continental animasyonun belli bir şart yerine gelirse oynatılması işlemidir. Bu şartı da client tarafındaki herhangi bir JavaScript fonksyonu yerine getirecek şekilde yazabiliriz. Bilmemiz gereken en önmeli şey bu fonksyonun bool tipinde olması yani true / false değerlerinden birini döndürmesidir. Fonksyon eğer true döndürürse animasyon oynatılır aksi durumda oralı olmaz :) Örneğe bakalım :

yukarıdaki kodda dikkat ederseniz animasyonun oynatılma kararını "karar" adını verdiğim bir fonksyona bıraktım. O da bir checkbox ın durumuna bakarak bu kararı veriyor. Sanırım herşey yeterince açık. Bu küçük programın çıktısı ağağıdaki şekilde olacaktır :

Continental tagı Sequence ya da Parallel taglarının içinde de olabilir. Ben burada yalın halde kullandım.

Şimdi gelelim sağda solda fazla sözedilmeyen ama aslında (bana göre) Continental den daha güçlü ve şık bir araç olan Case tagına. Hemen bir örnek vererek üzerinden izah edelim :

Sağ taraftan ve üstten bir miktar kırpılmış bu kodumuzda neler olmaktadır? Case içinde 4 adet animasyon tanımlanmış. sayıyı istediğiniz kadar artırabilirsiniz. Case in özelliği bunlardan sadece biri oynayacak ve hangisinin oynayacağına anlık karar vermek istiyoruz, doğru mu? Ve bunu da tıpkı continental de olduğu gibi client tarafında bir javascript fonksyonu ile karar verilmesini istiyoruz. Continental de bu fonksyon bool gönderiyor idi. Ancak Case de bu karar verici fonksyon bir tamsayı döndürmelidir. Bu tamsayı tanımlanan animasyonlardan birinin dizi indisidir. Yani 0 yollarsa 1. animasyon çalışır, ve bu sıra ile devam eder. Ben yollanacak sayıyı radio button lara  yerleştirdim ve dikkat ederseniz ilk return değeri sıfır yollamakta. Bu küçük programın da çıktısı aşağı yukarı şöyledir :

bu arada kullandığım video kayıt programını da yavaş yavaş çözmeye başladım. Bende deminden beri mouse tıklama effectleri niye çıkmıyor diyordum :)) yerini şimdi buldum...

Şu ana kadarki örneklerimizi hep belli bir kullanıcı olayına bağladık. Yani animasyonu kullanıcılar başlattı. Peki buna biz karar vermek istersek ne olacak? AnimationExtender in bir animasyonu ya da animasyon grubu kullanıcı tetiklemesine gerek kalmadan client tarafında çağrılabilir. Sahneden yine JavaScript fonksyonlarımız var.  Şimdi şu örneğe dikkat edelim :

Bu küçük programı yazıp çalıştırırsak sayfa yüklendiği anda kendi kendine animasyonun başladığını görürüz. Kodlara baktığımızda animasyonun pageLoad client olayına bağlandığını görüyoruz. AnimationExtender ile ilgili olarak aklımızda tutmamız gereken şeylerden biri de eğer bu şekilde JavaScript ile başlatılacak ise mutlaka ve mutlaka BehaviorID değeri atanmalıdır. Ki örneğimize baktığımızda atandığını görürsünüz. JavaScript bu behavior id değeri ile söz konusu animasyon bloğunu bulmakta ve çalıştırmaktadır. Ve de dikkat ederseniz BehaviorID OnClick olay tagına ait bloğu çağırmıştır. Yani bu blok içi olduğu gibi işlemiştir. Bazen öyle durumlar olacakki kullanıcı tetiklemelerini tamamen devre dışı bırakıp sadece runtime da ve tabiki client tarafında animasyonu çağırmak isteyebileceğiz. Bu durumda TargetControlID değerine ya bir hiddenfield id sini yada ekranda görünmeyen başka herhangi bir html controlünün id sini verebiliriz. Animasyonu da nerede ne şekilde başlatmak istiyorsak JavaScript ile başlatırız. BehaviorID ile birlikte gelen bu basit kullanım bizlere aslında geniş ufuklu bir dünyanın kapılarını açmaktadır. Ufku genişletmek sizlere kalmış diyorum....

Evet işin sıkıcı kısımlarını aşağı yukarı bitirdik. Bundan sonraki örnekler biraz daha heycanlı olacak :) Buraya kadar olan bilgiler zaten aşağı yukarı herkesin bildiği şeyler. Başlangıcı vermeden ileriye geçmeyi sevmediğim için yukarıdaki  "bir kaç"  cümleyi yazayım dedim di sadece :)

Pekala,
Animasyonlarımızı Client tarafından başlatıyoruz iyi güzel de, ya bu işi daha ileri düzeyde kontrol etmek istersek? Ya animasyonun kullanıcı tarafında ne zaman başladiğini yani onu tetikleyen JavaScript fonksyonunun tam tetiklendiği anı ve hatta animasyonun ne zaman sonlandığını (!) bilmek istersek? tam bu olaylara da client tarafında kod yazmak istersek? Animasyonun başlangıcını ve bitişini birer olay (Event) olarak ele almak istersek (ki zaten öyledir) bu nasıl olur? Şöyle olur :

hemen kısaca açıklayalım. pageLoad içerisinde animasyon JavaScript ortamında elde ediliyor ve ona add_ended ve add_started özel komutları ile olaylar atanıyor (handle ediliyor). Gerisi artık bu iki olayı fonksyon olarak yazmaya ve içini dilediğimiz şekilde doldurmaya kalıyor ki ben orada göstermelik birşeyler yaptım. Animasyon çıktısı aşağıdaki şekilde.

Dikkat etmeniz gereken animasyonun başlangıç ve bitişine JavaScript olayların atanmış olduğu. Güzel değil mi? :)

Başka neler yapabiliriz dediğinizi duyar gibiyim.. Client tarafında elde edilen animasyon objesine play, pause, stop, dispose metodları ile daha "ince" müdahaleler yapabilirsiniz. (İnce mi?) Hemen küçük bir örnek ile açıklayalım :

Programımızın çıktısı aşağı yukarı böyle olacaktır :

şimdi burada ne olup bitiyor? Öncelikle animasyonu sadece küçük sarı kutu ile değil, Telegol Programının "Oynat Uğur" komutu ile başlatabildiğimizi farkettiniz mi? Dondur komutu ise animasyonu tam olarak olduğu noktada durdururken; durdur komutu animasyonu en baş noktasına almakta adeta sıfırlamaktadır. Tekrar play komutu verebiliyoruz hepsinin ardından. Ancak dispose() komutu uygulandıktan sonra artık animasyonumuz tıklamalarımıza hiçbir şekilde tepki vermiyor. Çünkü malum dispose adı üstünde tüm nesneyi browser in hafızasından siliyor...  Örnek basit ve açık sanırım. Bu küçük detay da eğer etkili kullanılırsa sizlere etkileyici görünümler olarak geri dönecektir.

Buraya kadar yaptıklarımız beni açmadı derseniz aşağıdaki sınıf diyagramına göz atarak daha ileri işlemleri kendiniz araştırabilirsiniz.

Evet nihayet asıl konumuza dönebiliriz, yeterince detaya girdim mi diye düşünürken sözü biraz uzatmışım galiba... :) Bu makalenin temel amacı GridView a Row HighLight effectini AnimationExtender ile vermek idi. Yani makalemizin hemen başındaki animasyonun nasıl yapılacağını izah etmek idi. Şimdi bundan bahsetmeye başlayalım :

Bir Ajax Extender i GridView ile birlikte kullanırken sıkça yapılan hata bir TemplateRow tanımlamak ve ajax extender i o row un içine yerleştirmektir. Evet sonuçta programınız çalışır. Ama row lara uygulamak istediğiniz mesele her ne ise (bir pop up window, açılan / genişleyen kutu menü vs...) her row için ajax sınıfları ayrı ayrı instace yaratılacağından bu ciddi performans kayıplarına neden olur. Özellikle row sayısı arttıkça browserin hantallaştığını, sayfanın hem geç yüklendiğini, hem de client i işlem yoğunluğu olarak da yorduğunu farkedebilirsiniz. Bunu engellemek aslında zor olamamasına rağmen bazen deneyimli programcılar dahi (işi çabuk bitirmek adına) bu tür yollara başvurabilmekteler. Biz örneğimizde performanslı yolu tercih edeceğiz. Şimdi yapılacakları madde madde yazalım :

1. Uygulamamızda TEK BİR AnimationExtender olacak. Ancak 
2. GridView in her bir row unda bu animasyonu tetikleyecek bir JavaScrtipt linki bulunacak. 
3. Bu link Merkezi bir JavaScript fonksyonunu çağıracak ve ona kendisini parametre olacak verecek
4. merkezi JavaScript fonksyonu böylece tıklanan row un hangisi olduğunu bilecek
5. merkezi JavaScript fonksyonu bu row un ID sini sayfa genelinde global olarak tanımlanmış olan bir değişkene (variable) kaydedecek. Bu değişken global olmalı çünkü diğer JavaScript olayları tarafından  sonradan okunacak.
6. daha sonra merkezi JavaScript fonksyonu bu row a animasyon uygulayan AnimationExtender in onClick Behavior  unu tetikleyecek (kod ile çağıracak) 
7. Hatırlayın yukarıda değinmiştik; AnimationExtender hedef controlü AnimationTargetScript ile alabiliyordu. Burada da bunu kullanacağız. Bir JavaScript fonksyonu yazıp AnimationTargetScript e her tıklama da global değişkene atanan ilgili row un ID sini okumasını ve AnimationExtender a vermesini sağlayacağız. 

Evet kabaca böyle. Kabaca diyorum çünkü bu maddeleri adım adım uygulasanız her row tıklamadan renk vs. değiştirebilir ama öyle kalır. Yani o row ları bir de eski hallerine geri döndürmelisiniz. (ayıkla pirincin taşını.... :)  Ondan da önce aklınıza şöyle bir soru gelebilir : GridView row lara client tarafında bir ID vermemektedir? hangi ID yi kullanacağız? Malum GridView client tarafında bir html tablo çıktısıdır. Animasyonu tetikleyecek olan row da bu çıktıdaki TR tablo tagına karşılık gelir ve bu tagın ID si çıktıda yoktur. Öyleyse işe ilk olarak TR tagına bir ID atamakla başlayalım. Bunun için GridView in RowCreated olayına yukarıdakine benzer bir kod ekleyerek ID çıktısını biz manuel ekliyoruz. Burada verdiğiniz ID nin unique, yani eşsiz bir değer olması önemli, ben bunun için  DataKey değerini kullandım. Siz de sizinkini yada unique herhangi bir değeri kullanabilirsiniz.

Devam edelim,
Gridimize bir template row ekleyelim ki ona basıldığında içinde olduğu row parlayacak. Ben bu template row un içine bir hyperlink kontrolü koydum. Ancak siz arzu ederseniz başka birşey kullanabilirsiniz. Image kontrolü de olabilirdi pekala..

Her row a hyperlink ekledik; şimdi de her bir hyperlink e tıklandığında merkezi JavaScript fonksyonunu çağıran kodu ekleyelim. Bunun için de RowDataBound olayına server taraflı kod yazmamız gerek. Şöyle ki:

string.Format ile başlayan satır ekrana sığsın diye alt satıra geçmek zorunda kaldım. Umarım karışmamıştır fazla. Buradaki kod ile beraber her row daki hyperlink lere her tıklandığında onlick olayı devreye girecek ve o da örnekteki ws_haftalik_plan isimli JavaScript fonksyonunu çağıracak. Dikkat ederseniz çağrılan fonksyon iki parametre alıyor. İlki row un datakey değeri tıklanan hyperlink in ID değeri. Gerisini bu fonksyon halledecek. Aslında sadece row u boyamak ise derdiniz 2. parametre tek başına yeterli. Neden belirttiğimi birazdan açıklayacağım. Bu JavaScript fonksyonunun koduna bakalım önce :

Şimdi bu koda dikkatli bakmanızı rica ediyorum. Çünkü burası dananın kuyruğunun koptuğu yer..  Buraya kadar ne oldu? Grid den tıklanan her link bu JavaScript fonksyonuna tıklanan row un ID sini yolladı. Ki bu ID, TR tagının ID si olarak da atanan DataKey değeri idi. Dolayısı ile animasyon uygulanacak olan row un element değerini iki şekilde elde etmemiz mümkün :

$get("ders_id")  der isek zaten bu row u elde etmiş oluruz. Ama ikinci bir yol JavaScript te atanan hyperlink in ID si olan img değişkenini kullanmaktır. Yani :

$get(img).parentNode.parentNode.id

derseniz de aynı row un ID değerini elde edersiniz. Madem bu şekilde de elde edebiliyorduk neden TR taglarına ID verdik diye sorabilirsiniz? Çünkü az önce bahsettiğim gibi bir önceki animasyon uygulanan row un backcolor rengini eski haline getirmek için her row un bir adı olmalıdır. Yukarıdaki kodda bunu görebilirsiniz.

Tıklama yapıldığında global olarak tanımlanmış olan animated_grid_row değişkenine bu değer (row un ID si) aktarılıyor. Böylece AnimationExtender AnimationTargetScript  ile bu değere istediği zaman erişebiliyor. Bunun için AnimationTargetScript e de değeri okuyup gönderen bir fonksyon belirtiriz ki,, ben adına get_Target dedim; o da şöyle :

sadece global değişken değerini okuyup return ile gönderiyor. Bu fonksyon ile Target Controlü sürekli dinamik olarak elde eden AnimationExtender in kodu da şu şekilde :

tamamı ekrana sığmadı ama aşağı yukarı anlamışsınızdır. Evet eğer herşey yolunda gitti ise benim biraz daha karmaşık olan programımın çıktısı şu şekilde :

ve geldik bugünkü makalemizin sonuna. Umarım okurken sıkılmadınız :) Bir başka yazıda görüşmek üzere
hoşçakalın...