准备: 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)? 运行效果