20 Haziran 2007 - 18:55
Prototype ve Scriptaculous kullanımı
Web 2.0 yaygınlaşması ile javascript’in neler yapabileceğini gördük.Web 2.0′ın en önemli metodlarından birisi AJAX, yine Drag&Drop(sürükle&bırak)’da önemli özelliklerden.Peki bu özellikleri sayfanızda nasıl kullanabilirsiniz ? Yazının devamında prototype ve scriptaculous framework’leri kullanılarak bunları nasıl yapabileceğinizi anlatıyorum.
Öncelikle bu makaleden birşey anlamak için html ve js(orta-az) bilmeniz gerekmekte.Öncelikle prototype ve scriptaculous kütüphaneleri hakkında bilgi verelim.
Prototype en geniş ve en yaygın olarak kullanılan javascript kütüphanesi içinde yok yok, ajax’dan string’e string’den form’lara kadar bir çok element için yüzlerce fonksiyon bulundurmakta.
Scriptaculous(biliyorum ismi çok gıcık) ise prototype’i kullanarak çeşitli efekler, drag&drop işlemleri ve bazı AJAX güzelliklerini kolayca kullanmanıza yarayan bir kütüphane.
Başlıyoruz !
Daha öncede bahsettiğimiz gibi scriptaculous’un çalışması için prototype gerekli, http://script.aculo.us/downloads bu adresten scriptaculous’un son versiyonunu indirelim(bu yazı yazılırken son versiyon 1.70′idi).Zip dosyasını bir klasöre açalım(örn:/proje), lib ve src klasörleri dışında herşeyi silin daha sonra src klasörü içindeki 7 adet js dosyasını lib klasörüne kopyalayın.Artık lib adında tek bir klasörümüz içindede 8 adet javascript dosyası olmalı, lib klasörünün bir üstüne(/proje klasörüne) index.html yaratalım.
index.html
<html> <head> <script src="lib/prototype.js" type="text/javascript"></script> <script src="lib/scriptaculous.js" type="text/javascript"></script> </head> <body> </body> </html>
Örnekteki gibi basit bir HTML sayfası yarattıktan sonra script tag’larına dikkatinizi çekmek istiyorum görüldüğü gibi önce prototype’i sonrada scriptaculous’u sayfamızda kullanmak için dahil ettik, kütüphaneleri kullanacağım tüm sayfalarda bunları eklemek zorundayız.
Kullanım
Scriptaculous ve prototype bir çok fonksiyon barındırmakta bu makalede 3 tanesini örnek olarak göstereceğiz.Bu fonksiyonlar;
- Scriptaculous: Effect.DropOut(tüm efekler)
- Scriptaculous: Draggable(tüm kontroller)
- Prototype: Dolar İşareti ve Ajax.Request(tüm kontroller)
1-) Scriptaculous: Effect.Fade
Bu fonksiyon istediğimiz elemente uzaklaşma efekti uygulayıp silmeye yarıyor.”index.html” sayfamızı açıp aşağıdaki değişiklikleri yapalım:
index.html
<html> <head> <script src="lib/prototype.js" type="text/javascript"></script> <script src="lib/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript"> function efektim() { Effect.Fade('katman1'); } </script> </head> <body> <div id="katman1" style="background-color:#000;width:250px;height:300px"> <h1 style="color:red;">Efekt Uygulanacak Katman</h1> </div> <br /> <span onclick="efektim();">Çalıştır !</span> </body> </html>
Şimdi yaptığımız değişiklikleri açıklayalım, önce “efektim” adında bir fonksiyon oluşturduk bu fonksiyon efekti uyguluyor.”katman1″ adında bir katman oluşturduk bu efekten etkilenecek olan element son olarakda bir span tagı yarattık ve içine çalıştır yazdık bu ise “efektim()” fonksiyonunu tetikleyerek efektin gerçekleşmesini sağlıyor.index.html’i açıp “Çalıştır !” bastığınızda efektin uygulandığını göreceksiniz.
2-) Scriptaculous: Draggable
Bu fonksiyon bir elementin taşınabilir olmasını sağlıyor yine “index.html”‘de aşağıdaki değişiklikleri yapalım.
<html> <head> <script src="lib/prototype.js" type="text/javascript"></script> <script src="lib/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript"> function tasi() { new Draggable('katman1'); } </script> </head> <body> <div id="katman1" style="background-color:#000;width:250px;height:300px"> <h1 style="color:red;">Efekt Uygulanacak Katman</h1> </div> <br /> <span onclick="tasi();">Çalıştır !</span> </body> </html>
Görüldüğü gibi yine “tasi()” adinda bir fonksiyon oluşturduk artıdan elementimizi(katman1) yarattık ve en son olarak span yardımıyla “tasi()” fonksiyonunu tetikleyecek bir “Çalıştır !” yazısı yazdık.index.html’i bu şekilde düzenledikten açın siyah katmanı yani “katman1″‘i taşımaya çalıştığınızda olmadığını göreceksiniz çünkü önce elemente taşınabilir özelliği vermemiz gerekli onun için çalıştır tıklayın ve ardından tekrar taşımayı deneyin.
3-) Prototype: Dolar İşareti ve Ajax.Request
a-) Dolar İşareti
Prototype’in işimizi kolaylaştıran özelliklerinden biriside dolar işareti kısaca açıklamak gerekirse document.getElementById(’katman1′) yerine $(’katman1′) yazabiliyorsunuz.
b-) Ajax.Request
Öncelikle AJAX’ın ne olduğunu bilmiyorsanız onun hakkında biraz araştırma yaptıktan sonra okuyunuz.Bu örnekte post yöntemiyle basit bir AJAX isteği yapacağız.
<html> <head> <script src="lib/prototype.js" type="text/javascript"></script> <script src="lib/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript"> function istek() { new Ajax.Request('/ajaxisle.php', {method:'post', postBody:'degisken1=evet°isken2=hayir'}); } </script> </head> <body> <br /> <span onclick="istek();">Çalıştır !</span> </body> </html>
Her zaman ki gibi “istek();” adında fonksiyonumuzu yaratıyoruz. new Ajax.Request komutuyla AJAX isteğimizi tanımlıyoruz ilk parametre olan “method:post” bilgilerin post metedu ile gönderileceğini söylüyor, ikinci parametre ise gönderilecek değişkenleri belirliyor yani degisken1=evet gidicek degisken2=hayir olarak(Değişkenleri görüldüğü gibi & ile ayırıyoruz).Sayfayı açıp “Çalıştır !” tıkladığımızda AJAX isteğimiz çalıştırılmış olacaktır.
Son olarak
Buraya geldiğinize göre kütüphanelerin mantığını genel olarak kavradınız demektir bundan sonrası aşağıdaki linkler ile kendinizi geliştirmenize kalıyor ayrıca makalede bulduğunuz her türlü hatayı bana bildirebilirsiniz…
Makale
Yorumlar:
$(’katman1′) ile nasıl çağıryoruz bir örnek verebilirmisiniz?
@Osman Yıldırım
Şu Şekilde:
teşekkürler.
biraz fazla soru sordum sanki
peki bu prototype ile veri alışverişi nasıl yaparız?
mesela bir abc.php dosyasına veriyi yollayıp, cevabı isterken ordan nasıl bir yol ve kod yazmamız lazım?
@Osman Yıldırım
Veri alışverişi derken sanırım AJAX’ı kastettin, ona göre cevap veriyorum:
new Ajax.Updater('katman1','abc.php',{method:'post',parameters:'username=mTuran'});ewet çok güzel çalışıyor fakat; tr karakterle ilgili bi sıkıntı var. veriyi yolladıgım php dosyasının üstüne
yazmama rağmen tr karakterlerde sorun var.
prototype.js içinde
if (this.method == ‘post’) {
headers[’Content-type’] = this.options.contentType +
(this.options.encoding ? ‘; charset=’ + this.options.encoding : ”);
satırı var charsetle alakalı. bir kaç değişiklik yaptım ama bu seferde çalışmadı
nasıl bir çözüm yapmalıyız? teşekkürler
bi önceki yazımda
“yazmama rağmen tr karakterlerde sorun var. ” üstünde
php
header(” Content-type: text/javascript; charset:utf-8 “) ;
/php
yazıordu çıkmamış php kodu oldugu icin
@Osman Yıldırım:
Dostum kodları yazıp deneme fırsatım yok fakat şu adımları takip et ve prototype.js gibi kütüphanelerde kesinlikle doğrudan değişiklik yapmaya kalkma.
1-) değişiklik yaptıysan tekrar indir
2-) dosyaları kaydederken UTF-8 olarak kaydettiğinden emin ol.
3-) yaptığın gibi header’da charset belirle ve HTML’de metatag’lerde charset belirle
4-) İşin içinde MySQL varsa devreden çıkart sadece php ile dene…
Bunları dene eğer olmazsa boş bir zamanımda bakayım
çok güzel bir makale olmuş tebrikler. senden birde şöyle bu ajax uygulamalarına nasıl loading yaparız onuda açıklamanı istesem. yani gönderiliyor lütfen bekleyin gibi. post olaylarına bunu eklemeyi anlatsan tabi prototype ile. çok teşekkürler.
@enginna
rica ederim soruna gelince önce aşağıdaki kodu sayfanda bir yere ekle:
daha sonra şu javascript’i head arasına ekle
var loaded = false; function startLoading() { loaded = false; window.setTimeout('showLoadingImage()', 1000); } function showLoadingImage() { if ($('loading') && !loaded) { Element.show('loading'); } } function stopLoading() { Element.hide('loading'); loaded = true; } Ajax.Responders.register({onCreate : startLoading,onComplete : stopLoading});Bu kadar ! Bundan sonra yaptığın Ajax isteklerini prototype otomatik yakalayacak ve ilk tanımladığımız div ile yükleniyor yazacak istersen yazı yerine resimde koyabilirsin.
hocam çok teşkkürler fakat hata oluştu. hani bitti ancak sayfada hata oluştu mesajı varya o mesajı veriyor
senide yoruyoum. özür dilerim. tam kodum şu şekilde.
var loaded = false;
function startLoading()
{
loaded = false;
window.setTimeout(’showLoadingImage()’, 1000);
}
function showLoadingImage()
{ if ($(’loading) && !loaded) {
Element.show(’loading’);
}
}
function stopLoading() {
Element.hide(’loading’);
loaded = true;
}
Ajax.Responders.register({onCreate : startLoading,onComplete : stopLoading});
function istek()
{
new Ajax.Updater(’katman1′,’isle.php’,{method:’post’,parameters:’username=enginna’});
}
Yükleniyor…
Çalıştır !
teşekkürler. kolay gelsin.
@enginna
{ if ($(’loading) && !loaded) {
bu satırı şöyle düzenle:
{ if ($('loading') && !loaded) {çok çok teşekkür ederim. çok güzel oldu. yeni makaleleri bekliyoruz.
@enginna
Rica ederim, iyi kodlamalar…
tekerar merhaba tr karakter sorununu herşeyi utf-8 yaprak düzelttim ama yeni birşeyi farkettim oda yaptıklarımızı siteye atınca çok ağır çalışması bunun sebebide ilk başta kütüphaneleri tekrar tekrar yüklemesi. mesela şu prototype.js 60kb kendi başına. bunun içinden efektleri çıkartarak sadece
$(’abc’).innerHTML , Ajax.Updater, Ajax.Request leri nasıl çekebiliriz? teşekkürler
@Osman Yıldırım
Siteyi ağırlaştıracağını sanmıyorum çünkü js cache’e atılır yani sadece bir kez yüklenir daha sonra cache’den çağrılır bu bahsettiğin 3 özelliği kullanmak için prototype.js yeterli yani scriptaculous’u kurman gerekmez.Prototype.js’i sıkıştırmak istersen değişik yöntemler var fakat ben şunu önereceğim: aşağıdaki adrese gir gözat diyip prototype.js’i göster daha sonra shrink em bastığında js sıkıştıralacak %60 yakın bir sıkıştırma sağlanıyor bu çok iyi.
http://alex.dojotoolkit.org/shrinksafe/
ajax.uptader ile istek yaptıgımız dosyan gelen cevabı “abc” id’li bir div’e yazdırabiliyoruz. ama bir form elemanına vs. yazdıramıyoruz. sormak istediğim şu:
ajax.uptader den gelen cevabı bir değişkene atayamazmıyız? birde her js kodunu çalıştırmak için illede bir kullanıcı gerekir mi?
mesela: php ile bir işlem yaptırıyoruz o işlemi yaparken alert verdirebilirmiyiz?
form elemanınada yazdırabilirsin… form elemanına öncelikle id vermelisin daha sonra ajax.updater’de değişiklik yapacaksın.
değişkenide aşağıdaki şekilde atayabilirsin atayabilirsin:
new Ajax.Request('/profile.php', {method:'post',parameters:'isim=abc', onComplete: onComplete:function(e) { var degisken = e.responseText; } });Daha yapabileceğin çok şey ama birşeyler yapmak istiyorsan yazının sonunda verdiğim iki linki çok iyi karıştırman gerek, iyi çalışmalar.
eline sağlık cok güzel olmus
Çok açıklayıcı bir örnek olmuş , teşekkürler
Ajax OnComplete fonksiyonlarına, request nesnesi dışında kendi istediğimiz parametreleri de geçirebiliyor muyuz?
@Erencan SAĞIROĞLU
Bunun için prototype api’ye bak, bir kaç parametre daha olması lazım.
ya arkadaşlar buna
postBody:’degisken1=evet°isken2=hayir’
yerine form elemanını nasıl atayabiliriz? diyelimki ad adında bir inputum var.
postBody:’degisken1=’+ad+’°isken2=’+soyad+”
gibi birşeyler denedim olmadı. teşekkürler.
@enginna
Form elemanına id verdikten sonra $(’soyad’).value şeklinde ulaşabilirsin.
{method:’post’,parameters:’username=$(’soyad’).value’}
şeklinde kullandım. hata mesajı verdi. değişik şekilde de denedim ama olmadı. kusura bakmayın zahmet veriyorum.
@enginna
kodları çalıştırmadan birşey demem pek mümkün değil ama burdan baktığım syntax’ın yanlış olduğunu görüyorum(tırnakları düzeltmeyi unutma).
{method:’post’,parameters:’username=’+$(’soyad’).value}
muratturan çok teşekkürler. evet syntax hatasıymış. bu şekilde çalışdı. çok teşekkürler.
bu kısımda yazıya eklense aydınlatıcı olabilir istediginiz scriptleri secebilirsin ama yeni baslayanlar icin yazıda gosterilen gibi olması daha uygun cunku scriptlerlerin duzgun calismasi icin diger scriptlere ihtiyaci olabilir.Secebileceginiz script dosyalari
* builder
* effects
* dragdrop
* controls
* slider
@tekel
o özellik performans açısından kullanılıyor, makaledeki gibi scripti ekleyince tüm scriptler otomatik olarak dahil ediliyor.
ARkadaşlar ben bunu E-ticaret siteme eklemek istiyorum bana yardımcı olabilecek biri varmı !
lutfukar@hotmail.com
Anket seçeneklerimi yansıttığım
‘.$secenek_veri[secenek].’
satırı var. oy verildiğinde oyver.php ye seçilen oyun id sini nasıl gönderecegim acaba?
Özür diliyorum, sorunu hallettim ve scriptaculous ile ilk uygulamamı böylece bu makale sayesinde yaptım. Teşekkürler.
UTF-8 olmayan siteler için bir çözüm yolu var mı ajaxtan gelecek response’daki türkçe karakter sorunları için ?
ajax ile işlem yaptırdığım sayfanın başına header(”Content-Type: text/html; charset=ISO-8859-9″); koymak sorunumu çözdü
mavi ajandayı gördüm cok beyendim hayran kaldım elinize sağlık bu arada
benim bir problemim var bir sistem hazırlıyorum
bir sayfa içinde bir div tagına listeleme yapan bir sayfayı bastırıyorum
basılan bu sayfanın uzerinde linkler cıkıyor bu sayfada yani div taginin icinde sayfa yenilenmeden cıkan listeleme sayfamda verdigim linkler var bu linklerden getle veri gonderip sayfa yenilenmeden aynı sayfa içinde baska bir div tagi içinde idye gore baska bir sayfa cagırmak istiyorum ama başaramadım nasıl bir yöntem izlemem gerekir teşekkr ederdim
@engin ayhan
Teşekkürler ama sorununuzu tam anlayamadım.
en basit haliyle
sayfa yenilenmeden arasında acılan bir sayfam var burada resimler listeleniyor ve bu resimlerin hepsinin linkleri var bulibklere tıklandıgında , başka bir div arasında baska bir sayfa cagırıyorum o resme ait ozellikler gelmesi gerekiyor fakat id gönderemiyorum..
var sayfa = “ayrinti.php?veri=2″;
şeklinde 2 degerini gonderip sayfayı actırıyorum fakat
veri = resmin id si olması gerekiyor yani resimlerin oldugu sayfadaki idyi alıp veri degeri ile getle veya postla diger ayrinti sayfasının içerigini idye göre değiştirmesini istiyorum
veri göndermek ve almak ile ilgili kaynaklar buldum ama kullnamadım..
@engin ayhan
Doğru anladıysam resmin ID değerini alıp javascript’te kullanmak istiyorsun. Bu id değeri başka sayfada mı ? ID değeri aynı sayfada başka bir div içinde mi ?
hocam olayı çözdüm teşekkr ederim aynı sayfa içinde kullanmak için değiri resimler sayfasından link olarak gonderdim oldu
bu arada msn kullanıyrsan beni eklersen sevinirim
@engin ayhan
Sorununu halletmene sevindim ama vaktim kısıtlı olduğu için msn messenger listemde sadece uzun süredir tanıdığım insanlar var.
kolay gelsin.