JSF

JSF Dersleri-JSF ve Ajax(JSF and Ajax)

Merhaba arkadaşlar. Bu makalemizde Ajax‘ın JSF içinde nasıl kullanıldığını öğreneceğiz.

Ajax Nedir?

İngilizcesi “Asynchronous JavaScript and XML”Türkçesi “Eşzamansız JavaScript ve XML” olan Ajax sayfayı yenilemeye gerek olmadan bilgi alışverişi yapmak için kullanılan yapıdır. Örneğin bazı anketlerde verdiğiniz oyu gönderdikten sonra sayfa yenilemeden sonuçları görebiliyorsunuz. Bunu sağlayan yapı Ajax yapısıdır.

Nasıl Kullanılır?

Ajax’ın JSF içinde nasıl kullanıldığını örneğimiz üzerinden anlamaya çalışalım. Örneğimizin kaynak kodları aşağıdadır. Kodların açıklaması kaynak kodlarımızın altındadır.

index.xhtml Kodu

AjaxManagedBean.java Kodu

Kodların Açıklaması

index.xhtml sayfası içerisinde bulunan inputText bileşenini şimdiye kadar id olmadan kullandık. Ancak Ajax kullanacaksak id kullanmamız şart. Uygun bir id verip değerine de managed bean içindeki değişkene atıyoruz.

Ajax işlemini asıl çalıştıracak yapı buton içindedir. CommandButton içerisinde yer alan <f : ajax> etiketi Ajax yapısını kullanmamıza imkan sağlayan etikettir. execute bölümüne Ajax ile çalıştırmak istediğimiz bileşene verdiğimiz id’yi atarız çünkü execute girilen veriyi işleyecektir. render bölümüne de butona basıldıktan sonra ne olmasını istiyorsak onu tanımladığımız bileşenin id’sini atıyoruz. Burada id kısmına cikti verdik. Butona basılınca cikti id’li outputText çalıştırılacak.

16. satırda bulunan outputText bildiğimiz outputText yapısıdır.

Managed Bean içinde isim değişkenini tanımlarken ona ” “ değerini atadık. Çünkü bununla “Null Pointer Exception” hatası almanın önüne geçmek istedik. ” ” değerini atamasaydık bize “Boş Gösterici Hatası” şeklindeki hatayı verecekti. Değişkenimizin  get ve set metotlarını oluşturduktan sonra index.xhtml sayfasındaki outputText bileşenine atadığımız metodu tanımlıyoruz. Öncelikle değişkenin boş olup olmadığını kontrol ediyoruz. Boş değilse girilen isimle birlikte “Hoşgeldiniz” yazısını ekrana aktarıyoruz. Boşsa boş bir string döndürüyoruz.

Programın ekran çıktılarına da bir bakalım. Resimlerin altındaki yazılara dikkat edelim.

Adımı soyadımı yazıp GÖNDER butonuna basıyorum.

Adımı soyadımı yazıp GÖNDER butonuna tıklıyorum.

 

 

 

 

 

Adres çubuğuna dikkat edin. Hiçbir değişme yok. Ajax kullanmadan yapsaydık oraya index.xhtml yazısı gelecekti.

Adres çubuğuna dikkat edin. Hiçbir değişme yok. Ajax kullanmadan yapsaydık oraya index.xhtml yazısı gelecekti.

 

 

 

 

 

 

Ajax, JSF içinde temel olarak böyle kullanılıyor arkadaşlar. Gelecek yazıda Ajax kullanarak bir anket yapacağız.

Esen kalın.