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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zzg19950824/article/details/79676572

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

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

1.前言

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

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

开发前的准备 作用 版本
NetBeans 开发IDE 8.2
JDK JavaEE7
GlassFish 服务器 5.0
primefaces 前端UI 6.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组件即可。

猜你喜欢

转载自blog.csdn.net/zzg19950824/article/details/79676572
jsf