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）  运行效果