您的位置：首页 > Web前端 > JavaScript

JSF------基础使用篇－－－－－框架搭建

2018-03-30 21:59 127 查看
不同于上一篇，这一篇主要是对JSF的实际操作，这里选用的IDE工具还是MyEclipse。

这一篇从头到尾实现一个JSF项目，持久层使用Hibernate，这个持久框架太久没用了，所以转载一篇复习一下。

1.前言

准备做一个JSF的快速开发平台，因为接触到JSF后才明白JSF的一些优点，事件驱动以及丰富的UI框架可以让我们的开发如虎添翼。

但是，国内很难找到很好的JSF的资源，而一次更新迭代后能用的就越发少了，所以，准备自己写一个项目深入的研究一下，希望有所帮助。

开发前的准备作用版本
NetBeans开发IDE8.2
JDKJavaEE7
GlassFish服务器5.0
primefaces前端UI6.0
maven
前面要提的大概就这些，不一样可能会出现也不可用的现象，但是，影响应该不大

2.项目搭建

今天先简单的搭建一个JSF的项目出来，不涉及太多复杂的东西，这些以后再说

2.1.项目新建



使用Maven作为项目管理，具体Maven的配置以及下载就不详细说了，这个网上有不少案例，可以自己看看，安装完后再NetBeans里面配置Maven即可。

另外，可能会出现下包缓慢的情况，在Maven中更改一下下载源即可。

<mirror>
<id>nexus-aliyun</id>
<mirrorOf>*</mirrorOf>
<name>Nexus aliyun</name>
<url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>
<mirror>
<id>Central</id>
<url>http://repo1.maven.org/maven2</url>
<mirrorOf>central</mirrorOf>
</mirror>


2.2 　 Pom.xml配置

新建完的框架图为：



修改pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<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.0</modelVersion>

<groupId>com.mycompany</groupId>
<artifactId>JSF</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>

<name>JSF</name>

<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>

<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.glassfish</groupId>
<artifactId>javax.faces</artifactId>
<version>2.2.8</version>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>6.0</version>
</dependency>
</dependencies>

<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
</plugins>
</build>
<description>这是一个主要基于JSF的快速开发平台。</description>
</project>


主要加了

//glassfish
<groupId>org.glassfish</groupId>
<artifactId>javax.faces</artifactId>
<version>2.2.8</version>
//primefaces
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>6.0</version>


整个JSF的框架基本上这两个就够了

更新完成后，我们为其添加包，大概格式和spring这类的差不多，只不过可以省去Controller，JSF的数据绑定极其强大。



主要要改的就是web和源包

3.代码

　　后面就是代码了，主要就是一个index

注意，JSF框架的页面文件是XHTML格式！！

　　当然也可以使用JSP，但是。。。很容易出莫名其妙的问题

<!DOCTYPE html>
<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>testtesttest</title>
</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

大概就这些了。。

4.前后交互

　　时间有限，就写一个前后端交互的案例吧。

之前说了，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>
<!--1.这里是关键
//==============================-->
<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(),在调用之前初始化

效果图：



5.总结

　　JSF在国内确实没有SpringMVC那么大火，但是，它比较简洁，使用熟练后完全可以应付一般的开发，省去了大量的UI设计，套用UI组件即可。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航