- 浏览: 122642 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
sunxiangfei91:
<div class="quote_title ...
Spring使用MimeMessageHelper -
lhb3015:
lz, Coder 这个类的代码呢??
Java RSA算法加密 -
b_lee:
顶顶顶 加两个字,再顶
Facelets是JSF更好的外衣 -
zhuqing08:
楼主 Coder 这个类的代码呢?
Java RSA算法加密 -
evajhhot:
貌似不行 有异常
BlazeDS 与Spring集成指南之一
在本篇介绍中,我们开始接触JSF2.0纳为标准的最重要的特性之一,facelets组件模型,整个组件模型的特性是很多的,我在本系列中只能做简单的介绍,并试图用比较简单的例子为大家揭示JSF2.0带给我们独特而快捷的开发体验。
在本篇中,主要揭示自定义组件的过程,在过程中,我还会给大家演示一下JSF2.0中其他的一些特性。现在自定义组件非常简单,下面就用一个例子来说明。
一、 创建一个应声器:
接上一篇中的工程TestJsf2.0,在其中加入如下文件:
echo.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>测试简单的复合组件</title>
<meta http-equiv="keywords" content="jsf2.0,组件,ajax" />
<meta http-equiv="description" content="测试简单的复合组件." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</h:head>
<body>
<div id="header" style="padding:100px 0 20px 100px;font-size:22px;font-weight:bold;border-bottom:solid 1px red">
这个应声器的作者是:#{echo.encoder.author}。
</div>
<div>
<h:form id="form" style="padding:20px 0 20px 100px">
<div style="padding:20px;">
<span>请输入响应文字:</span>
<h:inputText value="#{echo.echoText}"></h:inputText>
</div>
<div style="padding-left:50px">
<h:commandButton id="post" style="padding:3px;width:100px;" value="提交响应" action="echo"/>
</div>
</h:form>
</div>
<h:panelGroup id="after">
<div style="padding:20px 0 0 100px">
响应:<h:outputText id="echo" value="#{echo.outText}" escape="false"></h:outputText>
</div>
</h:panelGroup>
</body>
</html>
InputEcho.java:
package test;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "echo")
@SessionScoped
public class InputEcho implements java.io.Serializable {
private static final long serialVersionUID = 9113785890193860362L;
private String echoText;
private EchoEncoder encoder;
public InputEcho() {
encoder = new EchoEncoder();
}
/**
* @return the encoder
*/
public EchoEncoder getEncoder() {
return encoder;
}
/**
* @return the echoText
*/
public String getEchoText() {
return echoText;
}
public String getOutText() {
return encoder.Encode(echoText);
}
/**
* @param echoText the echoText to set
*/
public void setEchoText(String echoText) {
this.echoText = echoText;
}
public void echo() {
}
}
EchoEncoder.java:
package test;
public class EchoEncoder implements java.io.Serializable{
private static final long serialVersionUID = 8306351263183979293L;
private String author = "pout";
/**
* @return the author
*/
public String getAuthor() {
return author;
}
public String Encode(String msg) {
return msg.replaceAll("<", "<").replaceAll(">", ">").replaceAll("\n", "<br/>");
}
}
先看第一个文件echo.xhtml,其中action="echo",此处没有如JSF1.2中写一个表达式,这是新加入的一种导航方式,可以直接写文件的除后缀以外的名称,JSF2引擎会自动找到对应的文件,然后导航。另外看看escape="false"属性,这个是为了直接将内容中的标签以html方式显示,你可以调整本例中escape以及后台返回的outText的方法,看看前面的显示,这是非常有趣的。
好了,这个例子可以运行了,在页面中输入http://localhost:8080/TestJsf2.0/echo.xhtml就可以访问了。
二、 将输入值组件化:
现在真正将上述例子用自定义的复合组件改写一下,整个过程会非常简单,后台的bean都不用改写,只用改变页面就行。
我们看看自定义的组件echoInputText.xhtml,此页面需要放在WebRoot下的resources/echo/文件夹下。
echoInputText.xhtml:
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="echo"/>
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<div style="padding:20px;">
<span>请输入响应文字:</span>
<h:inputText value="#{cc.attrs.echo.echoText}"></h:inputText>
</div>
</composite:implementation>
</html>
此文件将echo.xhtml中的
<div style="padding:20px;">
<span>请输入响应文字:</span>
<h:inputText value="#{echo.echoText}"></h:inputText>
</div>
提取出来,做成一个echoInputText组件,然后修改echo.xhtml为以下样子:
echo.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:echo="http://java.sun.com/jsf/composite/echo"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>测试简单的复合组件</title>
<meta http-equiv="keywords" content="jsf2.0,组件,ajax" />
<meta http-equiv="description" content="测试简单的复合组件." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</h:head>
<body>
<div id="header" style="padding:100px 0 20px 100px;font-size:22px;font-weight:bold;border-bottom:solid 1px red">
这个应声器的作者是:#{echo.encoder.author}。
</div>
<div>
<h:form id="form" style="padding:20px 0 20px 100px">
<echo:echoInputText echo="#{echo}"></echo:echoInputText>
<div style="padding-left:50px">
<h:commandButton id="post" style="padding:3px;width:100px;" value="提交响应" action="echo"/>
</div>
</h:form>
</div>
<h:panelGroup id="after">
<div style="padding:20px 0 0 100px">
响应:<h:outputText id="echo" value="#{echo.outText}" escape="false"></h:outputText>
</div>
</h:panelGroup>
</body>
</html>
这两个文件修改后就可以运行了。
我们来分析一下自定义的echoInputText组件,先看看echo.xhtml文件有什么变化。看看xml命名空间中加入了xmlns:echo="http://java.sun.com/jsf/composite/echo",这个就是用来引用自定义的组件的,其中http://java.sun.com/jsf/composite/会默认指向到resources文件夹,后面直接跟资源的目录。resources文件夹是JSF2.0的一个默认资源放置文件夹,后面的echo就是指resources/echo/文件夹了。整个命名空间的意思就是将此文件夹命名为echo。再看看echo.xhtml文件中一处变化:
<echo:echoInputText echo="#{echo}"></echo:echoInputText>
此段告诉我们直接采用了echo命名空间下的echoInputText组件,其中有一个属性为echo,指向的就是managed bean:echo。
再看看echoInputText组件:
<composite:interface>
<composite:attribute name="echo"/>
</composite:interface>
这一段用来定义此组件接口,并且定义一个属性,属性名为echo。
<composite:implementation>
<div style="padding:20px;">
<span>请输入响应文字:</span>
<h:inputText value="#{cc.attrs.echo.echoText}"></h:inputText>
</div>
</composite:implementation>
这一段用来实现组件,其实中间的内容就是原先echo.xhtml文件中的输入组件,cc.attrs是JSF2.0组件定义中默认属性,可以用来引用接口中定义的属性。
最后,我们已经完成了一个简单的自定义符合组件,其中还用到了一下新的特性,大家可以多多查看JSF2.0的接口定义,去更多的了解。
在本篇中,主要揭示自定义组件的过程,在过程中,我还会给大家演示一下JSF2.0中其他的一些特性。现在自定义组件非常简单,下面就用一个例子来说明。
一、 创建一个应声器:
接上一篇中的工程TestJsf2.0,在其中加入如下文件:
echo.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>测试简单的复合组件</title>
<meta http-equiv="keywords" content="jsf2.0,组件,ajax" />
<meta http-equiv="description" content="测试简单的复合组件." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</h:head>
<body>
<div id="header" style="padding:100px 0 20px 100px;font-size:22px;font-weight:bold;border-bottom:solid 1px red">
这个应声器的作者是:#{echo.encoder.author}。
</div>
<div>
<h:form id="form" style="padding:20px 0 20px 100px">
<div style="padding:20px;">
<span>请输入响应文字:</span>
<h:inputText value="#{echo.echoText}"></h:inputText>
</div>
<div style="padding-left:50px">
<h:commandButton id="post" style="padding:3px;width:100px;" value="提交响应" action="echo"/>
</div>
</h:form>
</div>
<h:panelGroup id="after">
<div style="padding:20px 0 0 100px">
响应:<h:outputText id="echo" value="#{echo.outText}" escape="false"></h:outputText>
</div>
</h:panelGroup>
</body>
</html>
InputEcho.java:
package test;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "echo")
@SessionScoped
public class InputEcho implements java.io.Serializable {
private static final long serialVersionUID = 9113785890193860362L;
private String echoText;
private EchoEncoder encoder;
public InputEcho() {
encoder = new EchoEncoder();
}
/**
* @return the encoder
*/
public EchoEncoder getEncoder() {
return encoder;
}
/**
* @return the echoText
*/
public String getEchoText() {
return echoText;
}
public String getOutText() {
return encoder.Encode(echoText);
}
/**
* @param echoText the echoText to set
*/
public void setEchoText(String echoText) {
this.echoText = echoText;
}
public void echo() {
}
}
EchoEncoder.java:
package test;
public class EchoEncoder implements java.io.Serializable{
private static final long serialVersionUID = 8306351263183979293L;
private String author = "pout";
/**
* @return the author
*/
public String getAuthor() {
return author;
}
public String Encode(String msg) {
return msg.replaceAll("<", "<").replaceAll(">", ">").replaceAll("\n", "<br/>");
}
}
先看第一个文件echo.xhtml,其中action="echo",此处没有如JSF1.2中写一个表达式,这是新加入的一种导航方式,可以直接写文件的除后缀以外的名称,JSF2引擎会自动找到对应的文件,然后导航。另外看看escape="false"属性,这个是为了直接将内容中的标签以html方式显示,你可以调整本例中escape以及后台返回的outText的方法,看看前面的显示,这是非常有趣的。
好了,这个例子可以运行了,在页面中输入http://localhost:8080/TestJsf2.0/echo.xhtml就可以访问了。
二、 将输入值组件化:
现在真正将上述例子用自定义的复合组件改写一下,整个过程会非常简单,后台的bean都不用改写,只用改变页面就行。
我们看看自定义的组件echoInputText.xhtml,此页面需要放在WebRoot下的resources/echo/文件夹下。
echoInputText.xhtml:
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="echo"/>
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<div style="padding:20px;">
<span>请输入响应文字:</span>
<h:inputText value="#{cc.attrs.echo.echoText}"></h:inputText>
</div>
</composite:implementation>
</html>
此文件将echo.xhtml中的
<div style="padding:20px;">
<span>请输入响应文字:</span>
<h:inputText value="#{echo.echoText}"></h:inputText>
</div>
提取出来,做成一个echoInputText组件,然后修改echo.xhtml为以下样子:
echo.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:echo="http://java.sun.com/jsf/composite/echo"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>测试简单的复合组件</title>
<meta http-equiv="keywords" content="jsf2.0,组件,ajax" />
<meta http-equiv="description" content="测试简单的复合组件." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</h:head>
<body>
<div id="header" style="padding:100px 0 20px 100px;font-size:22px;font-weight:bold;border-bottom:solid 1px red">
这个应声器的作者是:#{echo.encoder.author}。
</div>
<div>
<h:form id="form" style="padding:20px 0 20px 100px">
<echo:echoInputText echo="#{echo}"></echo:echoInputText>
<div style="padding-left:50px">
<h:commandButton id="post" style="padding:3px;width:100px;" value="提交响应" action="echo"/>
</div>
</h:form>
</div>
<h:panelGroup id="after">
<div style="padding:20px 0 0 100px">
响应:<h:outputText id="echo" value="#{echo.outText}" escape="false"></h:outputText>
</div>
</h:panelGroup>
</body>
</html>
这两个文件修改后就可以运行了。
我们来分析一下自定义的echoInputText组件,先看看echo.xhtml文件有什么变化。看看xml命名空间中加入了xmlns:echo="http://java.sun.com/jsf/composite/echo",这个就是用来引用自定义的组件的,其中http://java.sun.com/jsf/composite/会默认指向到resources文件夹,后面直接跟资源的目录。resources文件夹是JSF2.0的一个默认资源放置文件夹,后面的echo就是指resources/echo/文件夹了。整个命名空间的意思就是将此文件夹命名为echo。再看看echo.xhtml文件中一处变化:
<echo:echoInputText echo="#{echo}"></echo:echoInputText>
此段告诉我们直接采用了echo命名空间下的echoInputText组件,其中有一个属性为echo,指向的就是managed bean:echo。
再看看echoInputText组件:
<composite:interface>
<composite:attribute name="echo"/>
</composite:interface>
这一段用来定义此组件接口,并且定义一个属性,属性名为echo。
<composite:implementation>
<div style="padding:20px;">
<span>请输入响应文字:</span>
<h:inputText value="#{cc.attrs.echo.echoText}"></h:inputText>
</div>
</composite:implementation>
这一段用来实现组件,其实中间的内容就是原先echo.xhtml文件中的输入组件,cc.attrs是JSF2.0组件定义中默认属性,可以用来引用接口中定义的属性。
最后,我们已经完成了一个简单的自定义符合组件,其中还用到了一下新的特性,大家可以多多查看JSF2.0的接口定义,去更多的了解。
发表评论
-
Seam管理的事务
2010-01-28 15:22 1195EJB会话Bean有声明式事务 ... -
配置Seam组件之二
2010-01-16 20:30 942如果你有大量的组件需要在XML中进行配置,那么就很有必要将 c ... -
配置Seam组件之一
2010-01-16 20:29 975Seam所崇尚的哲学是XML配 ... -
Seam上下文
2009-12-25 15:23 1017Seam上下文是由框架创建 ... -
JSF和Spring的集成之二
2009-12-23 17:55 942使用框架 1 介绍 这个 ... -
JSF和Spring的集成之一
2009-12-19 20:45 765JSF和Spring集成的资料比较少,原理是获得彼此的上下文引 ... -
Seam配置和Seam应用程序打包之二
2009-11-28 09:15 1291将Seam与你的EJB容器集成 我们需要将 SeamInter ... -
Seam配置和Seam应用程序打包之一
2009-11-20 22:25 1137Seam基本配置 首先,让我们看看每当将Seam和JSF一起使 ... -
用Java Server Faces建立交互式WEB站点
2009-11-07 10:12 637步骤1:开发组件的Java ... -
集成JSF与BEEHIVE PAGE FLOW之二
2009-10-10 21:54 1033从后台bean访问当前页面 ... -
集成JSF与BEEHIVE PAGE FLOW之一
2009-10-07 23:13 995JSF对通过关联组件和事件来构建页面而说是非常棒的,但是,与所 ... -
借助Ajax自动保存JSF表单之二
2009-09-19 12:53 1212创建和发送 Ajax 请求 submitFormData() ... -
借助 Ajax 自动保存 JSF 表单之一
2009-09-13 11:00 1097在客户端获取表单数据 本节将给出一个 JSF 表单,其数据通 ... -
基于AJAX和JSF打造丰富的互联网组件之Weblets篇
2009-09-04 15:08 936为了在JSF开发中联合使用AJAX和Mozilla XUL技术 ... -
JSF 2.0的一个AJAX例子
2009-08-21 10:49 2418首先创建一个ManagedBean用来记录我们提交按钮的数量。 ... -
JSF2.0的页面模版化
2009-08-15 10:28 1731本篇介绍可以与Tapestry相媲美的页面模版化定义。 我 ... -
Java Server Faces 2.0重要新功能以及相关改进简介
2009-08-01 10:00 1084JSF 2.0的最终规范也已经发布了有近一个月了,在近期试 ... -
JSF2: Ajax事件和错误
2009-07-09 09:13 1091JSF2的Ajax支持包含一个 ... -
Facelets是JSF更好的外衣
2009-06-16 15:53 1575是由 Sun 公司在 dev.java.net 上的一个开源项 ... -
JSF里自订验证器
2009-06-06 16:52 930您可以自订自己的验证器,所需要的是实作javax.faces. ...
相关推荐
开发者可以自定义组件,扩展功能,或者使用第三方组件库,如PrimeFaces、IceFaces等。 4. **表达式语言(EL)**:JSF与Java Expression Language紧密集成,允许在JSF页面中直接访问bean属性和方法。EL简化了数据...
在JSF 2.0中,虽然仍然没有内置的文件上传组件,但引入了更多的可扩展性,使得开发自定义组件变得更加容易。例如,可以利用Facelets和CDI(Contexts and Dependency Injection)来创建更加模块化和易于维护的组件。 ...
在这个例子中,当输入框失去焦点时,`message`组件会被更新以显示验证消息。 ### 七、开始使用JSF2.0 要开始使用JSF2.0,你需要设置一个兼容的Java EE服务器(如Tomcat、GlassFish),安装JSF库,然后创建一个基本...
2. **Facelets**:JSF 2.0引入了Facelets作为默认的视图层技术,它比JSP更简洁,支持模板和组件库的自定义。 3. **Managed Beans**:JSF中的Managed Beans是用于存储和管理业务逻辑的对象,可以通过注解(@Managed...
- JSF的核心是组件模型,包括各种预定义的UI组件,如按钮、文本框、表格等。 - 例如,`h:inputText`用于创建文本输入字段,`h:commandButton`用于提交表单。 - JSF还支持自定义组件,以满足特定需求。 3. **...
JSF还支持自定义组件,允许开发者扩展其功能以满足特定需求。 **Eclipse 3.5** 是一个流行的开源集成开发环境(IDE),特别适合Java开发。它提供了代码编辑、调试、版本控制和项目管理等功能。对于JSF开发,Eclipse...
JSF的核心是组件模型,允许开发者使用预定义的UI组件来构建用户界面。 ### JSF组件库 JSF提供了一系列内置的UI组件,如`h:inputText`(文本输入)、`h:commandButton`(命令按钮)和`h:outputText`(文本输出)。...
1. **组件模型**:JSF提供了一系列UI组件,如输入字段、按钮、表格等,这些组件可以直接在页面上使用,并可以通过属性和事件进行定制。每个组件都有一个与之对应的服务器端表示,处理用户的交互。 2. **生命周期**...
在上面的例子中,`#{user.name}`和`#{user.age}`是EL表达式,它们分别绑定了`User`类的`name`和`age`属性。`h:commandButton`触发`submit`方法。 最后,编写JavaBean的`submit`方法,处理提交的表单数据,并可能...
JSF的核心在于组件模型,它将UI元素(如按钮、文本框)与后端数据模型关联起来。框架包括三个主要部分:视图、模型和控制器。视图负责呈现用户界面,模型代表业务数据,而控制器则处理用户交互,协调视图和模型的...
通过学习和实践这些章节的源码,开发者可以掌握JSF的基本用法,了解如何创建组件化、可维护的Web应用,并逐渐进阶到更复杂的JSF特性,如自定义组件、CDI集成和高级数据展示。这不仅是JSF入门的坚实基础,也为后续的...
JSF允许开发者创建自定义组件以满足特定需求。通过扩展UIComponent类并实现必要的方法,你可以定义自己的组件行为和渲染方式。 ### 十、JSF与Spring集成 虽然JSF有自己的依赖注入机制,但也可以与Spring框架集成,...
书中会详细讲解如何在页面上使用这些组件,以及如何自定义组件以满足特定需求。 3. **EL表达式语言(Expression Language)**:JSF与EL紧密集成,EL允许开发者在JSP页面中引用JavaBean属性,实现数据绑定。书中将...
在JSF中实现分页,通常涉及到自定义标签库(Taglib),例如`pager-taglib-2.0.war`可能就是这样一个自定义标签库,它提供了一组用于创建分页UI的自定义组件。通过这些组件,开发者可以轻松地在页面间导航,并控制...
JSF2.0及以后的版本引入了许多改进,如FacesFlow、CDI集成和FacesContext API的增强,提高了开发效率和应用的灵活性。 **EJB3与JSF的整合** EJB3与JSF的整合使得企业级应用的开发更为高效。在JSF中,EJB3可以作为...
JavaServer Faces 1.2 是一个用于构建用户界面的Java EE组件模型。它简化了创建和维护Web应用程序的用户界面。JSF 1.2引入了一些关键改进,如增强的事件处理、新的UI组件、更强大的渲染库以及对Ajax的支持。在这个...
JSF的核心概念是组件模型,允许开发者通过拖放组件的方式构建页面,而无需深入HTML和JavaScript的细节。 在"JSF入门示例"中,我们可以通过`TestJSF`这个项目来学习JSF的基本用法和工作原理。首先,JSF应用通常由...
JavaServer Faces(JSF)是Java平台上用于构建交互式Web应用程序的一种组件模型。它提供了一种声明式的方式来创建用户界面,使得开发人员可以专注于业务逻辑,而不用过于关注底层的HTML和JavaScript细节。本资源...
例如,在上述例子中,`MyJsfAction.java`类中的`selectType`方法监听值的改变,并根据新值来更新模型状态。 JSF的生命周期包括多个阶段,如申请恢复、应用请求值、过程验证、更新模型值等,这些阶段提供了处理请求...
- **组件模型:**JSF 提供了一个强大的组件模型,简化了UI的创建过程。 - **生命周期管理:**JSF 对HTTP协议的理解使得它能够更好地管理请求和响应之间的交互。 #### 二、ArcGIS Server Java 开发基础 **2.1 ...