JSF2.2 最佳新特性:页面使用html代码替代JSF组件代码.

最新推荐文章于 2022-01-21 10:14:10 发布

weixin_33860528

最新推荐文章于 2022-01-21 10:14:10 发布

阅读量332

点赞数

文章标签： java xhtml ui

原文链接：https://my.oschina.net/zhaoqian/blog/376635

版权

2019独角兽企业重金招聘Python工程师标准>>>

环境: windfly8.2+jdk1.7

1.项目各种xml配置:

POM配置说明:一个jboss的jar包,两个maven插件:

<dependencies>
    <!-- <dependency>
      <groupId>javax</groupId>
      <artifactId>javaee-web-api</artifactId>
      <version>7.0</version>
      <scope>provided</scope>
    </dependency> -->
    <dependency>
    <groupId>org.jboss.spec</groupId>
    <artifactId>jboss-javaee-all-7.0</artifactId>
    <version>1.0.0.Beta2</version>
    </dependency>
  </dependencies>
    
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>2.3.2</version>
        <configuration>
          <source>1.7</source>
          <target>1.7</target>
        </configuration>
      </plugin>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.1.1</version>
        <configuration>
          <failOnMissingWebXml>false</failOnMissingWebXml>
        </configuration>
      </plugin>
    </plugins>
  </build>

web.xml配置:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" 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-app_3_0.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>

beans.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://xmlns.jcp.org/xml/ns/javaee"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/beans_1_1.xsd"
       version="1.1" bean-discovery-mode="annotated">
       
</beans>

faces-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
        http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
    version="2.2">

</faces-config>

2.后台cdi bean:

package org.sticker.websocket.testjsf;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

@Named
@SessionScoped
public class FirstBean implements Serializable{

	private static final long serialVersionUID = 7103386600125905827L;
	
	private List<String> stuList;
	
	private String pageDesc;
	
	private String pageSubmitStr;
	
	@PostConstruct
	private void getAllStudent() {
		System.out.println("FirstBean");
		List<String> list = new ArrayList<String>();
		list.add("LiLei");
		list.add("ZhaoQian");
		list.add("LinYong");
		list.add("ShiTou");
		list.add("SiYao");
		setStuList(list);
		
		pageDesc="this is jsf2.2 test.";
	}
	
	public void receive(String testStr) {
		//this.pageSubmitStr=testStr;
		System.out.println("pageSubmitStr:"+pageSubmitStr);
	}

	public List<String> getStuList() {
		return stuList;
	}

	public void setStuList(List<String> stuList) {
		this.stuList = stuList;
	}

	public String getPageDesc() {
		return pageDesc;
	}

	public void setPageDesc(String pageDesc) {
		this.pageDesc = pageDesc;
	}

	public String getPageSubmitStr() {
		return pageSubmitStr;
	}

	public void setPageSubmitStr(String pageSubmitStr) {
		this.pageSubmitStr = pageSubmitStr;
	}
}

3.前台页面代码[JSF组件代码]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://java.sun.com/jsf/passthrough">

<f:view contentType="text/html">
	<ui:insert name="metadata" />
	<h:head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<title>TEST</title>
	</h:head>

	<h:body>
	   <h:inputText value="#{firstBean.pageDesc}" p:placeholder="Enter text"/>
	   <br/>
		<h:dataTable var="st" value="#{firstBean.stuList}">
			<h:column>
				<h:outputLabel value="#{st}" />
			</h:column>
		</h:dataTable>

	</h:body>
</f:view>
</html>

4.前台页面代码[纯html5 代码]

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<head jsf:id="head">
<title>Sticker Story</title>
<script jsf:target="body" jsf:name="story-page.js" />
<link jsf:name="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table, th, td {
	border: 1px solid blue;
}
</style>
</head>
<body jsf:id="body">
	<div align="center">
		<form jsf:id="form">
			<br /><br /><br />
			<input jsf:value="#{firstBean.pageSubmitStr}" type="*" /> <br /><br /><br /> <label jsf:value="#{firstBean.pageDesc}" /> <br /><br /><br />
			<table>
				<tr>
					<th>姓名</th>
				</tr>
				<ui:repeat var="stu" value="${firstBean.stuList}">
					<tr>
						<td><label jsf:value="#{stu}" /></td>
					</tr>
				</ui:repeat>
			</table><br /><br />
			<a jsf:actionListener="#{firstBean.receive('submitString')}">submit</a>
		</form><br /><br /><br />
		<br /> form外: <label jsf:value="#{firstBean.pageSubmitStr}" />
	</div>
</body>
</html>

5.测试图例[测试html5代码页面]

提交前页面,提交后页面

6.总结,说明

JSF2.2 我认为最好的特性就是能直接使用html代码.JSF2.2之前的版本,由于JSF组件的限制,无法很灵活的去修改页面.在JSF2.2中,我们可以看情况来混用JSF组件和HTML5代码,这样使得开发更有效率.

官方也列出了html代码所对应的java组件.如下

localName	selector attribute	target tag
a	jsf:action	h:commandLink
a	jsf:actionListener	h:commandLink
a	jsf:value	h:outputLink
a	jsf:outcome	h:link
body		h:body
button		h:commandButton
button	jsf:outcome	h:button
form		h:form
head		h:head
img		h:graphicImage
input	type="button"	h:commandButton
input	type="checkbox"	h:selectBooleanCheckbox
input	type="color"	h:inputText
input	type="date"
input	type="datetime"
input	type="datetime-local"
input	type="email"
input	type="month"
input	type="number"
input	type="range"
input	type="search"
input	type="time"
input	type="url"
input	type="week"
input	type="file"	h:inputFile
input	type="hidden"	h:inputHidden
input	type="password"	h:inputSecret
input	type="reset"	h:commandButton
input	type="submit"	h:commandButton
input	type="*"	h:inputText
label		h:outputLabel
link		h:outputStylesheet
script		h:outputScript
select	multiple="*"	h:selectManyListbox
select		h:selectOneListbox
textarea		h:inputTextArea

JSF2.2 参考的官方说明:

http://docs.oracle.com/javaee/7/api/javax/faces/view/facelets/TagDecorator.html

其他参考:

<head>	<h:head>
<script jsf:name="xxx.js">	<outputScript name="xxx.jsf"/>
<style jsf:name="xxxx.css">	<outputStylesheet name="xxxx.css" />
<div id="divId">	<h:panelGroup layout="block" id="divId">