javascript

位置:IT落伍者 >> javascript >> 浏览文章

基于Facelets的JSF


发布日期:2023年04月17日
 
基于Facelets的JSF

上一篇文章我介绍了通过JBoss Tools的向导生成一个简单的Seam工程Seam的中文意思就是缝合线 衔接口 接缝所以大家可以将Seam当成一条能将EJBJSF等框架有机地结合起来的纽带如下图所示

由上图可以看出Seam会涉及很多技术不过大家不必惊慌因为其中有些技术不是必须的然而要学好Seam掌握JSF是必不可少的Seam基于JSF作了一些扩展使JSF更易用另外在上图中JSF上层有JSPFacelets和Portal这三个框框这三种技术是JSF的视图(View)技术三者可任选其一现在JSF默认是使用JSP作为视图技术不过我早前在TSS上看过一篇关于JSF 的文章这方面会有所改变——Facelets将会取而代之因为Facelets对比JSP要优越许多

Facelets使用XHTML规范省却了一大堆JSP的<f:verbatim />

更强的性能

Facelets实现模板(Template)功能这个可以称得上是杀手锏功能因为几乎每个应用都要使用这个功能

Facelets还可以方便地创建自定义标签和EL函数

所以Facelets成为Seam的不二之选通过上面的讲述我想大家应该了解SeamJSF与Facelets的关系故我介绍使用Facelets作为视图技术的JSF

基本的XHTML构成

如果大家可以通过上一篇文章可以顺利创建Seam工程可以在WebContent文件夹下看到一些XHTML文件不过这些XHTML都并不是独立的需要依赖模板页面下面让我们来看一个完整的XHTML

<?xmlversion=encoding=utf?>

<!DOCTYPEhtmlPUBLIC//WC//DTDXHTMLTransitional//ENtransitionaldtd>

<htmlxmlns=xmlns:h=>

<head>

<metacontent=text/html;charset=utfhttpequiv=ContentType/>

<title>

HelloWorld

</title>

</head>

<body>

<h><h:outputTextvalue=HelloWorld!/></h>

</body>

</html>

这个文件的构成很简单与普通的XHTML区别就是引入了命名空间这个URI正是JSF常用的组件(Component在JSF里的称呼可以理解为JSP中的标签)的URI<houtputText />就是其中之一

另外需要指出的是上述文件并没有<fviewRoot />这个在以JSP作为视图技术的JSF的页面中是必需的因为JSF的页面其实在内存中模型就是一棵树如下图所示理解这点非常重要所以是必须有根节点Facelets的FaceletViewHandler会自动创建一个UIViewRoot如果XHTML中没有定义的话

常用的JSF组件

常用的JSF组件可以分为以下几大类表单输入组件命令组件输出组件数据组件和辅助组件

除了辅助组件之外有些属性是组件共有的

id属性正如我前边所说JSF的页面其实在内存中模型就是一棵树每个组件对应一个节点每个节点都有一个唯一标识这就是id属性如果你没有显式地设置idJSF会自动帮你生成一个

binding属性只能设置一个EL为值它作用是可以将组件对应的对象绑定到后台的Managed Bean当我们拿到这个对象后我们可以通过JSF的API改变其行为这个会在以后文章详细讲述

rendered属性用于指定该组件是否会被输出到页面中

下面我分别对每类组件进行概述

常用的表单输入组件

对于表单输入组件都会有一个叫value的属性通常被设置为一个EL表达式如#{myBeanmyProperty}在JSF中有一个概念叫双向绑定即是在提交表单的时候JSF通过EL将用户输入的值绑定到后台的Managed Bean中同样地请求完成后渲染页面时JSF亦会通过EL将Managed Bean的值输出相应的位置

常用的表单输入组件有如下

h:inputText

h:inputSecret

h:inputTextarea

h:selectBooleanCheckbox

h:selectManyCheckbox

h:selectOneRadio

h:selectOneListbox

h:selectManyListbox

h:selectOneMenu

h:selectManyMenu

在这我就不一一介绍这些组件的详细用法大家可以找一下《Core JavaServer Faces nd Edition》来看一下

命令组件

JSF的命令组件有<h:commandButton />和<h:commandLink />分别输出一个<input type=submit />和<a />它们都有两个属性action和actionListener可以绑定到Managed Bean的事件处理方法例如

<h:commandButtonaction=#{myBeanmyEvent}value=ClickMe/>

<h:commandButtonactionListener=#{myBeanmyActionListener}value=ClickMe/>

对应的JAVA代码

publicStringmyEvent(){

returnnull;

}

publicvoidmyActionListener(ActionEventevent){

}

常用的输出组件

这些组件输出一些常用的HTML元素如<span /><a /><div />和<table />等其中最常用的应该是<h:outputText /><h:panelGroup />和<h:panelGrip />

h:outputText当idstyle和styleClass等属性不为空时它会输出<span />包住value另外它还有一个属性叫escape用于指示是否需要对值进行HTML编码默认为true对值进行HTML可以从一定程序上防止XSS(Cross Site Scripting跨站脚本)攻击

h:panelGroup当idstyle和styleClass行属性不为空且layout不为block时它输出<span />而当上述属性不为空且layout为block时它会输出<div />不过当上述属性为空时它将什么也不输出可能有的朋友会问如果什么不输出那要它何用?这个问题稍后再答

hpanelGrid输出<table />它的用法有点奇怪它有属性叫columns默认为它将包含在其内的JSF组件分别放到<td />元素输出有时我可能需要将两个或多个JSF组件放到同一个td中定位就需要使用到hpanelGroup了此时我们不用对<hpanelGroup/>设置任何属性这就是上个问题的答案<hpanelGroup />用于将两个或多个JSF组件当作一个使用统一设置它们是否rendered等例如

<h:panelGridcolumns=>

<h:outputTextvalue=/>

<h:outputTextvalue=/>

<h:panelGroup>

<h:outputTextvalue=/>

<h:outputTextvalue=/>

<h:outputTextvalue=/>

</h:panelGroup>

<h:outputTextvalue=/>

</h:panelGrid>

的输出如下图所示

常用的数据组件

JSF的数据组件有<h:dataTable />它的使用相对比较简单可以将绑定到集合类型

<h:dataTablevalue=#{myBeanmyProps}var=_prop>

<h:column>

<f:facetname=header>

<h:outputTextvalue=Header/>

</f:facet>

<h:outputTextvalue=#{_propmyProp}/>

</h:column>

</h:dataTable>

常用的辅助组件

这些组件一般不能单独使用而是作为辅助用在不同的组件中其作用也有所不同它们的命名空间是xmlnsf=通常以f为前缀如ffacetfparam

小结

本文大概地介绍了一下JSF的组件虽然JSF默认已经有这么多的组件但是对于时下盛行的富客户端的浏览器应用而言还是杯水车薪因此许多软件厂商都开发各式各样的第三方组件以方便大家构建AJAX应用如RichfacesIceFaces等至于这些组件的详细用法大家可以在日后的学习中慢慢熟悉

上一篇:JSF和Hibernate的比较

下一篇:在JSE环境使用Hibernate EntityManger