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

梦里梦外; 2022-05-29 12:50 262阅读 0赞

不同于上一篇，这一篇主要是对JSF的实际操作，这里选用的IDE工具还是MyEclipse。

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

# 1.前言 #

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

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

<table> 
 <thead> 
  <tr> 
   <th>开发前的准备</th> 
   <th align="center">作用</th> 
   <th>版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>NetBeans</td> 
   <td align="center">开发IDE</td> 
   <td>8.2</td> 
  </tr> 
  <tr> 
   <td>JDK</td> 
   <td align="center"></td> 
   <td>JavaEE7</td> 
  </tr> 
  <tr> 
   <td>GlassFish</td> 
   <td align="center">服务器</td> 
   <td>5.0</td> 
  </tr> 
  <tr> 
   <td>primefaces</td> 
   <td align="center">前端UI</td> 
   <td>6.0</td> 
  </tr> 
  <tr> 
   <td>maven</td> 
   <td align="center"></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

前面要提的大概就这些，不一样可能会出现也不可用的现象，但是，影响应该不大

# 2.项目搭建 #

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

## 2.1.项目新建 ##

![这里写图片描述][70]

使用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配置 ##

新建完的框架图为：  
![这里写图片描述][70 1]

修改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的数据绑定极其强大。

![这里写图片描述][70 2]

主要要改的就是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>

运行一下  
![这里写图片描述][70 3]

正常跑起来了

可能会出现的问题我大概想了一下：

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>
                
                    <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(),在调用之前初始化

**效果图：**

![这里写图片描述][70 4]

# 5.总结 #

JSF在国内确实没有SpringMVC那么大火，但是，它比较简洁，使用熟练后完全可以应付一般的开发，省去了大量的UI设计，套用UI组件即可。

[70]: /images/20220529/1dc95e9256694ed4984eb03fbb6e27fd.png
[70 1]: /images/20220529/a65d3572d1da48399eafdec55ce53c86.png
[70 2]: /images/20220529/2d0e5f78947d414f8475a9b1ca52277f.png
[70 3]: /images/20220529/ab0208040b014a66a904a14b89ce07f2.png
[70 4]: /images/20220529/c8c9012b59a046f784e35fc45a40d8ed.png