您的位置：首页 > Web前端 > JavaScript

JSF中facelets的使用以及JSF国际化问题

2012-03-15 11:24 92 查看

一》facelet简介：facelet是为 JSF 组件模型度身定制的模板化语言，说白了就是页面的模板，我们可以先把页面的整个框架的样式搭建起来，动态的部分我们可以直接去引用。这样就可以减少很多重复代码的编写。虽然是这样的一个意思，但是facelet本身与JSF的生命周期都有很高的结合度，使用 Facelets，生成的模板会构建组件树，而不是 servlet。这就允许更好的重用，因为可以把组件组合成另一个组件。

二》facelet用法：首先是标签库的插入

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">

模板页面：在模板页面我们主用是用到<ui:insert/>标签，我们可以在标签中直接用<ui:include/>引用页面，也可以空置。请看下面的例子：

<f:view locale="zh_CN">
<f:loadBundle basename="messages" var="msgs"/>
<h:head>
<title><ui:insert name="title"/></title>
</h:head>
<h:body styleClass="template_body" onload="nowtime()">
<div id="top_status">
<ui:insert name="status">
<ui:include src="status.xhtml"/>
</ui:insert>
</div>
<div id="top_navigation">
<ui:insert name="navigation">
<ui:include src="menu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</f:view>

动态页面：当模板页面生成出来后，我们可以动态生成各页面。首先我们需要用<ui:composition template="template.xhtml"/>标签引入上面的模板页。然后在用<ui:define/>标签动态定义页面的内容。例子如下：

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
<body>
<ui:composition template="template.xhtml">
<ui:define name="title">
动态页面
</ui:define>
<ui:define name="content">
<h:form>
<h:panel header="动态页面">
</h:form>
</ui:define>
</ui:composition>
</body>
</html>

页面样式以及脚本：对于样式以及脚本的引入一般都是放在模板页面的<head>标签内，这样只要引用了模板的页面都可以引用到。

三》JSF国际化的问题

首先必须定义国家化配置文件，名称格式为xxx_language.properties，例如message_en.properties,message_zh_CN.properties，然后我们之需要在模板页面引入就可以了，可以参考最上面的template.xhtml页面

<f:loadBundle basename="messages" var="msgs"/>

当我们需要初始化本地local时，只需要在加上下面这句话

<f:view locale="zh_CN">

在具体使用时，只需要调用定义的语言就可以了，下面给个完整的例子

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<f:view>
<f:loadBundle basename="messages" var="msgs"/>
<h:head>
<title>#{msgs['login.logo']}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../resources/css/login.css" type="text/css"/>
</h:head>
<h:body>
<h:form>
<p:panel header="#{msgs['login.logo']}" styleClass="loginPanel">
<h:panelGrid columns="2" styleClass="panelGrid" footerClass="footerCss" id="logingrid">
<h:outputLabel value="#{msgs['login.username']}："/>
<h:inputText value="#{userLogin.name}" required="true"/>
<h:outputLabel value="#{msgs['login.userpasswd']}："/>
<h:inputSecret value="#{userLogin.passwd}" required="true" maxlength="12"/>
<h:outputLabel value="" rendered="#{userLogin.loginreeorstrrender}"/>
<h:outputText value="#{userLogin.loginreeorstr}" rendered="#{userLogin.loginreeorstrrender}"  styleClass="message"/>
<f:facet name="footer">
<h:commandButton styleClass="button" value="#{msgs['login.submit']}" action="#{userLogin.loginCheck}"/>
<h:commandButton styleClass="button" value="#{msgs['login.cancel']}"/>
</f:facet>
</h:panelGrid>
</p:panel>
</h:form>
</h:body>
</f:view>
</html>

而国际化的文件定义很简单，比如首先是一个en语言的

login.logo = Login
login.username = User Name
login.userpasswd = Password
login.userpermiss = Permission
login.administrator = Administrator
login.operator = Operator
login.viewer = Viewer
login.submit = Submit
login.cancel = Cancel

然后是zh_CN语言的

login.logo = 登录
login.username = 用户
login.userpasswd = 密码
login.userpermiss = 权限
login.administrator = 管理员
login.operator = 操作员
login.viewer = 监视员
login.submit = 确定
login.cancel = 取消

这是一点JSF的使用经验！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航