以下结合附图所示之最佳
实施例作进一步详述。
本发明服务器端应用为浏览器客户端提供用户界面的方法,特别是该服务器端应用采 用组件技术,即把用户界面元素封装成组件,把用户对界面元素的操作封装成组件事件, 来实现在浏览器上显示用户界面,该应用所执行的步骤如图1所示,包括:
i.接收浏览器提交的HTTP(超文本传输协议)请求110;
ii.处理报文生成参数列表120;
iii.从会话中获取当前窗口组件列表130;
iv.组件处理140;
v.生成XML(界面描述可扩展标记语言)文件150;
vi.通过XSL(可扩展标记语言样式单)转换输出HTML(超文本标记语言)文件160;
所述步骤iv如图2所示,包括如下子步骤:
a.判断是否还有未处理的组件141,是则进入下一步;否则处理结束退出;
b.判断参数中是否有该待处理组件的信息142,是则进入下一步;否则返回步骤a;
c.更新组件数据143;
d.判断该组件中是否有事件监听器144,是则进入下一步;否则返回步骤a;
e.触发组件事件200,返回步骤a。
本发明服务器端应用为浏览器客户端提供用户界面的方法,具体的组件情况说明如下: Component是所有组件的基类,定义了组件的基本方法。
方法: 名称 说明 attach 当控件加入到应用中被调用的方法,通常
覆盖该方法来进行控 件的初始化操作。 detach 当控件从应用中移除时被调用的方法。 getApplication 获取组件所在的应用。 getWindow 获取组件所在的窗口。 getCaption 获取组件的标题,组件的标题通常显示在组件的上方。 getIcon 获取组件的图标,组件的图标通常显示在组件标题的左边。 getStyle 获取组件的style(样式),部分组件支持不同的style。 setStyle 设置组件的style。 getUserData 获取组件的用户数据,用户数据是供程序使用的,同组件关联 Object对象。 setUserData 设置组件的用户数据。 isEnabled 判断组件是否为禁用模式。 setEnabled 设置组件的禁用模式。 isImmediate 判断组件是否为立即模式。立即模式的组件,当用户改变了组 件的属性后将立即触发事件。 isReadOnly 判断组件是否为只读模式,只读模式组件的属性不能够被修 改。 setReadOnly 设置组件的只读模式。 isVisible 判断组件是否可见。 setVisible 设置组件是否可见。 事件: 名称 说明 无
ComponentContainer是所有组件容器的基类,定义了组件容器的基本方法。组件容器是可 以包含其他组件的组件,最常用的就是各种Layout,Panel,TabSheet和Window。
方法: 名称 说明 addComponent 向容器中添加一个新的组件。 moveComponentsFrom 把其他组件容器中的组件移动到该容器中。 removeAllComponents 删除组件容器中的所有组件。 removeComponent 删除组件容器中的
指定组件。
事件: 名称 说明 ComponentAttachListener 当容器中添加新的组件触发的事件。 ComponentDetachListener 当容器中删除组件触发的事件。
AbstractField是所有输入域组件的基类,WebUI中的输入域组件包括:Button, DateField,Select,TextField,Table和Tree。
方法: 名称 说明 addValidator 添加一个Validator交验器到该组件,Validator可以 用于校验用户输入的合法性。 getValidators 获取该组件所有的Validator交验器。 removeValidator 删除一个组件的Validator交验器。 focus 设置当前控件为输入焦点。 getPropertyDataSource 获取组件的Property数据源。 setPropertyDataSource 设置组件的Property数据源。 getType 获取组件的值的类型。组件的值是Object对象,通 过getType方法来获取类型。 getValue 获取组件的值,通常是String类型。 setValue 设置组件的值。 isModified 判断组件的值是否被
修改过。 isValid 判断用户的输入是否有效。该函数调用组件所有的 Validator交验器进行校验。
事件: 名称 说明 ReadOnlyStatusChangeEvent 组件readonly(只读)状态转换触发的事件。 ValueChangeEvent 组件值改变触发的事件。该事件通常用于捕获用户 在Select,Table和Tree组件中进行的操作。
TextField文字输入框组件用于让用户输入字符串。TextField有单行和多行的模式。通常, TextField组件配合Validator使用用于检验用户输入信息的有效性。
方法: 名称 说明 getColumns 返回TextField输入框的列数。 setColumns 设置TextField输入框的列数。 getRows 返回TextField输入框的行数。 setRows 设置TextField输入框的行数。 setSecret 设置TextField输入框的密码模式。 isSecret 判断TextField输入框是否为密码模式。 setWordwrap 设置TextField输入框的自动折行。 isWordwrap 判断TextField输入框是否自动折行。
事件: 名称 说明 无
DataField组件让用户输入日期和时间。
方法: 名称 说明 getResolution 获取组件的时间
精度,有以下的值: RESOLUTION_DAY:精确到日 RESOLUTION_HOUR:精确到小时 RESOLUTION_MIN:精确到分钟 RESOLUTION_MONTH:精确到月 RESOLUTION_MSEC:精确到毫秒 RESOLUTION_SEC:精确到秒 RESOLUTION_YEAR:精确到年 setResolution 设置组件的时间精度。
事件: 名称 说明 无
Button组件用于显示一个按钮。
方法: 名称 说明 getConfirmnMessage 获取组件的确认提示信息。如果确认提示不为空, 那么当用户点击按钮时,会显示确认提示信息并要 求用户确认。 setConfirmMessage 设置组件的确认提示信息。 isSwitchMode 判断组件是否为
开关模式,开关模式的按钮现实为 一个checkbox(选取框)。 setSwitchMode 设置组件的开关模式。
事件: 名称 说明 无
Label组件用于显示一段文本。可以设置Label为XHTML内容模式来显示一段XHTML代码 (XHTML必须符合XML语法,否则会产生错误)。
方法: 名称 说明 getContentMode 获取组件的内容模式,有以下的选项: CONTENT_DEFAULT:默认纯文本模式 CONTENT_PREFORMATTED:预先格式化模式 CONTENT_TEXT:文本模式 CONTENT_UIDL:UIDL模式 CONTENT_XHTML:XHTML模式 CONTENT_XML:XML模式 setContentMode 设置组件的内容模式。 getPropertyDataSource 获取组件的Property数据源。 setPropertyDataSource 设置的Property数据源。
事件: 名称 说明 无
Link组件用于显示一个链接,可以连接到一个外部资源(例如:
网站)。
方法: 名称 说明 getResource 获取组件连接的资源,最常用的是 ExternalResource。 setResource 设置组件连接的资源。 getTargetBorder 获取连接窗口的边框类型。 setTargetBorder 设置连接窗口的边框类型。 getTargetHeight 获取连接窗口的高度。 setTargetHeight 设置连接窗口的高度。 getTargetName 获取连接窗口的名称。 setTargetName 设置连接窗口的名称。 getTargetWidth 获取连接窗口的宽度。 setTargetWidth 设置连接窗口的宽度。
事件: 名称 说明 无
Select组件用于让用户来选择一个选项。
方法: 名称 说明 getContainerDataSource 获取组件的Container数据源。 setContainerDataSource 设置组件的Container数据源。 addItem 添加一个选项。 getItemIds 获取所有的选项。 getItem 获取指定的选项。 removeItem 删除一个选项。 removeAllItems 删除所有的选项。 getItemCaption 获取选项的标题。 setItemCaption 设置选项的标题。 getItemIcon 获取选项的图标。 setItemIcon 设置选项的图标。 isMultiSelect 判断组件是否为多选模式。 setMultiSelect 设置组件的多选模式。 isNewItemsAllowed 判断组件是否允许添加新的选项。 setNewItemsAllowed 设置组件是否允许添加新的选项。 isSelected 判断指定的选项是否被选中。 select 选中指定的选项。 unselect 不选中指定的选项。 size 获取选项的个数。
事件: 名称 说明 无
Table组件用于显示数据记录列表。
方法: 名称 说明 addActionHandler 添加记录操作处理程序,可以为记录设置子操作。 removeActionHandler 删除记录操作处理程序。 getColumnAlignments 获取列的对齐方式。 setColumnAlignments 设置列的对齐方式。 getColumnHeaders 获取列的标题。 setColumnHeaders 设置列的标题。 getColumnIcons 获取列的图标。 setColumnIcons 设置列的图标。 getCurrentPageFirstItemId 获取当前页的第一项。 setCurrentPageFirstItemId 设置当前页的第一项。 getCurrentPageFirstItemIndex 获取当前页的第一项的索引。 setCurrentPageFirstItemIndex 设置当前页的第一项的索引。 isSelectable 判断当前的表格中的项是否可以选择。 setSelectable 设置当前的表格中的项是否可以选择。 refreshCurrentPage 刷新当前页的数据。 setPageLength 设置每页显示的记录数。
事件: 名称 说明 无
Tree组件用于显示一个树型视图。
方法: 名称 说明 addActionHandler 添加
节点操作处理程序,可以为节点设置子操作。 removeActionHandler 删除节点操作处理程序。 areChildrenAllowed 判断某个节点是否允许拥有
子节点。 setChildrenAllowed 设置某个节点是否允许拥有子节点。 collapseItem 关闭树的节点。 collapseItemsRecursively 递归关闭树的节点。 expandItem 展开树的节点。 expandItemsRecursively 递归展开树的节点。 getChildren 获取指定节点的子节点。 getParent 获取指定节点的
父节点。 setParent 设置指定节点的父节点。 hasChildren 判断指定节点是否包含子节点。 isExpanded 判断指定节点是否展开。 isRoot 判断指定节点是否为根节点。 rootItemIds 获取树的所有子节点。 isSelectable 判断树是否可以选择。 setSelectable 设置树是否可以选择。
事件: 名称 说明 CollapseListener 展开树的节点时触发的事件。 ExpandListener 关闭树的节点时触发的事件。
MainMenu用于显示一个应用的主菜单。可以用CIResource工具类来从一个xml资源文件中载入菜单。
方法: 名称 说明 addMenuItem 添加一个菜单项。
事件: 名称 说明 CommandListener 用户选择菜单项触发的事件。
Toolbar组件用于显示一个工具条。可以用CIResource工具类来从一个xml资源文件中载入工具条。
方法: 名称 说明 addToolbarBar 添加添加一个工具条。 getToolbarBar 获取指定的工具条。 getToolbarBars 获取所有的工具条。 addButton 在指定的工具条上添加一个按钮。 addSeparator 在指定的工具条上添加一个分隔条。 getToolbarWidth 获取组件的宽度。 setToolbarWidth 设置组件的宽度。
事件: 名称 说明 CommandListener 用户选择菜单项触发的事件。
WebEditor组件用于在窗口中使用一个
所见即所得的HTML编辑器。
方法: 名称 说明 getValue 获取编辑器中的内容。 setValue 设置编辑器中的内容。
事件: 名称 说明 无
Calendar组件用于显示一个日程安排的日历。
方法: 名称 说明 getDate 获取日历的当前日期。 setDate 设置日历的当前日期。 getTasksDataSource 获取日历的日程数据源。 setTasksDataSource 设置日历的日程数据源。 getTasksRows 获取每日任务显示的条数。 setTasksRows 设置每日任务显示的条数。 getTaskTextLimt 获取任务显示的宽度。 setTaskTextLimt 设置任务显示的宽度。
事件: 名称 说明 CalenderListener 当用户点击了日程中的任务触发的事件。
OrderedLayout布局是将组件横向或纵向依次排列的布局。
方法: 名称 说明 getOrientation 获取OrderedLayout布局的方向,有以下值: ORIENTATION_HORIZONTAL:横向 ORIENTATION_VERTICAL:纵向 setOrientation 设置OrderedLayout布局的方向。
GridLayout布局是将组件放置在网格中的布局。每个组件可以占据布局中的一个或多个连续的网格。
方法; 名称 说明 getCursorX 获取当前游标的行。 getCursorY 获取当前游标的列。 newLine 将当前游标移到下一行。 space 将当前游标移到下一列。 setWidth 设置布局的列数。 getWidth 获取布局的列数。 setHeight 设置布局的行数。 getHeight 获取布局的行数。
AlignmentLayout布局可以设置宽度,高度和对其方式,通常嵌套在其他的布局中使用。
方法: 名称 说明 getAlign 获取横向对齐模式,有以下的值: ALIGN_CENTER:居中对齐 ALIGN_LEFT:左对齐 ALIGN_RIGHT:右对齐 setAlign 设置横向对齐模式。 getValign 获取纵向对齐模式,有以下的值: VALIGN_BASELINE:基线对齐 VALIGN_BOTTOM:底线对齐 VALIGN_MIDDLE:中线对齐 VALIGN_TOP:顶线对齐 setValign 设置纵向对齐模式。
Panel组件拥有标题和边框,通常用于组合一系列功能相关的组件。
TabSheet用于显示一个属性页。
方法: 名称 说明 addTab 添加一个属性页。 getSelectedTab 获取当前选中的属性页。 setSelectedTab 设置当前选中的属性页。 getTabIeon 获取属性页的图标。 setTabIcon 设置属性页的图标。 getTabCaption 获取属性页的标题。 setTabCaption 设置属性页的标题。
事件: 名称 说明 SelectedTabChangeListener 用户切换属性页触发的事件。
Embedded组件用于在窗口中嵌入图片或对象。
方法: 名称 说明 getSouree 获取图片的资源。 setSource 设置图片的资源。
事件: 名称 说明 无
Upload组件用于上传文件。
方法: 名称 说明 setReceiver 设置 getReceiver
事件: 名称 说明 FailedListener 上传文件失败触发的事件。 FinishedListener 上传文件结束触发的事件。 SueceededListener 上传文件成功触发的事件。
HtmlSegment用于在窗口中直接输出HTML代码片断。
方法: 名称 说明 setValue 设置HTML代码片断的内容。 getValue 获取HTML代码片断的内容。
事件: 名称 说明 无
以下通过几个具体的界面生成过程,对本发明方法的组件技术予以进一步说明,这些过 程可以应用于各种基于Java Servlet(服务器端小程序)技术的B/S结构应用程序开发。
例一:
界面效果如图8所示,其生成过程如图5所示,包括的步骤有:创建日期输入域组件; 添加日期输入域组件事件监听器;创建标签组件;获取用户选择的日期;触发日期输入域 组件事件;设置标签组件显示用户所选择的日期。
例二:
界面效果如图9所示,其生成过程如图6所示,包括的步骤有:获取应用资源;从资源 中载入菜单;从资源中工具条;创建标签组件;获取用户选择的菜单或工具条;触发命令 事件;设置标签组件显示用户所选择的命令。
例三:
界面效果如图10所示,其生成过程如图7所示,包括的步骤有:创建网页编辑器组件; 创建按钮组件;添加按钮组件事件监听器;创建HTML
片段组件;获取用户对网页的设计和 对按钮的点击;触发按钮组件事件;设置HTML片段组件,显示用户所设计的网页。
在本发明方法的组件处理过程中产生的触发组件事件,会引发服务器端应用进入组件 处理,该过程所述应用执行如下步骤:
a.判断事件处理过程是否用BLS(业务逻辑脚本)编写,是则进入下一步;否则,
调用用户的事件处理过程,结束退出;
b.调用脚本系统的事件处理过程;
c.判断该事件的脚本是否在脚本系统中注册,是则进入下一步;否则,结束退出;
d.调用脚本;
e.判断是否有异常产生,是则进入下一步,否则,结束退出;
g.处理异常,结束退出;
本发明方法可以通过构建一个解释器来利用XUS(可扩展标记语言用户截面定义脚本) 源文件解释生成有关的组件,这样用户在设计组件时,就只需编写XUS文件,大大简化了 用户界面的生成过程,在该解释过程中,解释器所执行的步骤包括:
a.解析源文件,构造元素树;
b.判断是否有未处理的元素,是则进入下一步;否则,添加创建的组件到脚本变量 环境,处理结束退出;
c.根据元素所属的类型,创建该类型,然后进入下一步;即:是资源,则创建资源; 是变量,则创建变量;是函数,则创建函数;是脚本片段,则创建脚本片段;如 果是界面对象,处理完该对象进入下一步,所述界面对象的处理包括步骤:
1.断是否有未处理的子元素,是则进入下一步,否则处理结束,退出;
2.创建子元素对应的组件,返回步骤1;
d.保存创建的对象到列表,返回步骤b。
本发明方法,可构建一用户界面
风格管理程序模
块,其功能是从各种数据源载入用户 界面风格配方,该程序模块应用于通过XSL(可扩展标记语言样式单)转换输出HTML(超 文本标记语言)文件的过程中,以生成应用的不同风格操作界面。这样,无需修改任何应 用程序的情况下:
1.可以生成不同风格的操作界面,例如:Windows风格操作界面,Mac风格操作界面等。
2.可以生成对于不同终端的支持,除了可以支持IE,Netscape/Mozilla等PC浏览器外, 还可以通过特定的XSL生成支持WAP手机的WML用户界面。
本发明方法,使用一种XUS(XML User interface Script)XML用户界面脚本语言, 可以通过编写一个XML文件来制作出B/S结构应用的用户界面。使用支持XUS语言的集成 开发环境,编程者就能够
可视化设计用户界面,提高开发效率。使用XUS来开发用户界面 还有一个非常显著的优势在于可以在应用发布后仅修改应用的XUS资源,而无需重新编写 程序就能够完成对用户界面的重新定制。
本发明方法,使用一种BLS(业务逻辑脚本)语言。BLS语言是一种类Java语法的脚本 语言,可以用于在XUS文件中来处理用户操作了界面组件后产生的事件。使用BLS语言, 可以实现在应用的发布后通过修改脚本来订制应用的业务逻辑而不必重新编译源程序。BLS 和XUS一起为应用系统的灵活定制提供了一种非常好的机制。
采用本发明方法,能够使
软件开发分工更趋于明确和合理:
1.精通技术细节的高级程序员开发各种界面组件。
2.熟悉业务逻辑的程序员选取界面组件来处理业务逻辑,而不必了解界面组件内部实现的 复杂技术。
3.美术人员独立编写Theme(界面风格配方),而不会涉及到任何程序。
采用本发明方法,能够大幅度提高基于Java的B/S结构应用程序用户界面的开发效率 和
质量。