NetBeans中JSF应用开发.docx

《NetBeans中JSF应用开发.docx》由会员分享，可在线阅读，更多相关《NetBeans中JSF应用开发.docx（75页珍藏版）》请在冰豆网上搜索。

NetBeans中JSF应用开发

这是JSF技术系列讲座的第1个，整个讲座包括两大部分，第1部分是在NetBeans中的开发过程，第二部分是JSF相关技术的全面介绍。

JavaServerFaces是Web应用中构建用户接口组件的标注JavaAPI。

可以把JSF框架想象成充满随时可以使用的组件的工具箱，这些组件可以在Web应用中快速和方便的重用。

这些组件可能是简单的，例如存取用户数据的输入框，可能非常复杂，例如使用弹出式日历来格式化日期的输入框。

可以把这些组件嵌入到JSP页面，然后使用框架来处理不同页面之间的导航。

目标：

创建一个JSF应用。

使用JSF框架创建一个Web应用

在NetBeans中，可以在创建应用的时候为Web应用添加JSF支持，也可以为已有的应用添加JSF支持。

Sun应用服务器已经包含了JSF库，所以不需要下载和安装。

我们在创建应用的时候添加JSF支持。

1.选择File>NewProject（Ctrl-Shift-N）,从Web目录中的WebApplication，点击Next.

2.指定工程的名字为jAstrologer,并为工厂指定位置，选择Sun应用服务器作为服务器，设置JavaEE的版本为JavaEE5，然后点击Next.

3.选中JavaServerFaces复选框，然后点击Finish.

NetBeans完成Web应用的创建。

展开工程的Libraries中的SunJavaSystemApplicationServer节点.可以看到JSF库，例如jsf-impl.jar已经添加到classpath中了。

展开ConfigurationFiles可以看到IDE已经创建了faces-config.xml文件，该文件控制Web应用中JSF组件的行为。

IDE还在web.xml部署描述符中注册了FacesServlet。

FacesServlet处理JSF框架所控制的JSP页面之间的导航。

创建JSP页面

我们将创建一个新的JSP页面greeting.jsp，该页面作为欢迎界面并且用于收集他们的信息,然后创建一个success.jsp，为用户显示祝贺信息。

创建欢迎页面

1.右键点击工程节点，选择New选择JSP，命名为greeting,点击Finish.确保选中JSPFile（StandardSyntax）。

2.现在需要在JSF文件中声明JSF标签库，修改下面的代码；

<%--

<%@tagliburi="prefix="c"%>

--%>

改成:

<%@taglibprefix="f"uri="%>

<%@taglibprefix="h"uri="%>

注意可以使用代码生成器帮助添加标签名字和属性。

代码生成器同样可以帮助你添加标签库的URI。

3.把title和h1标签改成WelcometojAstrologer.

4.向文件中添加一个JSF表单。

在Palette中，点击JSFForm按钮，然后拖拽到h1标签的下面。

在对话框中，选择EmptyForm，然后点击OK。

IDE会生成如下代码（粗体部分）。

WelcometojAstrologer

view>

form>

form>

view>

5.我们准备使用inputText组件获取用户输入，实用commandButton组件提交表单。

在源文件编辑区，把h:

form元素的内容修改成：

view>

form>

Enteryourname:

inputTextvalue="name"/>

Enteryourbirthday:

inputTextvalue="birthday"/>

commandButtonvalue="Submit"action="submit"/>

form>

view>

创建成功的页面

现在要创建一个仅仅输出"Congratulations"的页面。

1.像上面一样创建一个新的JSP文件，命名为success。

2.把文件的内容修改成：

       

Congratulations

You'vesuccessfullyregisteredwithjAstrologer.

注意：

我们这里使用的是纯HTML，所以不需要声明JSF标签库。

设置页面导航

JSF框架中页面的导航是由faces-config.xml文件控制的，该文件位于工程窗口中的ConfigurationFiles节点下。

对于每个页面，你可以设置一个包含一个或多个导航情况的导航规则。

现在，我们仅仅将commandButton的submit动作提交给success.jsp，因此不论用户在输入框中输入什么信息，都可以看到成功的消息。

1.双击faces-config.xml打开SourceEditor。

2.右键单击文件的任何地方，选择JavaServerFaces，然后选择AddNavigationRule。

然后在RulefromView输入框中输入/greeting.jsp，然后输入规则的描述（可选的），然后点击Add。

在faces-config.xml中生成了下面的代码：

           handleuserinput

       /greeting.jsp

3.在faces-config.xml中右键单击，然后选择JavaServerFaces选择AddNavigationCase，设置如下：

n        FromView:

/greeting.jsp

n        FromOutcome:

submit

n        ToView:

/success.jsp

点击Add。

在faces-config.xml中生成了下面的代码（粗体部分）：

           handleuserinput

       /greeting.jsp

           submit

           /success.jsp

配置和运行程序

现在对IDE进行设置，当运行这个应用的时候，显示greeting.jsp，然后测试这个应用。

1.右键点击工程，然后先择Properties.

2.点击Run，然后在RelativeURL输入框中输入/faces/greeting.jsp，然后点击OK。

3.右键点击工程，然后选择Run。

IDE会build工程，启动应用服务器，部署应用，并在浏览器中显示下面的页面。

当您点击Submit按钮的时候，可以看到下面的输入结果：

目标：

在JSF应用中使用管理Bean

在上一节中，我们使用JSF组件创建了一个简单的web应用。

但是，我们的Web应用还不能做任何有意义的事情。

为了丰富我们的JSF应用的功能，可以建立辅助Bean（BackingBean）与UI组件的关联。

辅助Bean又称为JSF管理Bean，是一个普通的JavaBean组件，但是他们的属性和方法可以供JSF组件访问。

在我们的例子中，我们将创建一个UserBean管理Bean，有两个属性name和birthday。

1.      右键点击工程，选择New，然后选择File/Folder。

在Web分类中，选择JSFManagedBeantemplate，然后点击Next。

2.      把bean命名为UserBean，放在astrologer.user中，其他的设置和默认值不用修改，然后点击Finish。

IDE会在源代码编辑区打开UserBean.java，并在faces-config.xml中添加下面的bean声明：

       UserBean

       astrologer.user.UserBean

       request

3.      在UserBean.java中添加唉下面的域声明

publicclassUserBean{

   Stringname;

   Stringbirthday;

4.      然后为域生成getter和setter方法。

在文件的任何地方右键点击，然后选择Refactor中的EncapsulateFields。

选择对话框中的Next，然后在重构窗口中重构。

IDE把域的访问控制修改成private，然后创建getter和setter方法。

5.      在greeting.jsp中，作如下修改（粗体部分）。

注意：

UserBeans.java中可以使用代码完成器。

view>

form>

Enteryourname:

inputTextvalue="#{UserBean.name}"/>

Enteryourbirthday:

inputTextvalue="#{UserBean.birthday}"/>

commandButtonvalue="Submit"action="submit"/>

form>

view>

6.      在success.jsp中添加JSF标签库声明，可以从greeting.jsp中拷贝粘贴。

7.      通过点击控制窗口的JSFForm按钮并拖拽到原文件编辑器中的h1标记下面，为success.jsp添加一个空的JSF表单。

8.      修改success.jsp如下：

Congratulations

view>

form>

You'vesuccessfullyregisteredwithjAstrologer.

Yournameis

outputTextvalue="#{UserBean.name}"/>

Yourbirthdayis

outputTextvalue="#{UserBean.birthday}"/>

form>

view>

9.      右键点击工程，然后选择RunProject。

当工程部署之后您会看到同样的欢迎界面。

输入值并点击Submit，success.jsp会显示您输入的值，如下图所示：

目标：

使用标准的验证器和转换器

设置某个域为必填的

首先我们需要做的是确保用户为name域输入一些信息，我们可以通过使用inputText组件的required属性轻松做到。

1.      打开greeting.jsp，然后修改inputText组件如下：

Enteryourname:

inputTextvalue="#{UserBean.name}"

        id="name"required="true"/>

messagefor="name"/>

我们必须做的是给名字输入框一个ID，这样我们可以指定消息是哪个组件的消息。

我们已经指定这个域是必填的，因此如果用户不输入任何信息，Web应用将显示错误信息。

2.      运行工程，然后不输入任何信息就点击Submit，您将会得到如下错误信息：

使用转换器

现在我们需要把我们的生日作为日期来处理，而不是任意的字符串。

JSF框架提供了很多转换器，使用这些转换器可以把文本转换成对象类型，例如布尔类型等等。

在转换数据的过程中，要验证数据对于要转换成的数据类型来说是否有效。

对于我们的生日输入域来说非常方便，因为我们可以指定日期的格式，对输入进行验证，并同时得到一个Date对象。

1.      打开greeting.jsp，修改生日输入框inputText组件如下：

Enteryourbirthday:

inputTextvalue="#{UserBean.birthday}"

                 id="birthday"required="true">

convertDateTimepattern="dd/MM/yyyy"/>

inputText>（dd/mm/yyyy）

messagefor="birthday"/>

我们必修做的是给生日一个ID，这样我们可以指定消息显示的时候是对应哪个组件的。

然后把转换器的格式设置为dd/MM/yyyy。

如果用户输入的信息不能匹配这个格式，将重新显示greeting.jsp文件，并显示错误信息。

我们同样指定了这个域是必须的，就像姓名域一样。

2.      现在需要把UserBean.java中生日属性的类型修改为Date。

打开UserBean.java，修改如下（粗体部分），并添加一个import语句，引入java.util.Date。

   privateStringname;

   privateDatebirthday;

   ...

   publicDategetBirthday（）{

       returnbirthday;

   }

   publicvoidsetBirthday（Datebirthday）{

       this.birthday=birthday;

   }   

3.      运行工程。

如果不输入日期就点击Submit，你将得到下面的错误信息：

如果你输入了一个无效的日期，你将得到下面的错误信息：

目标：

修改默认的错误消息

每种类型的验证错误所显示的错误信息是由Message.properties文件控制的，该文件位于jsf-impl.jar中的javax.faces包中。

可以通过如下方式查看，展开Libraries>SunJavaSystemApplicationServer>jsf-impl.jar>javax.faces，然后双击Messages.properties。

你可以通过替换应用所使用的属性文件来创建自定义的消息。

1.      右键点击jAstrologer工程，然后选择New>File/Folder。

在Other分类中选择PropertiesFile，然后点击Next。

把文件命名为MyMessages,输入文件夹位置：

src/java/astrologer/ui，然后点击Finish。

MyMessages.properties文件显示在源代码编辑区。

在Files窗口，展开文件夹src/java/astrologer/ui来查看文件。

2.      把下面的属性从Messages.properties拷贝到MyMessages.properties中：

ponent.UIInput.REQUIRED={0}:

ValidationError:

Valueisrequired.

javax.faces.converter.DateTimeConverter.DATE={2}:

''{0}''couldnotbeunderstoodasadate.

javax.faces.converter.DateTimeConverter.DATE_detail={2}:

''{0}''couldnotbeunderstoodasadate.Example:

{1}

3.      修改属性的值：

ponent.UIInput.REQUIRED=Pleaseenteravalueforthisfield.

javax.faces.converter.DateTimeConverter.DATE=Pleaseenteravaliddate.

javax.faces.converter.DateTimeConverter.DATE_detail=Pleaseenteravaliddate.Example:

{1}

4.      打开faces-config.xml（在Projects窗口的ConfigurationFiles节点下），并在faces-config主元素下输入下面的内容：

   ...

       astrologer.ui.MyMessages

5.      右键点击应用，然后选择RunProject。

如果你在必填域中不输入任何信息或者在生日输入框中输入了不正确的日期格式，应用将显示下面的错误信息。

注意：

那些在自定义属性文件中没有指定的信息将从jsf-impl.jar中的Messages.properties中获取。

同样，您可以为错误信息指定一个CSS样式，然后通过如下方式在message标记中指定该样式。

messagefor="birthday"style="color:

#369;"/>

创建自定义验证器

如果标准的JSF验证器不能满足您的要求，你可以编写自己的验证器。

在我们的例子中，我们将编写一个验证器来验证一个字符串是否是一个合法的email。

要创建一个自定义验证器，需要创建一个实现javax.faces.validator.Validator接口的类，并在faces-config.xml中配置，可以通过

validator>标记来使用验证器。

1.      右键点击工程节点，然后选择New>JavaClass，把类命名为EmailValidator，把这个类放在包astrologer.validate中，然后点击Finish。

2.      在类的声明中，实现Validator，如下：

publicclassEmailValidatorimplementsValidator{

3.      使用提示来实现validate方法。

4.      修改方法的签名，然后增加下面的代码：

   publicvoidvalidate（FacesContextfacesContext,

           UIComponentuIComponent,Objectvalue）throwsValidatorException{

       //Getthecomponent'scontentsandcastittoaString

    StringenteredEmail=（String）value;

       //Settheemailpatternstring

       Patternp=Ppile（".+@.+\\.[a-z]+"）;

       //Matchthegivenstringwiththepattern

       Matcherm=p.matcher（enteredEmail）;

       //Checkwhethermatchisfound

       booleanmatchFound=m.matches（）;

       if（!

matchFound）{

           FacesMessagemessage=newFacesMessage（）;

           message.setDetail（"Emailnotvalid-Theemailmustbeintheformat

yourname

@

"）;

           message.setSummary（"Emailnotvalid-Theemailmustbeintheformat

yourname

@

"）;

           message.setSeverity（FacesMessage.SEVERITY_ERROR）;

           thrownewValidatorException（message）;

       }

   }

5.      使用Alt+Shift+F添加必须的import语句。

（您应该选择引入java.util.regex.Matcher,java.util.regex.Patternandjavax.faces.applica