JSF – 20 – JSF HTML Tag – 04 – Links

Merhaba Arkadaslar
Bu bolumde HTML anchor elementine donusen HTML JSF component’lerini inceleyecegiz.
Bu component’ler ;

  • h:commandLink
  • h:link
  • h:outputLink

h:commandLink
h:commandLink JSF 1.X versiyonunda beri mevcuttur. h:commandLink HTML anchor (a) elementi olusturur ve submit butonu gibi formu submit eder. Bu nedenle HTTP POST istegine neden olur.

value attribute’u anchor elementinin texti olacaktir. action attribute ise target URL olacaktir.
onclick event’inin calismasi icin jsf.js dosyasi kullanilacaktir.

LinkBean.java

package _24.link;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class LinkBean {
	
	public String navigateToPage1() {
		return "page1";
	}

	public String navigateToPage2() {
		return "page2";
	}
	//outcome attribute'de property kullanilir.
	public String myPage1Outcome="page1";

	public String getMyPage1Outcome() {
		return myPage1Outcome;
	}

}

link.xhtml

<h:form prependId="false" id="formId1">
	
<h1>h:commandLink examples</h1>
...
	<h:commandLink value="Page1" action="page1" />
...
</h:form>				

h:commandLink component’i HTML anchor elemente donusecektir. onclick attribute’te form submit edilir.

<a href="#" onclick="mojarra.jsfcljs(document.getElementById('formId1'),{'j_idt9':'j_idt9'},'');return false">Page1</a>

h:commandLink component’inde h:commandButton component’inde oldugu gibi action attribute vardir.

   <h:commandLink value="Page1 action" action="#{linkBean.navigateToPage1}" />

f:param attribute ile parametre ekleyebiliriz. page2.xhtml de bu parametreye #{param.personName} seklinde ulasabiliriz.

<h:commandLink action="#{linkBean.navigateToPage2}" value="Page2 with f:param">
	<f:param name="personName" value="Levent" />
</h:commandLink>

HTML anchor elementi ;

<a href="#" onclick="mojarra.jsfcljs(document.getElementById('formId1'),{'j_idt10':'j_idt10','personName':'Levent'},'');return false">Page2 with f:param</a>

h:graphicImage component’i image’i link olarak kullanabiliriz.

<h:commandLink action="page1">
	<h:graphicImage value="java.png"/>
</h:commandLink>

HTML anchor elementine donusecektir, graphicImage img elementine donusecektir.

<a href="#" onclick="mojarra.jsfcljs(document.getElementById('formId1'),{'j_idt22':'j_idt22'},'');return false">
	<img src="java.png">
</a>

h:link
h:link component’i JSF 2.0 ile gelen bir component’tir. h:link component’i h:button component gibi action attribute almaz , outcome attribute’unu alir.
Yine benzer sekilde HTTP GET istegine neden olur. outcome bilgisi HTML anchor elementinde href attribute’te yer alir. h:link componentinde event olarak h:commandLink component’inin aksine onclick attribute olusmaz.

<h:link value="Page1" outcome="page1" />

h:link componenti HTML anchor elementine donusur ;

<a href="/Injavawetrust.jsf/24.link/page1.xhtml">Page1</a>

outcome attribute’te property bilgisini kullanabiliriz.

<!--myPage1Outcome metot degil property degeridir. -->
<h:link value="Page1 outcome"  outcome="#{linkBean.myPage1Outcome}" />
	//outcome attribute'de property kullanilir.
	public String myPage1Outcome="page1";

	public String getMyPage1Outcome() {
		return myPage1Outcome;
	}

h:commandLink componentine benzer sekilde f:param component’ini ve h:graphicImage component’ini kullanabiliriz.

<p>
   <h:link outcome="page2" value="Page2 with f:param">
	<f:param name="personName" value="Levent" />
   </h:link>
</p>

<p>
   <h:link outcome="page1">
	<h:graphicImage value="java.png"/>
   </h:link>
</p>

h:outputlink
h:outputLink component’i JSF 1.x versiyonundan beri vardir. value attribute HTML anchor elementinde href elementinde yer alacaktir.

value attribute’te page1.xhtml olacak sekilde dosya uzantisini da belirtmemiz gereklidir.

<h:outputLink value="page1.xhtml"> 
   Page1 				
</h:outputLink>

<h:outputLink value="#{linkBean.myPage1Outcome}.xhtml"> 
   Page1 outcome 
</h:outputLink>

Benzer sekilde f:param ve h:graphicImage component’lerini kullanabiliriz.

 <h:outputLink value="page2.xhtml"> 
    Page2 with param 
   <f:param name="personName" value="Levent" />
 </h:outputLink>

 <h:outputLink value="page1.xhtml">
    <h:graphicImage value="java.png"/>
 </h:outputLink>

Ornegimizi calistirip linklere tiklayip test edebiliriz.

hlink hcommandlink houtputlink

link.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>link components</title>
</h:head>

<h:body>
	<h:form prependId="false" id="formId1">
	
		<h1>h:commandLink examples</h1>
		<p>
			<h:commandLink value="Page1" action="page1" />
		</p>
				
		<p>
			<h:commandLink value="Page1 action" action="#{linkBean.navigateToPage1}" />
		</p>
		
		<p>
			<h:commandLink action="#{linkBean.navigateToPage2}" value="Page2 with f:param">
				<f:param name="personName" value="Levent" />
			</h:commandLink>
		</p>
		
		<p>
			<h:commandLink action="page1">
				<h:graphicImage value="java.png"/>
			</h:commandLink>
		</p>	
		
		<h1>h:link examples</h1>
		
		<p>
			<h:link value="Page1" outcome="page1" />
		</p>
		
		<p>
			<h:link value="Page1 outcome"  outcome="#{linkBean.myPage1Outcome}" />
		</p>	
		
		<p>
			<h:link outcome="page2" value="Page2 with f:param">
				<f:param name="personName" value="Levent" />
			</h:link>
		</p>
		
		<p>
			<h:link outcome="page1">
				<h:graphicImage value="java.png"/>
			</h:link>
		</p>
		
		<h1>h:outputLink examples</h1>
		
		<p>
			<h:outputLink value="page1.xhtml"> 
			Page1 				
			</h:outputLink>
		</p>
		
		<p>
			<h:outputLink value="#{linkBean.myPage1Outcome}.xhtml"> 
			Page1 outcome 				
			</h:outputLink>
		</p>
					
		<p>
			<h:outputLink value="page2.xhtml"> 
				Page2 with param 				
				<f:param name="personName" value="Levent" />
			</h:outputLink>
		</p>
		
		<p>
			<h:outputLink value="page1.xhtml">
				<h:graphicImage value="java.png"/>
			</h:outputLink>
		</p>
		
	</h:form>
</h:body>
</html>

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 *