JSF 2链接，commandLink和outputLink示例

在JSF中， <h：link /> ， <h：commandLink />和<h：outputLink />标记用于呈现HTML“ a”锚元素，请参见以下示例以了解它们之间的不同。

注意
在下面的示例中，假设“ / JavaServerFaces /”是项目上下文URL的根。

1. JSF h：link示例

“ h：link ”标记是JSF 2.0中的新标记，“ value ”属性呈现为锚文本，“ result ”属性确定HTML“ href ”属性的目标URL。 看例子：

1.链接+“结果”

//JSF
<h:link value="Login page" outcome="login" />

//HTML output
<a href="/JavaServerFaces/faces/login.xhtml">Login page</a>

2.链接+“结果” +参数

//JSF
<h:link value="Login page + Param " outcome="login" >
	<f:param name="username" value="mkyong" />
</h:link>

//HTML output
<a href="/JavaServerFaces/faces/login.xhtml?username=mkyong">Login page + Param</a>

3.链接+“结果” +图片

//JSF
<h:link outcome="login" >
	<h:graphicImage library="images" name="sofa.png" />
</h:link>

//HTML output
<a href="/JavaServerFaces/faces/login.xhtml">
	<img src="/JavaServerFaces/faces/javax.faces.resource/sofa.png?ln=images" />
</a>

2. JSF h：commandLink示例

自从JSF 1.x以来，“ h：commandLink ”标记已发布，该标记生成的链接就像单击时的提交按钮一样。 “ value ”属性呈现为锚文本，“ action ”属性确定为HTML“ href ”属性的目标URL。 此外，“ h：commandLink”将在页面中包含一个“ jsf.js ”文件，并将“ onclick”事件附加到生成的链接上，请参见示例：

注意
“ j_idtx ”是由JSF生成的随机值。

1. commandLink

//JSF
<h:commandLink value="Login page" />	

//HTML output
<script type="text/javascript" 
 src="/JavaServerFaces/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development">
</script>

<a href="#"
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
        {'j_idt6:j_idt16':'j_idt6:j_idt16'},'');
	return false">
	Login page
</a>

PS如果省略“ action ”属性，则在单击按钮时它将重新加载当前页面。

2. commandLink +动作

//JSF
<h:commandLink action="#{user.goLoginPage}" value="Login page" />		

//HTML output
<script type="text/javascript" 
 src="/JavaServerFaces/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development">
</script>

<a href="#" 
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
	{'j_idt6:j_idt18':'j_idt6:j_idt18'},'');
	return false">
	Login page
</a>

PS您甚至无法在HTML输出中找到操作值，只有JSF知道它的去向。

3. commandLink +动作+参数

//JSF
<h:commandLink action="#{user.goLoginPage}" value="Login page + Param ">
	<f:param name="username" value="mkyong" />
</h:commandLink>

//HTML output
<script type="text/javascript" 
 src="/JavaServerFaces/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development">
</script>

<a href="#" 
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
	{'j_idt6:j_idt20':'j_idt6:j_idt20','username':'mkyong'},'');
	return false">
	Login page + Param 
</a>

4. commandLink +动作+图像

//JSF
<h:commandLink action="#{user.goLoginPage}">
	<h:graphicImage library="images" name="sofa.png" />
</h:commandLink>

//HTML output
<script type="text/javascript" 
 src="/JavaServerFaces/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development">
</script>

<a href="#" 
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
	{'j_idt6:j_idt23':'j_idt6:j_idt23'},'');
	return false">
	<img src="/JavaServerFaces/faces/javax.faces.resource/sofa.png?ln=images" />
</a>

3. JSF h：outputLink示例

JSF 1.x中发布了“ h：outputLink ”标记，该标记的主体呈现为锚文本，“ value ”属性直接呈现为HTML“ href ”属性的值，请参见示例：

1. outputLink

//JSF
<h:outputLink>Login page</h:outputLink>

//HTML output
<a href="currentpage.xhtml">Login page</a>

PS如果省略了“ value ”属性，它将把当前页面的URL作为“ href”属性的值。

2. outputLink +“值”

//JSF
<h:outputLink value="login.xhtml" >
	Login page
</h:outputLink>

//HTML output
<a href="login.xhtml">
	Login page
</a>

3. outputLink +“值” + outputText +参数

//JSF
<h:outputLink value="login.xhtml">
	<h:outputText value="Login page" />
	<f:param name="username" value="mkyong" />
</h:outputLink>

//HTML output
<a href="login.xhtml?username=mkyong">Login page</a>

4. outputLink +“值” + outputText +图像

//JSF
<h:outputLink value="login.xhtml">
	<h:graphicImage library="images" name="sofa.png" />
</h:outputLink>

//HTML output
<a href="login.xhtml">
	<img src="/JavaServerFaces/faces/javax.faces.resource/sofa.png?ln=images" />
</a>

我的想法…

对以上三个链接标签的一些评论：

1. “ h：link ”标记对于生成需要与JSF“结果”进行交互的链接很有用，但是缺乏“动作”支持使得很难生成动态结果。
2. “ h：commandLink ”标记很烂，生成JavaScript确实很吓人！ 除非您有充分的理由支持，否则不建议您使用此标签。 但是它支持“ action ”属性，这是“ h：link ”所缺少的。
3. “ h：outputLink ”对于生成不需要与JSF程序本身进行交互的链接很有用。

最后，将“ action ”属性添加到“ h：link ”将是完美的。

下载源代码

下载它– JSF-2-link-commandLink-outputLink-Example.zip （15KB）

参考

1. JSF <h：link /> JavaDoc
2. JSF <h：commandLink /> JavaDoc
3. JSF <h：outputLink /> JavaDoc

标签： jsf2 链接

翻译自: https://mkyong.com/jsf2/jsf-2-link-commandlink-and-outputlink-example/