原文:Mkyong
JSF 2 多选下拉框示例
在 JSF,**<h:selectmany menu/>**标签用于呈现一个多选下拉框——HTML select 元素,带有“ multiple ”和“ size=1 ”属性。
//JSF...
<h:selectManyMenu value="#{user.favCoffee1}">
<f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" />
<f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" />
<f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" />
</h:selectManyMenu>
//HTML output...
<select name="j_idt6:j_idt8" multiple="multiple" size="1">
<option value="Cream Latte">Coffee3 - Cream Latte</option>
<option value="Extreme Mocha">Coffee3 - Extreme Mocha</option>
<option value="Buena Vista">Coffee3 - Buena Vista</option>
</select>
然而, h:selectManyMenu 标签的使用极不推荐,因为它们在不同的互联网浏览器中显示不一致,见图:
1.Internet Explorer 8
一个小滚动条来操作下拉框的值。
2.火狐 3.6.10
没有滚动条,看起来像一个普通的“文本框”,但你可以点击“文本框”和“上下拖动”或“上下键”来操纵值。
3.谷歌浏览器
在 Google Chrome 中,无论是<< select element with “multiple” and size=“1” attribute - " h:selectManyMenu “标签> >还是< <带有” multiple "和 size="total of records "属性的 select 元素- " h:selectManyListbox "标签> >都是显示精确的布局。
结论
忘了“ h:selectManyMenu ”标签吧,真的没有理由用它。“ h:selectManyListbox ”标签是一个很好的选择。
参考
相关文章
-
Set the drop-down box value in
-
[How to use Struts 2 【T1]](/web/20201226142747/https://mkyong.com/struts2/how-to-auto-select-drop-down-box-value-in-struts-2/)
-
Automatically select the value struts 2 < s from the drop-down box : select the drop-down box > as an example
JSF 2 多重选择列表框示例
在 JSF 中,**<h:selectmany listbox/>**标签用于呈现一个多选 listbox-HTML 选择元素,具有“多个”和“大小属性。
//JSF...
<h:selectManyListbox value="#{user.favFood1}">
<f:selectItem itemValue="Fry Checken" itemLabel="Food1 - Fry Checken" />
<f:selectItem itemValue="Tomyam Soup" itemLabel="Food1 - Tomyam Soup" />
<f:selectItem itemValue="Mixed Rice" itemLabel="Food1 - Mixed Rice" />
</h:selectManyListbox>
//HTML output...
<select name="j_idt6:j_idt8" multiple="multiple" size="3">
<option value="Fry Checken">Food1 - Fry Checken</option>
<option value="Tomyam Soup">Food1 - Tomyam Soup</option>
<option value="Mixed Rice">Food1 - Mixed Rice</option>
</select>
h:selectManyListbox example
一个 JSF 2.0 示例,展示了如何使用“ h:selectManyListbox ”标记来呈现多个选择列表框,并以 3 种不同的方式填充数据:
- “f:selecti item标签中的硬核值。
- 用 Map 生成值,并将其放入“f:selecti items标签中。
- 用一个对象数组生成值,放入“ f:selectItems ”标签,然后用“ var 属性表示值。
1.支撑豆
用于保存和生成多选列表框值的数据的后备 bean。保存多选列表框值的属性必须是集合类型或数组类型;否则将会出现以下错误信息
WARNING: Target model Type is no a Collection or Array
javax.faces.FacesException: Target model Type is no a Collection or Array
package com.mkyong;
import java.io.Serializable;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
public String[] favFood1;
public String[] favFood2;
public String[] favFood3;
//getter and setter methods...
public String getFavFood1InString() {
return Arrays.toString(favFood1);
}
public String getFavFood2InString() {
return Arrays.toString(favFood2);
}
public String getFavFood3InString() {
return Arrays.toString(favFood3);
}
//Generated by Map
private static Map<String,Object> food2Value;
static{
food2Value = new LinkedHashMap<String,Object>();
food2Value.put("Food2 - Fry Checken", "Fry Checken"); //label, value
food2Value.put("Food2 - Tomyam Soup", "Tomyam Soup");
food2Value.put("Food2 - Mixed Rice", "Mixed Rice");
}
public Map<String,Object> getFavFood2Value() {
return food2Value;
}
//Generated by Object array
public static class Food{
public String foodLabel;
public String foodValue;
public Food(String foodLabel, String foodValue){
this.foodLabel = foodLabel;
this.foodValue = foodValue;
}
public String getFoodLabel(){
return foodLabel;
}
public String getFoodValue(){
return foodValue;
}
}
public Food[] food3List;
public Food[] getFavFood3Value() {
food3List = new Food[3];
food3List[0] = new Food("Food3 - Fry Checken", "Fry Checken");
food3List[1] = new Food("Food3 - Tomyam Soup", "Tomyam Soup");
food3List[2] = new Food("Food3 - Mixed Rice", "Mixed Rice");
return food3List;
}
}
2.JSF·佩奇
演示“ h:selectManyListbox ”标签使用的 JSF 页面。
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:body>
<h1>JSF 2 multi-select listbox example</h1>
<h:form>
1\. Hard-coded with "f:selectItem" :
<h:selectManyListbox value="#{user.favFood1}">
<f:selectItem itemValue="Fry Checken" itemLabel="Food1 - Fry Checken" />
<f:selectItem itemValue="Tomyam Soup" itemLabel="Food1 - Tomyam Soup" />
<f:selectItem itemValue="Mixed Rice" itemLabel="Food1 - Mixed Rice" />
</h:selectManyListbox>
<br /><br />
2\. Generated by Map :
<h:selectManyListbox value="#{user.favFood2}">
<f:selectItems value="#{user.favFood2Value}" />
</h:selectManyListbox>
<br /><br />
3\. Generated by Object array and iterate with var :
<h:selectManyListbox value="#{user.favFood3}">
<f:selectItems value="#{user.favFood3Value}" var="f"
itemLabel="#{f.foodLabel}" itemValue="#{f.foodValue}" />
</h:selectManyListbox>
<br /><br />
<h:commandButton value="Submit" action="result" />
<h:commandButton value="Reset" type="reset" />
</h:form>
</h:body>
</html>
result.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:h="http://java.sun.com/jsf/html"
>
<h:body>
<h1>JSF 2 multi-select listbox example</h1>
<h2>result.xhtml</h2>
<ol>
<li>user.favFood1 : #{user.favFood1InString}</li>
<li>user.favFood2 : #{user.favFood2InString}</li>
<li>user.favFood3 : #{user.favFood3InString}</li>
</ol>
</h:body>
</html>
3.演示
单击“提交”按钮时,链接到“result.xhtml”页面并显示提交的多选列表框值。
如何预先选择多个列表框值?
如果“f:selecti items”标签的值与“ h:selectManyListbox ”标签的“值”匹配,则选择该标签的值。在上面的示例中,如果您将 favFood1 属性设置为“Fry Checken”和“Tomyam Soup”:
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String[] favFood1 = {"Fry Checken", "Tomyam Soup"};
//...
默认情况下,“favFood1”列表框值、“Fry Checken”和“Tomyam Soup”被选中。
下载源代码
Download It – JSF-2-Multi-Select-Listbox-Example.zip (10KB)
参考
相关文章
- JSF 2 列表框 103
- 检票口列表选择示例
- 检票口列表多选示例 JSF 2 link、commandLink 和输出链接示例
- JSF 新协议数据表示例
- Example of JSF2 radio button
- Warning: JSF1063: Warning! Set unseriable
JSF 2 输出格式示例
原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-outputformat-example/
在 JSF web 应用中,“ h:outputFormat ”标签与“ h:outputText ”标签类似,但是具有额外的功能来呈现参数化的消息。举个例子,
<h:outputFormat value="param0 : {0}, param1 : {1}" >
<f:param value="Number 1" />
<f:param value="Number 2" />
</h:outputFormat>
它将输出以下结果
param0 : Number 1, param1 : Number 2
- {0}匹配到
- {1}与匹配
OutputFormat 示例
查看 JSF 2.0 web 应用中编码的“ h:outputFormat ”标签的几个用例。
1.受管 Bean
一个受管 bean,提供一些文本用于演示。
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String text = "Hello {0}";
public String htmlInput = "<input type=\"{0}\" {1} />";
//getter and setter methods...
}
2.查看页面
带有几个“ h:outputFormat ”标签的页面示例。
JSF…
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:body>
<h1>JSF 2.0 h:outputFormat Example</h1>
<ol>
<li>
<h:outputFormat value="this is param 0 : {0}, param 1 : {1}" >
<f:param value="Number 1" />
<f:param value="Number 2" />
</h:outputFormat>
</li>
<li>
<h:outputFormat value="#{user.text}" >
<f:param value="mkyong" />
</h:outputFormat>
</li>
<li>
<h:outputFormat value="#{user.htmlInput}" >
<f:param value="text" />
<f:param value="size='30'" />
</h:outputFormat>
</li>
<li>
<h:outputFormat value="#{user.htmlInput}" escape="false" >
<f:param value="text" />
<f:param value="size='30'" />
</h:outputFormat>
</li>
<li>
<h:outputFormat value="#{user.htmlInput}" escape="false" >
<f:param value="button" />
<f:param value="value='Click Me'" />
</h:outputFormat>
</li>
</ol>
</h:body>
</html>
生成以下 HTML 代码…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<body>
<h1>JSF 2.0 h:outputFormat Example</h1>
<ol>
<li>
this is param 0 : Number 1, param 1 : Number 2
</li>
<li>
Hello mkyong
</li>
<li>
<input type="text" size='30' />
</li>
<li>
<input type="text" size='30' />
</li>
<li>
<input type="button" value='Click Me' />
</li>
</ol>
</body>
</html>
3.演示
URL:http://localhost:8080/Java server faces/
下载源代码
Download It – JSF-2-OutputFormat-Example.zip (9KB)
参考
JSF 2 输出文本示例
原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-outputtext-example/
在 JSF 2.0 web 应用程序中,“ h:outputText 标签是显示纯文本最常用的标签,它不会生成任何额外的 HTML 元素。参见示例…
1.受管 Bean
一个受管 bean,提供一些文本用于演示。
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String text = "This is Text!";
public String htmlInput = "<input type='text' size='20' />";
//getter and setter methods...
}
2.查看页面
带有几个“ h:outputText ”标签的页面示例。
JSF…
<?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:h="http://java.sun.com/jsf/html">
<h:body>
<h1>JSF 2.0 h:outputText Example</h1>
<ol>
<li>#{user.text}</li>
<li><h:outputText value="#{user.text}" /></li>
<li><h:outputText value="#{user.text}" styleClass="abc" /></li>
<li><h:outputText value="#{user.htmlInput}" /></li>
<li><h:outputText value="#{user.htmlInput}" escape="false" /></li>
</ol>
</h:body>
</html>
生成以下 HTML 代码…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<body>
<h1>JSF 2.0 h:outputText Example</h1>
<ol>
<li>This is Text!</li>
<li>This is Text!</li>
<li><span class="abc">This is Text!</span></li>
<li><input type='text' size='20' /></li>
<li><input type='text' size='20' /></li>
</ol>
</body>
</html>
-
对于 JSF 2.0 中的案例 1 和案例 2
,你其实并不需要使用“h:outputText”标签,因为你可以用直接的值表达式“#{user.text}”来实现同样的事情。 -
对于案例 3
如果存在“styleClass”、“style”、“dir”或“lang”属性中的任何一个,则呈现文本并用“ span 元素将其换行。 -
For case 4 and 5
The “escape” attribute in “h:outputText” tag, is used to convert sensitive HTML and XML markup to the corresponds valid HTML character.
For example,-
转换为>
- &转换为&
默认情况下,“转义属性设置为 true。
-
Note
See complete list of sensitive HTML and XML markup here…
http://www.ascii.cl/htmlcodes.htm
3.演示
URL:http://localhost:8080/Java server faces/
下载源代码
Download It – JSF-2-OutputText-Example.zip (9KB)
参考
标签:JSF 2
相关文章
-
[ JSF 2.0 tutorial
-
[ JSF 2.0 [Examples of commandLink and outputLink of Multi-component Verifier
JSF 2 面板网格示例
原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-panelgrid-example/
在 JSF 中,“ h:panelGrid ”标签用于生成 HTML 表格标签,以将 JSF 组件放置在行和列布局中,从左到右,从上到下。
例如,您曾经使用 HTML 表格标签对 JSF 组件进行分组,如下所示:
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>
使用“ h:panelGrid ”标记,您可以获得上面相同的表格布局,而无需键入任何 HTML 表格标记:
【t0 h:嵌板网格】T1
<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 示例
一个 JSF 2.0 的例子向你展示了如何使用" h:panelGrid "标签来正确地布局组件。
1.受管 Bean
用于演示的虚拟 bean。
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·佩奇
一个 JSF XHTML 页面使用“ h:panelGrid ”标签将 JSF 组件放置在 3 列布局中。
<?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: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>
输出以下 HTML 结果:
<?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 >
<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>
3.演示
此示例的屏幕截图。
下载源代码
Download It – JSF-2-PanelGrid-Example.zip (9KB)
参考
JSF 2 参数示例
原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-param-example/
在 JSF 中,“ f:param ”标签允许你传递一个参数给一个组件,但是它的行为是不同的,取决于它附加的组件的类型。举个例子,
1. f:param + h:输出格式
如果将一个“ f:param ”标记附加到“ h:outputFormat ”上,该参数就指定了占位符。
<h:outputFormat value="Hello,{0}. You are from {1}.">
<f:param value="JSF User" />
<f:param value="China" />
</h:outputFormat>
下面是输出结果——“你好,JSF 用户。你来自中国”。
2.f:参数+其他组件
如果您将一个“ f:param ”标签附加到其他组件上,如“ h:commandButton ”,该参数将被转换为请求参数。
<h:commandButton id="submitButton"
value="Submit - US" action="#{user.outcome}">
<f:param name="country" value="China" />
</h:commandButton>
在用户 bean 中,您可以像这样取回参数值:
Map<String,String> params =
FacesContext.getExternalContext().getRequestParameterMap();
String countrry = params.get("country");
JSF f:参数示例
下面是一个 JSF 2.0 应用程序,展示了在“ h:commandButton 和“ h:outputFormat 组件中使用 f:param 标记。
1.受管 Bean
简单的托管 bean。
UserBean.java
package com.mkyong;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String name;
public String country;
public String outcome(){
FacesContext fc = FacesContext.getCurrentInstance();
this.country = getCountryParam(fc);
return "result";
}
//get value from "f:param"
public String getCountryParam(FacesContext fc){
Map<String,String> params = fc.getExternalContext().getRequestParameterMap();
return params.get("country");
}
//getter and setter methods
}
2.JSF·佩奇
两个 JSF 页面用于演示。
default.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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:body>
<h1>JSF 2 param example</h1>
<h:form id="form">
Enter your name :
<h:inputText size="10" value="#{user.name}" />
<br /><br />
<h:commandButton id="submitButton"
value="Submit - US" action="#{user.outcome}">
<f:param name="country" value="United States" />
</h:commandButton>
</h:form>
</h:body>
</html>
result.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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:body>
<h1>JSF 2 param example</h1>
<h2>
<h:outputFormat value="Hello,{0}. You are from {1}.">
<f:param value="#{user.name}" />
<f:param value="#{user.country}" />
</h:outputFormat>
</h2>
</h:body>
</html>
3.演示
输入您的姓名,例如“mkyong”,然后点击按钮。
显示格式化的消息,“姓名”来自用户输入,“国家”来自按钮参数。
下载源代码
Download It – JSF-2-Param-Example.zip (10KB)
参考
- JSF f:帕拉姆贾瓦德克
JSF 新协议密码示例
原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-password-example/
在 JSF,您可以使用 < h:inputSecret / > 标签来呈现一个 HTML 输入的 type=“password” ,密码字段。举个例子,
JSF 标签…
<h:inputSecret />
呈现此 HTML 代码…
<input type="password" name="j_idt6:j_idt7" />
P.S 名称属性值由 JSF 随机生成。
JSF 密码示例
一个完整的 JSF 2 示例,通过 < h:inputSecret / > 标签呈现密码输入字段。
1.受管 Bean
一个简单的托管 bean,具有“密码”属性。
package com.mkyong.form;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;
@ManagedBean
@SessionScoped
public class UserBean implements Serializable {
private String password;
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
2.查看页面
演示用了两页。
demo . XHTML——通过“h:inputSecret”呈现一个密码字段,通过“h:commandButton”呈现按钮,如果点击按钮,密码值将通过 setPassword()方法提交给“userBean.password”属性,并转发给“user.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:h="http://java.sun.com/jsf/html">
<h:body>
<h1>JSF 2 password example</h1>
<h:form>
Password : <h:inputSecret value="#{userBean.password}" />
<h:commandButton value="Submit" action="user" />
</h:form>
</h:body>
</html>
user . XHTML–通过“h:outputText”显示提交的密码值
<?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:h="http://java.sun.com/jsf/html">
<h:body>
<h1>JSF 2 password example</h1>
Password : <h:outputText value="#{userBean.password}" />
</h:body>
</html>
3.演示
URL:http://localhost:8080/Java server faces/
显示“demo.xhtml”页面
如果单击该按钮,将显示“user.xhtml”页面,以及提交的密码值。
下载源代码
Download It – JSF-2-Password-Example.zip (9KB)
参考
相关文章
- Top 5 passwords
- Wicket password field example
- Java regex verification password example
- JSF 2 2。0 教程 JSF 2 预渲染事件示例
- [ JSF multi-component verifier 2.0
- JSF2 multiple-choice listbox example
- JSF 2 链接、commandLink 和输出链接示例
JSF 2 post constructapplicationevent 和 PreDestroyApplicationEvent 示例
从 JSF 2.0 开始,你可以注册javax.faces.event.PostConstructApplicationEvent
和javax.faces.event.PreDestroyApplicationEvent
系统事件来操纵 JSF 应用的生命周期。
1.post constructapplicationevent–在应用程序启动后执行自定义后配置。
2。predestroyaplicationevent–在应用程序即将关闭之前执行自定义清理任务。
Note
In JSF, you can’t depends on the standard ServletContextListeners
to perform above task, because the ServletContextListeners
may be run before JSF application is started.
以下示例向您展示了如何在 JSF 2.0 中创建一个PostConstructApplicationEvent
和PreDestroyApplicationEvent
系统事件。
1.实现 SystemEventListener
创建一个实现javax.faces.event.SystemEventListener
的类,并为您的定制后配置和清理任务覆盖processEvent()
和isListenerForSource()
方法。
package com.mkyong;
import javax.faces.application.Application;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.PostConstructApplicationEvent;
import javax.faces.event.PreDestroyApplicationEvent;
import javax.faces.event.SystemEvent;
import javax.faces.event.SystemEventListener;
public class FacesAppListener implements SystemEventListener{
@Override
public void processEvent(SystemEvent event) throws AbortProcessingException {
if(event instanceof PostConstructApplicationEvent){
System.out.println("PostConstructApplicationEvent is Called");
}
if(event instanceof PreDestroyApplicationEvent){
System.out.println("PreDestroyApplicationEvent is Called");
}
}
@Override
public boolean isListenerForSource(Object source) {
//only for Application
return (source instanceof Application);
}
}
freestar.config.enabled_slots.push({ placementName: “mkyong_incontent_1”, slotId: “mkyong_incontent_1” });
2.注册系统事件
在 faces-config.xml 文件中注册PostConstructApplicationEvent
和PreDestroyApplicationEvent
系统事件,如下所示:
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
<application>
<!-- Application is started -->
<system-event-listener>
<system-event-listener-class>
com.mkyong.FacesAppListener
</system-event-listener-class>
<system-event-class>
javax.faces.event.PostConstructApplicationEvent
</system-event-class>
</system-event-listener>
<!-- Before Application is shut down -->
<system-event-listener>
<system-event-listener-class>
com.mkyong.FacesAppListener
</system-event-listener-class>
<system-event-class>
javax.faces.event.PreDestroyApplicationEvent
</system-event-class>
</system-event-listener>
</application>
</faces-config>
3.演示
运行您的 JSF 应用程序。processEvent()
方法在您的 JSF 应用程序启动后执行,见下图:
Note
However, the PreDestroyApplicationEvent
is not really reliable, because JSF will not run it if it’s shut down abnormally. For example, Java process killed by system administrator, it’s always happened 😃. So, please use this system event wisely.
下载源代码
Download It – JSF-2-PostConstructApplicationEvent-Example.zip (9KB)
参考
Tags : jsf2freestar.config.enabled_slots.push({ placementName: “mkyong_leaderboard_btf”, slotId: “mkyong_leaderboard_btf” });
JSF 2 预渲染事件示例
在 JSF 2.0 中,您可以在显示视图根(JSF 页面)之前附加一个javax.faces.event.PreRenderViewEvent
系统事件来执行定制任务。
让我们看下面一个完整的PreRenderViewEvent
例子:
1.受管 Bean
创建一个普通 bean,包含一个方法签名"public void method-name(ComponentSystemEvent event)",稍后你会要求监听器调用这个方法。
在此方法中,它验证当前会话中的“角色,如果角色不等于“管理员,则导航到结果“拒绝访问”。
package com.mkyong;
import javax.faces.application.ConfigurableNavigationHandler;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ComponentSystemEvent;
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public void isAdmin(ComponentSystemEvent event){
FacesContext fc = FacesContext.getCurrentInstance();
if (!"admin".equals(fc.getExternalContext().getSessionMap().get("role"))){
ConfigurableNavigationHandler nav
= (ConfigurableNavigationHandler)
fc.getApplication().getNavigationHandler();
nav.performNavigation("access-denied");
}
}
}
2.JSF·佩奇
现在,您使用f:event
标记将“preRenderView
”系统事件附加到“default.xhtml”页面。
default.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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
<f:event listener="#{user.isAdmin}" type="preRenderView" />
<h:body>
<h1>JSF 2 protected page example</h1>
</h:body>
</html>
拒绝访问. 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:h="http://java.sun.com/jsf/html"
>
<h:body>
<h1>Access Denied!</h1>
</h:body>
</html>
3.演示
访问这个页面“ default.xhtml ”,由于 session 对象中没有“角色”值,所以 JSF 会导航到另一个页面“ access-denied.xhtml ”。
下载源代码
Download It – JSF-2-PreRenderViewEvent-Example.zip (10KB)
参考
Tags : jsf2
JSF 2 +石英 2 示例
原文:http://web.archive.org/web/20230101150211/https://mkyong.com/jsf2/jsf-2-quartz-2-example/
在本教程中,我们将向您展示如何通过 Quartz 库中的QuartzInitializerListener
监听器类在 JSF web 应用程序中运行 Quartz 作业。这个解决方案不仅适用于 JSF 2,这个概念也适用于几乎所有的标准 Java web 应用程序。
使用的工具:
- JSF 2.1.11
- 石英
- maven3
- Eclipse 4.2
- Tomcat 7
之前的 JSF 2.0 hello world 示例被重用,我们将通过QuartzInitializerListener
监听器类增强它以支持 Quartz 作业。
本教程仅关注石英集成,对于 JSF,请阅读以上 JSF hello world 示例。
1.项目文件夹
检查最终的项目目录结构。
## 2.属国
要在 Tomcat 上部署,您需要许多 JSF 依赖项。有关详细信息,请阅读 XML 注释。
文件:pom.xml
<dependencies>
...
<!-- JSF 2 libraries -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.1.11</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.1.11</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
</dependency>
<!-- Tomcat 6 need this -->
<dependency>
<groupId>com.sun.el</groupId>
<artifactId>el-ri</artifactId>
<version>1.0</version>
</dependency>
<!-- Quartz scheduler framework -->
<dependency>
<groupId>org.quartz-scheduler</groupId>
<artifactId>quartz</artifactId>
<version>2.1.5</version>
</dependency>
<!-- Quartz need transaction -->
<dependency>
<groupId>javax.transaction</groupId>
<artifactId>jta</artifactId>
<version>1.1</version>
</dependency>
...
3.石英工作
创建一个 Quartz 作业类。该课程将在以后安排和运行。
文件:SchedulerJob.java
package com.mkyong.scheduler;
import org.quartz.Job;
import org.quartz.JobExecutionContext;
import org.quartz.JobExecutionException;
public class SchedulerJob implements Job {
@Override
public void execute(JobExecutionContext context)
throws JobExecutionException {
System.out.println("JSF 2 + Quartz 2 example");
}
}
4.石英结构
创建quartz.properties
和quartz-config.xml
,将其放在 resources“文件夹”(Maven 结构)中,对于非 Maven 项目,确保它可以位于项目类路径中。
文件:quartz . properties–配置 Quartz 实例并从quartz-config.xml
读取设置
org.quartz.scheduler.instanceName = MyScheduler
org.quartz.threadPool.threadCount = 3
org.quartz.jobStore.class = org.quartz.simpl.RAMJobStore
org.quartz.plugin.jobInitializer.class =org.quartz.plugins.xml.XMLSchedulingDataProcessorPlugin
org.quartz.plugin.jobInitializer.fileNames = quartz-config.xml
org.quartz.plugin.jobInitializer.failOnFileNotFound = true
文件:quartz-config . XML–配置触发器运行com.mkyong.scheduler.SchedulerJob
<?xml version="1.0" encoding="UTF-8"?>
<job-scheduling-data
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.quartz-scheduler.org/xml/JobSchedulingData
http://www.quartz-scheduler.org/xml/job_scheduling_data_1_8.xsd"
version="1.8">
<schedule>
<job>
<name>AJob</name>
<group>AGroup</group>
<description>Print a welcome message</description>
<job-class>com.mkyong.scheduler.SchedulerJob</job-class>
</job>
<trigger>
<cron>
<name>dummyTriggerName</name>
<job-name>AJob</job-name>
<job-group>AGroup</job-group>
<!-- It will run every 5 seconds -->
<cron-expression>0/5 * * * * ?</cron-expression>
</cron>
</trigger>
</schedule>
</job-scheduling-data>
Note
For detail explanation, please read this Quartz configuration reference article.
5.集成石英
这是整合发生的地方。在web.xml
文件中将org.quartz.ee.servlet.QuartzInitializerListener
声明为监听器类。
文件:web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
<listener>
<listener-class>
org.quartz.ee.servlet.QuartzInitializerListener
</listener-class>
</listener>
</web-app>
6.演示
在项目启动期间,Quartz 启动并每隔 5 秒运行一次计划的作业。
Jul 26, 2012 3:32:18 PM org.apache.coyote.AbstractProtocol start
INFO: Starting ProtocolHandler ["http-bio-8080"]
Jul 26, 2012 3:32:18 PM org.apache.coyote.AbstractProtocol start
INFO: Starting ProtocolHandler ["ajp-bio-8009"]
Jul 26, 2012 3:32:18 PM org.apache.catalina.startup.Catalina start
INFO: Server startup in 3591 ms
JSF 2 + Quartz 2 example
JSF 2 + Quartz 2 example
JSF 2 + Quartz 2 example
下载源代码
Download it – JSF-Quartz-Example.zip (25 kb)
参考
JSF 2 单选按钮示例
原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-radio-buttons-example/
在 JSF 中,“ h:selectOneRadio 标签用于呈现一组“ radio 类型的 HTML 输入元素,并使用 HTML table 和 label 标签对其进行格式化。
//JSF...
<h:selectOneRadio value="#{user.favColor1}">
<f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
<f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
<f:selectItem itemValue="Blue" itemLabel="Color1 - Blue" />
</h:selectOneRadio>
//HTML output...
<table>
<tr>
<td>
<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:0" value="Red" />
<label for="j_idt6:j_idt8:0"> Color1 - Red</label></td>
<td>
<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:1" value="Green" />
<label for="j_idt6:j_idt8:1"> Color1 - Green</label></td>
<td>
<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:2" value="Blue" />
<label for="j_idt6:j_idt8:2"> Color1 - Blue</label>
</td>
</tr>
</table>
JSF 2.0“h:selectone radio”示例
一个 JSF 2.0 示例,展示了如何使用" h:selectOneRadio "标记来呈现单选按钮,并以 3 种不同的方式填充数据:
- “f:selecti item标签中的硬核值。
- 用 Map 生成值,并将其放入“f:selecti items标签中。
- 用一个对象数组生成值,放入“ f:selectItems ”标签,然后用一个“ var 属性表示该值。
1.支撑豆
用于保存提交数据的后备 bean。
package com.mkyong;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String favColor1;
public String favColor2;
public String favColor3;
//getter and setter methods
//Generated by Map
private static Map<String,Object> color2Value;
static{
color2Value = new LinkedHashMap<String,Object>();
color2Value.put("Color2 - Red", "Red"); //label, value
color2Value.put("Color2 - Green", "Green");
color2Value.put("Color3 - Blue", "Blue");
}
public Map<String,Object> getFavColor2Value() {
return color2Value;
}
//Generated by Object array
public static class Color{
public String colorLabel;
public String colorValue;
public Color(String colorLabel, String colorValue){
this.colorLabel = colorLabel;
this.colorValue = colorValue;
}
public String getColorLabel(){
return colorLabel;
}
public String getColorValue(){
return colorValue;
}
}
public Color[] color3List;
public Color[] getFavColor3Value() {
color3List = new Color[3];
color3List[0] = new Color("Color3 - Red", "Red");
color3List[1] = new Color("Color3 - Green", "Green");
color3List[2] = new Color("Color3 - Blue", "Blue");
return color3List;
}
}
2.JSF·佩奇
演示“ h:selectOneRadio ”标签使用的 JSF 页面。
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:body>
<h1>JSF 2 radio button example</h1>
<h:form>
1\. Hard-coded with "f:selectItem" :
<h:selectOneRadio value="#{user.favColor1}">
<f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
<f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
<f:selectItem itemValue="Blue" itemLabel="Color1 - Blue" />
</h:selectOneRadio>
<br />
2\. Generated by Map :
<h:selectOneRadio value="#{user.favColor2}">
<f:selectItems value="#{user.favColor2Value}" />
</h:selectOneRadio>
<br />
3\. Generated by Object array and iterate with var :
<h:selectOneRadio value="#{user.favColor3}">
<f:selectItems value="#{user.favColor3Value}" var="c"
itemLabel="#{c.colorLabel}" itemValue="#{c.colorValue}" />
</h:selectOneRadio>
<br />
<h:commandButton value="Submit" action="result" />
<h:commandButton value="Reset" type="reset" />
</h:form>
</h:body>
</html>
result.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:h="http://java.sun.com/jsf/html"
>
<h:body>
<h1>JSF 2 radio button example</h1>
<h2>result.xhtml</h2>
<ol>
<li>user.favColor1 : #{user.favColor1}</li>
<li>user.favColor2 : #{user.favColor2}</li>
<li>user.favColor3 : #{user.favColor3}</li>
</ol>
</h:body>
</html>
3.演示
单击“提交”按钮时,链接到“result.xhtml”并显示提交的单选按钮值。
如何默认选择单选按钮值?
在 JSF 中,如果与“ h:selectOneRadio ”标签的“值”匹配,则选择“ f:selectItems ”标签的单选按钮值。在上面的例子中,如果你设置 favColor2 为“红色”:
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String[] favColor = "Red";
//...
“favColor2”单选按钮,“红色”选项默认选中。
下载源代码
Download It – JSF-2-RadioButtons-Example.zip (10KB)
参考
JSF 2 重复标签示例
原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-repeat-tag-example/
ui:repeat
总是作为h:dataTable
的替代,循环数组或列表,以 HTML 表格格式显示数据。请参见以下示例:
1.h:数据表
在数据表中,JSF 帮助你生成所有的 HTML 表格标签。
<h:dataTable value="#{order.orderList}" var="o">
<h:column>
#{o.orderNo}
</h:column>
<h:column>
#{o.productName}
</h:column>
<h:column>
#{o.price}
</h:column>
<h:column>
#{o.qty}
</h:column>
</h:dataTable>
freestar.config.enabled_slots.push({ placementName: “mkyong_incontent_1”, slotId: “mkyong_incontent_1” });
2.ui:重复
在重复标签中,你必须手工放置所有的 HTML 表格标签。
<table>
<ui:repeat var="o" value="#{order.orderList}" varStatus="status">
<tr>
<td>#{o.orderNo}</td>
<td>#{o.productName}</td>
<td>#{o.price}</td>
<td>#{o.qty}</td>
</tr>
</ui:repeat>
</table>
ui:重复示例
这里有一个 JSF 2.0 ui:重复示例来渲染完全相同的 HTML 输出,就像这样 h:dataTable 示例。比较两者,找出不同之处。
JSF…
<?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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
>
<h:head>
<h:outputStylesheet library="css" name="table-style.css" />
</h:head>
<h:body>
<h1>JSF 2 ui:repeat tag example</h1>
<table class="order-table">
<tr>
<th class="order-table-header">Order No</th>
<th class="order-table-header">Product Name</th>
<th class="order-table-header">Price</th>
<th class="order-table-header">Quantity</th>
</tr>
<tbody>
<ui:repeat var="o" value="#{order.orderList}" varStatus="status">
<h:panelGroup rendered="#{status.even}">
<tr>
<td class="order-table-even-row">#{o.orderNo}</td>
<td class="order-table-even-row">#{o.productName}</td>
<td class="order-table-even-row">#{o.price}</td>
<td class="order-table-even-row">#{o.qty}</td>
</tr>
</h:panelGroup>
<h:panelGroup rendered="#{status.odd}">
<tr>
<td class="order-table-odd-row">#{o.orderNo}</td>
<td class="order-table-odd-row">#{o.productName}</td>
<td class="order-table-odd-row">#{o.price}</td>
<td class="order-table-odd-row">#{o.qty}</td>
</tr>
</h:panelGroup>
</ui:repeat>
</tbody>
</table>
</h:body>
</html>
Note
You can find the “order” managed bean source code in this h:dataTable example.
“ ui:repeat ”标签带有许多有用的属性,如偏移量、大小、状态等。确保您检查了这个 JSF 用户界面:重复 javadoc 。
输出
下载源代码
Download It – JSF-2-Repeat-Tag-Example.zip (10KB)
参考
- JSF ui:重复 JavaDoc
- JSF h:数据表 JavaDoc
- JSF h:panelGroup JavaDoc
Tags : jsf2freestar.config.enabled_slots.push({ placementName: “mkyong_leaderboard_btf”, slotId: “mkyong_leaderboard_btf” });
JSF 2 setPropertyActionListener 示例
在 JSF,“f:setPropertyActionListener”标签允许你直接设置一个值到你的后台 bean 的属性中。举个例子,
<h:commandButton action="#{user.outcome}" value="Submit">
<f:setPropertyActionListener target="#{user.username}" value="mkyong" />
</h:commandButton>
在上面的 JSF 代码片段中,如果单击按钮,它会通过 setUsername() 方法将“ mkyong ”值设置为“用户名”属性。
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String username;
public void setUsername(String username) {
this.username = username;
}
}
JSF f:setPropertyActionListener 示例
好了,让我们来看一个 JSF 2.0 的完整例子。
1.受管 Bean
一个名为“user”的超级简单的托管 bean。
package com.mkyong;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String username;
public String outcome(){
return "result";
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
}
2.JSF·佩奇
JSF 页面展示了如何使用"f:setPropertyActionListener"将一个值" mkyong “直接设置到您的后台 bean 的属性” username "中。
default.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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:body>
<h1>JSF 2 setPropertyActionListener example</h1>
<h:form id="form">
<h:commandButton action="#{user.outcome}" value="Click Me">
<f:setPropertyActionListener target="#{user.username}" value="mkyong" />
</h:commandButton>
</h:form>
</h:body>
</html>
result.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:h="http://java.sun.com/jsf/html"
>
<h:body>
<h1>JSF 2 setPropertyActionListener example</h1>
#{user.username}
</h:body>
</html>
3.演示
这是点击按钮后的结果。
下载源代码
Download It – JSF-2-setPropertyActionListener-Example.zip (9KB)
参考
使用 Facelets 的 JSF 2 模板示例
在 web 应用程序中,大多数页面都遵循相似 web 界面布局和样式,例如,相同的页眉和页脚。在 JSF 2.0 中,你可以很容易地使用 Facelets 标签来提供一个标准的 web 界面布局,事实上,它看起来与 Apache Tiles 框架很相似。
在本例中,它展示了使用 4 个 Facelets 标记从模板构建页面:
- ui:插入–用于模板文件,定义加载模板的文件将要替换的内容。内容可以替换为“ui:define”标签。
- ui:define–用匹配的“ui:insert”标签定义插入模板的内容。
- ui:include——类似于 JSP 的“jsp:include”,包含来自另一个 XHTML 页面的内容。
- ui:composition–如果与“template”属性一起使用,则加载指定的模板,该标签的子标签定义模板布局;否则,它就是一组元素,可以插入到某个地方。此外,JSF 删除了“ui:composition”标签之外的所有标签。
1.型板布置
在 JSF 2.0 中,模板文件只是一个普通的 XHTML 文件,很少有 JSF facelets 标签来定义模板布局。
文件:commonLayout.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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:head>
<h:outputStylesheet name="common-style.css" library="css" />
</h:head>
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/template/common/commonHeader.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content" >
<ui:include src="/template/common/commonContent.xhtml" />
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="/template/common/commonFooter.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>
在这个模板中,它定义了一个标准的 web 布局:
- 使用" h:outputStylesheet "标记在 head 中包含一个 CSS 文件,以设计整个页面布局的样式。
- 使用“ ui:insert 标签定义三个可替换的部分:页眉、内容和页脚。
- 使用模板时,如果没有指定替换,则使用“ ui:include 标签提供默认内容。
2.页眉、内容和页脚
三个默认页面内容。
文件:commonHeader.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:ui="http://java.sun.com/jsf/facelets"
>
<body>
<ui:composition>
<h1>This is default header</h1>
</ui:composition>
</body>
</html>
文件:commonContent.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:ui="http://java.sun.com/jsf/facelets"
>
<body>
<ui:composition>
<h1>This is default content</h1>
</ui:composition>
</body>
</html>
文件:commonFooter.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:ui="http://java.sun.com/jsf/facelets"
>
<body>
<ui:composition>
<h1>This is default footer</h1>
</ui:composition>
</body>
</html>
当这些页面被插入到模板文件中时,所有在“ui:composition
”之外的标签都将被删除。举个例子,
文件:commonHeader.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:ui="http://java.sun.com/jsf/facelets"
>
<body>
ALL TAGS ABOVE THIS LINE WILL BE REMOVED BY JSF
<ui:composition>
<h1>This is default header</h1>
</ui:composition>
ALL TAGS BELOW THIS LINE WILL BE REMOVED BY JSF
</body>
</html>
JSF 只取下列元素并插入到模板文件中
<ui:composition>
<h1>This is default header</h1>
</ui:composition>
当插入到“commonLayout”模板中时,它变成了…
文件:commonLayout.xhtml
...
<h:body>
<div id="page">
<div id="header">
<h1>This is default header</h1>
</div>
...
3.使用模板
要使用现有的模板,例如"commonLayout.xhtml
",您可以使用带有" template "属性的"ui:composition
"标记。参见以下两个例子:
文件:default.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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:body>
<ui:composition template="template/common/commonLayout.xhtml">
</ui:composition>
</h:body>
</html>
这个 JSF 页面加载“commonLayout.xhtml”模板并显示所有默认页面内容。
文件:page1.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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:body>
<ui:composition template="/template/common/commonLayout.xhtml">
<ui:define name="content">
<h2>This is page1 content</h2>
</ui:define>
<ui:define name="footer">
<h2>This is page1 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
这个 JSF 页面加载一个“commonLayout.xhtml”模板,并使用“ui:define”标记来覆盖模板文件中定义的“ui:insert”标记。
Note
As long as the name of the “ui:define” tag is matched to the name of the “ui:insert” tag, which defined in template, the “ui:insert” content is replaced.
下载源代码
Download It – JSF-2-Facelets-Template-Example.zip (12KB)
引用
JSF 2 文本区示例
原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-textarea-example/
在 JSF,你可以使用 < h:inputTextarea / > 标签来呈现一个 HTML 文本区域字段。举个例子,
JSF 标签…
<h:inputTextarea cols="30" rows="10" />
呈现此 HTML 代码…
<textarea name="random value" cols="30" rows="10"></textarea>
JSF 文本区示例
一个完整的 JSF 2 示例,通过 < h:inputTextarea / > 标签呈现一个 textarea 字段。
1.受管 Bean
一个被管理的 bean,被声明为名称“user”。
package com.mkyong.form;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable {
private String address;
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
2.查看页面
演示用了两页。
demo . XHTML–通过“h:inputTextarea”呈现一个 Textarea 字段,通过“h:commandButton”呈现按钮,如果点击按钮,textarea 值将通过 setAddress()方法提交给“userBean.address”属性,并转发给“user.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:h="http://java.sun.com/jsf/html">
<h:body>
<h1>JSF 2 textarea example</h1>
<h:form>
<table>
<tr>
<td valign="top">Address :</td>
<td><h:inputTextarea value="#{user.address}" cols="30" rows="10" /></td>
</tr>
</table>
<h:commandButton value="Submit" action="user" />
</h:form>
</h:body>
</html>
user . XHTML–通过“h:outputText”显示提交的 textarea 值
<?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:h="http://java.sun.com/jsf/html">
<h:body>
<h1>JSF 2 textarea example</h1>
Address : <h:outputText value="#{user.address}" />
</h:body>
</html>
3.演示
URL:http://localhost:8080/Java server faces/
显示“demo.xhtml”页面
如果单击该按钮,将显示“user.xhtml”页面,以及提交的 textarea 值。
下载源代码
Download It – JSF-2-TextArea-Example.zip (9KB)
参考
相关文章
- 在文本区域上添加 maxlength 使用 jQuery
- Wicket textArea 示例
- JSF 2.0 tutorial
- JSF 2 PreRenderViewEvent 示例
- JSF 多组件验证器 2.0
- JSF 2 多选列表框示例
- JSF 2 链接、commandLink 和输出链接示例
JSF 2 文本框示例
原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-textbox-example/
在 JSF,你可以使用 < h:inputText / > 标签来呈现一个 HTML 输入的 type=“text” ,文本框。举个例子,
JSF 标签…
<h:inputText />
呈现此 HTML 代码…
<input type="text" name="j_idt6:j_idt7" />
P.S 名称属性值由 JSF 随机生成。
JSF 文本框示例
一个完整的 JSF 2 示例,通过 < h:inputText / > 标签呈现一个文本框输入字段。
1.受管 Bean
一个简单的托管 bean,具有“用户名”属性。
package com.mkyong.form;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;
@ManagedBean
@SessionScoped
public class UserBean implements Serializable {
private String userName;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
}
2.查看页面
演示用了两页。
demo . XHTML–通过“h:inputText”呈现 textbox,通过“h:commandButton”呈现 button,如果点击按钮,textbox 的值将通过 setUserName()方法提交给“userBean.userName”属性,并转发给“user.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:h="http://java.sun.com/jsf/html">
<h:body>
<h1>JSF 2 textbox example</h1>
<h:form>
<h:inputText value="#{userBean.userName}" />
<h:commandButton value="Submit" action="user" />
</h:form>
</h:body>
</html>
user . XHTML–通过“h:outputText”显示提交的文本框值
<?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:h="http://java.sun.com/jsf/html">
<h:body>
<h1>JSF 2 textbox example</h1>
Submitted value : <h:outputText value="#{userBean.userName}" />
</h:body>
</html>
3.演示
URL:http://localhost:8080/Java server faces/
显示“demo.xhtml”页面
如果单击按钮,显示“user.xhtml”页面和提交的文本框值
下载源代码
Download It – JSF-2-TextBox-Example.zip (9KB)
参考
相关文章
-
How to get textbox value with jQuery
-
[How to add/remove textbox 【T1] dynamically with jQuer](/web/20201212022629/https://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/)