阅读(185)
赞(0)
JSF 表单命令按钮示例
2017-01-09 19:01:00 更新
JSF教程 - JSF表单命令按钮示例
h:commandButton标签渲染类型为“submit"的HTML输入元素。
下面的JSF代码
<h:commandButton value="Click Me!" onclick="alert("Hello World!");" />
被渲染成以下HTML代码。
<input type="submit" name="j_idt10:j_idt13" value="Click Me!"
onclick="alert("Hello World!");" />
标签属性
| 属性 | 描述 |
|---|---|
| id | 标签的标识 |
| rendered | 布尔值; false将抑制渲染 |
| styleClass | 级联样式表(CSS)类名称 |
| value | 值绑定 |
| valueChangeListener | 响应值更改的方法绑定 |
| required | 布尔值; 如果为true，则根据需要标记标签 |
| coords | 形状为矩形，圆形或多边形的元素的坐标 |
| dir | 文本的方向。 有效值为 ltr (从左到右)和 rtl (从右到左)。 |
| disabled | 输入元素或按钮的禁用状态 |
| style | 内联样式信息 |
| tabindex | 指定制表符索引的数值 |
| target | 打开文档的框架的名称 |
| title | 用于辅助功能的标题。 浏览器通常为标题的值创建工具提示 |
| width | 元素的宽度 |
| onblur | 失去焦点的事件处理程序 |
| onchange | 值更改的事件处理程序 |
| onclick | 鼠标按钮的事件处理程序点击该元素 |
| ondblclick | 双击鼠标按钮的事件处理程序 |
| onfocus | 元素接收焦点的事件处理程序 |
| onkeydown | 按键的事件处理程序 |
| onkeypress | 键按下并释放的事件处理程序 |
| onkeyup | Key的事件处理程序发布 |
| onmousedown | 鼠标按钮的事件处理程序 |
| onmousemove | 鼠标移动的事件处理程序 |
| onmouseout | 鼠标左的事件处理程序 |
| onmouseover | 鼠标移动到的事件处理程序 |
| onmouseup | 释放鼠标按钮的事件处理程序 |
| onreset | 表单重置的事件处理程序 |
| onselect | 选择文本的事件处理程序 |
例子
以下代码来自login.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"
>
<h:body>
<h1>login.xhtml</h1>
</h:body>
</html>
下面的代码来自UserBean.java。
package cn.zijiebao.common;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String goLoginPage(){
return "login";
}
}
以下代码来自demo.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"
>
<h:head></h:head>
<h:body>
<h1>JSF 2 button and commandButton example</h1>
<h:form>
<ol>
<li>
<h:commandButton value="submit" type="submit" action="#{user.goLoginPage}" />
</li>
<li>
<h:commandButton value="reset" type="reset" />
</li>
<li>
<h:commandButton value="button" type="button" />
</li>
<li>
<h:commandButton value="Click Me" type="button" onclick="alert("h:commandButton");" />
</li>
<li>
<h:button value="buton" />
</li>
<li>
<h:button value="Click Me" onclick="alert("h:button");" />
</li>
<li>
<h:button value="buton" outcome="login" />
</li>
</ol>
</h:form>
</h:body>
</html>下载 Form_CommandButton.zip运行
将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹，并运行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成启动后，在浏览器地址栏中键入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml