AJAX UpdatePanelAnimation Extender
15.02.2007 20:41:43
Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden UpdatePanelAnimation Extenderi ve özelliklerini inceleyeceğiz.
Puan:
     
AJAX UpdatePanelAnimation Extender

Updatepanelanimation sayfalarımıza framework içerisinde tanımlı olan animasyonları uygulamamıza izin veren Ajax kontrolüdür. Bir update işlemi tamamlandığında yada update işlemi devam ederken buna bağlı olarak animasyonların oynatılmasını sağlar.

Postback başladığında OnUpdating animasyonu çalışır fakat Postback sona erdiğinde OnUpdated animasyonu çalışır.

Not: Update Panelin UpdateMode özelliği always olarak ayarlanmalı çünkü postback tamamlandığında OnUpdated animasyonu çalışacak.

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 erişmek 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 işlemi gerçekleşirken gerçekleşecek olan animasyon.
  • OnUpdated - Update işlemi bittiğinde gerçekleşecek olan animasyon.
Örnek:

Örneğimizde SQLDataSource ile Databaseimize bağlanıp kayıtlar arasında gezineceğiz. Sayfamız değişirken yada herhangi bir update işlemi yapılırken animasyonumuzu oynatacağız.

İlk olarak bir ajax projesi oluşturalım.



Projemizi oluşturduktan sonra Sayfamıza bir adet SQLDataSource ekleyelim. AdventureWorks databaseine bağlanım person.contact tablosundaki verileri görüntüleyeceğiz. Ben Firstname, MiddleName, LastName ve EmailAddress alanlarını aldım.



Daha sonra projemize bir adet Gridview ekleyelim ve DataSourceID özelliğini eklediğimiz SQLDataSource1 olarak seçelim.

Daha sonra sayfamıza bir adet updatepanel ve updatepanelanimation nesnelerini ekleyelim. Benim tasarladığım sayfa aşağıdaki gibidir.



Evet şimdi Update Panelimiz postback olduğunda çalışacak 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 şimdi testimizi yapalım.



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



Evet biraz daha donuk bir görüntü ile karşımızda. Sizde denediğinizde gerçekten çok güzel bir animasyon efekti olduğunu göreceksiniz J İsterseniz diğer animasyonları deneyebilirsiniz.

Bu makalenin de sonuna geldik, başka bir makalede görüşmek üzere başarı 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
 
Puan: