Ajax Extensions Timer Kullanımı Nasıldır Ne işe yarar ?

Ajax Extensions Timer kullanımı ile ilgili diğer Ajax ve kontrollerini anlatmaya çalışan sitelerden farklı ve daha belirgin bir örnekle bu blogta yazmaya karar verdim.Zira diğer sitelerdede gördüğüm bir Date.Now() komutu ile Textbox koyularak anlatılan örnekler bu işe meraklı olanları pekte enteresan gelmiyor.Oysakli Timer Extension  ile sadece zamanlı ve tarih saat gibi işlemleri dışındada farklı işlemleri gerçekleştirmek hayli kolaydır vede sonuçlarıda  gayet zevklidir.
Bakalım ne yapıyoruz!

Timer Extension genelde windows form yazılımcıları tarafından pek rövaşta bir araçtır.Web uygulamalarında genelde görülmezler yada arkada çalıştığından görsel olarak görmek pek münkün değildir.Ben bir kaç yıl öncesinde hazırladığım bir web yazılımında istek üzerine değişen arka planları için kullanmış ve sonucuda beğenmiştim.Şimdi bu işi nasıl yaptığımı sizlerede anlatacağım.

Önce bu örnek sizin nerede işinize nasıl yarayacak kısaca onu anlatayım.Web sitenizin bakground resmini, karışık düzende yada arka arkaya belirli saniyelerde uygulama dizininizdeki seçtiğiniz resimlerin yüklenmesini sağlayacak,yavaş geçişler ön plana hissedilmeyecek ve bu şekildede görsel olarak hoş bir görünüm sağlayacaksınız.

Asp.Net sayfanıza yada tüm siteniz için geçerli olmasını isterseniz. Master Page sayfanıza uygulamalısınız.

1- Script Manager eklemelisiniz.

<asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>

2-Timer Extension eklemelisiniz.

<asp:Timer ID="StartTimer" runat="server" Interval="3000" OnTick="StartTimer_Tick">
</asp:Timer>

3-Uptade Panel ve Content Template eklemeli ve içeriğini düzenlemelisiniz.

<asp:updatepanel runat="server" ID="StartUptade">
         <ContentTemplate>
         <asp:Image ID="StartImage" runat="server" ImageUrl="~/Image/image_1.jpg"
                   CssClass="master_start_image"/>
          </ContentTemplate>
          <Triggers>
          <asp:AsyncPostBackTrigger ControlID="StartTimer" />
          </Triggers>
     </asp:updatepanel>


Şimdi gelelim Timer Extension detaylarını anlatmaya

Timer extension ID='StartTimer' ile tanımladım. 3 saniyede dönecek OnTick event ve adı StartTimer_Tick
bunun nedenini birazdan göreceksiniz.

Uptade Panel ve Content içeriğinde bir Image kontrülüm var ve buda yolu ~/Image/image_1.jpg  StartImage adlı resmim, bizim başlangıç resmimiz, uygulamamız client tarafında yüklendiğinde ilk kez bu resim açılacak

Yeniden yükleme işlemi StartTimer controlID sine sahip timer extension olduğunuda sanırım anladınız.

Şimdi ne yapmamız lazım
Öncelikle Asp.Net uygulamanızın bulunduğu dizine yani web projenizin içinde Image adında bir klasör oluşturmalısınız ve bu klasörün içinede image_1- image_2 - image_3 şeklinde 10 farklı resim koymalıyız.

Daha sonra yukarıdaki tüm işlemleri hangi tür sayfada yaptıysanız.Inherits System.Web.UI.Page class namespace altına...


Protected Sub StartTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles StartTimer.Tick
        Dim n As Integer = New Random().Next(1, 10)
        StartImage.ImageUrl = "Image/image_" + n.ToString + ".jpg"
 End Sub


Sanırım yukarıdaki blogu pek anlatmama gerek yoktur.Fakat kısaca jpg formatında 10 resminiz dizinden UptadePanel içine 3 saniyede karışık düzende yüklenecektir.Ayrıca bir kaç ayrıntı daha vermek gerekirse resimlerinizin boyutları aynı olursa örneğin (1024x768) görünüm daha şık olabiliyor ve diğer CSS düzenlemeleri de yaparsanız resmi background (realitive) gibi veya ön yüzde dilediğiniz alanda kullanabilirsiniz.

Kolay gelsin.

      Bu Yazının Sponsorları