In JSF 2.0, both <h:button /> and <h:commandButton /> tags are used to render HTML input element of type button, with different mechanism to handle the navigation.

1. JSF h:commandButton example

The “h:commandButton” tag is released since JSF 1.x, you can declare the bean, which return the navigation outcome in the “action” attribute. If browser’s with JavaScript disabled, the navigation is still working, because the navigation is handled via form post.

1. Submit button

//JSF
<h:commandButton value="submit" type="submit" action="#{user.goLoginPage}" />
//HTML output
<input type="submit" name="xxx" value="submit" />

2. Reset button

//JSF
<h:commandButton value="reset" type="reset" />
//HTML output
<input type="reset" name="xxx" value="reset" />

3. Normal button

//JSF
<h:commandButton value="button" type="button" />
//HTML output
<input type="button" name="xxx" value="button" />

4. Normal button with onclick event

//JSF
<h:commandButton value="Click Me" type="button" onclick="alert('h:commandButton');" />
//HTML output
<input type="button" name="xxx" value="Click Me" onclick="alert('h:commandButton');" />

2. JSF h:button example

The “h:button” is a new tag in JSF 2.0, you can declared the navigation outcome directly in the “outcome” attribute, no need to call a bean to return an outcome like “h:commandButton” above. But, if browser’s with JavaScript disabled, the navigation will failed, because the “h:button” tag is generate an “onclick” event to handle the navigation via “window.location.href”. See examples :

1. Normal button without outcome

//JSF
<h:button value="buton" />
//HTML output
<input type="button"
onclick="window.location.href='/JavaServerFaces/faces/currentpage.xhtml; return false;"
value="buton" />

P.S if the outcome attribute is omitted, the current page URL will treat as the outcome.

2. Normal button with an outcome

//JSF
<h:button value="buton" outcome="login" />
//HTML output
<input type="button"
onclick="window.location.href='/JavaServerFaces/faces/login.xhtml; return false;"
value="buton" />

3. Normal button with JavaScript.

//JSF
<h:button value="Click Me" onclick="alert('h:button');" />
//HTML output
<input type="button"
onclick="alert('h:button');window.location.href='/JavaServerFaces/faces/page.xhtml;return false;"
value="Click Me" />

My thought…

No really sure why JSF 2.0 released this “h:button” tag, the JavaScript redirection is not practical, especially in JavaScript disabled browser. The best is integrate the “outcome” attribute into the “h:commandButton” tag, hope it can be done in future release.

JSF 2 button and commandButton example的更多相关文章

  1. JSF 与 HTML 标签的联系

    *页面的开头 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ t ...

  2. Ajax4Jsf 简单介绍

    Ajax4jsf 允许开发人员将 Ajax 功能添加到 JSF 应用程序中,而不需要 JavaScript 或用 Ajax 图形部件替换现有的组件.这个包还允许在使用 Java 2D 库时动态地生成图 ...

  3. VSTO在幻灯片里面添加按钮对象

    //添加Form窗体,窗体中添加Image控件,单击弹出"PPT"信息提示 //命名引用:using MF = Microsoft.Vbe.Interop.Forms; priva ...

  4. 关于JSF中immediate属性的总结(二)

    The immediate attribute in JSF is commonly misunderstood. If you don't believe me, check out Stack O ...

  5. Parameter Passing / Request Parameters in JSF 2.0 (转)

    This Blog is a compilation of various methods of passing Request Parameters in JSF (2.0 +) (1)  f:vi ...

  6. JSF页面中使用js函数回调后台bean方法并获取返回值的方法

    由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统.详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还是错误的, ...

  7. JSF 2 dropdown box example

    In JSF, <h:selectOneMenu /> tag is used to render a dropdown box – HTML select element with &q ...

  8. JSF 2 multiple select listbox example

    In JSF, <h:selectManyListbox /> tag is used to render a multiple select listbox – HTML select ...

  9. JSF 2 listbox example

    In JSF, <h:selectOneListbox /> tag is used to render a single select listbox – HTML select ele ...

随机推荐

  1. python-unexpected content storage modification出错

    提示以上错误,然后在pycharm中的文件内容和实际内容不一致 去我的文档-.PyCharm-system_cache,全部删除

  2. 嵌入式linux内核是什么?

    linux内核是一种可以被内核动态加载(insmode)和卸载(rmmod)的可执行二进制代码 最简单的内核 #include <linux/module.h> #include < ...

  3. res里面的drawable(ldpi、mdpi、hdpi、xhdpi、xxhdpi)

    (1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854) (2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x ...

  4. MVC项目中应用富文本编辑器UEditor中的几个坑

    UEditor:百度出品 官网连接:http://ueditor.baidu.com/website/ 错误现象:在官网上复制到本地后,上传图片功能不能用, 控制台提示:“请求后台配置项http错误, ...

  5. UVa401 回文词

    Palindromes A regular palindrome is a string of numbers or letters that is the same forward as backw ...

  6. LA 3983 Robotruck

    这道题感觉挺吃力的,还用到了我不熟悉的优先队列 题目中的推导也都看明白了,总之以后还要多体会才是 这里用优先对列的原因就是因为要维护一个滑动区间的最小值,比如在区间里2在1的前面,2在离开这个滑动区间 ...

  7. HDU Sky数 2097

    解题思路:类比求出10进制数各个位上的数字之和,求出12进制和16进制上的数. #include<cstdio> #include<cstring> #include<a ...

  8. IOS公司开发者账号申请详细教程

    谈到苹果开发者账号,我们需要区分一下个人账号.公司账号和企业账号这三种,还有一种是教育账号,这个就不多说了. 个人账号:个人申请用于开发苹果app所使用的账号,仅限于个人使用,申请比较容易,$99. ...

  9. ERROR 1130: Host '192.168.1.3' is not allowed to connect to this MySQL ERROR 1062 (23000): Duplicate entry '%-root' for key 'PRIMARY'

    use mysql mysql> select host, user from user; 将相应用户数据表中的host字段改成'%': update user set host='%' whe ...

  10. DB2死锁解决办法

    db2 命令行,1.用管理员用户登录:db2 connect to 你的数据库名 user 用户名 using 密码 2.db2 "get snapshot for locks on 数据库 ...