不同于上一篇,这一篇主要是对JSF的实际操作,这里选用的IDE工具还是MyEclipse。
这一篇从头到尾实现一个JSF项目,持久层使用Hibernate,这个持久框架太久没用了,所以转载一篇复习一下。
准备做一个JSF的快速开发平台,因为接触到JSF后才明白JSF的一些优点,事件驱动以及丰富的UI框架可以让我们的开发如虎添翼。
但是,国内很难找到很好的JSF的资源,而一次更新迭代后能用的就越发少了,所以,准备自己写一个项目深入的研究一下,希望有所帮助。
开发前的准备 | 作用 | 版本 |
---|---|---|
NetBeans | 开发IDE | 8.2 |
JDK | JavaEE7 | |
GlassFish | 服务器 | 5.0 |
primefaces | 前端UI | 6.0 |
maven |
前面要提的大概就这些,不一样可能会出现也不可用的现象,但是,影响应该不大
今天先简单的搭建一个JSF的项目出来,不涉及太多复杂的东西,这些以后再说
使用Maven作为项目管理,具体Maven的配置以及下载就不详细说了,这个网上有不少案例,可以自己看看,安装完后再NetBeans里面配置Maven即可。
另外,可能会出现下包缓慢的情况,在Maven中更改一下下载源即可。
<mirror>
<id>nexus-aliyunid>
<mirrorOf>*mirrorOf>
<name>Nexus aliyunname>
<url>http://maven.aliyun.com/nexus/content/groups/publicurl>
mirror>
<mirror>
<id>Centralid>
<url>http://repo1.maven.org/maven2url>
<mirrorOf>centralmirrorOf>
mirror>
修改pom.xml文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0modelVersion>
<groupId>com.mycompanygroupId>
<artifactId>JSFartifactId>
<version>1.0-SNAPSHOTversion>
<packaging>warpackaging>
<name>JSFname>
<properties>
<endorsed.dir>${project.build.directory}/endorsedendorsed.dir>
<project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
properties>
<dependencies>
<dependency>
<groupId>javaxgroupId>
<artifactId>javaee-web-apiartifactId>
<version>7.0version>
<scope>providedscope>
dependency>
<dependency>
<groupId>org.glassfishgroupId>
<artifactId>javax.facesartifactId>
<version>2.2.8version>
dependency>
<dependency>
<groupId>org.primefacesgroupId>
<artifactId>primefacesartifactId>
<version>6.0version>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-compiler-pluginartifactId>
<version>3.1version>
<configuration>
<source>1.8source>
<target>1.8target>
<compilerArguments>
<endorseddirs>${endorsed.dir}endorseddirs>
compilerArguments>
configuration>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-war-pluginartifactId>
<version>2.3version>
<configuration>
<failOnMissingWebXml>falsefailOnMissingWebXml>
configuration>
plugin>
plugins>
build>
<description>这是一个主要基于JSF的快速开发平台。description>
project>
主要加了
//glassfish
<groupId>org.glassfishgroupId>
<artifactId>javax.facesartifactId>
<version>2.2.8version>
//primefaces
<groupId>org.primefacesgroupId>
<artifactId>primefacesartifactId>
<version>6.0version>
整个JSF的框架基本上这两个就够了
更新完成后,我们为其添加包,大概格式和spring这类的差不多,只不过可以省去Controller,JSF的数据绑定极其强大。
主要要改的就是web和源包
后面就是代码了,主要就是一个index
注意,JSF框架的页面文件是XHTML格式!!
当然也可以使用JSP,但是。。。很容易出莫名其妙的问题
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
f:facet>
<title>testtesttesttitle>
h:head>
<h:body>
<h2>JSF测试h2>
<p:separator />
<br/>
<h:form id="fm" >
<p:panelGrid columns="2" layout="grid" >
<h:panelGroup layout="block" style="">
<p:button value="按钮">p:button>
h:panelGroup>
p:panelGrid>
h:form>
h:body>
html>
正常跑起来了
可能会出现的问题我大概想了一下:
1.tomcat可能会占用8080端口,GlassFish跑不起来,这个类似的都可以关闭占用的软件解决。
2.导包不全,标签无法使用
3.页面格式不是xhtml
大概就这些了。。
时间有限,就写一个前后端交互的案例吧。
之前说了,JSF是通过数据绑定的方式交互的。
//前台代码:
<h:form id="fm" >
<p:panelGrid columns="2" layout="grid" >
<h:panelGroup layout="block" style="">
<p:button value="按钮">p:button>
h:panelGroup>
p:panelGrid>
<p:layout>
<p:outputLabel value="#{user.name}">p:outputLabel>
p:layout>
h:form>
看上述代码的关键点
1.这类似于EL表达式。将p:outputLabel 与User类的name属性相绑定了
2.能够交互的条件是:User类中有set,get方法
3.user对应类User,无需特别配置,将类名首字母小写即可
4.#{}是调用格式,以后还会大量用到它
下面是后台代码
import javax.annotation.PostConstruct;
import javax.inject.Named;
//=================关键1===============
@Named
public class User {
private String name;
//=================关键2===============
@PostConstruct
public void init() {
System.out.println("User.init()");
setName("我是naem");
}
/**
* @return the name
*/
public String getName() {
return name;
}
/**
* @param name the name to set
*/
public void setName(String name) {
this.name = name;
}
}
关键点1:
使用JSF托管包,需要标注@Name(老版本使用@ManagedBean)
关键点2:
@PostConstruct表示类初始化的时候加载,这个初始化时外面有入口对其调用的时候,例如之前#{user.name}等同于调用了setName(),在调用之前初始化
效果图:
JSF在国内确实没有SpringMVC那么大火,但是,它比较简洁,使用熟练后完全可以应付一般的开发,省去了大量的UI设计,套用UI组件即可。