JSF2+Primefaces简单应用系列（一）

准备： netbeans6.9.1，glassfish3.0（netbeans自带），primefaces2.2.1(http://www.primefaces.org/downloads.html)

 

我们也先从jsf2的hello world开始

1、  创建普通Web应用程序，如下图：

2、  加入JSF2的jar包（ glassfish服务器自带了 jsf2.0的jar包，不用单独添加了）

3、    建立HelloView类

 package  org.jineral.school.demo;

 import  javax.faces.bean.ManagedBean;
 import  javax.faces.bean.ViewScoped;

 /**
  *
  * @author jineral
  * @create date 2011-11-20
  */
 @ManagedBean (name =  "helloView" )
 @ViewScoped
 public   class  HelloView  implements  Serializable {

     private  String hello;

     public  HelloView() {
         hello="hello world!" ;
     }

     public  String getHello() {
         return  hello;
     }

     public   void  setHello(String hello) {
         this .hello = hello;
     }

 }

下面是配置web.xml 和制作 jsf的 hello页面
4、目录结构如下

5、建立JSF页面hello.xhtml，代码如下

 < html   xmlns = "http://www.w3.org/1999/xhtml"
       xmlns:h = "http://java.sun.com/jsf/html" >
     < h:head >
         < title > Facelet Title </ title >
     </ h:head >
     < h:body >
         < h:outputText   value = "#{helloView.hello}" />
     </ h:body >
 </ html >

6、 建立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 > webAppRootKey </ param-name >
         < param-value > schoolDemo.root </ 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 > *.faces </ url-pattern >
     </ servlet-mapping >
     < session-config >
         < session-timeout >
             30
         </ session-timeout >
     </ session-config >
     < welcome-file-list >
         < welcome-file > /views/demo/hello.faces </ welcome-file >
     </ welcome-file-list >

7、部署并查看运行结果

http://localhost:8080/schoolDemo/

或http://localhost:8080/schoolDemo/views/demo/hello.faces

下面加入primefaces

 

1)      加入primefaces的jar包

说明，start为primefaces的风格jar包，您可以到primefaces网站上，下载其他的风格，加到程序中。

2)      修改web.xml，加入下面这段代码

 < pre   name = "code"   class = "html" >      < context-param >
         < param-name > primefaces.THEME </ param-name >
         < param-value > start </ param-value >
     </ context-param >
     < context-param >
         < param-name > javax.faces.PROJECT_STAGE </ param-name >
         < param-value > Development </ param-value >
     </ context-param >

3)      修改hello.xhtml页面

 < pre   name = "code"   class = "html" > < html   xmlns = "http://www.w3.org/1999/xhtml"
       xmlns:p = "http://primefaces.prime.com.tr/ui"
       xmlns:h = "http://java.sun.com/jsf/html" >
     < h:head >
         < title > Facelet Title </ title >
     </ h:head >
     < h:body >
         < h:form   prependId = "false"   >
             < p:inputText   value = "#{helloView.hello}" />
             < p:commandButton   value = "提交" />
         </ h:form >
     </ h:body >
 </ html >

4)      运行效果

 加入ajax动作

1）  修改HelloView类，增加一个userName属性和sayHello方法

 private String userName;
 private String hello;

 public void sayHello(){
     hello = String .format("hello %s,welcome to this schoolDemo!", userName);
 }

 

2）  修改hello.xhtml页面

 < pre   name = "code"   class = "html" >          < h:form   prependId = "false"   >
             < h:panelGrid   columns = "1" >
                 < p:inputText   value = "#{helloView.userName}" />
                 < p:commandButton   value = "提交"   actionListener = "#{helloView.sayHello}"   update = "panel_display"   />
             </ h:panelGrid >
             < h:panelGroup   id = "panel_display"   layout = "block" >
                 < h:outputText   value = "#{helloView.hello}" />
             </ h:panelGroup >
         </ h:form >

 

3）  运行效果