Mkyong 中文博客翻译(三十九)

原文:Mkyong

协议:CC BY-NC-SA 4.0

JSF 2 多选下拉框示例

原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-multiple-select-dropdown-box-example/

在 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 ”标签是一个很好的选择。

参考
  1. JSF < h:选择菜单/ > JavaDoc
  2. JSF 2h:选定的列表框 103

标签:drop downJSF 2

相关文章

JSF 2 多重选择列表框示例

原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-multiple-select-listbox-example/

在 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 种不同的方式填充数据:

  1. f:selecti item标签中的硬核值。
  2. 用 Map 生成值,并将其放入“f:selecti items标签中。
  3. 用一个对象数组生成值,放入“ 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)

参考
  1. JSF < h:selectmany listbox/ > JavaDoc
  2. http://www.w3schools.com/tags/att_select_multiple.asp

标签:JSF 2listbox

相关文章

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 
  1. {0}匹配到
  2. {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)

参考
  1. JSF < h:输出格式/ > JavaDoc

JSF 2

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>&lt;input type='text' size='20' /&gt;</li> 

	   <li><input type='text' size='20' /></li> 
	</ol>
   </body> 
</html> 
  1. 对于 JSF 2.0 中的案例 1 和案例 2
    ,你其实并不需要使用“h:outputText”标签,因为你可以用直接的值表达式“#{user.text}”来实现同样的事情。

  2. 对于案例 3
    如果存在“styleClass”、“style”、“dir”或“lang”属性中的任何一个,则呈现文本并用“ span 元素将其换行。

  3. 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,

    1. 转换为>

    2. &转换为&

    默认情况下,“转义属性设置为 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)

参考
  1. JSF < h:输出文本/ > JavaDoc

标签:JSF 2

相关文章

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)

参考

  1. JSF 2 panelGrid JavaDoc

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)

参考

  1. JSF f:帕拉姆贾瓦德克

jsf2

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)

参考
  1. JSF < h:输入秘密/ > JavaDoc

标签: jsf2 密码

相关文章

JSF 2 post constructapplicationevent 和 PreDestroyApplicationEvent 示例

原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-postconstructapplicationevent-and-predestroyapplicationevent-example/

从 JSF 2.0 开始,你可以注册javax.faces.event.PostConstructApplicationEventjavax.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 中创建一个PostConstructApplicationEventPreDestroyApplicationEvent系统事件。

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 文件中注册PostConstructApplicationEventPreDestroyApplicationEvent系统事件,如下所示:

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)

参考

  1. JSF 2 号后期构造应用事件 JavaDoc
  2. JSF 2 predestroyaplicationevent JavaDoc

Tags : jsf2freestar.config.enabled_slots.push({ placementName: “mkyong_leaderboard_btf”, slotId: “mkyong_leaderboard_btf” });

JSF 2 预渲染事件示例

原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-prerenderviewevent-example/

在 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)

参考

  1. JSF 2 预渲染事件 JavaDoc

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 应用程序。

使用的工具:

  1. JSF 2.1.11
  2. 石英
  3. maven3
  4. Eclipse 4.2
  5. 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.propertiesquartz-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)

参考

  1. 石英 2 调度器教程
  2. 石英配置参考
  3. JSF 2.0 hello world 示例
  4. XML scheduling data processor plugin JavaDoc
  5. 好石英调度器工作示例

jsf2 quartz scheduler

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 种不同的方式填充数据:

  1. f:selecti item标签中的硬核值。
  2. 用 Map 生成值,并将其放入“f:selecti items标签中。
  3. 用一个对象数组生成值,放入“ 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)

参考
  1. JSF<h:selectone radio/>JavaDoc

JSF 2单选按钮

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)

参考

  1. JSF ui:重复 JavaDoc
  2. JSF h:数据表 JavaDoc
  3. JSF h:panelGroup JavaDoc

Tags : jsf2freestar.config.enabled_slots.push({ placementName: “mkyong_leaderboard_btf”, slotId: “mkyong_leaderboard_btf” });

JSF 2 setPropertyActionListener 示例

原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-setpropertyactionlistener-example/

在 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)

参考

  1. JSF 2 setPropertyActionListener JavaDoc

jsf2

使用 Facelets 的 JSF 2 模板示例

原文:http://web.archive.org/web/20230101150211/http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/

在 web 应用程序中,大多数页面都遵循相似 web 界面布局和样式,例如,相同的页眉和页脚。在 JSF 2.0 中,你可以很容易地使用 Facelets 标签来提供一个标准的 web 界面布局,事实上,它看起来与 Apache Tiles 框架很相似。

在本例中,它展示了使用 4 个 Facelets 标记从模板构建页面:

  1. ui:插入–用于模板文件,定义加载模板的文件将要替换的内容。内容可以替换为“ui:define”标签。
  2. ui:define–用匹配的“ui:insert”标签定义插入模板的内容。
  3. ui:include——类似于 JSP 的“jsp:include”,包含来自另一个 XHTML 页面的内容。
  4. 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 布局:

  1. 使用" h:outputStylesheet "标记在 head 中包含一个 CSS 文件,以设计整个页面布局的样式。
  2. 使用“ ui:insert 标签定义三个可替换的部分:页眉、内容和页脚。
  3. 使用模板时,如果没有指定替换,则使用“ 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)

引用
  1. 阿帕奇瓷砖框架
  2. 【JSF】ui:包含“JavaDoc
  3. JSF“ui:插入“JavaDoc
  4. JSF“ui:定义“JavaDoc
  5. JSF“ui:composition”JavaDoc

标签: jsf2 模板

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)

参考
  1. JSF<h:input textarea/>JavaDoc

标签:JSF 2textarea

相关文章

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)

参考
  1. JSF < h:输入文本/ > JavaDoc

标签:JSF 2textbox

相关文章

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值