JSF – 19 – JSF HTML Tag – 03 – Buttons

Merhaba arkadaslar.
Bu bolumde su button componentlerini inceleyecegiz ;

  • h:commandButton
  • h:button

h:commandButton
h:commandButton component’i JSF 1.x versiyonundan beri mevcuttur. Navigation outcome bilgisini “action” attribute’te yazabiliriz. Navigation konusunda h:CommandButton component’ini  incelemistik. Hatirlayacagimiz gibi action attribute’te static bir deger verebildigimiz gibi method yardimi ile navigate islemini yapabiliyorduk.

ButtonBean.java

package _23.button;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class ButtonBean {

	public String navigateToPage1() {
		return "page1";
	}

	public String navigateToPage2() {
		return "page2";
	}

}

button.xhtml

<h:form prependId="false" id="formId1">
   <p>
	<h:commandButton value="Page1" action="page1" />
   </p>

   <p>
	<h:commandButton value="Page2 " action="#{buttonBean.navigateToPage2}" />
   </p>
</h:form>

h:commandButton ve h:button HTML input element i olusturur. type olarak button , image , submit , reset olacaktir. Eger type belirtilmezse varsayilan olarak type ; submit olacaktir.

input type button element’i formu submit etmez! action icin onclick attribute’u kullanilmalidir. Bu durum JSF e ozel degildir , HTML’in ozelligidir.

<p>
    <h:commandButton value="Nothing Happens!" type="button" action="page1" />
</p>

type=”button” oldugu icin action kisminda page1 olarak belirtsek de form submit edilmeyecektir! HTML input type button icin action onclick event’i ile yapilabilir.

Kodu inceleyecek olursak . onclick attribute’te basit olarak JS alert function kullandik , ikinci ornegimizde ise submitForm function’i cagirdik ve bu function icerisinde formu submit ediyoruz.

<script>
function submitForm(myform){
	  var myForm=document.getElementById("formId1");
	  myForm.action = "page2.xhtml";
	  myForm.submit();
}
</script>
....
    <p>
	<h:commandButton value="Say Hello" type="button" onclick="alert('hello')">
    </p>
	
    <p>
	<h:commandButton value="Submit the Form! "  type="button" onclick="submitForm()"/>
    </p>
...

type olarak image belirttigimizde HTML input type image element’i olusacaktir. image attribute’unu kullanabiliriz.

...
<h:commandButton image="java.png" action="page1"/>
...
<h:commandButton image="/resources/images/duke.png" action="page1"/>
..

h:button
h:button component’i JSF 2.0 ile eklenen bir component’tir. h:button component’i outcome attribute’e sahiptir. h:button component’i HTML input type button elementi olusturur  ve onclick event’inde window.location.href yapisiyla navigate islemi gerceklesir.

h:commandButton , <h:form> icerisinde olmalidir cunku bu component submit islemi yapan HTML input type submit butona donusur.  h:button ise <h:form> icerisinde olmak zorunda degildir , bu component HTML input type button elementine donusur ve navigate islemi gerceklesir. h:button icin HTTP GET , h:commandButton ise HTTP POST istegi gerceklesecektir.

<h:button value="h:button page1!" outcome="page1" />

outcome attribute te action attribute’te oldugu gibi metot cagiramayiz!
Su ifade legal degildir! burada #{buttonBean.navigateToPage1} ifadesi icin navigateToPage1 degerini buttonBean’in property alani olarak degerlendirir.

<h:button value="h:button page1!" outcome="#{buttonBean.navigateToPage1}"  />

Bu kismi yorum satiri olarak koda ekliyorum. HTML yorum satiri da olsa JSF #{} ifadesini evaluate edecektir bu da probleme neden olacaktir. Bunu engellemek icin su context-param i ekleyebiliriz.

web.xml

context-param>
	<param-name>facelets.SKIP_COMMENTS</param-name>
	<param-value>true</param-value>
</context-param>

button.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">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>h:commandButton and h:button components</title>
</h:head>

<script>
function submitForm(myform){
	  var myForm=document.getElementById("formId1");
	  myForm.action = "page2.xhtml";
	  myForm.submit();
}
</script>

<h:body>
	<h:form prependId="false" id="formId1">
		<p>
			<h:commandButton value="Page1" action="page1" />
		</p>

		<p>
			<h:commandButton value="Page2" action="#{buttonBean.navigateToPage2}" />
		</p>
		
		<p>
			<h:commandButton value="Nothing Happens!" type="button" action="page1" />
		</p>
		
		<p>
			<h:commandButton value="Say Hello"  onclick="alert('hello')" />
		</p>
		
		<p>
			<h:commandButton value="Submit the Form!"  onclick="submitForm()" />
		</p>
		
		<p>
			<h:commandButton image="java.png" action="page1"/>
		</p>
		
		<p>
			<h:commandButton image="/resources/images/duke.png" action="page1"/>
		</p>
		
		<!--  Bu ifade legal degildir! burada #{buttonBean.navigateToPage1} 
		ifadesi icin navigateToPage1 degerini buttonBean'in property alani olarak degerlendirir.
		<p>
			<h:button value="h:button page1!" outcome="#{buttonBean.navigateToPage1}" />
		</p>
		-->
	</h:form>
</h:body>
</html>

Ornegimizi calistirdigimizda ;

hcommandbutton hbutton

Buttonlara tiklayarak test edebiliriz.

Kaynak kodlar : Injavawetrust.jsf
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 *