[JSF]第一个JSF程序

现在可以开发一个简单的程序了,我们将设计一个简单的登入程序,使用者送出名称,之后由程序显示使用者名称及欢迎讯息。

程序开发人员
先看看应用程序开发人员要作些什么事,我们撰写一个简单的JavaBean:

UserBean.java
package onlyfun.caterpillar;
public class UserBean {
private String name;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
}

这个Bean将储存使用者的名称,编译好之后放置在/WEB-INF/classes下。

接下来设计页面流程,我们将先显示一个登入网页/pages/index.jsp,使用者填入名称并送出窗体,之后在/pages/welcome.jsp中显示Bean中的使用者名称与欢迎讯息。

为了让JSF知道我们所设计的Bean以及页面流程,我们定义一个/WEB-INF/faces-config.xml:

faces-config.xml
<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN""http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<FACES-CONFIG>
<NAVIGATION-RULE>
<FROM-VIEW-ID>/pages/index.jsp</FROM-VIEW-ID>
<NAVIGATION-CASE>
<FROM-OUTCOME>login</FROM-OUTCOME>
<TO-VIEW-ID>/pages/welcome.jsp</TO-VIEW-ID>
</NAVIGATION-CASE>
</NAVIGATION-RULE>
<MANAGED-BEAN>
<MANAGED-BEAN-NAME>user</MANAGED-BEAN-NAME>
<MANAGED-BEAN-CLASS> onlyfun.caterpillar.UserBean </MANAGED-BEAN-CLASS>
<MANAGED-BEAN-SCOPE>session</MANAGED-BEAN-SCOPE>
</MANAGED-BEAN>
</FACES-CONFIG>

<NAVIGATION-RULE>中,我们定义了页面流程,当请求来自<FROM-VIEW->中指定的页面,并且指定了<NAVIGATION-CASE>中的<FROM-OUTCOME>为login时,则会将请求导向至<TO-VIEW-ID>所指定的页面。

在中我们可以统一管理我们的Bean,我们设定Bean对象的存活范围是session,也就是使用者开启浏览器与程序互动过程中都存活。

接下来要告诉网页设计人员的信息是,他们可以使用的Bean名称,即中设定的名称,以及上面所定义的页面流程。

网页设计人员
首先网页设计人员撰写index.jsp网页:

index.jsp
<?xml:namespace prefix = f />
<f:view>
<?xml:namespace prefix = h />
<h:form>
<H3>请输入您的名称</H3>
名称: <h:inputText value="#{user.name}"></h:inputText>
<h:commandButton action="login" value="送出"></h:commandButton>
</h:form>
</f:view>

我们使用了JSF的core与html标签库,core是有关于UI组件的处理,而html则是有关于HTML的进阶标签。

<f:view>与有类似的作用,当您要开始使用JSF组件时,这些组件一定要在<F: view></f:view>之间,就如同使用HTML时,所有的标签一定要在<html>与< /html>之间。

html卷标库中几乎都是与HTML卷标相关的进阶卷标,<h:form>会产生一个窗体,我们使用<H: inputText>来显示user这个Bean对象的name属性,而<h:commandButton>会产生一个提交按钮,我们在action属性中指定将根据之前定义的login页面流程中前往welcome.jsp页面。

网页设计人员不必理会窗体传送之后要作些什么,他只要设计好欢迎页面就好了:

welcome.jsp

<f:view>
<h:outputText value="#{user.name}"></h:outputText>
您好!
<H3>欢迎使用 JavaServer Faces!</H3>
</f:view>

这个页面没什么需要解释的了,如您所看到的,在网页上没有程序逻辑,网页设计人员所作的就是遵照页面流程,使用相关名称取出数据,而不用担心实际上程序是如何运作的。

接下来启动Container,连接上您的应用程序网址,例如: http://localhost:8080/jsfDemo/pages/index.faces ,填入名称并送出窗体,您的欢迎页面就会显示了。


如果给你带来帮助,欢迎微信或支付宝扫一扫,赞一下。