JSF 2 panelGrid example
2015-08-28 07:51
591 查看
In JSF , “
For example, you used to group JSF components with HTML table tags like this :
HTML
With “
h:panelGrid
Note
The “column” attribute is optional, which define the number of columns are required to lay out the JSF component, defaults to 1.
Output following HTML result :
Demo
Screen shot of this example.
![](https://images0.cnblogs.com/blog2015/496473/201508/280750370474665.png)
h:panelGrid” tag is used to generate HTML table tags to place JSF components in rows and columns layout, from left to right, top to bottom.
For example, you used to group JSF components with HTML table tags like this :
HTML
<table> <tbody> <tr> <td> Enter a number : </td> <td> <h:inputText id="number" value="#{dummy.number}" size="20" required="true" label="Number" > <f:convertNumber /> </h:inputText> </td> <td> <h:message for="number" style="color:red" /> </td> </tr> </tbody> </table>
With “
h:panelGrid” tag, you can get the same table layout above, without typing any of the HTML table tags :
h:panelGrid
<h:panelGrid columns="3"> Enter a number : <h:inputText id="number" value="#{dummy.number}" size="20" required="true" label="Number" > <f:convertNumber /> </h:inputText> <h:message for="number" style="color:red" /> </h:panelGrid>
Note
The “column” attribute is optional, which define the number of columns are required to lay out the JSF component, defaults to 1.
h:panelGrid example
A JSF 2.0 example to show you how to use the “h:panelGrid” tag to lay out the components properly.1. Managed Bean
A dummy bean for demo.package com.mkyong; import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="dummy") @SessionScoped public class DummyBean implements Serializable{ int number; public int getNumber() { return number; } public void setNumber(int number) { this.number = number; } }
2. JSF Page
A JSF XHTML page to use “h:panelGrid” tag to places JSF components in 3 columns layout.<?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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
>
<h:body>
<h1>JSF 2 panelGrid example</h1>
<h:form>
<h:panelGrid columns="3"> Enter a number : <h:inputText id="number" value="#{dummy.number}" size="20" required="true" label="Number" > <f:convertNumber /> </h:inputText> <h:message for="number" style="color:red" /> </h:panelGrid>
<h:commandButton value="Submit" action="result" />
</h:form>
</h:body>
</html>
Output following HTML result :
<?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"> <body> <h1>JSF 2 panelGrid example</h1> <form id="j_idt6" name="j_idt6" method="post" action="/JavaServerFaces/faces/default.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt6" value="j_idt6" /> <table> <tbody> <tr> <td> Enter a number : </td> <td> <input id="j_idt6:number" type="text" name="j_idt6:number" value="0" size="20" /> </td> <td></td> </tr> </tbody> </table> <input type="submit" name="j_idt6:j_idt10" value="Submit" /> <input type="hidden" .... /> </form> </body> </html>
Demo
Screen shot of this example.
![](https://images0.cnblogs.com/blog2015/496473/201508/280750370474665.png)
![](https://images0.cnblogs.com/blog2015/496473/201508/280750466403329.png)
相关文章推荐
- JSF 2 link, commandLink and outputLink example
- JSF 2 button and commandButton example
- How to include JavaScript file in JSF
- JavaScript中为什么string可以拥有方法?
- JSF 2 graphicImage example
- JSF 2 outputText example
- JSF 2 multiple select dropdown box example
- JSF 2 dropdown box example
- JSF 2 multiple select listbox example
- JSF 2 listbox example
- JSF 2 radio buttons example
- javascript使用本地cookie
- [Javascript] Linting JavaScript with ESLint
- XML和JSON的对比
- javaScript的设计模式之单例模式
- [LeetCode][JavaScript]Single Number III
- js中(function(){…})()立即执行函数写法理解
- Jsp内置对象及EL表达式的使用
- 浅谈JavaScript中的string拥有方法的原因
- 谈谈JavaScript中function多重理解