JSF 2 link, commandLink and outputLink example

In JSF,

<h:link />

<h:commandLink />

and

<h:outputLink />

tags are used to render a HTML “

” anchor element, see below examples to understand the different among them.

Note

In below examples, assume “
/JavaServerFaces/ ” is the root of your project context URL.

1. JSF h:link example

The “

h:link

” tag is a new tag in JSF 2.0, the “

value

” attribute is rendered as the anchor text, “`outcome” attribute is determined the target URL of the HTML “href” attribute. See examples :

1. link + “outcome”

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

//HTML output
<a href="/JavaServerFaces/faces/login.xhtml" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Login page</a>

2. link + “outcome” + parammeter

//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" target="_blank" rel="external nofollow" >Login page + Param</a>

3. link + “outcome” + image

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

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

2. JSF `h:commandLink` example

The “

h:commandLink

” tag is released since JSF 1.x, which is generate a link act like a submit button when clicked. The “

value

” attribute is rendered as the anchor text, “

action

” attribute is determined the target URL of the HTML “

href

” attribute. In addition, the “

h:commandLink

” will include a “

jsf.js

” file in the page and attached an “

onclick

” event to the generated link, see examples :

Note

The “j_idtx” is a random value generated by 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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" 
    onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
        {'j_idt6:j_idt16':'j_idt6:j_idt16'},'');
    return false">
    Login page
</a>

P.S if the “action” attribute is omitted, it will reload current page while the button is clicked.

2. commandLink + action

//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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  
    onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
    {'j_idt6:j_idt18':'j_idt6:j_idt18'},'');
    return false">
    Login page
</a>

P.S You can’t even find the action value in the HTML output, only JSF will know where it goes.

3. commandLink + action + parameter

//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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  
    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 + action + image

//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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  
    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 example

The “h:outputLink” tag is released in JSF 1.x, the body of the tag is rendered as the anchor text, “value” attribute is rendered as the value of the HTML “href” attribute directly, see examples :

1. outputLink

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

//HTML output
<a href="currentpage.xhtml" target="_blank" rel="external nofollow" >Login page</a>

P.S if the “value” attribute is omitted, it will put the current page URL as the value of the “href” attribute.

2. outputLink + “value”

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

//HTML output
<a href="login.xhtml" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    Login page
</a>

3. outputLink + “value” + outputText + parameter

//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" target="_blank" rel="external nofollow" >Login page</a>

4. outputLink + “value’ + outputText + image

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

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

My thought…

Some review of above three link tags :

The “h:link” tag is useful to generate a link which requires to interact with the JSF “outcome” , but lack of “action” support make it hard to generate a dynamic outcome.
The “h:commandLink” tag is suck, the generated JavaScript is really scary! Not recommend to use this tag, unless you have a solid reason to support. But it supports the “action” attribute, which is what “h:link” lack of.
The “h:outputLink” is useful to generate a link which does not require to interact with the JSF program itself.

At last, it will be perfect if the “action” attribute is added into the “h:link“.

转载于:https://www.cnblogs.com/ghgyj/p/4765399.html

JSF 2 link, commandLink and outputLink example

1. JSF h:link example

1. link + “outcome”

2. link + “outcome” + parammeter

3. link + “outcome” + image

2. JSF `h:commandLink` example

1. commandLink

2. commandLink + action

3. commandLink + action + parameter

4. commandLink + action + image

3. JSF h:outputLink example

1. outputLink

2. outputLink + “value”

3. outputLink + “value” + outputText + parameter

4. outputLink + “value’ + outputText + image

My thought…

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条

JSF 2 link, commandLink and outputLink example

1. JSF h:link example

1. link + “outcome”

2. link + “outcome” + parammeter

3. link + “outcome” + image

2. JSF h:commandLink example

1. commandLink

2. commandLink + action

3. commandLink + action + parameter

4. commandLink + action + image

3. JSF h:outputLink example

1. outputLink

2. outputLink + “value”

3. outputLink + “value” + outputText + parameter

4. outputLink + “value’ + outputText + image

My thought…

继续阅读

2. JSF `h:commandLink` example