Düzey: Orta

Jack D Herrington ( jherr@pobox.com ), Kıdemli Yazılım Mühendisi, Leverage Software Inc.

16 Ocak 2007

Web 2.0 dalgasıyla, kullanıcı deneyimi tamamen yeni bir vurgu kazandı. Bu deneyimin bir parçası, kullanıcılarla etkileşimli çalışmak ve kullanıcılara bilgi sunmak için kullanılabilecek yepyeni geliştirme yöntemleridir. Genellikle bu yeni arabirimlere pencere bileşenleri (widgets) denmektedir ve bu arabirimler, sunucuyla iletişim kurmak için Asynchronous JavaScript + XML (Ajax) kullanır. Bu makaleyi okuyarak, sitenizin etkileşimli çalışabilme özelliğini geliştirmek için kullanabileceğiniz beş pencere bileşenini keşfedebilirsiniz.

Web 2.0 devrimi, Web sitenizde müşterilerle etkileşimli çalışmak için benzersiz ve yeni yöntemleri vurgular. Bu yenilikçi tekniklerin birçoğu grafiklerin ve görüntülenecek verileri almak için sunucuyla iletişim kuran pencere bileşenlerinin kullanılmasını temel alır. Bu makalede, size Ajax ve XML üzerinden sunucuyla iletişim kuran ve bazıları açık kaynak, bazıları ise lisanslı olan bu tür beş pencere bileşenini tanıtacağım:

• Carousel: Bu pencere bileşeni, müşterilerin, her biri küçük bir resimle gösterilen öğelerden oluşan bir listeyi kaydırmak için kullanabileceği, dönen bir resim görüntüleyicidir. Kullanıcının bir öğeyi tıklattığında ne yapacağınız size bağlıdır. Carousel (Döner halka) örneklerine Flikr sitesinden ve Apple şirketinin iTunes arabiriminden ulaşabilirsiniz. Bu döner halka ücretsiz olarak edinilebilir ve yaygın olarak kullanılan jQuery JavaScript çerçevesine dayanır.
• SWF/Charts: Bu Adobe Flash tabanlı denetim, grafik verileri ve stil seçenekleri için sunucuda bulunan XML verilerini okur ve bu verilere dayalı bir grafik görüntüler. Arabirim zarif bir görünüme sahiptir ve XML verileri o kadar kolay bir şekilde oluşturulur ki, sayfanızın dinamik grafiğine hemen ekleyebilirsiniz.
• SWF/Gauge: SWF/Charts uygulamasının benzeri olan bu Flash pencere bileşeni, tamamen özelleştirilebilir bir gösterge (gauge) görüntüsü oluşturmak üzere sunucuda bulunan XML verilerini kullanır. Gösterge, bir uçaktakine veya bir otomobildekine benzer bir şekilde ya da daha modern tarzda görünebilir. Seçim size bağlıdır.
• Yerinde düzenleme: Tam olarak bir pencere bileşeni olmamakla birlikte, yerinde düzenleme denetimi, kullanıcılar bilgiye sahip olduğunda onlardan bu bilgiyi almak için kullanımı kolay, etkileşimli ve hafif bir yöntem sağlar. Yerinde düzenleme işlevselliği, prototype.js kitaplığını temel alan Scriptaculous çerçevesiyle sağlanır.
• DHTML pencereleri: DHTML penceresi, sayfa içeriğinizin üst kısmına modsuz bir kayan pencere yerleştirmek için kullanılabilecek bir düzenek sağlar. Kullanıcılar pencereyi taşıyabilir, yeniden boyutlandırabilir ya da kapatabilirler. Pencerenin içeriği sayfadaki JavaScript koduyla belirlenebilir ya da Ajax aracılığıyla sunucudan okunabilir. Bu pencere tipi, uyarı düzeneği olarak kullanmak ya da tüm sayfanın yeniden yüklenmesini gerektirmeyen küçük formları görüntülemek için idealdir.

Yerleştirmesi en kolay pencere bileşenlerinden biri olduğunu düşündüğüm için anlatmaya SWF/Charts pencere bileşeninden başlıyorum. Ayrıca, bu pencere bileşeni çabanıza en iyi yanıtı sağlar.

SWF/Charts pencere bileşeni

Eski "Bir resim binlerce sözcüğe bedeldir," sözüne karşı çıkmak oldukça zordur, özellikle de grafiklerin önemli olduğu bir durumda. Ancak, Web üzerinde grafiklerin oluşturulması her zaman bir sorun olmuştur. Bazı Web çerçeveleri resim oluşturmak için basit grafik şekillerini içerse de, çoğu Web çerçevesi yeni grafik araçlarından yoksundur. Bu işlevsellik eksikliği, sizin kendi grafiklerinizi oluşturmaya takılıp kalmanıza neden olur.

XML ile kodlanmış verilerinden grafik oluşturan bir pencere bileşeni olsaydı, harika olmaz mıydı? Görünüşe göre, böyle bir pencere bileşeni var: SWF/Charts. Bu pencere bileşenini kullanmaya başlamak için, SWF dosyasını ve pencere bileşeninin kullandığı diğer SWF dosyalarını siteden yükledim. Daha sonra, dosyaları kendi siteme kurdum ve HTML sayfasına SWF pencere bileşenine bir bağlantı ekledim (Liste 1'de gösterilmektedir).

<html><body>

<object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub.../swflash.cab#version=6,0,0,0" 
  width="400" height="250">
<param name="movie"
  value="charts.swf?xml_source=chart_data.xml&library_path=charts_library">

<embed
  src="charts.swf?xml_source=chart_data.xml&library_path=charts_library" 
  width="400" height="250" 
  type="application/x-shockwave-flash" 
  pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>

</object>

</body></html>

Charts.swf iki parametre alır: Kitaplık dizininin konumu ve XML verilerinin URL'si. XML veri biçimi komik bir şekilde basittir. Liste 2'de basit bir örnek gösterilmektedir.

<chart>
  <chart_type>bar</chart_type>
  <chart_data>
    <row>
      <null/>

      <string>2005</string>
      <string>2006</string>
    </row>
    <row>
      <string>Projected</string>

      <number>500</number>
      <number>700</number>
    </row>
    <row>
      <string>Actual</string>

      <number>600</number>
      <number>900</number>
    </row>
  </chart_data>
</chart>

Bu dosya, bazı isteğe bağlı görsel bilgilerle birlikte öncelikli olarak grafiğe ilişkin verileri içerir. Bu örnekte, grafik tipini bir çubuk grafik olarak belirliyorum. SWF dosyasını yüklediğim sitede ayarlayabileceğiniz daha birçok seçenek ve kullanılabilir grafik tipi bulunuyor.

Firefox tarayıcımda dosyaya göz attığımda, Şekil 1'de gösterilen grafiği gördüm.

Sizin de görebileceğiniz gibi, varsayılan renk şeması ve grafiğin görünüşü gerçekten parlak. Ayrıca, grafik eksen değerlerini güzel bir şekilde yukarı yuvarlayarak doğru şeyi yapıyor. Bana göre küçük bir çabayla genel etki harika olur.

Açıkçası, graph_data.xml dosyasını bir dinamik Web sayfasıyla değiştirebilirdiniz: Döndürülen veriler doğru biçimde olduğu sürece, grafik denetimi için bu konu fazla önem taşımaz. Bu makaledeki tüm örneklerde bu durum söz konusudur. Aslında, tüm örnekleri bir Web sunucusu (Apache Tomcat ya da IBM® WebSphere® Application Server) ya da Web programlama dili (örneğin, PHP, Microsoft® ASP.NET, Java™ 2 Enterprise Edition [Java EE]) kullanmadan, yerel dosyalarda bir Web tarayıcısıyla çalıştırabilirsiniz.

SWF/Gauge pencere bileşeni

Verileri sunmanın etkileyici bir başka yolu da bunları gösterge (gauge) görünümüyle sunmaktır. Kişisel olarak, az miktar bilgiyi sunmak için çok fazla alan harcadığından gösterge düşüncesini çok desteklemiyorum. Ancak göstergeler, yönetimsel gösterge panolarının temel özelliklerinden biri olduğundan, bunları hızlı bir şekilde oluşturma yeteneği kullanışlıdır.

Ancak, Web basit çubuk grafiklerini çok iyi gösteremiyorsa, dairesel göstergeleri de kesinlikle iyi gösteremeyecektir. Bu yüzden, XML/Graph pencere bileşenini yaratan firmaya döndüm ve tahmin edin ne buldum? Göstergeler için de bir çözümleri vardı: XML/Gauge.

Liste 3'te gösterilen SWF/Gauge pencere bileşeninin yerleşik olduğu HTML sayfasıyla başlayacağım.

<html><body>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/.../swflash.cab#version=6,0,0,0"
  width="110" height="55">
<param name=movie VALUE="gauge.swf?xml_source=gauge_data.xml">
<embed src="gauge.swf?xml_source=gauge_data.xml"
  width="110" height="55" type="application/x-shockwave-flash"
  pluginspace="http://www.macromedia.com/go/getflashplayer">

</embed></object>

</body></html>

Bu gauge.swf film dosyası tek bir bağımsız değişken alır: Verilerin konumu. Bu durumda, konum, Liste 4'te gösterilen gauge_data.xml dosyasıdır.

<gauge>

<circle fill_color="888888" start="275" fill_alpha="100"
  line_color="555555" line_thickness="3" line_alpha="90"
  radius="50" x="55" end="445" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="90"
  line_thickness="4" line_alpha="20" radius="45" x="55"
  end="440" y="55"/>
<circle fill_color="666666" start="317" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="322" y="55"/>
<circle fill_color="666666" start="337" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="342" y="55"/>
<circle fill_color="666666" start="357" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="362" y="55"/>
<circle fill_color="666666" start="377" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="382" y="55"/>

<circle fill_color="666666" start="397" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="402" y="55"/>
<circle fill_color="666666" start="417" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="422" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="100"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="FF4400" start="280" fill_alpha="100"
  radius="44" x="55" end="310" y="55"/>
<circle fill_color="44FF00" start="50" fill_alpha="100"
  radius="44" x="55" end="80" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="80"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="333333" start="270" fill_alpha="100"
  line_alpha="0" radius="20" x="55" end="450" y="55"/>

<rotate start="280" shake_span="2" shadow_alpha="15"
  step="1" x="55" span="0" y="55" shake_frequency="20">

  <rect fill_color="ffff00" fill_alpha="90" line_alpha="0"
    height="40" x="53" width="4" y="13"/>
</rotate>

<circle fill_color="111111" start="270" fill_alpha="100"
  line_thickness="5" line_alpha="50" radius="15" x="55"
  end="450" y="55"/>

</gauge>

Görebileceğiniz gibi SWF, bu pencere bileşeniyle farklı bir yaklaşım aldı. Göstergeye (ya da grafiğe) ilişkin verileri belirlemek yerine, aslında göstergeyi, daireler, yaylar ve dikdörtgenler gibi basit grafik şekillerini kullanarak oluşturdum.

Dürüst olmak gerekirse, yalnızca verileri sağlayacağım bir hazır gösterge kümesini tercih ederdim. Ancak, bu yöntem işe yarıyor ve bana, neredeyse sınırsız hareket özgürlüğü veriyor -- ancak, yine de üzerinde çalışabileceğim birkaç hazır örnek daha olsaydı iyi olurdu.

Tarayıcımdaki sayfaya gittiğimde, Şekil 2'deki göstergeyi gördüm.

Basit grafik şekillerinin belirtimiyle, bu pencere bileşeninde kazanabileceğimiz çok şeyin olmayacağını düşünebilirsiniz. Ancak, bu doğru değil. Basit şekiller, basit canlandırma tekniklerini de içerdiğinden, kullanıcı tıklattığında tarayıcıda gezinmeyi sağlayan aktif bağlantı bölgeleri oluşturma yeteneğinin yanı sıra, gösterge üzerindeki ibreyi oynatabilir ve ses ekleyebilirsiniz. Buna ek olarak, bu denetimle yeni şeyler düşünebilirsiniz; yalnızca göstergeler için kullanmak yerine, aynı zamanda herhangi bir resim tipi ve basit canlandırma oluşturmak için basit grafik şekil dilini kullanabilirsiniz.

Yerinde düzenleme

Kullanıcılar artık masaüstü uygulamalarından yerinde düzenleme yapabilmeyi bekliyorlar, ancak bu işlev, şimdiye kadar Web üzerinde nadiren bulunan bir şeydi. Web 2.0 ile, etkileşimli çalışabilme olanağı en üst düzeye çıktığından, yerinde düzenleme gibi teknikler de giderek yaygınlaşıyor.

Yerinde düzenlemeyi uygulamak için bunu kendiniz yazabilir ya da ağır yükü sizin yerinize kaldıracak bir JavaScript çerçevesi kullanabilirsiniz. En yaygın olarak kullanılan araç takımlarından biri, prototype.js kitaplığını temel alan Scriptaculous çerçevesidir. Scriptaculous kitaplığı, yerinde düzenleme denetimi oluşturmayı oldukça kolaylaştırır.

Liste 5'te yerinde düzenlemeye ilişkin basit bir HTML test dosyası gösterilmiştir.

<html><head>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="controls.js"></script>
<script src="scriptaculous.js"></script>

</head><body>
<table width="100%">
<tr><th width="10%">Name</th>
<td width="90%"><p id="name">Candy bar</p></td>
</tr></table>

<script>
new Ajax.InPlaceEditor('name', 'submitted.html' );
</script>
</body>
</html>

Başlangıç olarak, Inplace.html gerekli tüm JavaScript kaynak dosyalarını içerir. Daha sonra, yerinde düzenlenebilir verileri içeren bir paragrafla basit bir tablo oluşturdum. Dosyanın sonuna, paragraf için bir InPlaceEditor nesnesi oluşturan küçük bir kod ekledim.

Bu InPlaceEditor oluşturucu, düzenleme tamamlandıktan sonra sunma işlemini gerçekleştirecek olan sayfanın URL'sinin yanı sıra, paragrafın tanıtıcısını da bağımsız değişken olarak alır. Bu durumda, bu sayfa submitted.html olur; ancak gerçekte, bir ASP.NET, Java EE ya da PHP sayfası ya da başka bir dinamik Web teknolojisi olabilir.

Liste 6'da basit submitted.html dosyası gösterilmektedir.

<p>Name changed!</p>

Şimdi, bunu test etmek için: Önce tarayıcımda HTML dosyasını açıyorum. Burada, özgün metni görüyorum. İmleci metnin üzerinde gezdirirken, Şekil 3'te gösterildiği gibi metin sarıya döner.

Bu sarı vurgulama, kullanıcılar için tıklatarak düzenleme yapabilecekleri alanı belirten görsel bir işarettir. Dolayısıyla, ben de alanı tıklattım ve Şekil 4'teki gibi Name alanını, bir ok düğmesini ve bir de cancel bağlantısını gördüm.

Daha sonra, metni değiştirip ok düğmesini tıklattım ve verileri sunucuya (ya da bu örnekte, submitted.html sayfasına) gönderdim. Sunucu, özgün metnin yerine geçecek HTML sayfasını döndürdü. Bu durumda, Name changed! metnini geri gönderdim (bkz. Şekil 5); aslında, verilerin yeni değeri bu olacaktı.

Bunlar gibi basit arabirim büyütmeleri, uygulamanızın kullanılabilirliğinde çok büyük farklılıklar yaratabilir. Sayfanın yüklenmesini beklerken -- özellikle yavaş sunucularda -- aksak, eski stilde bir arabirim kullanıldığı izlenimi verilir. Burada anlatılan yerinde düzenleyici gibi basit araçları kullanarak, uygulama karmaşıklığını çok az artırarak uygulamanızın gerçekten daha güzel görünmesini sağlayabilirsiniz.

DHTML pencereleri

Tarayıcıların, tipik pencereleri Web sayfalarına dönüştürmekte zorlanmaları belki de iyi bir şeydir. Ancak bazen, küçük pencereler de iyi olabilir. Bunlar, uyarıları ya da küçük formları görüntülemek için kullanışlıdır. Ayrıca bunlar, sayfanın içeriğini kaplayan rahatsız edici reklamları görüntülemenin de harika bir yoludur. Durun bir dakika: Son dediğimi unutsanız iyi olur.

Her neyse, söylediğim gibi, Dinamik HTML (DHTML) sayfaları için pencere oluşturmak o kadar da kolay değildir. Bu nedenle, yaygın olarak kullanılan Prototype.js kitaplığına dayalı bu inanılmaz sağlamlıktaki pencere paketini bulduğumda çok mutlu oldum. Yalnızca kullanımı kolay olmakla kalmıyor, aynı zamanda arabirimi de oldukça uyumlu ve her tarayıcıda güzel bir şekilde çalışıyor. Liste 7'de window.html sayfası gösterilmektedir.

<html>
<head>
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="prototype.js"></script>
<script src="window.js"></script>
</head>
<body>

<script>
var win = new Window( 'myPopup', {
   title: "Terms and Conditions",
   top:70, left:100, width:300, height:200,
   resizable: true, url: "terms.html",
   showEffectOptions: { duration: 3 }
  } 
);
win.show();
</script>
</body>
</html>

Önce, üstbilgiye prototype.js ve window.js kaynak dosyalarını getirdim. Daha sonra, boyut, konum, başlık ve pencere bileşeninin içeriği alacağı sayfanın URL'si gibi istediğim parametreleri kullanarak açılacak nesneyi oluşturdum. Ajax aracılığıyla içeriği bir sayfadan yüklemek içeriği almanın bir yoludur; ancak, bunları dinamik olarak JavaScript koduyla da ayarlayabilir ya da pencereyi, sayfada var olan bir biçim imi çevresinde oluşturabilirsiniz.

Bu örnekte,Liste 8'de gösterilen terms.html dosyasına başvurdum.

<html><body bgcolor="white">
<h1>Terms and Conditions</h1>
<p>In order to use this site you must comply
with the following conditions...</p>
</body></html>

Sayfayı tarayıcımda başlattığımda, Şekil 6'da gösterilen pencereyi gördüm.

Hayır, bu yalnızca üst üste gelmiş iki Mac penceresi değil. Aslında bu, gerçek bir Firefox tarayıcı penceresinin içindeki Mac görünümlü sahte bir DHTML penceresi. Ama Mac pencereleriyle aynı şekilde görünüyor ve çalışıyor.

Şekil 7'de gösterildiği gibi pencerenin boyutunu değiştirebilir ya da pencereyi taşıyabilirim.

Hem bu makale için, hem de kendi çalışmaların için birkaç DHTML pencere kitaplığına baktım ve size güvenle söyleyebilirim ki bu örnek, bana en iyisi gibi geldi. Diğer pencere paketlerinde oluşturma sorunları vardı, kesim kesim oluşturuluyor ve yeniden boyutlandırdığımda kötü görünüyorlardı. Bu örnek, tarayıcıya yerleştirilmiş çok daha gerçek bir pencere gibi görünüyor.

Carousel (döner halka) pencere bileşeni

Oldukça fazla sayıda kullanıcı arabirimi (UI) çalışması yapmış olan herkes size ekran alanının kritik önem taşıdığını söyleyebilir. Sınırlı bir alana, sıkıştırılmış hissi vermeden sığdırabildiğiniz kadar veri sığdırmak önemlidir. Bu nedenle, Apple iTunes içinde ilk kez bir döner halka denetimi gördüğümde oldukça etkilenmiştim.

Döner halka denetimi, sabit bir alan bloğunda birkaç resim gösterir. Resim bloğunun solunda ve sağında sola ve sağa oklar vardır. Okları tıklatırsanız, resimler sola ya da sağa doğru kayar ve yeni resim kümesiyle yer değiştirir. iTunes programında, resimler albüm kapaklarıydı ve her bir tür için bir döner halka denetimi vardı.

Sağlanan alan tasarrufu oldukça fazladır: Üç albümlük alana 30 albüm kapağı yerleştirebilir ve yine de, her birini makul boyutlarda gösterebilirsiniz. Ayrıca, denetimin kullanımı kolaydır. Basitleştirilmiş bir kaydırma çubuğu gibidir.

Sahne arkasında ise, özellikle çekici gelen kısım olan sola ya da sağa hareket eden resimlerin canlandırması nedeniyle döner halkaları uygulamak kolay değildir. Bu nedenle, jQuery JavaScript çerçevesinde oluşturulmuş carousel adlı bir açık kaynak döner halkası gördüğümde çok mutlu oldum.

Liste 9'da gösterilen Web sayfasına basit bir döner halka pencere bileşeni uyguladım.

<html>
<head>
<script type="text/javascript" src="js/jquery-1.0.3.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<style type="text/css">
#mycarousel { display: none; }
.jcarousel-scope {  position: relative; width: 255px;
  -moz-border-radius: 10px; background: #D4D0C8;
  border: 1px solid #808080; padding: 20px 45px; }
.jcarousel-list li { width: 81px; height: 81px;
  margin-right: 7px; }
.jcarousel-list li img { border: 1px solid #808080; }
.jcarousel-list li a { display:block;  outline: none;
  border: 2px solid #D4D0C8; -moz-outline:none; }
.jcarousel-list li a:hover { border: 2px solid #808080; }
.jcarousel-next {  position: absolute; top: 45px;
  right: 5px; cursor: pointer; }
.jcarousel-next-disabled { cursor: default; }
.jcarousel-prev { position: absolute; top: 45px;
  left: 5px; cursor: pointer; }
.jcarousel-prev-disabled { cursor: default; }
.loading { position: absolute; top: 0px;
  right: 0px; display: none; }
</style>

<script type="text/javascript">
function loadItemHandler( carousel, start, last, available ) {
  if (available) { carousel.loaded(); return; }
  var cr = carousel;
  jQuery.get("data.xml", function(data) { appendItemCallback(cr, start, last, data); });
};

function appendItemCallback( carousel, start, last, data ) {
  var items = data.match( /(\<img .*?\>)/g );

  for (i = start; i <= last; i++) {
    if ( items[ i - 1 ] == undefined ) break;
    var item = carousel.add( i, getItemHTML( items[i-1]) );
    item.each(function() {
      jQuery("a.thickbox", this).click(function() {
        var t = this.title || this.name || null;
        var g = this.rel || false;
        TB_show(t,this.href,g);
        this.blur();
        return false;
      });
    });
  }
  carousel.loaded();
};

function getItemHTML( item ) {
  var found = item.match( /href=\"(.*?)\"/ );
  var url   = jQuery.trim(found[1]);
  var title = jQuery.trim(found[1]);
  var url_m = url.replace(/_s.jpg/g, '_m.jpg');
  return '<a href="' + url_m +
        '" title="' + title +
        '" class="thickbox"><img src="' + url +
        '" width="' + 75 + '" height="' + 75 +
        '" alt="' + title + '" /></a>';
};

var nextOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-over.gif"); };

var nextOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next.gif"); };

var nextDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-down.gif"); };

function nextButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/next.gif")
      .mouseover(nextOver).mouseout(nextOut).mousedown(nextDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/next-disabled.gif")
      .unmouseover(nextOver).unmouseout(nextOut).unmousedown(nextDown);
  }
}

var prevOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-over.gif"); };

var prevOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev.gif"); };

var prevDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-down.gif"); };

function prevButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/prev.gif")
      .mouseover(prevOver).mouseout(prevOut).mousedown(prevDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/prev-disabled.gif")
      .unmouseover(prevOver).unmouseout(prevOut).unmousedown(prevDown);
  }
}

jQuery(document).ready(function() {
  jQuery().ajaxStart(function() { jQuery(".loading").show(); });
  jQuery().ajaxStop(function() { jQuery(".loading").hide(); });
  jQuery("#mycarousel").jcarousel({
    itemVisible: 3, itemScroll: 2, wrap: true,
    loadItemHandler: loadItemHandler,
    nextButtonStateHandler: nextButtonStateHandler,
    prevButtonStateHandler: prevButtonStateHandler
  });
});
</script></head><body><div id="mycarousel">
<div class="loading">

<img src="img/loading.gif" width="16" height="16" border="0" />Loading...</div>
<img src="img/horizontal-ie7/prev.gif" border="0" class="jcarousel-prev" />
<img src="img/horizontal-ie7/next.gif" border="0" class="jcarousel-next" />
<ul></ul>
</div></body></html>

Evet, anlatılacak yukarıdaki örneklerden çok daha fazla şey var. Ancak, kodun çoğu grafiklerin oluşturulması ve sunucudan döndürülen Ajax verilerinin yorumlanmasıyla ilgili. Aslında, bu makaledeki kodun çoğu, karşıdan yüklediğinizde sağlanan örneklerden birine dayanıyor. Bu nedenle, denetimi kullanmak için çok fazla şey öğrenmem ya da herhangi bir belge okumam gerekmedi.

Döner halka verileri Liste 10'da gösterilmiştir.

<images>
<img href="pics/image1.jpg" />
<img href="pics/image2.jpg" />
<img href="pics/image3.jpg" />
<img href="pics/image4.jpg" />
</images>

Bu durumda, dosya, her bir resmin URL'sini içeren bir biçim imi kümesinin bulunduğu bir biçim imine sahip basit bir XML biçimidir. Denetim aslında bir Ajax pencere bileşeni olmadığından, istediğiniz biçimlendirmeyi kullanabilirsiniz. Ben, XML'yi yorumlayan ve döner halkadaki her bir slayt öğesini oluşturan kodu yazdım. Sonucu Şekil 8'de görebilirsiniz.

Resmi tıklatabilir ve resmin bulunduğu sayfaya (ya da belirlediğim URL'ye) gidebilirim. Ayrıca, daha fazla resim görmek üzere döner halkayı kaydırmak için sağ ya da sol okunu tıklatabilirim. Sonuç, oldukça etkileyici.

Sonuç

Size, Web'de hem ticari olarak satılan, hem de ücretsiz bulabileceğiniz bir dizi pencere bileşeni ve araç gösterdim. Bu makale için araştırma yaparken baktığım araçların birçoğu, Ajax kullanmıyordu ve dolayısıyla, konuya uygun değildi. Ancak, her biri kendi başına dikkate değerdi. Özellikle, karşıdan yükleyebileceğiniz yüksek kaliteli, açık kaynak WYSIWYG düzenleyicilerinin sayısından oldukça etkilendim. Sitelerine kalın, italik yazılar, bağlantılar, resimler ve benzer içerik koymak için metin kutularında HTML kullanmak zorunda kalan gergin müşterilerle sık sık karşılaşıyorum. Bu düzenleyiciler tüm HTML'yi gizliyor ve kullanıcılara, bir sözcük işleme uygulamasına benzer bir düzenleme hissi veriyor.

WYSIWYG düzenleyicilerine ek olarak, ilerleme çubukları, sekmeli iletişim kutuları, akordiyon denetimler, saatler, tarih seçiciler, RSS ve OPML (Outline Processor Markup Language) okuyucuları, hatta etkileşimli uçbirim pencereleri için bile çözümler bulabilirsiniz. Kesinlikle, kendi DHTML ya da Flash denetimlerinizi oluşturmadan önce Internet'te (genellikle ücretsiz olarak bulabileceğiniz) uygulamalara bakmalısınız. Burada anlattıklarıma benzer pencere bileşenleriyle, çok fazla çaba harcamadan sitenize büyük miktarda etkileşim yeteneği ekleyebilirsiniz.

Kaynaklar

• developerWorks XML zone sitesi : developerWorks XML zone sitesinden XML ile ilgili her şeyi öğrenebilirsiniz.
  
  
• jQuery ve prototype.js : Yaygın olarak kullanılan bu JavaScript çerçevelerine göz atabilirsiniz.
  
  
• IBM XML sertifikası : XML ve ilgili teknolojilerde nasıl bir IBM Sertifikalı Geliştirici olabileceğinizi öğrenebilirsiniz.
  
  
• XML teknik kitaplığı : Çeşitli teknik makaleler ve ipuçları, senaryolar, standartlar ve IBM Redbook yayınları için developerWorks XML Zone sitesine bakabilirsiniz.
  
  
• developerWorks teknik etkinlikleri ve web yayınları : Bu oturumlarla teknoloji bilgilerinizi güncel tutabilirsiniz.
  
  
• Ajaxian : Bu harika kaynakla, Ajax ve bunu kullanan ön uç pencere bileşenlerle ilgili gelişmeleri izleyebilirsiniz.
  
  

• JCarousel : jQuery çerçevesinde oluşturulan döner halka pencere bileşenini deneyebilirsiniz.
  
  
• SWF/Gauge ve SWF/Charts : maani.us tarafından geliştirilen SWF/Gauge ve SWF/Charts pencere bileşenlerini edinebilirsiniz. Ayrıca, bir Flash XML Slideshow pencere bileşeni de bulabilirsiniz.
  
  
• DHTML penceresi : Bulabildiğim en iyi DHMTL pencere paketini deneyebilirsiniz.
  
  
• Scriptaculous : Scriptaculous uygulamasını karşıdan yükleyebilir ve ek bilgi için script.aculo.us sitesine bakabilirsiniz. Ayrıca, Prototip kitaplığına da gereksinim duyacaksınız.
  
  

• Tartışma forumlarına katılabilirsiniz .
  
  
• XML bölgesi tartışma forumları : XML merkezli birkaç forumdan herhangi birine katılabilirsiniz.

Yazar hakkında