当前位置: 代码迷 >> JavaScript >> JSF2+Primefaces容易应用系列(一)
  详细解决方案

JSF2+Primefaces容易应用系列(一)

热度:675   发布时间:2012-09-14 23:00:49.0
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)? 运行效果