Java Teknolojileri Programcıları Derneği'nin 8'nci geleneksel JTS etkinlikleri 29 Mayıs Perşembe akşamı saat 19:00'da Bahçeşehir Üniversitesi'nde. Gelmeyen aç kalır, zira iki seminer arası Pizza ve İçecekler ikramımız :)

Ayrıca ilk kez bu JTS'de düzgün bir video çekimi yapmayı planlamaktayız.

Konular ve Katılımcılar:

SOE/SOA/SOI/EAI, hangi göç yolunu seçmeli? - Bahadır Ödevci
Cihaza özel renderlama - Furkan Horasan

JTPD blog yazısı : http://www.jtpd.org/blogs/109261

Java Teknoloji Saatleri'nin 7'ncisi 31 Mart'ta yine Bahçeşehir Üniversitesi'nin Beşiktaş Kampüsü'nde yapılacak. Bu sefer EKÜ olmayacak etkinlikte Özcan Acar "NoSQL", Talip Öztürk "Veri Dağıtımı Sanatı" (her ne kadar bizim derneğin sitesinde İngilizcesi yazsa da) konularını anlatacaklar.

Muhtemelen ben de fotolarını çekeceğim etkinliğe herkesi bekliyoruz, katılım her zaman olduğu gibi ücretsiz.

Ben de etkin olarak yer almak istiyordum ama askerden yeni döndük ya, daha bir şey hazırlayamadım :)

JTPD sayfası : http://www.jtpd.org/blogs/101620
Facebook sayfası : http://www.facebook.com/home.php?#!/event.php?eid=107485049271876

JTS'lerin birisinde askere gitmeden önce anlattığım JQuery'ye Giriş ve Ajax EKÜ Notları JTPD'nin sitesinde bulunmaktaydı. Ben askerdeyken siteyi grou.ps'a taşıyan JTPD, benim EKÜ notlarını da taşımış; ancak eğitselin bel kemiği sayılabilecek JSP projesinin URL'si de artık geçerli değil. Ben de madem ki bir kamu hizmeti yapmışım; tam olsun dedim ve eğitselin kayıp JSP projesini buraya yükledim.

Örnek JSP Projesi : jsp_jquery_ajax.zip (98,46 KB)

jQuery'ye Giriş ve Ajax EKÜ Notları

Bu EKÜ'nün amacı, jQuery'yi tanıtmak ve jQuery ile Ajax istekleri yapma yollarını göstermektir. Bu amaç için hazır bir JSP CRUD uygulamasını jQuery kullanarak Ajax uyumlu duruma getireceğiz.

1. JSP projesinin indirilmesi

JSP projesi, basit bir EGS (Ekle-Güncelle-Sil) (CRUD - Create Update Delete) uygulamasıdır ve bir NetBeans Web projesi olarak oluşturulmuştur. Projeyi http://www.ajitatif.com/content/binary/jsp_jquery_ajax.zip adresinden indirin ve istediğiniz bir dizine açın. Projeyi istediğiniz dizine açtıktan sonra NetBeans ile doğrudan açabilirsiniz. Eğer Eclipse ya da başka bir IDE kullanıyorsanız IDE'nize bu projeyi aktarmanız gerekecektir.

2. JSP projesinin yapısına hızlı bakış

2.1. INDEX.JSP

INDEX.JSP sayfasındaki aşağıdaki kodu inceleyin (satırlar [44,80]):

            <div>
                <%  if(request.getParameter("k") == null)
                    {
                %>
                    <jsp:include page="katilimcilar/katilimci_listesi.jsp" />

                <%  }
                    else
                    {
                        switch (request.getParameter("k").toLowerCase().charAt(0))
                        {
                            case 'd':
                %>
                                <jsp:include page="katilimcilar/katilimci_ekle_degistir.jsp">
                                    <jsp:param name="kid" value="<%= request.getParameter(\"id\") %>" />
                                </jsp:include>
                <%
                            break;
                            case 'e':
                 %>
                                <jsp:include page="katilimcilar/katilimci_ekle_degistir.jsp" />
                <%
                            break;
                            case 's':
                %>
                                <jsp:include page="katilimcilar/katilimci_sil.jsp" />
                <%
                            break;
                            default:
                 %>
                                <jsp:include page="katilimcilar/katilimci_listesi.jsp" />

                <%             break;
                        }
                    }
                %>
            </div>

Yukarıdaki satırlar INDEX.JSP'nin aldığı istek parametrelerine göre farklı .JSP sayfaları yüklediğini gösteriyor. Biz bu sayfaları XML HTTP isteği ile yükletip bir pencere gibi açmayı amaçlıyoruz.

2.2. KATILIMCILAR/ dizini altındaki .JSP dosyaları

Bu dosyalar birer BODY etiketi oluşturmazlar; böylece INDEX.JSP içine eklenmeleri kolaylaşır. KATILIMCILAR/KATILIMCI_EKLE_DEGISTIR.JSP satır 79 ve KATILIMCILAR/KATILIMCI_SIL.JSP satırlar 38 ile 48'i inceleyin. Gerekli EGS işlemini yaptıktan sonra response.sendRedirect() yordamı ile INDEX.JSP'yi çağırıyorlar. Böylece güncellenmiş listeyi INDEX.JSP'ye yeniden göstertiryorlar. Biz bu .JSP sayfalarını bir DIV elementi içine yükleyeceğimiz için bu satırları ilerde sileceğiz. Bunun dışında da bu dosyalara dokunmadan sitemizi Ajax uyumlu hale getireceğiz.

2.3. Projenin çalıştırılması

Projeyi çalıştırın ve sistemin nasıl çalıştığını görün. EGS işlemlerindeki sıralı (senkton) POST isteklerinin ve işlem sonrası yönlendirmelerin farkına varın.


Bu satırlarda, jQuery ile ilgili anlatılması gereken ilk kavramı görüyoruz: jQuery veri türü. jQuery kitaplığı, kendi adını verdiği bir veri türü ile karşımıza gelir ve bu veri türü, Javascript'in HTML DOM nesnelerini SARMALAR (encapsulate). $ aslında jQuery veri türünü işaret eder ve $(document) diyerek Javascript'te tanımlı olan document nesnesini (ki bir HTML DOM nesnesidir) sarmalatan jQuery yapılandırıcısını (constructor) çağırırız. Sarmalama sonucunda bir jQuery nesnesi elde ederiz ve bu nesnenin ready olayını (event) satır içinde tanımladığımız yordama yakalatırız. Kod içi tanımladığımız yordam standart bir Javascript yordamıdır ve içinde jQuery'e özgü bir şey barındırmak zorunda değildir. Ne de olsa jQuery de tanımlanmış bir Javascript nesnesi.

Şimdi INDEX.JSP'yi kaydedin ve INDEX.JSP'yi tarayıcınıza yeniden yükletin. Karşınıza gelen Javascript diyalog kutusu ve sayfanın başlığının değişmesi ile kodcunun el kitabının ilk maddesi olan Merhaba Dünya görevimizi tamamlamış oluyorsunuz.

3.2. jQuery seçicileri - 1 (selectors)

jQuery'i jQuery yapan en önemli hususlardan bir tanesi hiç kuşkusuz ki seçici desteğidir. Seçiciler, birden fazla HTML nesnesini seçer ve tek satırda bütün bu seçilen nesnelerin DOMları ile oynamamıza olanak tanır. jQuery seçicileri W3C'nin tanımladığı CSS seçicilerine benzer bir şekilde tanımlanmıştır. jQuery seçicilerinin farkı, CSS seçicileri ile sınırlı olmamalarıdır.

İlk seçici örneğimizi az önce yazdığımız document-ready yordamının içine yazalım. alert() satırını silin ve ready yordamının sonuna aşağıdaki kodu ekleyin:

$('h1').text(document.title);

$ yapılandırıcısına bu kez bir metin (string) girdik ve eğer biraz CSS'ye aşina iseniz ne işe yaradığını anlayacaksınızdır.

$('<etiket_adı>') seçicisi, belgedeki verilen etiket adını taşıyan bütün elementleri seçer.

INDEX.JSP'yi yeniden yüklediğinizde (tabii ki önce IDE'nizden kaydettiken sonra) sayfanın başındaki H1 elementinin metninin değiştiğini göreceksiniz. Eğer isterseniz başka H1 elementleri ekleyin sayfaya; hepsinin metni aynı olacaktır.

3.3. At gitsin at gitsin, eskimişse at gitsin

İlk Ajax isteğimizi gerçekleştirmeden önce, eski usül kodlarımızdan kurtuluverelim. INDEX.JSP'nin satırlar [54,88] aralığını silin ve yerine aşağıdaki kodu yazın (kopyala - yapıştır serbest):

                <div id="icerik">
            <jsp:include page="katilimcilar/katilimci_listesi.jsp" />
        </div>
        <div id="popup"></div>

INDEX.JSP'yi yeniden yüklediğinizde bir görünüş farkı olmayacak; ancak doğal olarak komut bağlantılarına tıkladığınızda elinize bir şey geçmeyecek.

3.4. jQuery seçicileri - 2

jQuery seçicileri etiket adı seçicisi ile sınırlı değil. Aşağıdaki kodu INDEX.JSP'deki SCRIPT elementinin içine, en aşağıya ekleyin:

            function baglantilariAjaxla()
            {
                $('.duzenle .komut,.sil .komut').each(function()
                    {
                        var id = this.getAttribute('href').split('').reverse().join('').match(/\d+(?==di)/).toString().split('').reverse().join('');
                        this.setAttribute('k_id', id);
                    });
            }

Bu kodu yazdıktan sonra bu yordamı çağıracak kodu da doğru yere eklememiz gerekecektir. Bu kodun çalışması için en doğru yer document-ready olayıdır. INDEX.JSP'deki document-ready yordamının sonuna aşağıdaki satırı ekleyin:

baglantilariAjaxla();

Öncelikle, var id = ile başlayan satırı açıklayalım: O satır, Javascript'teki düzenli ifadelerde (regular expression) ileri bakım (look-ahead) desteği olmasına karşın geri bakım (look-behind) desteği olmaması nedeniyle o denli uzun. En basit olarak yaptığımız şey metni ters çevirmek, yine tersinden verdiğimiz ifadeyi ileri bakım ile aratmak ve sonucu yeniden ters çevirmekten ibaret. Ortada kuyu var yandan geç hesabı...

Şimdi gelelim kullandığımız seçicileri açıklamaya:

$('.<sınıf_adı>') seçicisi sınıfları arasında belirtilen sınıf adı olan bütün elementleri seçer.
$('<seçici_1> <seçici_2>') seçicisi (ARADA BOŞLUK KARAKTERİ VAR) seçici_1 ile seçilen elementlerin içerdiği seçici_2 ile seçilen elementleri seçer. Yani seçici_1'in altındaki seçici_2'ler seçilir, seçici_1'ler seçilmez.
$('<seçici_1>,<seçici_2>') seçicisi (ARADA VİRGÜL KARAKTERİ VAR) seçici_1 VEYA seçici_2 ile seçilen elementleri seçer. Kümelerdeki birleşim işlemi gibi.

Bu bilgiler ışığında, $('.duzenle .komut,.sil .komut') seçicisi "(duzenle) sınıflı elementlerin altındaki (komut) sınıflı elementleri VEYA/BİRLEŞİM (sil) sınıflı elementlerin altındaki (komut) sınıflı elementleri" seçecektir.

jQuery.each olayı, seçici tarafından seçilmiş her element için bir kez tetiklenir ve bu olayı yakalayan yordam içinde this anahtar sözcüğü seçili elementin HTML DOM nesnesini gösterir.

Kısaca; bu kodun yaptığı iş, KATILIMCILAR/KATILIMCI_LISTELE.JSP'den gelen her bir düzenle ve silme bağlantısının (link) HREF niteliğinden (attribute) bağlı oldukları nesnenin ID'sini alıp, yeni bir K_ID niteliği yaratarak bu niteliğin değerine yazmaktır. Böylece yapacağımız Ajax çağrılarında her komut bağlantısı hangi nesneye göre çağrı yapacağını bilecek. INDEX.JSP'yi yeniden yükleyip Firebug'da hangi bağlantılara hangi nitelikler eklenmiş inceleyin:

Tablonun en alltındaki "Ekle" komutunun neden K_ID niteliğine sahip olmadığını açıklayın.

3.5. jQuery veri türüne bir adım yakından bakış

Hiç kod yazmadan biraz Javascript adımlatalım (debug). Firebug'ı açıp "Script" sekmesine tıklayın. 33. satırı bulun ve satır numarasının yanındaki şeride tıklayın. Firebug sizin için o satıra bir durak noktası koyacak. Şimdi sayfayı yeniden yükleyin ve tarayıcınınzın durak noktasına ulaşmasını bekleyin.

İşte jQuery sihiri bu! Sarmalanan bir Javascript dizisi (array) ve işte yararlı yordamların tümü!!

3.6. HREF mi? O da ne?

Ajax uyumlu bütün sitelerde olduğu gibi biz de A elementlerimizin (tabii ki hepsinin değil) HREF niteliklerini "#" ile değiştireceğiz. Bunun için aşağıdaki kodu INDEX.JSP'de baglantilariAjaxla() yordamının son satırına ekleyin:

$('.komut').attr('href', '#');

INDEX.JSP'yi yeniden yüklediğinizde komut sınıfını taşıyan bütün bağlantıların HREF niteliklerinin "#" olduğunu göreceksiniz.

3.7. Ajax'a hazırlık

Aşağıdaki kodu baglantilariAjaxla() yordamının altına ekleyin:

            var eylem = 'ekle';
            function katilimciKomutIsle()
            {
                if ($(this).parents('.duzenle').length != 0)
                {   /* düzenle bağlantısı */
                    alert('düzenleyeceğiz inşallah');
                    eylem = 'duzenle';
                }
                else if ($(this).parents('.sil').length != 0)
                {   /* sil bağlantısı */
                    alert('sileceğiz inşallah');
                    eylem = 'sil';
                }
                else if ($(this).parents('.ekle').length != 0)
                {   /* ekle bağlantısı */
                    alert('ekleyeceğiz inşallah');
                    eylem = 'ekle';
                }
                else
                {
                    eylem = '?';
                    return false;
                }
                return false;
            }

eylem adlı değişken, ileride hangi EGS eyleminin gerçekleştirileceğini anlamak için kullanılacak bir değişken; şimdilik önemsemeyin. Buradaki mantığı açıklamadan önce bu yordamın çağrılacağı koşulu sağlayacak kodu yazalım. Aşağıdaki kodu baglantilariAjaxla() yordamının sonuna ekleyin:

$('.komut').click(katilimciKomutIsle);

Buna alternatif olarak, 3.6'da yazdığınız kodu aşağıdaki şekilde değiştirebilirsiniz; aynı sonucu verecektir:

$('.komut').attr('href', '#').click(katilimciKomutIsle);

jQuery'nin bazı yordamları değişiklik yaptıkları jQuery nesnesinin son durumunu döndürür. Bu da aynı seçici ile birden fazla iş yapabilmemizi sağlar.

katilimciKomutIsle() yordamı içindeki if ($(this).parents('.<sınıf_adı>').length != 0) satırları tıklanan elementin ataları (parent) hiyerarşisinde <sınıf_adı> sınıfını taşıyan bir elementin olup olmadığını denetler. Eğer tıklanan element "duzenle" adlı sınıfı taşıyorsa if kod bloğunun içine dallanılır. length özelliği Javascript dizilerine ait olan length'tir. $(this) diyerek olayı fırlatan HTML elementinin nesnesini jQuery'ye sarmalatıyoruz ve sonra jQuery.parents('<seçici>') yordamını kullanarak bu nesnenin DOM hiyerarşisindeki bütün ataları arasından seçici ile seçtiğimiz elementleri bir diziye alıyoruz. Son olarak da bu dizinin uzunluğuna bakarak olayı fırlatan elementin hangi EGS eylemi için kullanılacağını belirliyoruz.

INDEX.JSP'yi yeniden yükleyin ve komut bağlantılarından birisine tıklayın. Karşınıza ilgili uyarı diyaloğu çıkacaktır.

4.1. Ben bugün Ajax gördüm - İlk Ajax çağrısı

İlk Ajax çağrımızı, icerik ID'li DIV elementimizin içine KATILIMCILAR/ dizini altındaki .JSP dosyalarını yükleyerek yapacağız. jQuery, bu iş için mükemmel bir yordam sunuyor: jQuery.load(). Aşağıdaki kodu katilimciKomutIsle() yordamının ÜZERİNE yazın; yordamı biraz değiştiriyoruz:

            function katilimciKomutIsle()
            {
                if ($(this).parents('.duzenle').length != 0)
                {   /* düzenle bağlantısı */
                    $('#popup').load('katilimcilar/katilimci_ekle_degistir.jsp?kid=' + this.getAttribute('k_id'), '', gosterPopup);
                    eylem = 'duzenle';
                }
                else if ($(this).parents('.sil').length != 0)
                {   /* sil bağlantısı */
                    $('#popup').load('katilimcilar/katilimci_sil.jsp?id=' + this.getAttribute('k_id'), '', gosterPopup);
                    eylem = 'sil';
                }
                else if ($(this).parents('.ekle').length != 0)
                {   /* ekle bağlantısı */
                     $('#popup').load('katilimcilar/katilimci_ekle_degistir.jsp', '', gosterPopup);
                     eylem = 'ekle';
                }
                else
                {
                    eylem = '?';
                    return false;
                }
                return false;
            }

Ardından hiç durmadan; aşağıdaki yordamı katilimciKomutIsle() yordamının altına ekleyin:

            function gosterPopup()
            {
                $('#popup').css('display', 'block');
            }

jQuery.load(URL, parametre_listesi, geri_çağrı_yordamı) yordamı, seçilmiş olan elementin içine verilen URL'den, parametre_listesi parametreleri ile bir sırasız (asenkron) çağrı (ya da Ajax çağrısı) sonrasında dönen HTML kodunu yapıştırır. İşlem tamamlandıktan sonra da belirtilen geri_çağrı_yordamı (callback) çağrılır. Bizim örneğimizde bir düzenleme isteği için katilimcilar/katilimci_ekle_degistir.jsp?kid=<katılımcı_id> URL'sine boş parametrelerle gidilir ve gelen HTML $('#popup') ile seçilmiş olan elementin içine yapıştırılır.

$('#<element_id>') seçicisi, ID niteliği element_id'ye eşit olan bütün elementleri seçer.

jQuery.load() yordamı istenilen sayfayı çağırıp seçilmiş olan nesnenin içine kattıktan sonra çalışan gosterPopup() yordamı seçili elementlerin tarzlarını (style) görmeye ve değiştirmeye yarayan jQuery.css() yordamının örneğini gösteriyor. Örneğimizde popup ID'li element seçilip "display" adlı tarzını "block"a eşitliyoruz. Eğer Ajax çağrısının neye benzediğini görmek isterseniz yardımınıza yine Firebug koşacak. "Console" sekmesini açın yeter.

Komut bağlantılarının açtığı pencereciklerin onay ve iptal düğmelerine basın. Hala çalışıyorlar; ama bir şeyleri eksik - gerçek Ajax!

4.2. Biraz biberleyelim şunu - Canlandırmasız Ajax soğansız salataya benzer

İşin içine birazcık görsellik ekleyelim. jQuery, basit ama şık canlandırma (animasyon) seçenekleriyle gelir. Aşağıdaki kodu az önce yazdığımız gosterPopup() yordamının ÜZERİNE yazalım:

            function gosterPopup()
            {
                $('#popup').slideDown('0.4');
            }

INDEX.JSP'yi yeniden yükleyin ve komut bağlantılarından birine tıklayın. Oldukça kolay ve bir o kadar da şık değil mi?

4.3. jQuery muhtırası - HTML DOM'a doğrudan müdahale

Pencereciklerimizin onay ve iptal tuşlarını Ajax destekli duruma nasıl getirebiliriz? Önce onları FORM elementinin içinden çıkarmak gerek. Eğer nedenini bilmiyorsanız; size ödev olsun, biz çıkalım kerevetine. Aşağıdaki kodu gosterPopup() yordamının hemen altına ekleyin:

            function saklaPopup()
            {
                $('#popup').slideUp('0.4');
            }

            function popupGosterildi()
            {
                /* form elementini silmek gerek; yoksa düğmeler POST'a gider */
                $('form').parent().append($('form').html());
                $('form').html('');

                /* iptal düğmelerini ayarla */
                $('input[name="iptal"]').removeAttr('onclick');
                $('input[name="iptal"]').click(saklaPopup);
            }

popupGosterildi() yordamını tetikleyecek kodu da gosterPopup() yordamına ekliyoruz. Aşağıdaki kodu gosterPopup() yordamı içindeki tek satırın ÜZERİNE yazın:

                $('#popup').slideDown('0.4', popupGosterildi);

jQuery.parent() yordamı, seçilmiş nesnenin ilk atasını döndürür ve jQuery.append() yordamı da seçili nesnenin DOM'una içerik eklemek için kullanılır. Ekleme işlemi, DOM'un sonuna yapılır. $('form').parent().append($('form').html()) satırıyla, FORM elementinin içindeki HTML kodunu, FORM elementinin ilk atasına ekliyoruz. Daha sonra da $('form').html('') ile bütün FORM elementlerini sayfa DOM'undan siliyoruz. Böylece sayfadaki FORM elementinden kurtuluyoruz, ama içeriği bize kalıyor.

$('[<nitelik_adı>="<değer>"]') seçicisi, nitelik_adı adlı niteliği değer'e eşit olan elementleri seçer.
$('<seçici_1><seçici_2>') seçicisi (ARADA KARAKTER YOK) seçici_1 VE seçici_2 seçicilerini sağlayan elementleri seçer. Küme işlemlerinden KESİŞİMe benzer. Örnekteki $('input[name="iptal"]') seçicisi INPUT elementlerinden NAME adlı niteliği "iptal"e eşit olan elementleri seçer.

INDEX.JSP sayfasını yenileyin ve bir pencerecik açın. Pencereciğin kodunda FORM elementini bulamayacaksınız. (DOM'daki anlık değişimleri izlemekte Firebug'un üstüne yoktur, onu da söyleyelim)

4.4. Ajax, şimdi !!

Ajax'ta son dokunuşlara vardık. Önce eski .JSP sayfalarımızdaki response.sendRedirect() kodlarından kurtulalım. KATILIMCILAR/KATILIMCI_EKLE_DEGISTIR.JSP'de 79. ve KATILIMCILAR/KATILIMCI_SIL.JSP'de 37 ile 49. satırları silin. Sonra da aşağıdaki kodu popupGosterildi() yordamının hemen altına ekleyin:

            function halletAjax()
            {
                switch (eylem)
                {
                    case 'ekle':
                    case 'duzenle':
                        $.post(
                        'katilimcilar/katilimci_ekle_degistir.jsp',
                        {
                            kat_id: $('input[name="kat_id"]').attr('value'),
                            kat_adSoyad: $('input[name="kat_adSoyad"]').attr('value'),
                            kat_kurum: $('input[name="kat_kurum"]').attr('value'),
                            kat_onaylandi: $('input[name="kat_onaylandi"]').attr('checked'),
                            'onay.x': 1
                        },
                        ajaxTamamlandi);
                        break;
                    case 'sil':
                        $.post(
                        'katilimcilar/katilimci_sil.jsp',
                        {
                            id: $('input[name="kat_id"]').attr('value'),
                            kat_id: $('input[name="kat_id"]').attr('value'),
                            'onay.x': 1
                        },
                        ajaxTamamlandi);
                        break;
                }
            }

            function ajaxTamamlandi()
            {
                saklaPopup();
                tazeleListe();
            }

            function tazeleListe()
            {
                $('#icerik').html('Yükleniyor...');
                $('#icerik').load('katilimcilar/katilimci_listesi.jsp', '', baglantilariAjaxla);
            }

Yine hemen halletAjax() yordamını çağıracak kodu verelim. Aşağıdaki kodu popupGosterildi() yordamının en altına ekleyin:

                /* onay düğmelerini ayarla */
                $('input[name="onay"]').click(halletAjax);

jQuery.post(URL, parametre_listesi, geri_çağrı_yordamı) yordamı URL'ye POST yöntemiyle verilen parametre_listesini gönderir ve yanıt geldikten sonra geri_çağrı_yordamı yordamını çağırır. Eğer Ajax isteğini GET yöntemiyle yapmak isterseniz jQuery.get(URL, parametre_listesi, geri_çağrı_yordamı) yordamını çağırmanız gerekir. jQuery, ayrıca Javascript ve JSON geri dönüşleri de destekler. jQuery'nin gönderdiği Ajax çağrısı üzerinde daha fazla denetim arzu edenler için jQuery.ajax() yordamını da kullanabilir.

Kodu kaydedip INDEX.JSP'yi yeniden yükleyin. Artık web siteniz Ajax uyumlu, keyfini sürün :)

5. jQuery eklentilerine hızlı bakış

jQuery hızlı ve güvenilir bir kitaplık olduğu için dünya çapında popülerliği çok hızlı arttı ve eklenti sayısı da paralel bir hızla arttı. jQuery eklentileri, jQuery kullanan kitaplıklardan başka bir şey değildir ve jQuery'nin sitesinde pek çok yararlı eklenti bulabilirsiniz.

5.1. jQuery tablesorter eklentisi

tablesorter, sayfadaki tabloları istemci tarafında sıralamayı sağlayan kullanımı çok kolay ve çok etkili bir eklentidir. Önce aşağıdaki satırları INDEX.JSP'nin HEAD elementine ekleyin:

        <link rel="Stylesheet" href="css/tablesorter.css" type="text/css" />
        <script type="text/javascript" language="javascript" src="js/jquery.tablesorter.min.js"></script>

.JS ve .CSS dosyaları proje dizininde vardı, o yüzden dosyalar var mı diye endişelenmeye gerek yok.

Şimdi de tabloyu sıralatacak kodu ekleyelim. Aşağıdaki kodu baglantilariAjaxla() yordamının içine, en sona ekleyin:

                $('.liste').addClass('tablesorter').tablesorter(
                {
                    sortList: [[2,0]]
                });

tablesorter eklentisi jQuery nesnesine tablesorter() yordamını ekler ve şekildeki kullanım 2 numaralı sütunu artan sıraya göre sıralatır (sortList parametresi ile). Sütun numaraları 0'dan başlar ve virgülden sonraki 0 artan sıralamayı belirtir. azalan sıralama için 1 kullanılır.

tablesorter ile ilgili daha ayrıntılı bilgi isteyenler http://www.tablesorter.com adresine başvurabilirler.

6. Son Söz

jQuery, yoğun Javascript kullanılması gereken sitelerde sarılacağımız 1 numaralı Javascript kitaplığı olmaya aday. Kolaylığı, kullanışlılığı ve hal-i hazırdaki eklentileriyle incelemeye ve öğrenmek için harcanan zamana kesinlikle değer. Biz de bu EKÜ'de jQuery'ye giriş için gerekli temel bilgileri vermek için önceden hazırladığımız bir JSP EGS uygulamasını, barındırdığı .JSP kodlarına mümkün mertebe az dokunarak Ajax uyumlu hale getirmek için jQuery'den yardım istedik. Sonuçta ticari bir yazılımın parçası olacak kadar doğru bir ürün elde etmesek de maksadımızı karşılayack bir uygulama olduğu inancını taşıyoruz.

İşbu sitenin sahibi Gökalp GÜRBÜZER 18 Ocak 2010 itibariyle Hürgeneral rütbesine terfi edilmiş olup, Maltepe / İstanbul'da Gürbüzer ailesi konutuna ataması yapılmıştır.

En rahat askerlik, bitmiş olandır

Çok uzun zaman olmuş yazı yazmayalı, uzaklardayım sanmayın.

Atarsa 64 başka yok, olsa da vaktim yok...

Dün yine bir acı haber aldık ulusça. Anlamsız, içi-dışı bozuk ve çürük bir sözüm ona savaşa 6 gencecik vatan evladını daha verdik. http://www.hurriyet.com.tr/gundem/11750189.asp?top=1 adresli haber'den alıntı yaparak söze başlayayım:

"Hakkari'nin Irak sınırındaki Çukurca İlçesi’ne 30 kilometre uzaklıktaki 
Uzundere Köyü yakınlarında operasyona giden askerlerin geçişi sırasında, 
önceki gece 23.30 sıralarında teröristler, yola döşedikleri mayını uzaktan
kumandayla infilak ettirdi. Patlamada, askeri araçta bulunan İstikam
Uzman Çavuş Ziya Bener, erler Özkan Dumlu, Deniz Demirci, Cafer Çelik,
Kemal Özevin ile Adil Yıldız şehit düşerken, sekiz asker de yaralandı.

Saldırı üzerine bölgede yoğun operasyona başlanırken, yaralı askerler
helikopterle bölgeden alınarak tedavi altına alındı. Hakkári Valisi
Muammer Türker, olumsuz hava koşulları nedeniyle yaralıların
helikopterle Şırnak’a gönderildiğini söyledi."

Söylemek istediğim iki şey var, birisini Yılmaz Özdil zaten söylemiş bugünkü köşe yazısında. Okumanızı öneririm: http://www.hurriyet.com.tr/yazarlar/11750092.asp?yazarid=249

İkincisi ise bu çocukcağızların neden öldüğü. "Bu çocuklar neden ölüyor" sorusunun yanıtını kim veriyor bu ülkede? Bilmiyorlar mı yoksa korkuyorlar mı?

Çok neden sayılabilir bu masumcağızların ölmesine; ama asıl neden için olaya çok tepeden bakmak gerek. Bizlerin ölmesi gerek ki bu çürük dünya düzeni onu kuranların lehine iki gün daha işlesin. Biz aynı yurdun evlatları birbirimizi öldürmeye çalışıyoruz ki ABD'nin kasasına daha çok para girsin. ABD de bu paranın bir kısmını Avrupa'ya sus payı olarak veriyor, bir kısmını ise "dahili ve harici bedhahlarımıza" aktarıp onların sadakatını sağlıyor.

İnanmayanlar tarihe baksın, dünyanın şimdiki haline baksın.

Ertuğrul Özkök'ü sevmediğimi beni tanıyan herkes bilir ya da tahmin eder; ama bugünkü yazısında dediği bir söz var ki... Doğru söze ne denir?

"Şehit yakınları ve gaziler, feragat ve fedakarlık isteyen savaşların kutsal emanetleridir"

Başta şehit yakınlarımızın olmak üzere bütün ulusun hatta insanlığın başı sağolsun. Tanrı şehitlerimize rahmet etsin. Gazilere ve yakınlarına da büyük geçmiş olsun. Maalesef hepimiz aynı oyunun potansiyel kurbanıyız; ama ateş de düştüğü yeri yakıyor.

Windows'unuzu etki alanından çıkarmak ama kullanıcının bilgilerini kaybetmemek mi istiyorsunuz? Hatta ve hatta etki alanından çıktınız, "her şey için çok geç" diye mi düşünüyorsunuz? İşte size öneri:

1. Yeni kullanıcı hesabınızı oluşturun (Bilgisayarım'a sağ tık | Yönet'ten Kullanıcılar bölümü)
2. Yeni kullanıcı ile bir kez sisteme giriş yapın
3. Sistemden çıkın ve yönetici olarak yeniden giriş yapın
4. Windows, yeni kullanıcınızın dizin ve dosyalarını hazırlamış olmalı. Hemen C:\Documents and Settings\ dizinine gidin ve yeni kullanıcınızın adını taşıyan dizinin adını değiştirin ama bu adı unutmayın. Başına "_" koyulabilir örneğin
5. Etki alanı kullanıcı dizininizin adını az önce adını değiştirdiğiniz dizinin eski adı olarak değiştirin.
6. Sistemden çıkın ve yeni kullanıcınız olarak yeniden giriş yapın

Bende Skype ve GTalk yeniden hesap bilgilerimi sordu; onun dışında her şey eskisi gibi. Başlat menüsünden masaüstüne, web tarayıcı çerezlerine kadar. Hatta Visual Studio ayarlarımı da kurtardım; ki en büyük sorunum oydu.

Yaklaşık bir haftadır üzerinde uğraştığım ve dün sabah Kocaeli Üniversitesi Bilgisayar Mühendisleri Kulübü etkinlikleri sırasında sunumunu yaptığım makalem "Linux ve Java". Makale sunumunu JTPD çatısı altında yaptım ve mezun olduğum okulun eğitim olanaklarını görünce içim sızladı desem yeridir. Askere gideyim geleyim, eğer olabilecekse bir iki derse girerim yazılım ile ilgili. En azından gençlere bir bakış açısı sunarız. Maksat geleceğe yatırım, vatana hizmet...

Özet

Linux tabanlı işletim sistemleri bulunabilirliği, güvenliği, sağlamlığı ve en önemlisi maliyeti açılarından günümüzde en avantajlı işletim sistemleri olarak hak ettikleri ilgiye kavuşmaya başlamıştır. Bu yazının amacı, önemi gittikçe artan ve ülkemiz ev bilgisayarlarına da ulaşmaya başlayan bu işletim sistemi ile Java'nın uyumunu ortaya koymak ve neden “Linux ve Java” sorusunun yanıtlarını aramaktır.

Open Office 3.0 Dosyası : Linux ve Java.odt(810,14 KB)
Microsoft Word XP/2003 (Open Office'ten kırma) : Linux ve Java.doc (992,5 KB)
Adobe PDF : Java ve Linux.pdf (779,65 KB)

Efendim, bugünkü kitap önerim Banu Avar'ın "Böl ve Yut" adlı kitabı.

Kitap, Banu Avar'ın geçen sene mayıs ayına kadar 4 yıl boyunca TRT'de hazırladığı "Sınırlar Arasında" adlı programın seçme bölümlerinden derlenmiş. Kitaptaki bölümlerin ortak yanı, bölümlere konu olan ülkelerin "Batı"nın "ilgilendiği" ülkeler olması.

Kitapta 13 adet ülkeden derlenen notlar var ve bu ülkeler şunlar:

• Irak
• Ürdün
• Mısır
• Lübnan
• Suriye
• İran
• Rusya
• Abhazya
• Gürcistan
• Kosova
• Sudan
• Malezya
• Singapur

Banu Avar'ın programlarını izlemeye hiç fırsatım olmamıştı ama izleyen arkadaşlarımdan çok iyi yorumlar almıştım. Kitabı okuduktan sonra Banu Hanım'a karşı olan takdirim daha da arttı. Kitap yalnızca gezilen ülkelerin bugünkü durumlarını anlatmakla kalmıyor, kısa geçmişlerini de özetleyerek neden-sonuç ilişkisini kurmamıza yardım ediyor. Bu ülkelerde neden ekonomik orta sınıf kalmamış ve orta sınıfın önemi nedir insan çok iyi anlıyor.

Örneğin, Atatürk'ün "Devletçilik" ilkesi bize öğretilirken "o eskidenmiş, artık özelleştirme diye bir şey var daha iyi" dedikleri yalandan başka bir şey değilmiş. Çünkü özelleştirme, bir liberalizm stratejisi. Devletin elindeki iktisadi kurumlar yurt dışına satılır savılır; "kürsel sermaye" ülkeye serbestçe giriş yaptığında da yerli üretim ithal ürünlerle rekabet edemez, çöküp gidermiş. Bunun sonucunda ekonomik orta sınıf ortadan kalkar, yurt dışından gelen şirketlerin yurt içi kollarına ortak olan kişiler çok zenginleşirken, çarkın dışında kalanlar git gide fakirleşirmiş. Bütün bunları yaparken kullanılan en büyük silah ise IMF ve "sıtend bay" anlaşmalarıymış. Bunlar bir yorum değil; dünyada geçtiğimiz yıllarda olup biten ve hala olup biten olaylar.

Kitabı okuyunca insan bu ülkeler ile Türkiye arasında paralellikler görüyor ve üzülüyor. Anlıyor ki AKP kimmiş neymiş, Ergenekon "Terrör Örgütü" nereden ve neden uydurulmuş... Üzülüyor ama en azından anlıyor, "strictly bussiness" dedikleri neymiş.

ISBN : 978-975-14-1314-7

Java Teknolojileri ve Programcıları Derneği çatısı altında hiç duyulmamış, görülmemiş bir kampanya başlatıyoruz: Kurum ve kuruluşlara ücretsiz eğitim desteği! Tamamen ücretsiz, süreleri 1-3 saat arasında değişen eğitimler ile bilmediğiniz teknolojilere kuş bakışı bir görüş ya da nokta atışı ayrıntılı bir çalışma; karar sizin.

Hakikaten beleş yahu, taş attınız da kolunuz mu yoruldu?

Ayrıntılı bilgi ve mevcut eğitim listesi : http://www.jtpd.org/public/TheStory.jsf?storyId=141
(Ben -gerekli hallerde oyuncu değişimi serbest olmakla birlikte- "Java Ortamında Sürekli Bütünlük Uygulamaları" eğitimini veriyorum)

Eğer listede eğitim almak istediğini konu yoksa bizi haberdar edin; en kısa sürede çaresine bakılır elden geldiğince.