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类

[java] view plain copy

1. package  org.jineral.school.demo;  
2.   
3. import  javax.faces.bean.ManagedBean;  
4. import  javax.faces.bean.ViewScoped;  
5.   
6. /**  
7.  *  
8.  * @author jineral  
9.  * @create date 2011-11-20  
10.  */   
11. @ManagedBean (name =  "helloView" )  
12. @ViewScoped   
13. public   class  HelloView  implements  Serializable {   
14.   
15.     private  String hello;  
16.   
17.     public  HelloView() {  
18.         hello="hello world!" ;  
19.     }  
20.   
21.     public  String getHello() {  
22.         return  hello;  
23.     }  
24.   
25.     public   void  setHello(String hello) {  
26.         this .hello = hello;  
27.     }  
28.   
29. }  

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

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

[html] view plain copy

1. < html   xmlns = "http://www.w3.org/1999/xhtml"   
2.       xmlns:h = "http://java.sun.com/jsf/html" >   
3.     < h:head >   
4.         < title > Facelet Title </ title >   
5.     </ h:head >   
6.     < h:body >   
7.         < h:outputText   value = "#{helloView.hello}" />   
8.     </ h:body >   
9. </ html >   

6、 建立web.xml：

[html] view plain copy

1. <? xml   version = "1.0"   encoding = "UTF-8" ?>   
2. < 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" >   
3.   
4.     < context-param >   
5.         < param-name > webAppRootKey </ param-name >   
6.         < param-value > schoolDemo.root </ param-value >   
7.     </ context-param >   
8.   
9.     < servlet >   
10.         < servlet-name > Faces Servlet </ servlet-name >   
11.         < servlet-class > javax.faces.webapp.FacesServlet </ servlet-class >   
12.         < load-on-startup > 1 </ load-on-startup >   
13.     </ servlet >   
14.     < servlet-mapping >   
15.         < servlet-name > Faces Servlet </ servlet-name >   
16.         < url-pattern > *.faces </ url-pattern >   
17.     </ servlet-mapping >   
18.     < session-config >   
19.         < session-timeout >   
20.             30  
21.         </ session-timeout >   
22.     </ session-config >   
23.     < welcome-file-list >   
24.         < welcome-file > /views/demo/hello.faces </ welcome-file >   
25.     </ 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，加入下面这段代码

[html] view plain copy

1. < pre   name = "code"   class = "html" >      < context-param >   
2.         < param-name > primefaces.THEME </ param-name >   
3.         < param-value > start </ param-value >   
4.     </ context-param >   
5.     < context-param >   
6.         < param-name > javax.faces.PROJECT_STAGE </ param-name >   
7.         < param-value > Development </ param-value >   
8.     </ context-param >   

3)      修改hello.xhtml页面

[html] view plain copy

1. < pre   name = "code"   class = "html" > < html   xmlns = "http://www.w3.org/1999/xhtml"   
2.       xmlns:p = "http://primefaces.prime.com.tr/ui"   
3.       xmlns:h = "http://java.sun.com/jsf/html" >   
4.     < h:head >   
5.         < title > Facelet Title </ title >   
6.     </ h:head >   
7.     < h:body >   
8.         < h:form   prependId = "false"   >   
9.             < p:inputText   value = "#{helloView.hello}" />   
10.             < p:commandButton   value = "提交" />   
11.         </ h:form >   
12.     </ h:body >   
13. </ html >   

4)      运行效果

 加入ajax动作

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

[html] view plain copy

1. private String userName;  
2. private String hello;  
3.   
4. public void sayHello(){  
5.     hello = String .format("hello %s,welcome to this schoolDemo!", userName);  
6. }  

 

2）  修改hello.xhtml页面

[html] view plain copy

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

 

3）  运行效果