Visual Studio 2008'e adım adım yaklaştığımız şu günlerde belki de biraz geç bir yazı yazıyorum. İster AJAX ister Silverlight uygulamalarında olsun artık JavaScript kodu yazmayan veya yazamayan bir "web developer" şu an düşünülemez. Bu noktada daha önceki yazılarımda da bahsettiğim üzere Intellisense desteği VS 2008 ile beraber geliyor fakat VS2008'in resmi lansmanı Şubat'ta yapılacak. Daha acil bir çözüme ihtiyaç duyanlara ücretsiz bir alternatif tavsiyesinde bulunacağım.

Aptana Community Edition!

Aptana'nın aslında ücretli olan bir sürümü var. Ama biz sadece JavaScript editörü olarak kullanacağımız için bize ücretsiz olan Community Edition yeter de artar bile. Programı hemen aşağıdaki adresten indirebilirsiniz.

http://www.aptana.com/download/#windows

Aptana içerisindeki zengin JavaScript Intellisense desteği.

Aptana sayesinde artık sadece bir noktalı virgül eksiği yüzünden çalışmayan JavaScript dosyalarınıza saatlerce bakıp da hatayı bulamama durumundan kurtulabilirsiniz. Ayrıca Intellisense desteği ciddi kolaylık sağlıyor. Yukarıdaki ekran görüntüsünde de görebileceğiniz üzere Cross-Browser JavaScript kodu yazabilmeniz için tüm JavaScript sınıf ve metodlarının hangi tarayıcılar ile uyumlu olduğuna ait bilgiler de direk Intellisense ile beraber ekrana geliyor. Sıkıştığınız durumlarda gerçekten yardımcı olabilecek bir araç olarak bilgisayarlarınızda kurulu bulundurmanızda fayda var.

İster internet üzerinden yayınlanan makalelerde olsun ister blog sitenize yollayacağınız bir ipucunda, maalesef sayfanıza HTML kodu veya herhangi bir kod yerleştirmek istediğinizde Visual Studio içerisinden alışık olduğumuz renklendirmeyi almamız pek mümkün olmuyor. Bu durumda çoğu sitede ekran görüntülerinden oluşan resimlerle dolu makaleler görüyoruz. Ben bugüne kadar bu sorunu biraz uğraştırıcı bir yöntemle çözüyordum :)

Bugünden sonra ise CopySourceAsHtml adındaki bir Visual Studio 2005 add-in uygulamasını kullanacağım. Yaptığım testlerde epey başarılı sonuçlar aldım. Uygulama direk Visual Studio içerisindeki renklendirme üzerinden HTML kodu yaratabiliyor. Programı aşağıdaki adresten indirebilirsiniz.

http://www.jtleigh.com/people/colin/software/CopySourceAsHtml/

Herhangi bir web sitesi ile kullanıcı (istemci) arasındaki web trafiği normal şartlarda şifrelenmemiş (enkript edilmemiş) olarak aktarılır. Bu durum esasen ciddi bir güvenlik açığı olabilir. İstemci bilgisayar ile sunucu arasındaki ağ trafiğini yakalayabilen biri bu trafik üzerinden geçen veriyi ele geçirerek kötü amaçlarla kullanabilir. Bu açığı engellemek amacıyla özellikle E-Ticaret sitelerinde SSL uygulaması yapılır. https ile başlayan adreslerinden tanıyabileceğimiz bu web sitelerinde istemci ile sunucu arasındaki trafik enkript edilir. Böylece ağ trafiğinin yakalanması halinde bile herhangi bir şekilde söz konusu veri kullanılamayacaktır.

Peki SSL kullanılamayacak, ufak bütçeli projelerde en azından önemli verileri kullanıcıdan (istemci) alırken enkript etme şansımız yok mu? Varsayalım web sitemizin bir kullanıcı giriş sayfası var ve kullanıcımız birer TextBox kontrolüne kullanıcı adını ve şifresini yazıyor. Bir sniffer yazılımı kullanarak ağ trafiğini yakaladığımızda aşağıdaki şekilde şifreyi ele geçirebiliyoruz.

{"Sifre":"GizliSifrem"}

Oysa bu şifreyi istemci tarafında JavaScript kütüphaneleri ile anında MD5 algoritması ile enkript ederek sunucu tarafına gönderme şansımız var. Böyle bir durumda sniffer yazılımı kullandığımızda karşımıza çıkan sonuç aşağıdaki gibi.

{"Sifre":" afb5bcf186d39b00d94917df57b9c593 "}

Şimdi gelin bu işi nasıl yapacağımıza yakından bir göz atalım. İlk olarak Paul Johnston tarafından hazırlanmış olan MD5 JavaScript kütüphanesini aşağıdaki adresten bilgisayarımıza indirelim.

http://pajhome.org.uk/crypt/md5/

Örneğimizde bir ASP.NET AJAX projesi üzerinden çalışacağımız için bilgisayarımıza indirdiğimiz JavaScript dosyamızı web sayfamızdaki ScriptManager’a ScriptReference olarak tanımlayacağız. Böylece JavaScript dosyası sayfamıza linklenmiş olacak.

      <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" runat="server">
        <Scripts>
          <asp:ScriptReference Path="md5.js" />
        </Scripts>
      </asp:ScriptManager>

Kütüphane içerisindeki hex_md5(); metodunu kullanıyor olacağız. Söz konusu metod String tipinde bir parametre alarak geriye şifrelenmiş Hex-String döndürüyor. Örneğimizde şifre kontrol işlemi için bir ASP.NET AJAX PageMethod kullanacağız. Sayfaya giriş için kullanacağımız Giriş düğmesi ve Şifre, Kullanıcı adı TextBox'ları bir UpdatePanel içerisinde yer alacak.

      <script language="javascript" type="text/javascript">
      function KontrolEt()
      {
        // Sayfada Sifre TextBox'ına girilmiş şifreyi alıyoruz.
        var Pass = $get("Sifre").value;
        // Şifreyi şifreliyoruz.
        var MD5 = hex_md5(Pass);
        // GirisKontrol PageMethod'unu çalıştırarak kullanıcıyı kontrol ediyoruz.
        PageMethods.GirisKontrolu(MD5, Oldu);
      }
      function Oldu(Sonuc)
      {
        // PageMethod tarafından döndürülen Evet/Hayır sonucunu mesaj kutusu ile gösteriyoruz.
        alert(Sonuc);
      }
      </script>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
         <asp:TextBox ID="Adi" runat="server"></asp:TextBox>
         <asp:TextBox ID="Sifre" runat="server"></asp:TextBox>
         <input id="Giris" type="button" value="Giris" onclick="KontrolEt();" />
        </ContentTemplate>
      </asp:UpdatePanel>

Sunucu tarafına baktığımızda ise elimizdeki gerçek şifreyi istemciden gelen enkript edilmiş şifre ile karşılaştırmak üzere enkript ediyor olacağız. Biz örneğimizde gerçek şifreyi veritabanından vs çekmeyeceğiz. Onun yerine ben GerçekŞifrem metnini şifre olarak kullanacağım. Siz projelerinizde bu metni kullandığınız veritabanlarına bağlayabilirsiniz. Aşağıda sunucu taraflı yazmış olduğumuz AJAX PageMethod kodu yer alıyor.

<System.Web.Services.WebMethod()> _
  Shared FunctionGirisKontrolu(ByVal Sifre As String) As Boolean
    'Şifremizi IOStream objesine çevirecek olan encoder objesini tanımlayalım.
    Dim encoder As New UTF8Encoding()
    'MD5 Servisine ulaşalım.
    Dim MD5 As New System.Security.Cryptography.MD5CryptoServiceProvider
    'Doğru şifreyi enkript edelim.
    Dim GercekSifre As Byte() = MD5.ComputeHash(encoder.GetBytes("GerçekŞifrem"))
    'Gerçek Şifremizi HEX'e çevirelim.
    Dim Dogru As New StringBuilder()
    For i As Integer = 0 To GercekSifre.Length - 1
      Dogru.Append(GercekSifre(i).ToString("x2"))
    Next i
    'Enkript edilmiş doğru şifre ile istemciden gelen enkript edilmiş şifreyi karlılaştıralım..
    If Dogru.ToString = Sifre Then
      Return True
    Else : Return False
    End If
  End Function

Hepsi bu kadar. Artık istemci tarafında girilen tüm şifreler enkript edildikten sonra sunucuya kontrol için gönderiliyor olacak. Böylece istemci ile sunucu arasındaki hiçbir yazılım veya donanım söz konusu şifreyi ağ trafiği üzerinden yakalasa bile tam olarak ne olduğunu anlayamayacaktır.

Hepinize kolay gelsin.

ASP.NET AJAX kitabımda detaylıca bahsettiğim AJAX Control Toolkit benim en çok ilgimi çeken kontrollerden biri olan Animation Extender maalesef dokümantasyon eksikliği yüzünden (kitabımı almayanlar tarafından :)) pek kullanılamıyor. Umarım bu makale bu boşluğu doldurur.

AJAX Control Toolkit Animation Extender kontrolü bize XML kodları yazarak DHTML animasyonları yaratma olanağı sağlıyor. Bu konsept bizim ileride Silverlight ile daha da aşina olacağımız XAML (XML kodu) ile animasyon yaratma konseptine çok yakın. Hızlı bir şekilde ilk örneğimize geçmeden önce bilgisayarınızda ASP.NET AJAX 1.0 ve AJAX Control Toolkit’in yüklü olduğundan emin olalım, eğer gerekli yüklemeler bilgisayarınızda eksikse aşağıdaki adreslerden indirerek hemen yükleyebilirsiniz.

http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en
http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4923

Yükleme sonrası Visual Studio veya Visual Web Developer Express içerisinde ASP.NET web sitesi yaratmak istediğinizde seçenek olarak “AJAX Control Toolkit Web Site” seçeneği de karşınıza çıkacaktır.

Yeni bir “Ajax Control Toolkit Web Site” yarattıktan sonra karşımıza ilk çıkan default.aspx dosyasına Toolbar içerisinden bir AnimationExtender eklediğimizde sayfamızın tasarım bölümünde aşağıdaki HTML kodu ile karşılaşıyoruz

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server">
            </ajaxToolkit:AnimationExtender>
        </div>
    </form>
</body>
</html>

Sayfa içerisinde toplam iki adet kontrol bulunuyor. Bunlardan ilki olan ToolkitScriptManager sayfamızı ilk açtığımızda zaten içerisinde vardı. ASP.NET AJAX 1.0 ile daha önce projeler gerçekleştirmiş olanlar hatırlayacaktır; AJAX özellikleri kullanacağımız her sayfada ScriptManager adında bir kontrolün sayfanın en başında yer alması gerekiyordu. ScriptManager sayfamızdaki diğer AJAX kontrollerinin çalışabilmesi ve bizim istemci taraflı AJAX kodları yazarken Microsoft kütüphanesinden faydalanabilmemiz için gerekli olan tüm JavaScript kütüphanelerinin sayfaya eklenmesini sağlıyor. AJAX Control Toolkit söz konusu olduğunda Control Toolkit içerisindeki her kontrolün kendi ayrı JavaScript dosyalarının da sayfaya eklenmesi gerektiğini düşünürsek bazen bir sayfada kullanılan farklı AJAX kontrolleri nedeniyle 10-15 adet farklı JavaScript dosyalarının arkaplanda sayfaya eklenmiş olduğunu görebiliyorduk. Aslında tüm bu JavaScript kodlarının olabildiğince daha az sayıda dosyada derlenmesi ve toplu olarak sayfaya eklenmesi daha mantıklı olacaktır. İşte bu bahsettiğimiz optimizasyonu bizim yerimize ToolkitScriptManager yapacak. Bunun için de klasik ASP.NET AJAX ScriptManager yerine Control Toolkit kullanılan projelerde artık ToolkitScriptManager kullanıyor olacağız.

Sayfadaki diğer kontrol bizim biraz önce eklediğimiz AnimationExtender kontrolü. Gelin şimdi hızlı bir şekilde bu kontrolün aldığı özelliklere bakmak için aşağıdaki kodu inceleyelim.

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1">
    <Animations>
        <OnLoad> ... </OnLoad>
        <OnClick> ... </OnClick>
        <OnMouseOver> ... </OnMouseOver>
        <OnMouseOut> ... </OnMouseOut>
        <OnHoverOver> ... </OnHoverOver>
        <OnHoverOut> ... </OnHoverOut>
    </Animations>
</ajaxToolkit:AnimationExtender>

AnimationExtender kontrolümüz kendi içerisinde tanımlayacağımız tüm animasyonlara sayfadaki hangi elementin neden olacağını TargetControlID aracılığı ile bizden öğreniyor. Örneğin sayfada bir düğmeye tıklanacak ve sonrasında animasyon uygulanacaksa TargetControlID değerine söz konusu düğmenin ID bilgisini vermemiz gerekiyor. Tabi sadece tıklama (OnClick) gibi durumlarla sınırlandırılmış değiliz; yukarıdaki kod içerisinde de görebileceğiniz gibi OnLoad, OnMouseOver gibi çok sayıda durum (event) söz konusu. Her bir durumda uygulanmak üzerine farklı animasyonlar tanımlayabiliyoruz, fakat tüm bu durumlar TargetControlID özelliğine aktarılmış elementin durumlarına bağlı olacak.
Animasyonlarımızı XML kodları ile yazacağımızdan bahsetmiştim. Her bir farklı durum (onclick, onload… vs) için farklı animasyanları hazırladıktan sonra yukarıdaki örnekteki uygun duruma ait (onclick vs) XML taglarının arasına yazmamız gerekiyor. Hemen bir örnek ile ilerleyelim.

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1">
    <Animations>
        <OnHoverOver>
          <FadeOut Duration=".5" Fps="20" MinimumOpacity=".1" />
        </OnHoverOver>
        <OnHoverOut>
          <FadeIn Duration=".5" Fps="20" MinimumOpacity=".1" />
        </OnHoverOut>
    </Animations>
</ajaxToolkit:AnimationExtender>
 <asp:Button ID="Button1" runat="server" Text="Button" />

Sayfamıza ayrıca bir Button ekledik. Bu düğmeyi hedef kontrol yani TargetControlID olarak ayarladık. AnimasyonExtender içerisinde FadeIn ve FadeOut olarak iki farklı animasyonu hedef kontrolün iki farklı durumuna (OnHoverOver ve OnHoverOut) tanımladık. Böylece fare ile hedef kontrolün üzerine gelindiğinde OnHoverOver içerisinde tanımlanmış animasyon, fare ile hedef kontrolün üzerinden ayrıldığımızda ise OnHoverOut içerisindeki animasyon çalışacak. Animasyonların tanımlanması ile ilgili detayları birazdan inceleyeceğiz, şimdilik durum kontrolüne konsantre olarak yukarıdaki kodu tekrar incelemenizi tavsiye ediyorum.
Animasyon tanımlamalarımızı yaparken iki farklı seçeneğimiz var. Bunlardan ilki Sequence animasyon, diğeri ise Parallel. Sequence animasyon tagları içerisinde yer alan tüm animasyonlar tek tek, XML kodu içerisine yazılma sıraları ile gerçekleştirilir. Bir animasyon bitmeden diğerine geçilemez. Parallel animasyonlarda ise tüm animasyon aynı anda çalışır. Bir Sequence animasyon içerisinde bir Parallel animasyon yer alabileceği gibi tam tersi de olabilir. Gelin yine örnek üzerinden gidelim.
Örneğimizdeki sayfaya bir ASP.NET Calendar kontrolü ekleyeceğim. Sayfada yer alacak olan iki farklı düğmeden biri Calender kontrolünü %10 şeffaf yapacak, diğeri ise tekrar görünür hale getirecek. İki farklı hedef kontrolüm, yani iki farklı TargetControl olacağı için mecburen iki farklı AnimationExtender kullanacağım.

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1">
    <Animations>
        <OnClick>
          <Sequence AnimationTarget="Calendar1">
            <FadeOut Duration=".5" Fps="20" MinimumOpacity=".1" />
          </Sequence>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>
  <ajaxToolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Button2">
    <Animations>
        <OnClick>
          <Sequence AnimationTarget="Calendar1">
            <FadeIn Duration=".5" Fps="20" MinimumOpacity=".1" />
          </Sequence>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>
<asp:Button ID="Button1" runat="server" OnClientClick="return false" Text="Görünmez Yap" />
<asp:Button ID="Button2" runat="server" OnClientClick="return false" Text="Görünür Yap" />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

Yukarıdaki kod içerisinde bizim için yeni olabilecek iki şey var. Bunlardan ilki Sequence animasyonlar ve bu animasyonlara ait AnimationTarget özellikleri. Daha önceki örneğimizde animasyona neden olan kontrol, yani TargetControl ile animasyonun gerçekleştiği kontrol aynıydı. Oysa şu an biz bir düğmeye tıklayıp başka bir kontrole animasyon uygulamak istiyoruz. Bu nedenle animasyon serisine yani Sequence animasyonuna bir hedef belirtmemiz gerekiyor. Örneğimizde bu kontrol Calendar1 olacak çünkü animasyonu takvime uygulayacağım. Bir ikinci ilginç nokta da düğmelerimize verdiğimiz OnClientClick özellikleri. Sayfada normal ASP.NET düğmeleri kullandığımız için doğal olarak düğmelere her tıkladığımızda sayfa PostBack oluyor. Oysa bizim animasyonların çalışabilmesi için bunu engellememiz şart. Bu nedenle ClientClick özelliklerine “return false” JavaScript kodunu yazıyoruz. Böylece söz konusu düğmelere tıklandığında sayfa PostBack olmayacak, sadece animasyonlar çalışacak.
Şimdi bir de Parallel animasyon denemesi yapalım. Parallel animasyon tagları arasında iki farklı animasyon koyacağız. Animasyonlardan biri yine takvimin görünürlük değerini değiştirirken diğeri de aynı takvimin fon rengini beyazdan kırmızıya ve kırmızıdan beyaza çevirecek.

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1">
    <Animations>
        <OnClick>
          <Parallel AnimationTarget="Calendar1">
            <FadeOut Duration=".5" Fps="20" MinimumOpacity=".1" />
            <Color PropertyKey="backgroundColor" StartValue="#FFFFFF" EndValue="#ff0000" />
          </Parallel>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>
  <ajaxToolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Button2">
    <Animations>
        <OnClick>
          <Parallel AnimationTarget="Calendar1">
            <FadeIn Duration=".5" Fps="20" MinimumOpacity=".1" />
            <Color PropertyKey="backgroundColor" StartValue="#ff0000" EndValue="#FFFFFF" />
          </Parallel>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>
<asp:Button ID="Button1" runat="server" OnClientClick="return false" Text="Görünmez Yap" />
<asp:Button ID="Button2" runat="server" OnClientClick="return false" Text="Görünür Yap" />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

Animasyonlar içerisinde kullanabileceğiniz farklı animasyon taglarını sırayla inceleyelim.

<Resize Width="200" Height="300" Unit="px" />

Yukarıdaki animasyon ile hedef elementin yüksekliğinin ve genişliğinin verilen değerlere doğru bir animasyon ile büyütülmesini veya küçültülmesini sağlayabilirsiniz.

<EnableAction Enabled="false" />

Özellikle düğmelerin tıklanabilir olması veya olmaması arasında geçiş yapmak için yukarıdaki animasyon kodunu kullanabilirsiniz. Bir düğmenin rengini açık bir renkten koyu bir renge çevirirken aynı anda paralel bir animasyonda düğmeyi tıklanamaz hale de getirebilirsiniz.

<ScriptAction Script="alert('Selamlar!');" />

Sadece animasyon yapmakla kalmayıp animasyonlarınızın belirli noktalarında JavaScript kodları da çalıştırabilirsiniz. Bu özellik animasyonlar tamamlandıktan sonra kullanılırsa animasyonun bitmesi ile sayfada farklı işlemler yapabilmenizi sağlayabilir.

<Color AnimationTarget="MyContent"
 Duration="1"
 StartValue="#FF0000"
 EndValue="#666666"
 Property="style"
 PropertyKey="backgroundColor" />

Objelerin CSS özellikleri üzerinde direk oynamak için yukarıdaki kodu kullanabilirsiniz. Örneğin bu kod içerisinde hedef objenin fon rengi değiştiriliyor.

<StyleAction Attribute="display" Value="none" />

CSS özelliklerinin değişimi ile ilgili alternatif olarak StyleAction animasyonunu da kullanabilirsiniz.
Peki ya sayfadaki bir duruma, bir koşula göre farklı animasyonların çalışmasını istiyorsanız? Merak etmeyin, bunun için de bir çözüm var.

<Condition ConditionScript="$get('isaret').checked">
    <FadeOut AnimationTarget="up_container" minimumOpacity=".2" />
</Condition>

Yukarıdaki gibi condition tagı ile direk sayfadaki bir CheckBox’ın işaretli olup olmadığını kontrol edebileceğiniz gibi herhangi bir JavaScript komutu da çalıştırabilir veya sayfada tanımlı global bir JavaScript değişkenini kontrol edebilirsiniz. Şart sağlandığında Condition tagları arasındaki animasyon uygulanacaktır, aksi halde pas geçilecektir.

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

FadeIn ve FadeOut animasyonlarını daha önce de kullandık. Detaylı olarak incelemek gerekirse söz konusu animasyonlar için animasyon süresini Duration özelliğine aktarmamız gerekiyor. Diğer yandan isterseniz animasyonun saniyede kaç kare gösterimi ile oluşturulacağına da Fps değeri ile karar verebilirsiniz. Son olarak şeffaflığa gidiş veya şeffaflıktan dönüş animasyonlarında MinimumOpacity ve MaximumOpacity ile minimum şeffaflık ve maksimum şeffaflık limitlerini de ayarlayabilirsiniz.

Tüm bu animasyonları isterseniz direk JavaScript ile de oluşturabilir ve kullanabilirsiniz.

var effects = new Array();
effects[0] = new AjaxControlToolkit.Animation.FadeInAnimation($get("Calendar1"), .3, 30, .3, 1, false);
AjaxControlToolkit.Animation.SequenceAnimation.play($get("Calendar1"), 0, 24, effects, 1); 

Yukarıdaki JavaScript kodumuz içerisinde ilk olarak animasyonlarımızın bir listesini saklayacak Array tipindeki değişkenimizi tanımlıyoruz. Benim değişkenimde sadece tek bir animasyon var, siz isterseniz birden çok animasyon ekleyebilirsiniz. Animasyonlarla ilgili parametreleri yine JavaScript ile aktarıyoruz. Son olarak da AjaxControlToolkit’e ait JavaScript sınıfları aracılığı ile hazırladığımız animasyon serisini bir SequenceAnimation olarak oynatmak için .play komutunu kullanıyoruz. Her bir animasyon için hedef HTML elementini ve gerekli animasyon parametrelerini vermemiz gerekiyor. XML-Script’e kıyasla biraz daha zor bir teknik olduğu için benim tavsiyem AnimationExtender animasyonlarını JavaScript ile birazdan inceleyeceğimiz şekilde kullanmanızdır.

<div id="gereksiz" runat="server" style="display:none;"></div>
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="Yoket" runat="server" TargetControlID="gereksiz">
    <Animations>
        <OnClick>
          <Parallel AnimationTarget="Calendar1">
            <FadeOut Duration=".5" Fps="20" MinimumOpacity=".1" />
            <Resize Width="400" Unit="px" />
          </Parallel>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>
  <ajaxToolkit:AnimationExtender ID="AnimationExtender2" BehaviorID="Goster" runat="server"  TargetControlID="gereksiz">
    <Animations>
        <OnClick>
          <Parallel AnimationTarget="Calendar1">
            <FadeIn Duration=".5" Fps="20" MinimumOpacity=".1" />
            <Resize Width="200" Unit="px" />
          </Parallel>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>
<input id="Button4" type="button" value="Yoket" onclick="var onclkBehavior = $find('Yoket').get_OnClickBehavior().get_animation();onclkBehavior.play();" />
<input id="Button1" type="button" value="Goster" onclick="var onclkBehavior = $find('Goster').get_OnClickBehavior().get_animation();onclkBehavior.play();" />
<input id="Button2" type="button" value="Gostermeye Ara Ver" onclick="var onclkBehavior = $find('Goster').get_OnClickBehavior().get_animation();onclkBehavior.pause();" />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

Yukarıdaki örneğimizde AnimationExtender kontrolleri içerisinde tanımladığımız animasyonları JavaScript ile çalıştırıyoruz. Normal şartlarda AnimationExtender’lar başka .NET kontrollerine bağlanmak zorunda oldukları için yalancı bir .NET kontrolü yaratıp AnimationExtender kontrollerinin TargetControlID özelliklerini boş geçmememiz gerekiyor. Bunun için kodun en başında bir DIV yaratarak CSS özelliği ile görünmez yaptım. Söz konusu DIV’i her iki AnimationExtender’a da TargetControlID olarak verdim. Böylece bir sorun yaşamayacağız. AnimationExtender kontrollerini JavaScript ile yakalayabilmek için her iki kontrole de farklı BehaviorID isimleri atadım. Kontrollerin BehaviorID özelliklerindeki isimlerden animasyonları yakalayacağız. Gelelim bizim esas animasyonları oynatacak olan JavaScript kodlarımızın bulunduğu düğmelere. Formun en altında toplam dört adet HTML düğmesi bulunuyor. Bu düğmelerin OnClick özelliklerine ikişer satırlık JavaScript kodları koydum. Bu kodları tek tek incelemekte fayda var.

var onclkBehavior = $find('Yoket').get_OnClickBehavior().get_animation();
onclkBehavior.play();

İlk satırda sayfadaki animasyonumu yakalayacak olan komut bulunuyor. get_OnClickBehavior(). Komutu ile söz konusu animasyona ait OnClick durumuna atanmış animasyonu alabiliyoruz. Aldığımız animasyonu onclkBehavior adındaki değişkene aktardıktan sonra .play() komutu ile oynatıyoruz.

var onclkBehavior = $find('Goster').get_OnClickBehavior().get_animation();
onclkBehavior.pause();

.pause() komutu söz konusu animasyonu durduruyor. Fakat sonrasında tekrar play() komutu ile bu animasyonu devam ettirmek mümkün.

Umarım hepiniz için bu ilk yazgelistir.com makalem faydalı bir kaynak olmuştur. Silverlight ile web dünyasına giriş yapmadan önce bir süre için DHTML animasyon ihtiyaçlarınızı AnimationExtender kontrolü ile sağlayabileceğinizden eminim.

Herkese kolay gelsin…

Web tasarımları ile uğraşırken HTML ve CSS kodlarını düzenleme aşamasında en sıkıntılı sorunlardan biri farklı tarayıcılarda aynı görsel sonucu almaya çalışmaktır. Bazen bu sorunu çözmek hiç mümkün olmayabilir. Sitemizin tüm görsel özelliklerini harici bir CSS dosyasında tuttuğumuzu düşünürsek, aslında tek yapmamız gereken farklı internet tarayıcıları için farklı CSS dosyaları hazırlayarak söz konusu tarayıcılar ile sitemiz açıldığında uygun CSS dosyasını sayfamıza ekliyor olmak.

Sayfamıza bir CSS dosyası eklemek için aşağıdaki kodu kullanacağız.

<style>
@import url("/ie.css");
</style>

Kod içerisinde import CSS komutunu kullanarak sayfaya adresini belirttiğim CSS dosyasının yüklenmesini sağlamış oluyorum. Sıra geldi tarayıcının Internet Explorer olup olmadığını anlamaya.

<!--[if IE]>
< style>
@import url("/ie.css");
</style>
<![endif]-->

Yukarıdaki kodun renginin yeşil olmasının nedeni aslında standart tarayıcılar tarafından kodun işlenmeyeceği anlamına geliyor. Başlangıcında <!-- ve sonunda --> olan bölgeler HTML kodlarında devre dışı bırakılmış sayılır. O nedenle yukarıdaki kod FireFox'da çalışmayacak. Oysa Internet Explorer kodun ilk kısmında yer alan [if IE] şart komutunu algılayacaktır. Böylece eğer tarayıcı Internet Explorer ise söz konusu CSS dosyası sayfaya eklenecek, değilse bu satırlar devre dışı sayılacağı için eklenmeyecek. Ayrıca isterseniz farklı Internet Explorer sürümleri için de kontroller yaparak farklı CSS dosyaları ekleyebilirsiniz.

<!--[if gt IE 5]>
< style>
@import url("/ie.css");
</style>
<![endif]-->

Yukarıdaki kodun ilk satırında yer alan gt komutu "daha yuksek" anlamına geliyor. Yani eğer tarayıcının Internet Explorer sürümü 5'den yüksek ise kod çalıştırılacaktır. Bunun gibi aşağıdaki farklı karşılaştırma komutlarını da kullanabilirsiniz.

gt - daha yuksek
gte - esit veya daha yuksek
lt - daha dusuk
lte - esit veya daha dusuk

Bana bu kadarı yetmez, ben kullanıcının tarayıcısının Safari, Camina, Konqueror vs olup olmadığını da anlamak istiyorum diyorsanız çözüm JavaScript. JavaScript ile kullanıcı tarafında gerekli kontrolleri yaparak sayfanıza uygun CSS dosyasını ekleyebilirsiniz. Gerekli kontrolleri yapacak olan uygun JavaScript fonksiyonunu http://www.quirksmode.org/js/detect.html adresinde bulabilirsiniz.

Kolay gelsin...

Bu konuyu uzun süre önce, daha Türkçe blog sitemi açmadığım zamanlarda (17 Nisan 2006) İngilizce blog sitemde incelemiştim. İngilizce makaleye buradan ulaşabilirsiniz. Mayasoft Bilişim Akademi'sinde vermekte olduğum Web Tasarım dersinde öğrencilerimden biri bu konuya değinince sorunla ilgili çözümü Türkçe blog siteme de yazmam gerektiğini düşündüm. Halen çok sayıda eski ve yeni yapılan web sitesinde Flash animasyonlar ve Internet Explorer arasındaki sorun devam ediyor. İlk önce sorun nedir ve nerden çıktı, ona bakalım.

Güncel bir örnek olarak bugünlerde ziyaret edeceğim EducaTurk fuarının yeni web sitesini ele alabiliriz. Siteye girdikten sonra online davetiye almak için tıklamam gereken görsel link Flash ile hazırlanmış. Fakat gerekli düzenlemeler yapılmadığı için Internet Explorer ile siteye giriş yaptığımda düğmeye iki kere tıklamam gerekiyor. Birinci tıklamayı Flash animasyonunu aktive etmek için, ikinciyi de aktive edilmiş animasyona tıklayabilmek için yapmam gerekiyor.

Bu sorun sadece Internet Explorer için geçerli. 11 Nisan 2006 tarihinde Microsoft tarafından bir yama çıkarıldı ve tüm Windows'lara Windows Update aracılığı ile yüklendi. Microsoft, ActiveX objelerinin Internet Explorer'daki çalışma yapısını değiştirmek durumunda kaldı. Bu durum da sayfalarımıza eklediğimiz Flash objelerini etkiledi. Peki Microsoft neden bunu yaptı? Özetle patent sorunları diyebiliriz. Konuyla ilgili makaleyi (İngilizce) buradan inceleyebilirsiniz. Eolas ve California Üniversite'ine ait patent nedeniyle web sayfaları içerisine ActiveX ile dinamik içerik, animasyon eklenmesini sağlayan Microsoft 521m$ cezaya çarptırıldı. Sonuç olarak yukarıdaki manzara ortaya çıktı.

Peki bu sorundan nasıl kurtulabiliriz? Çözüm basit sayfanın içerisine direk ActiveX objeleri eklemeyeceğiz. Ekleme işlemini JavaScript ile istemci tarafında yapacağız. Bunun için Flash objemizi sayfaya yerleştirecek olan HTML kodunu JavaScript ile sayfaya yazan bir JavaScript fonksiyonu tanımlayarak harici bir JavaScript dosyasına yerleştirmemiz gerekiyor.

function GetLogo()
{
   document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="786" height="241" id="logo" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="banner.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="banner.swf" quality="high" bgcolor="#ffffff" width="786" height="241" name="logo" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>');
}

Yukarıdaki JavaScript fonksiyonu HTML kodunu document.write() JavaScript metodu ile sayfaya yazıyor. Bu fonksiyonu flash.js adında bir metin dosyasına kaydediyoruz. Flash animasyonu kullanacağımız sayfa ile aynı klasöre koyuyoruz. Kod içerisinde yer alan HTML kodundaki flash animasyon dosyasına ait dosya adını ve boyut bilgilerini kendi sitenize uygun şekilde değiştirebilirsiniz. Sıra geldi içerisinde yukarıdaki fonksiyonumuzun yer aldığı dosyayı sayfamıza eklemeye.

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script language="javascript" type="text/javascript" src="flash.js"></script>
  <title>Örnek Sayfa </title>
</head>

Yukardaki şekli ile sayfamızın Header kısmına JavaScript dosyamızı linkledik. Böylece dosya içerisinde fonksiyonları sayfamızda kullanabileceğiz. Hazırladığımız fonksiyonun adı GetLogo şeklindeydi. Flash animasyon sayfada nereye eklenecekse oraya aşağıdaki kodu yazmamız gerekiyor.

   <script language="javascript" type="text/javascript">GetLogo()</script>

Sayfamızın tam kodu aşağıdaki şekilde olacaktır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <script language="javascript" type="text/javascript" src="flash.js"></script>
 <title>Örnek Sayfa</title>
</head>
<body>
 <div style="position: absolute; left: 20px; top: 50px;">
   <script language="javascript" type="text/javascript">GetLogo()</script>
 </div>
</body>
</html> 

Yukarıdaki örnek içerisinde bir katman (div) içine flash animasyonumuzu yerleştiriyoruz. Gerekli HTML kodunun belgenin o kısmına yerleştirilmesi için önceden hazırlamış olduğumuz JavaScript fonksiyonunu çalıştırıyoruz. Tabi ki bir JavaScript fonksiyonu çalıştırabilmek için komutumuzu script tagları arasına koymalıyız.

Çözümümüz tamamlandı fakat yukarıdaki sistem farklı durumlarda sorun çıkartabilir. Örneğin hedef internet tarayıcı JavaScript desteklemiyorsa sistem çalışmayacaktır. Tüm tarayıcılara uygun bir sistem için aşağıdan indirebileceğiniz Adobe'a ait JavaScript dosyasını kullanabilirsiniz. Söz konusu dosyayı makalenin sonundaki download paketinde bulabilirsiniz. Dosyanın adı AC_RunActiveContent.js şeklinde. Yukarıdaki, bizim hazırladığımız JavaScript dosyası yerine bu dosyayı sitemize ekleyeceğiz. Ekledikten sonra da aşağıdaki JavaScript kodu ile animasyonu sayfamıza yazdıracağız.

   <script type="text/javascript">
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0',
'width','786','height','241','src','banner','quality','high','pluginspage',
'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash',
'movie','banner' );//end AC code
   </script>

Kullandığımız JavaScript fonksiyonu Adobe tarafından hazırlanmış bir fonksiyon. Sayfamıza eklediğimiz AC_RunActiveContent.js dosyası içerisinde bulunuyor. Fonksiyonun aldığı parametreler arasında kalın yazılmış olanlara dikkat etmekte fayda var. Bunlar Flash animasyonun yüksekliği, genişliği ve dosya adını içeriyor. Adobe tarafından hazırlanmış olan bu fonksiyonu farklı tarayıcılarla ilgili uyumluluk sorunlarını halledecektir. Son olarak JavaScript desteklemeyen tarayıcılar için de aşağıdaki kodu sayfamıza yerleştireceğiz. Fakat unutmamakta fayda var, eğer tarayıcının JavaScript desteği kapatılmışsa maalesef Internet Explorer'da Flash animasyonlarda aktivasyon talebi devam edecektir.

   <noscript>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
       width="786" height="241">
       <param name="movie" value="banner.swf"/>
       <param name="quality" value="high"/>
       <embed src="banner.swf" width="786" height="241" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
         type="application/x-shockwave-flash"></embed>
     </object>
   </noscript>

Sonuç olarak tam çözümümüzün kodu aşağıdaki şekilde sonlanıyor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Untitled 1</title>
 <script language="javascript" type="text/javascript" src="AC_RunActiveContent.js"></script>
</head>
<body>
 <div style="position: absolute; left: 20px; top: 50px;">
 
   <script type="text/javascript">
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0', 'width','786','height','241','src','banner','quality','high','pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'movie','banner' );//end AC code
   </script>
 
   <noscript>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
       width="786" height="241">
       <param name="movie" value="banner.swf"/>
       <param name="quality" value="high"/>
       <embed src="banner.swf" width="786" height="241" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
         type="application/x-shockwave-flash"></embed>
     </object>
   </noscript>
 </div>
</body>
</html>

Makale boyunca kullandığımız tüm dosyaları ve örnekleri aşağıdaki download paketine bulabilirsiniz.

Kolay gelsin.

27042007_2.rar - Örnekler (12.37 KB)