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就更为标准。

XML数据库开发网站的优缺点

使用XML数据库开发网站是一个很新的技术,需要掌握XML/XSL/XQuery/XUpdate等技术。
而且,由于基于XML数据库应用开发的例子还不多,因此,需要程序员做的工作很多。

与其他网站开发技术相比较,

[优点]
能够更接近业务的逻辑,使用树形结构组织网站的各种数据和多媒体资源
半结构化的XML数据可以比表格更加灵活,甚至无需定义字段属性,提高开发速度和伸缩性
强大的XQuery查询语言配合XSL可以产生任何你期望的输出(XML/HTML/WML/PDF等等)
XML数据本身也是一种文档(document),可以直接阅读和编辑,日常的数据维护可以很灵活(当然,某些人可能很反对这种既是数据又是文档的做法)
XML已经成为互联网的信息媒介,跨平台,被各种系统支持,对网站与外部系统的整合很有帮助

[缺点]
新技术,很多标准在制定中,技术派系众多
数据库的成熟度还有待提高,性能的考验需要时间
作为未来Web技术的主要基石,XML数据库已经成为众多数据库厂商的制胜法宝。

XML, 把文档数据化的魔棒

我给大家介绍一个应用XML的实践例子,供大家参考和讨论.
XML作为计算机处理文本文档(通常是指供人阅读的文本)的有力工具,它的”神奇”在于能够使计算机”读懂”文本文档.就拿以下一则我在地铁新快线杂志看到的一条信息为例:
——————————————————————————–
自 驾车到南沙客运港路线一:广州大道?洛溪桥?迎宾路–南沙港–沙湾大桥?南沙大道路线二:天河?华南快速干线?迎宾路?沙湾大桥?南沙大道?南沙港停 车:设有1000和500平方米两个停车场,费用预计5?10元/次,有夜保。航线/航班:除每天与香港对开12个白天航班外,还将加设2个夜间航班。同 时考虑开通南沙至澳门、香港新机场、香港迪斯尼乐园等航线。耗时(单程):约两小时。费用(单程):约120元。优点:耗时少、费用低,上船后有港币兑换 处,可直达中港城购物中心。中心内设中、西餐厅,服装、手表、通讯器材、化妆品、摄影器材、金饰,国际知名品牌一应俱全。缺点:公交配套未完善,必须自驾 车
——————————————————————————-
很明显,这是一则简单的旅游指引,游客可以很容易获得相关的信息数据, 包括线路一,线路二,停车,行程时间和优缺点.因为我们具有阅读的能力.
但是,计算机面对这样的文本却很笨.例如我想让机器找出线路一有几个站点和站点中是否有南沙港,你认为它能为你做吗?很明显,计算机一筹莫展,它除了告诉你文件大小,创建日期和属性外,没有更多的其他数据信息.而这就连我小学毕业的姑妈也能轻易回答.
原因很简单,
计算机需要你首先告诉它如何处理这份文本,才可以回答你的要求.(虽然我们都承认计算机发展惊人,但它处理数据的能力还是很幼稚)
现在,我使用标记,也就是XML,来帮助它”读懂”这份文本.改变如下:
—————————————————————————-
自驾车到南沙客运港路线一:广州大道?洛溪桥?迎宾路–南沙港–沙湾大桥?南沙大道路线二:天河?华南快速干线?迎宾路?沙湾大桥?南沙大道?南沙港停车:设有1000和500平方米两个停车场,费用预计5?10元/次,有夜保。航线/航班:除每天与香港对开12个白天航班外,还将加设2 个夜间航班。同时考虑开通南沙至澳门、香港新机场、香港迪斯尼乐园等航线。耗时(单程):约两小时。费用(单程):约120元。优点:耗时少、费用低,上 船后有港币兑换处,可直达中港城购物中心。中心内设中、西餐厅,服装、手表、通讯器材、化妆品、摄影器材、金饰,国际知名品牌一应俱全。缺点:公交配套未 完善,必须自驾车
——————————————————————————–

以上的修改并没有改变文档的结构和内容,只是增加了标记。之后,你再把它存成XML文档,就完成文档加工.你可以使用XML搜索引擎,来处理你的要求啦.我使用一个自己编写的XML工具来处理这些信息,使用XPath查询如下:

[XDS cmd]>search -c /tmp -d test01 -xl /旅游指引/路线 -xp //路线[text()=”路线一:”]/站点广州大道洛溪桥迎宾路南沙港沙湾大桥南沙大道
^—-找到了线路一有几个站点
[XDS cmd]>search -c /tmp -d test01 -xl /旅游指引/路线 -xp //路线[text()=”路线一:”]/站点[text()=”南沙港”]南沙港
^—-找到了南沙港当然这只是一个简单的例子,使大家可以在实际商业应用上使用XML作更有意义的事。

我有理由相信XML是一根未知的魔棒。也希望我们能从实际应用出发来激发自己的创造力。为商业发展服务。