Kişiselleştirilebilir LightBox üretimi 2 - Ajax işlemleri
Tarih 23 Ocak 2010 Cumartesi | Etiket(ler) jQuery, JavaScript, Css, Ajax | Yorumlar 4 yorum
Bu yazıyı okumadan önce bir önceki yazımda (
Kişiselleştirilebilir LightBox üretimi) bahsettiğim konuya göz atmanızı öneririm. Çünkü genel şablonumuzu ona göre oluşturacağız.
Şimdi bu pencerelerin içinde nasıl Ajax çağrısı yapabileceğimizi incelemeye başlayalım. Bir önceki örnekten yola çıkarsak penceremizin genislik,uzunluk,baslik ve icerik adlarında 4 parametre aldığını hatırlıyoruz. icerik isimli parametreyi, çağıracağımız sayfanın adı olarak değiştirip ufak bir modifikasyonla ajax çağrısı yapalım.
Bu sefer bize 1 adet yükleniyor imajı ve ajax ile çağırılacak bir sayfa gerekecek (Bu server side bir dosya olabilir). Bunun için aşağıdaki imajı ve kodları kullanabilirsiniz.
Yükleniyor imajımız :
Ajax ile çağıracağımız sayfa :
<html>
<head>
<title></title>
</head>
<body>
bu sayfa ajax isteği sonucunda gönderilmiştir.
</body>
</html>
Eski
pencereGoster() javascript fonksiyonumuzu şu şekilde değiştirelim :
var pencereAcikmi = false;
function pencereGoster(genislik,uzunluk,baslik,sayfa) {
var apSec = $("#pencere");
if(pencereAcikmi == false) {
$("#karart").css("display","block");
var winH = $(window).height();
var winW = $(window).width();
$("#pencerebasliksol").html(baslik);
$("#pencereicerik").html("<div style='text-align: center;'><br /><br /><img src='ajaxLoading.gif' width='220' height='19'></div>");
$.ajax({
type: "GET",
url: sayfa,
cache: false,
success: function(msg){
$("#pencereicerik").html( msg );
}
});
apSec.css("width",genislik);
apSec.css("height",uzunluk);
apSec.css('top', winH/2-apSec.height()/2);
apSec.css('left', winW/2-apSec.width()/2);
pencereAcikmi = true;
}
else {
pencereAcikmi = false;
}
apSec.css("display","block");
}
pencereGoster() fonksiyonumuz yine 4 parametre alıyor. Fakat bu sefer son parametremiz değişik. Bunlar
genislik, uzunluk, baslik ve
sayfa. Tek değişen
sayfa parametremiz. Bu da çağıracağımız sayfayı temsil ediyor.
Herşey bittiğinde pencere açma fonksiyonumuzu artık şu şekilde çağırıyoruz.
<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','ajaxSayfa.html');">Pencere aç</a>
Bunları uygulamak için yazının başında söylediğim gibi
şu sayfadaki genel şablona ihtiyacınız olacak.
Bittiğinde şöyle gözükecek.
Daha önce de söylediğim gibi siz kendi tasarımınıza göre özelleştirip daha güzel bir görüntüye dönüştürebilirsiniz fakat bu haliyle de güzel görünüyor.
Penceremizin çalışan halini buradan indirebilirsiniz.Tarih 21 Ocak 2010 Perşembe | Etiket(ler) jQuery, JavaScript, Css | Yorumlar 15 yorum
LightBox pencereleri çoğumuzun hazır olarak alıp kullandığı klasik popup veya uyarı pencerelerinin sıkıcılığı ve tasarımını özelleştirememe problemlerini çözen client side uygulamalardır. Basit bir tanımla anlatmaya çalıştığım lightbox pencereleri hazır olarak geldiğinden birçoğu kişiselleştirmeye pek uygun yapıda değillerdir. İşte böyle bir durumda kendi pencelerimizi üretmek isteyebiliriz. Bu ihtiyaçtan yola çıkarak kendi lightbox pencerelerimizi nasıl üretebiliriz sorusuna çözüm arayacağız. Kendi geliştirdiğim lightbox penceresi çok sade ve kişiselleştirilebilirliğe olanak sağlıyor.
jQuery i indirip projemize dahil ettikten sonra, hemen işe koyulalım ve yazmaya başlayalım:
Önce penceremizin şemasını html olarak çıkartalım :
<head></head> taglarinin arasına jQuery i ekleyelim.
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<body></body> taglarının içine :
<div id="karart"></div>
<div id="pencere">
<div id="pencerebaslik">
<div id="pencerebasliksol"></div>
<div id="pencerebasliksag"><a href="javascript:pencereKapat();">[kapat]</a></div>
</div>
<div id="pencereicerik"></div>
</div>
karart isimli div penceremizin modal olarak açılmasını sağlayacak kararan arkaplan,
pencere isimli div ise penceremizi kapsayacak genel taşıyıcımız. Bizi ilgilendiren ve dışarıdan parametre alacak
pencerebasliksol ve
pencereicerik isimli divler.
pencerebasliksol isimli div e title ımızı,
pencereicerik isimli div e iceriğimizi yazdıracağız. Css imizi yazarak lightboxımızı oluşturmaya devam ediyoruz.
#karart {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000;
opacity: .75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
z-index: 1; }
#pencere {
font-family: Arial;
font-size: 12px;
position: absolute;
border: 2px solid #ccc;
display: none;
background: #fff;
z-index: 2; }
#pencerebaslik {
background: #e3e3e3;
padding: 5px;
border-bottom: 1px solid #ccc;
height: 18px; }
#pencerebasliksol {
float: left;
font-weight: bold; }
#pencerebasliksag {
float: right; }
#pencereicerik {
padding: 5px; }
#pencere a {
margin-left: 10px;
color: #333; }
Css imiz genel şablumuzun bütün elementlerini yakalayacak şekilde olacak. Siz kendi tasarımınızın renklerine göre değiştirebilirsiniz. Hemen penceremizi çağıracak ve kapatacak javascript fonksiyonlarımızı yazıp tamamlayalım. Aslında işin can alıcı kısmı aşağıdaki kodlarda.
<script type="text/javascript">
var pencereAcikmi = false;
function pencereGoster(genislik,uzunluk,baslik,icerik) {
var apSec = $("#pencere");
if(pencereAcikmi == false) {
$("#karart").css("display","block");
var winH = $(window).height();
var winW = $(window).width();
$("#penceresol").html(baslik);
apSec.css("width",genislik);
apSec.css("height",uzunluk);
apSec.css('top', winH/2-apSec.height()/2);
apSec.css('left', winW/2-apSec.width()/2);
$("#pencereicerik").html(icerik);
pencereAcikmi = true;
}
else {
pencereAcikmi = false;
}
apSec.css("display","block");
}
$(window).resize(function () {
var winH = $(window).height();
var winW = $(window).width();
if(pencereAcikmi == true) {
$("#pencere").css('top', winH/2-$("#pencere").height()/2);
$("#pencere").css('left', winW/2-$("#pencere").width()/2);
}
});
function pencereKapat() {
if(pencereAcikmi == true) {
pencereAcikmi = false;
$("#pencere").css("display","none");
}
$("#karart").css("display","none");
}
$(document).keyup(function(event){
if (event.keyCode == 27) {
if(pencereAcikmi == true) {
pencereKapat();
}
}
});
</script>
pencereGoster() fonksiyonumuz 4 parametre alıyor
genislik, uzunluk, baslik ve
icerik. Adlarından anlaşılacağı şekilde pencereyi çağırırken genislik, uzunluk, baslik ve içerik parametreleri gönderiyoruz. Pencere açma fonksiyonumuzu şu şekilde çağırabiliriz.
<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','Penceremizin içeriği buraya gelecek');">Pencere aç</a>
pencereKapat() fonksiyonu penceremizin açık olup olmadığını kontrol edip pencereyi kapatıyor.
(window).resize fonksiyonumuz browser penceresini herhangi bir şekilde küçültüp, büttüğümüzde veya boyutlarını değiştirdiğimizde penceremizi browser penceresinde ortalıyor.
(document).keyup fonksiyonumuz ise
escape tuşunu yakalayıp bu tuşa basıldığında pencereyi kapatan fonksiyonumuzu tetikliyor ve penceremizi kapatıyor. Projenin bitmiş halinde şu şekilde bir görüntü alıyoruz.
Siz kendi tasarımınıza göre özelleştirip daha güzel bir görüntüye dönüştürebilirsiniz fakat bu haliyle de gayet kullanışlı ve güzel görünüyor. Bir sonraki yazımda bu pencerelerin içinden ajax ile başka bir sayfayı nasıl çağırırız konusunu inceleyeceğim. Görüşmek üzere.
Projenin bitmiş ve çalışan halini buradan indirebilirsiniz.Tarih 14 Ocak 2010 Perşembe | Etiket(ler) Ajax, JavaScript, jQuery, Asp.Net | Yorumlar 2 yorum
Yeni bir yazıyla yine birlikteyiz. Bu sefer başlıktan anlaşılacağı gibi Asp.Net ve jQuery Ajax ile XML dosyalarını nasıl okuyacağımızı anlatmaya çalışacağım. Aslında bu blogda projelerde kullanmamız gereken ve faydalı olduğuna inandığım bilgileri paylaşmaya çalışıyorum. Gerçek hayatta deneyimler ile kazanılmış ve zaman ayrılıp araştırılıp sonuca ulaşılmış çözümler her zaman daha sonuç odaklı olur diye düşünüyorum. Teorik olan bilgi uygulanmadan tecrübe edilmez mottosuyla yazımıza başlayalım.
Okumamız gereken XML dosyasını ilk etapta generic handler olarak oluşturacak, arkasından bu datayı jquery ile dinamik olarak Asp.Net formu üzerinden ajax ile okuyacağız.
jQuery'i indirip projenize ekleyin ve aşağıdaki şekilde bir generic handler (.ashx) oluşturun.
Bu datayı kişiselleştirebilir, session veya cookie değerlerine göre şekillendirebilir, kullanıcılarınıza özel çözümler üretebilirsiniz. Ben örnek olması amacıyla şöyle bir veri oluşturdum.
Verileri sağlayan Handler.ashx dosyamız.
Imports System
Imports System.Web
Imports System.Xml
Public Class Handler : Implements IhttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/xml"
Dim xmlYazici As New XmlTextWriter(context.Response.OutputStream, Encoding.UTF8)
xmlYazici.Formatting = Formatting.Indented
xmlYazici.WriteStartDocument()
xmlYazici.WriteStartElement("Sonuclar")
xmlYazici.WriteElementString("AdiSoyadi", "Cenk SARI")
xmlYazici.WriteElementString("KullaniciID", "13")
xmlYazici.WriteElementString("Sonuc", "Giriş işlemi başarıyla sonuçlandı")
xmlYazici.WriteEndElement()
xmlYazici.WriteEndDocument()
xmlYazici.Flush()
xmlYazici.Close()
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
Gördüğünüz gibi 3 adet veri üretiyoruz. AdıSoyadı, Kullanıcı ID ve Sonuç. Şimdi dosyayı okuyacağımız javascript fonksiyonumuza gelelim.
function xmlParse(gidecek) {
$.ajax({
url: gidecek,
type: 'GET',
dataType: 'xml',
cache: false,
success: function(xml){
$(xml).find('Sonuclar').each(function(){
var AdiSoyadi = $(this).find('AdiSoyadi').text();
var KullaniciID = $(this).find('KullaniciID').text();
var Sonuc = $(this).find('Sonuc').text();
$('#adi').html(AdiSoyadi);
$('#kid').html(KullaniciID);
$('#son').html(Sonuc);
});
},
error: function(){
$('#son').html('Sonuçlar alınırken bir hata oluştu!');
}
});
}
Sonuçları basacağımız Default.aspx sayfamız
<form id="form1" runat="server">
<a href="javascript:void(0);" onclick="xmlParse('Handler.ashx');">XML al ve sonucu bas</a>
<br />
<h1>Sonuçlar</h1>
<div id="sonuc">
<div id="adi"></div>
<div id="kid"></div>
<div id="son"></div>
</div>
</form>
Siz isterseniz bu handler'a veri post edebilir, session ve cookie gibi yardımcı elemanlar dışında sonuçları girilen veriye göre de şekillendirebilirsiniz.
Projenin çalışan halini buradan indirebilirsinizTarih 12 Kasım 2009 Perşembe | Etiket(ler) Ajax, JavaScript | Yorumlar 0 yorum
Web programcılarının kullanımına sunulan ve her geçen gün bir yenisi doğan javascript kütüphanelerini eminim birçoğumuz kullanıyoruz ve elimiz ayağımız olmuş durumdalar. Bunlara örnek vermek gerekirse jQuery, prototype, script.aculo.us, mootools vs. sektörde başı çeker durumdalar. Şahsen projelerimde jQuery'i tercih etmekteyim. Bu kütüphaneler hem client side kod yazma zamanını minimuma indirmiş, sahip oldukları geniş fonksiyonlar sayesinde satırlarca kod yazma devrini tarihe gömmüş, tarayıcı farklılıklarından kaynaklanan problemler ile uğraşmayı bitirmiş, ajax ve animasyon özellikleri sayesinde daha şık web siteleri oluşturmaya olanak sağlamış ve tabii ki web programcılarına büyük kolaylıklar sağlamıştır. Projelerimize ilk eklediğimiz referanslardan biri belki de bu kütüphaneler olmaya başlamıştır. Öyle ki jQuery Microsoft tarafından kabul görüp asp.net MVC projelerinde dahili olarak gelmektedir.
Bir web programcısı için optimize kod kelimeleri tabii ki pek çok şey ifade etmektedir. Oluşturduğumuz projenin hem server taraflı hemde istemci taraflı olarak hızlı ve stabil çalışması bazı durumlarda hayati önem taşımaktadır. Bu aşamada CDN'den bahsederken server tarafından daha çok istemci tarafına göz atacağız. Pek çok kütüphanenin minimize edilmiş sürümleri olsa da kendi server’ımız üzerinde çağırdığımızda belirli bir bant genişliği harcamaktadır.
CDN – Content Delivery Network kavramı google ve microsoft başta olmak üzere web üzerinde araştırılınca örneklerine rastlanabilecek bazı kaynaklarla hayatımıza girmiştir. Peki nedir bu Content Delivery Network ? İçerik dağıtım ağı olarak Türkçe'ye çevirebileceğimiz bu cümle aslında büyük çaplı web uygulamalarında aynı zamanda küçük maliyetli web sitelerinde (bant genişliği sınırı olan) hem zaman hemde mali olarak kazanım sağlayacak ağlardır.
Bu kütüphananelerden en yaygın olarak kullanılanları kendi sunucularında barındıran google ve microsoft gibi büyük servis sağlayıcılar, bir nevi hosting görevi görmektedirler. Bu sayede hem bu CDN 'i kullanan bir siteyi daha önceden ziyaret eden bir kullanıcının tarayıcısı dosyaları hali hazırda önbelleğe attığı için yeniden indirme zahmetine girip sitenizin bandwidth'ini kullanmayacak, hem de bu .js dosyasını indirme zamanını minimuma indirerek büyük projelerde hatırı sayılır bir tasarruf sağlayacaktır. jQuery'nin minified versiyonunun 55 KB boyutlarında olduğunu düşünürsek tahmini olarak 100 kullanıcıda 5,5 MB 1000 kullanıcıda 55 MB gibi bant genişliği tasarrufuna gitmiş olacağız. Aynı zamanda bu kütüphanelerin yeni sürümleri çıktığında otomatik olarak sitemize dahil edilmiş olacak adresler de mevcut. Sözü fazla uzatmadan adresleri vereyim
jQuery'i Google CDN'den kullanmak için :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
Microsoft CDN den kullanmak için :
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js">
</script>
Projelerinize dahil edebileceğiniz kütüphanelerin listesi için :
http://code.google.com/intl/tr/apis/ajaxlibs/documentation/
adresini inceleyebilirsiniz.
We're in this together, we share the same skin!