在阅读本文之前，你必须熟悉这两个流行的web开发框架-Extjs和JSF。熟悉他们基本的开发技术及基本原理。本文将简要介绍包装的过程及思想，以及Fence包装时的实例。
一、阅读本文你所需要了解的知识
1、ExtJS组件的概念、书写方式、与服务端交互方式、组件组合方式等；
2、JSF1.2+的技术原理、生命周期过程、组件概念及渲染器的概念；
3、熟悉Http，ajax的基本知识，基本概念及使用方法；
4、你所使用的JDK必须在1.5+，并熟悉其一些新特性，如泛型、元数据、注释等；
在以上技术的基础上，我们开始吧！
二、将Ext组件转化成JSF的组件java类
Ext是一套完整的API，组件全面丰富，如果你要一个一个改成JSF组件的话，估计你会累的半死，再加上ExtApi的不断更新，你的组件类将无法保证
与Ext一致。所以必须要有工具自动生成JSF组件类。这里生成的方式可以就多样了，比喻使用dom4j解析Api文档等多中方式，本人是就地取材，使用
Ext的Xtemplate的功能生成的，呵呵，此处不赘述了。
所有的JSF自定义组件都是继承自UIComponentBase,由于我们都是输出组件，所以直接继承UIOutPut组件，以Menu的Textitem为例，生成完整的代码如下：
从代码中我们可以看出，我在生成组件的时候，放弃了Ext api中的方法和事件，只包含了config，并且生成的时候完全遵循Ext的继承逻辑结构，这样组件的属性在JSF类中将与Ext完全一致。
package ext.menu;
import javax.el.ValueExpression;
import javax.faces.context.FacesContext;
import ext.annotation.InstanceOf;
import ext.annotation.ParseConfigMode;
import ext.annotation.PersistenceMode;
import ext.annotation.ReferenceMode;
import ext.annotation.XType;
/**
*Note:This java code is auto generated by abner,do not edit it. Adds a static
* text string to a menu, usually used as either a heading or group separator.
*/
@XType("menutextitem") //ext bug
@InstanceOf("Ext.menu.TextItem")
@ParseConfigMode(name = "items", pmode = PersistenceMode.ParentProperty, rmode = ReferenceMode.Config)
public class TextItem extends BaseItem{
public static final String COMPONENT_TYPE = "Ext.menu.TextItem";
public static final String COMPONENT_FAMILY = "Ext.menu.TextItem";
/**
*
* Create a new {@link TextItem} instance with default property values.
*
*/
public TextItem() {
super();
setRendererType(COMPONENT_FAMILY);
}
public String getFamily() {
return (COMPONENT_FAMILY);
}
private Boolean hideOnClick;
/**
* True to hide the containing menu after this itemis clicked (defaults to
* false)
*/
public Boolean getHideOnClick() {
if (null != this.hideOnClick) {
return this.hideOnClick;
}
ValueExpression _ve = getValueExpression("hideOnClick");
if (_ve != null) {
return (Boolean) _ve.getValue(getFacesContext().getELContext());
} else {
return null;
}
}
/**
*
* Set the value of the hideOnClick property.
*
*/
public void setHideOnClick(Boolean hideOnClick) {
this.hideOnClick = hideOnClick;
this.handleConfig("hideOnClick", hideOnClick);
}
private String itemCls;
/**
* The default CSS class to use for text items(defaults to "x-menu-text")
*/
public String getItemCls() {
if (null != this.itemCls) {
return this.itemCls;
}
ValueExpression _ve = getValueExpression("itemCls");
if (_ve != null) {
return (String) _ve.getValue(getFacesContext().getELContext());
} else {
return null;
}
}
/**
*
* Set the value of the itemCls property.
*
*/
public void setItemCls(String itemCls) {
this.itemCls = itemCls;
this.handleConfig("itemCls", itemCls);
}
private String text;
/**
* The text to display for this item (defaults to'')
*/
public String getText() {
if (null != this.text) {
return this.text;
}
ValueExpression _ve = getValueExpression("text");
if (_ve != null) {
return (String) _ve.getValue(getFacesContext().getELContext());
} else {
return null;
}
}
/**
*
* Set the value of the text property.
*
*/
public void setText(String text) {
this.text = text;
this.handleConfig("text", text);
}
private Object[] _values;
public Object saveState(FacesContext _context) {
if (_values == null) {
_values = new Object[4];
}
_values[0] = super.saveState(_context);
_values[1] = hideOnClick;
_values[2] = itemCls;
_values[3] = text;
return _values;
}
public void restoreState(FacesContext _context, Object _state) {
_values = (Object[]) _state;
super.restoreState(_context, _values[0]);
this.hideOnClick = (Boolean) _values[1];
this.handleConfig("hideOnClick", this.hideOnClick);
this.itemCls = (String) _values[2];
this.handleConfig("itemCls", this.itemCls);
this.text = (String) _values[3];
this.handleConfig("text", this.text);
}
}
三、渲染组件
从上面的代码中有个关键的地方在于类的注释，如下：
@XType("menutextitem") //ext bug
@InstanceOf("Ext.menu.TextItem")
@ParseConfigMode(name = "items", pmode = PersistenceMode.ParentProperty, rmode = ReferenceMode.Config)
通过JSF配置组件的renderer之后，在渲染器中就可以找到此组件的元数据，一看即明白：InstanceOf代表组件渲染时候的实例类，如此组件
渲染后就是 var j_id = new
Ext.menu.TextItem({....});当然所有的属性就会变成ext的config。在这个过程中将会有一些复杂的处理，比喻
config类型。生成后模式，这个就主要靠ParseConfigMode来控制了。当然无法一一将其细节写出来，到时候发布源码了大家自然可以看到。
四、处理特殊重要的组件
在Ext中主要的容器是panel及其子类，数据输出主要靠Form中的field和store,所以对这些组件当然有各自的渲染器。例如Field的渲
染，要保证field在JSF中生效，则必须实现ValueHolder接口、要保证按钮与JSF整合，则必须要实现ActionSource2接口
（1.2）等，如果你熟悉JSF组件的开发，此处就不再赘述，我们主要的是渲染Ext组件。
五、Ajax的处理
在Ext中formpanel及store主要是靠ajax来与服务端交互数据，所以支持ajax当然是最重要的。本然在渲染处理ajax时，完全遵循
Ext的api，在渲染过程中给按钮动态添加事件即可，在事件中带上参数，如Ext_ajax表示这个请求是ajax请求，则在后台即通过不同的方式处
理，此处就是用到JSF的生命周期了，在ViewHanler及ViewRoot中（都支持装饰模式）分别都拦截Ajax请求，这样你就是随意输出想输出
的数据结构，本人多数采用Xml格式输出数据，当然有些要与Ext一致，如Store有时是直接输出的数据Json格式。如果按钮渲染的重要代码：
.......................................................................代码片段
if (this.isTypeOf(commandBtn, "submit")) {
Boolean stSubmit = form.getStandardSubmit();
if (stSubmit != null && stSubmit.booleanValue()) {
String hiddenId = form.getClientId(context) + ExtFormPanelRenderer.EVENT_SUFFIX;
String funBody = hiddenId + ".setValue(src.getId());";
sb.append(funBody);
hiddenId = form.getClientId(context) + ExtFormPanelRenderer.VIEWSTATE_SUFFIX;
funBody = hiddenId + ".setValue(Fence.getViewState());";
sb.append(funBody);
}
sb.append(form.getVar());
sb.append(".getForm().submit(");
if (stSubmit == null || !stSubmit.booleanValue()) {
sb.append(encodeFormCommandOptions(context, form,
commandBtn, "submit"));
}
sb.append(");");
} else if (this.isTypeOf(commandBtn, "load")) {
sb.append(form.getVar());
sb.append(".getForm().load(");
sb.append(encodeFormCommandOptions(context, form, commandBtn,"load"));
sb.append(");");
} else if (this.isTypeOf(commandBtn, "reset")) {
sb.append(form.getVar());
sb.append(".getForm().reset();");
}
............................
.................
if (action != null) {
if (action.getFailure() == null)
action.setFailure(JSUtils.ActionFailureCallBack);
if (action.getSuccess() == null)
action.setSuccess(JSUtils.ActionSuccessCallBack);
if (action.getUrl() == null)
action.setUrl(Ext.PREFIX_RAW_VALUE + ScriptManager.AJAX_PATH);
if (action.getWaitMsg() == null)
action.setWaitMsg("Loading...");
params.putAll(ExtBasicRenderer.getParamList(action));
} else {
action = new Submit();
action.setFailure(JSUtils.ActionFailureCallBack);
action.setSuccess(JSUtils.ActionSuccessCallBack);
action.setUrl(Ext.PREFIX_RAW_VALUE + ScriptManager.AJAX_PATH);
action.setWaitMsg("Loading...");
}
...................................................
六、如何显示界面
按照传统的Ext写页面的方式，每个页面包含一个或者多个JS，然后在Js文件中写Ext脚本。而包装成JSF组件之后，这部分工作已经交由JSF框架来
处理了，将所有渲染的组件生成的JS通过一个对象存储，在页面渲染时，作为一个JS资源嵌套在页面中，这样请求的资源输出页面生成的脚本文件即可。
<script type="text/javascript" src="/extjs/faces/abner.fence.script.js?st=1261213194245"><!--{12612165030800}-->script>
在生成的页面有这么一句，此处及包含整个页面生成的所有脚本，而脚本是通过一个Servlet输出的。到此从页面书写
一个JSF组件标签到最终生成页面的过程及完成！
包装的效果可以查看本版块帖子：http://www.iteye.com/topic/548626
博客地址：http://www.5base.net/10/section.aspx/7
分享到：
相关推荐
【Ext组件转化成JSF】是指将基于ExtJS的组件转换为JavaServer Faces (JSF)框架中的组件，以便在JSF应用中使用。ExtJS是一个强大的JavaScript库，提供了丰富的用户界面组件，而JSF是一种Java Web应用程序开发框架，...
- 在开发ExtJS应用时，遵循最佳实践至关重要，例如使用SASS预处理器进行样式管理，使用CMD进行模块化构建，以及遵循组件设计原则，使代码可复用且易于维护。 - 保持代码结构清晰，合理组织目录结构，以及使用命名...
在EXTJS这个强大的JavaScript框架中，时间日期选择组件是一个至关重要的元素，它为用户提供了方便的方式来选择和输入日期和时间。这些组件使得Web应用程序能够更好地处理时间相关的数据输入，提高用户体验，同时也...
EXTJS高级程序设计源代码6-4 EXTJS高级程序设计源代码6-4
EXTJS高级程序设计源代码6-3 EXTJS高级程序设计源代码6-3
本文将重点探讨ExtJS中组件扩展的两种主要层次及其实践要点。 #### 二、常见错误及原因分析 在使用ExtJS进行组件扩展时，开发人员常常会遇到一些典型的问题： 1. **没有封装**：这通常是由于开发者对ExtJS机制...
通过研究和理解"ExtJS日期多选组件源码"，开发者可以深入学习ExtJS组件设计、事件处理、数据绑定等核心概念，并能进一步定制适合自己项目需求的日期选择组件。这样的组件对于提高开发效率和用户体验具有积极的意义。
在本篇文章中，我们将深入探讨如何在实际项目中使用ExtJS 3.1的组件。 首先，`css`目录包含了ExtJS 3.1的样式文件。这些CSS文件用于定义组件的外观和布局，包括颜色、字体、边距、边框等。在使用过程中，我们需要...
**ExtJS 3.0 常用组件介绍** ExtJS 是一款强大的JavaScript库，用于构建富客户端Web应用。在3.0版本中，它提供了一系列丰富的组件，这些组件可以帮助开发者构建功能丰富的用户界面。以下是一些ExtJS 3.0中的常用...
"Extjs树分页组件扩展"就是为了解决这一问题而设计的，它通过扩展TreeLoader和PagingToolbar，实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...
EXTJS高级程序设计源代码6-2 EXTJS高级程序设计源代码6-2
本篇文章将详细解析EXTJS中的上传组件及其示例，帮助开发者更好地理解和使用这一功能。 EXTJS 的上传组件通常通过`Ext.form.field.File`（也称为FileField或UploadField）实现。这个组件提供了一个表单字段，用户...
本文将围绕“Extjs自定义组件—下拉树”这一主题，详细阐述其实现原理、使用方法以及核心代码分析。 #### 一、理解下拉树组件 下拉树组件结合了下拉框（ComboBox）与树形结构（Tree），旨在提供一种直观、高效的...
10. **文档和支持**：ExtJS社区提供了详尽的文档和论坛支持，遇到问题时可以查阅官方文档或向社区求助，以解决在使用设计器过程中遇到的任何问题。 总的来说，ExtJS界面设计器是ExtJS开发者的强大辅助工具，它通过...
extjs入门学习，各个组件的使用，包括Observable、Observable、BoxComponent、Container、Panel、Viewport及Window...
漂亮的Extjs图片展示组件实例，类似于幻灯片，可直接拿去用，非常不错的哦
**ExtJS-3.4.0系列目录** 在ExtJS框架中，3.4.0版本提供了丰富的组件和功能，适合构建复杂的Web应用程序。以下是对标题和描述中提及的几个关键知识点的详细解释： 1. **Ext JS 下载及配置** 在开始使用Ext JS前，...