Extjs与XML的结合应用,组件化的web界面开发

使用JEE架构开发web应用程序的技术人员一定会关心并尽力提高web客户端界面的开发效率。由于web的日益广泛使用,越来越多的商业软件用户倾向采用支持HTTP协议的web客户端界面。原因是用户无需再安装客户端软件并可以随时随地通过互联网使用应用软件。

传统的桌面软件的界面开发都采用与开发工具整合(IDE)的界面组件设计器来完成软件界面的设计与实现,并已经有大量丰富的设计工具软件和资源可以使用。使开发人员的界面开发工作变得容易与高效。

Web界面开发有别于传统的桌面软件界面开发,其中涉及的标准与技术很多而且复杂,拿一个JEE的Web界面开发所使用到的技术为例,其中就包含以下的技术:

HTML/CSS, Javascript, DHTML, JSP/Servlet, XML, 不同浏览器的兼容性等,

这些技术本身都各不一样,需要全部掌握才可以熟练开发;而且,到目前为止,还没有那一个集成开发工具可以把这么多的技术成功融入到可以独立使用的组件里,象桌面开发那样。

不过使用AJAX技术的一些javascript框架的发展使得Web界面开发也可以组件化的需要可以得以满足了。这就是

Extjs与XML的结合应用,组件化的web界面开发

Extjs 是一款优秀的应用Ajax的javascript组件框架,这款框架是一个开源的框架,前身来自Yahoo的UI开源javascript库。而Extjs的开发者把它作进一步的发展,使得这个javascript的框架与UI的HTML界面元素结合并提供更丰富的组件化开发。要取得这个框架或者详细的文档资料,可以访问其网站 http://extjs.com

XML就不作详细介绍,这是一个互联网的信息媒介标准,并日渐大量使用在现在的信息系统开发中。这里要介绍的是如何使用XML作为数据的传输格式与组件化的Extjs框架结合使用,使得Web界面的开发效率、性能与功能都得到提高。

我们看一个十分普遍而简单的常见例子,开发一个城市名称下拉菜单

XML数据
=================================



1北京
2上海
3广州

Extjs 的数据存储
=================================


locationStore = new Ext.data.Store({
// load using HTTP
url: 'util.html',
baseParams: {act:'loadValueList', id:'location'},
reader: new Ext.data.XmlReader({
totalRecords: 'results',
record: 'listItem'
}, [
{name: 'key'},
{name: 'value'}
])
});

Extjs 的下拉菜单组件
=================================


localeCombo = new Ext.form.ComboBox({
mode:'local',
store: locationStore,
value: 'en',
hiddenName: 'locationId',
valueField: 'key',
displayField:'value',
width: 130,
triggerAction: 'all',
forceSelection:true
});

这是一个非常简单的例子,把城市的名称显示为一个下拉菜单,供用户在web的表单里选择。这个简单的例子是为了演示使用Extjs可以把一个下拉菜单的组件分为数据、模型和视图,跟Web的MVC框架是一个道理,不过这是在客户端。

这样做可能会使得客户端的组件开发变复杂了,但好处是可以把组件的显示与数据绑定分开。我们知道web界面的开发的一个最头痛的问题是如何使相同的一个组件在不同的浏览器下能够显示相同的特性,具有相同的行为。Extjs把数据绑定抽离出来,的确解决了这个问题,同时带来的好处是数据与组件显示的可重用。

这是开发专业的web界面与富客户端rich-client应用程序的必须。

Extjs目前支持两种格式的数据,JSON与XML,JSON是JavaScript Object Notation, 就是一种用于JavaScript脚本的数据传输处理格式。这种格式比XML简单,处理起来相对容易,也是Extjs推荐的。不过使用XML就更为标准。

发布基于OpenCms网站内容管理系统的网站

发布基于OpenCms网站内容管理系统的网站

http://www.tongtaipawn.com 广东省通泰典当行

该网站使用OpenCms7 开发, HTML采用div+css的代码布局以便更容易控制样式和对搜索引擎友好

网站提供了一个方便典当行发布黄金和白金的典当价与断当价格的工具,一个访客与典当行的问答论坛。这两个功能可以帮助典当行把最重要的业务信息及时地与用户通过互联网进行交流。