JSF – 03 – JSF & Ajax

Merhaba Arkadaslar,
Bu yazimda Ajax’  in( Asynchronous JavaScript and XML // Eşzamansız JavaScript ve XML ) , JSF ile calismasini inceleyecegiz. Buradaki ornek bir giris niteliginde olacak. Ilerleyen yazilarda Ajax konusuna donus yapacagiz.

Ajax hakkinda biraz bilgi ;
http://tr.wikipedia.org/wiki/AJAX_(programlama)

HelloAjaxBean.java

 
package _03.helloajax;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped

public class HelloAjaxBean {

	private String name;
	private String password;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getGreeting() {
		// with ajax request , we wont send password property's value.
		if (name != null && name.length() > 0) {
			return "Welcome to www.injavawetrust.com , " + name + "!" + " password: " + password;
		} else {
			return "";
		}
	}
}

ManagedBean’imizde dikkat etmemiz gereken getGreeting adinda bir metot ekledik !

loginAjax.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Welcome</title>
</h:head>
<h:body>
	<h:form prependId="false">
		<h3>Please enter your name and password.</h3>
		<table>
			<tr>
				<td>Name:</td>
				<td><h:inputText value="#{helloAjaxBean.name}" id="nameId" /></td>
			</tr>
			<tr>
				<td>Password:</td>
				<td><h:inputSecret value="#{helloAjaxBean.password}" id="passwordId"/></td>
			</tr>
		</table>
		<p>

			<!--<h:commandButton value="Login" action="welcome" /> -->

			<h:commandButton value="Login">
				<f:ajax execute="nameId" render="out" />
			</h:commandButton>
		</p>

		<h3>
			<h:outputText id="out" value="#{helloAjaxBean.greeting}" />
		</h3>
	</h:form>
</h:body>
</html>
  1. <f:ajax> component’ini kullanabilmesi icin xmlns:f=”http://java.sun.com/jsf/core”  namespacesini eklememiz gereklidir.
  2. Varsayilan olarak componentlere bir id degeri verilir. Componentlere daha basit id degeri vermek icin prependId attribute false yapabiliriz.
  3. <f:ajax> , execute attribute kisminda name property degeri icin nameId degerini veriyoruz. Bu durumda commandButton’a tiklandiginda setName metodu calisacaktir.
    Burada dikkat edeek olursak execute attribute’te passwordId belirtmedik. Bu nedenle AJax  isteginde password gonderilmeyecek , null olacak.
  4. <f:ajax> , render attribute kisminda out degeri , outputText component’inin id degeri.
  5. <h:outputText>  component’inde value attribute degeri getGreeting metodunu cagirmaktadir.
<h:commandButton value="Login">
	<f:ajax execute="nameId" render="out" />
</h:commandButton>

Login butonuna tiklandiginda Server’a bir Ajax istegi/request gonderilir. execute ozelligi/attribute ile isleme koyulacak bilesenleri/component belirleriz, name component’inin isleme koyulmasini belirtiyoruz.

render bileseni ( out ) ise sayfa goruntulendiginde isleme koyulacaktir.

<h:outputText id="out" value="#{helloAjaxBean.greeting}" />

helloAjaxBean’ine ait getGreeting metodu cagrilir sonuclar Client’a gonderilir ve gosterilir.

helloAjaxBean’i server da bulunmaktadir. greeting , Client ‘ta islenmez. Bunun yerine bilesen/component degerleri Server’a gonderilir ve render islemi gerceklestirilir ve sayfada guncelleme gerceklestirilir.

Run Application

ajax login

Login butonuna tikladigimizda

 

ajax call

Dikkat edecek olursak sadece nameId execute edildi , passwordId ise execute edilmedi.

Yazimi burada sonlandiriyorum.
Herkese Bol Javali Gunler dilerim.
Be an oracle man , import java.*;
Levent Erguder
OCP, Java SE 6 Programmer
OCE, Java EE 6 Web Component Developer

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *