在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&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&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&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&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>
我的想法…
对以上三个链接标签的一些评论:
- “ h:link ”标记对于生成需要与JSF“结果”进行交互的链接很有用,但是缺乏“动作”支持使得很难生成动态结果。
- “ h:commandLink ”标记很烂,生成JavaScript确实很吓人! 除非您有充分的理由支持,否则不建议您使用此标签。 但是它支持“ action ”属性,这是“ h:link ”所缺少的。
- “ h:outputLink ”对于生成不需要与JSF程序本身进行交互的链接很有用。
最后,将“ action ”属性添加到“ h:link ”将是完美的。
下载源代码
下载它– JSF-2-link-commandLink-outputLink-Example.zip (15KB)
参考
翻译自: https://mkyong.com/jsf2/jsf-2-link-commandlink-and-outputlink-example/