Blog

  • 15 Şub 2007

AJAX UpdatePanelAnimation Extender

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden UpdatePanelAnimation Extenderi ve özelliklerini inceleyeceğiz.

AJAX UpdatePanelAnimation Extender

Updatepanelanimation sayfalarımıza framework içerisinde tanımlı olan animasyonları uygulamamıza izin veren Ajax kontrolüdür. Bir update islemi tamamlandıgında yada update islemi devam ederken buna baglı olarak animasyonların oynatılmasını saglar.

Postback basladıgında OnUpdating animasyonu çalısır fakat Postback sona erdiginde OnUpdated animasyonu çalısır.

Not: Update Panelin UpdateMode özelligi always olarak ayarlanmalı çünkü postback tamamlandıgında OnUpdated animasyonu çalısacak.

Oynatılan Animasyonlar, XML kullanarak tanımlanır. Frameworkdaki animasyonları kullanmak için; (Using Animation) 

http://ajax.asp.net/ajaxtoolkit/Walkthrough/UsingAnimations.aspx  adresine tıklayınız.

Animasyonların propertylerine erismek için(Animasyon Reference);

http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx Adresine tıklayınız.

Kullanımı:

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"

  runat="server" TargetControlID="up">

     <Animations>

        <OnUpdating> ... </OnUpdating>

        <OnUpdated> ... </OnUpdated>

    </Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

Özellikleri:
  • TargetControlID - Animasyonu oynatmak için kullanılacak olan UpdatePanel'inn ID'si.
  • OnUpdating - Update islemi gerçeklesirken gerçeklesecek olan animasyon.
  • OnUpdated - Update islemi bittiginde gerçeklesecek olan animasyon.
Örnek:

Örnegimizde SQLDataSource ile Databaseimize baglanıp kayıtlar arasında gezinecegiz. Sayfamız degisirken yada herhangi bir update islemi yapılırken animasyonumuzu oynatacagız.

Ilk olarak bir ajax projesi olusturalım.



Projemizi olusturduktan sonra Sayfamıza bir adet SQLDataSource ekleyelim. AdventureWorks databaseine baglanım person.contact tablosundaki verileri görüntüleyecegiz. Ben Firstname, MiddleName, LastName ve EmailAddress alanlarını aldım.



Daha sonra projemize bir adet Gridview ekleyelim ve DataSourceID özelligini ekledigimiz SQLDataSource1 olarak seçelim.

Daha sonra sayfamıza bir adet updatepanel ve updatepanelanimation nesnelerini ekleyelim. Benim tasarladıgım sayfa asagıdaki gibidir.



Evet simdi Update Panelimiz postback oldugunda çalısacak olan animasyonumuz için gerekli kodları yazalım.

Animasyon 1:

            <cc1:UpdatePanelAnimationExtender

                ID="UpdatePanelAnimationExtender1"

                runat="server"

                TargetControlID="UpdatePanel1">

                <Animations>

                     <OnUpdated>

                         <FadeOut Duration=".5" Fps="20" />

                    </OnUpdated>

                    <OnUpdating>

                         <FadeIN Duration=".5" Fps="20" />

                    </OnUpdating>

                </Animations>

            </cc1:UpdatePanelAnimationExtender>

Farklı bir animasyon daha verebiliriz.

Animasyon 2:

            <cc1:UpdatePanelAnimationExtender

                ID="UpdatePanelAnimationExtender1"

                runat="server"

                TargetControlID="UpdatePanel1">

                <Animations>

                     <OnUpdated>

                          <Pulse  Duration=".5" minimumOpacity=".3" maximumOpacity="2"/>

                    </OnUpdated>

               </Animations>

            </cc1:UpdatePanelAnimationExtender>

Evet simdi testimizi yapalım.



2. sayfaya geçiyoruz ve postback devam ederken sizin için yakaladıgım görüntü asagıdak gibidir.



Evet biraz daha donuk bir görüntü ile karsımızda. Sizde denediginizde gerçekten çok güzel bir animasyon efekti oldugunu göreceksiniz J Isterseniz diger animasyonları deneyebilirsiniz.

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://ajax.asp.net

Yorum (2)

  • Gökhan / 26.7.2010 14:34:38

    updatepanelim için aşağıdaki animasyonu kullanıyorum. update panel tüm sayfayı kaplamaktadır. bu işlem firefox ile düzgün gerçekleşiyor fakat ie de update panel herhangi bir update işleminden sonra beyaz oluyor yani transparanlığını yitiriyor. bu hatayı nasıl yok edebilirim? teşekkür ederim...

  • Gökhan / 26.7.2010 21:07:49

    sanırım bu animasyon updatepanele beyazlık veriyor benim istediğim ise karanlıklaştırmak. bunu nasıl gerçekleştirebilirim?

Yorum Yaz