浪潮 Loushang5 WEB组件 开发指南

浪潮Loushang5 WEB组件开发指南

文档状态：发布版

山东浪潮齐鲁软件产业股份有限公司

版权声明

《浪潮Loushang5 WEB组件开发指南》的版权归山东浪潮齐鲁软件产业股份有限公司所有。未经山东浪潮齐鲁软件产业股份有限公司的书面准许，不得将本文档的任何部分以任何形式、采用任何手段（电子的或机械的，包括照相复制或录制）、或为任何目的，进行复制或扩散。

Copyright? 2009-2010 山东浪潮齐鲁软件产业股份有限公司。版权所有，翻制必究。

前言

美观的界面，统一的风格，丰富的用户体验是每一款优秀的软件产品所追求的。完善的客户端可以大大提高用户对软件的满意程度。近年来，与客户端相关的技术不断发展，从最早的瘦客户端模式，到后来的胖客户端，再到最近流行的富客户端，软件的客户端越来越被人们重视，在软件产品中的比重也越来越大。但客户端的开发效率一直被开发人员所担忧。我们浪潮Loushang5 Web组件经过不断创新，利用领先的技术，开发出成熟完善的客户端解决方案。可以非常轻松的搭建出令人耳目一新的，具有RIA (Rich Internet Application) 特征的Web应用界面。

阅读指南

【文档目标】

本文档主要针对开发人员，是为了方便开发人员了解和查找标签属性，方便开发而编写的开发指南。

【阅读对象】

该文档适用于浪潮Loushang5平台的开发人员，作为开发人员前台开发的参考资料。

【文档构成】

本手册基本上由以下部分组成：

第一章，“引言”，介绍了Loushang5 Web组件的背景和基本组成。

第二章，“配置”，介绍了使用Loushang5 Web组件的前提配置。

第三章，“ViewPort组件”，介绍了Loushang5 Web组件中ViewPort容器的示例和主要属性说明。

第四章，“Panel组件”，介绍了Loushang5 Web组件中的最基本的容器Panel。

第五章，“布局组件”，介绍了绝对布局、相对布局、东西南北的border 布局、列布局和自适应布局等。

第六章，“窗口组件”，介绍了Loushang5 Web组件中窗口组件的示例和主要属性说明。

第七章，“Html组件”，介绍了基本的HTML在Loushang5 Web组件中的使用。

第八章，“网格组件”，介绍了查询显示grid和编辑grid两种grid的使用示例和属性说明。

第九章，“树形组件”，介绍了树形组件的示例和对应多个标签的使用。

第十章，“日期组件”，介绍了普通的年月日组件和带有十分的年月日组件的使用。

第十一章，“模型组件”，介绍了模型标签的使用和标签属性的说明。

第十二章，“查询组件”，介绍了查询弹出框的示例和标签说明。

第十三章，“通用帮助”，介绍了通用帮助的使用。

第十四章，“按钮导航条”，介绍了按钮导航条的按钮使用和属性说明。

第十五章，“双边栏组件”，介绍了双边栏组件的使用。

第十六章，“Excel标签”，介绍了Excel导出自定义的标签说明。

【文档约定】

本文档遵循如下约定：

【注意】的意思是请读者注意那些需要注意的事项。

目录

1引言 (1)

1.1概述 (1)

1.2词汇表 (1)

2配置 (2)

3ViewPort组件 (3)

3.1简述 (3)

3.2示例 (3)

3.3主要属性 (4)

4Panel组件 (5)

4.1简述 (5)

4.2示例 (5)

4.3主要属性 (6)

5布局组件 (8)

5.1绝对(Absolute)布局 (8)

5.2手风琴(Accordion)布局 (9)

5.3相对(Anchor)布局 (10)

5.4东西南北中(Border)布局 (11)

5.5选项卡(TabPanel)布局 (13)

5.6列(Column)布局 (15)

5.7自适应(Fit)布局 (16)

6窗口(Window)组件 (18)

6.1使用说明 (18)

6.2主要属性 (19)

7Html组件 (22)

8网格(Grid)组件 (23)

8.1GridPanel (23)

8.1.1示例 (23)

8.1.2主要属性 (24)

8.1.3和GridPanel相关的标签 (26)

8.2.1示例 (28)

8.2.2主要属性 (29)

8.2.3和EditGridPanel相关的标签 (31)

9树形组件 (36)

9.1示例 (36)

9.2Tree标签 (39)

9.3TreeDataSet标签 (40)

9.4TreeLoader标签 (40)

9.5TreeBaseParam标签 (42)

9.6TreeRecord标签 (42)

9.7TreeNodeModel标签 (43)

9.8TreeNodeAttribute标签 (43)

9.9RightMouseMenu标签 (45)

9.10Listeners标签和Listener标签 (45)

9.11MenuItem标签 (45)

10日期组件 (47)

10.1日期组件 (47)

10.1.1示例 (47)

10.1.2属性 (47)

10.2带时间的日期组件 (48)

10.2.1示例 (48)

10.2.2属性 (48)

11数据模型组件 (50)

11.1顶级标签Datasets (50)

11.2数据模型Dataset (50)

11.2.1属性 (50)

11.2.2isGroup示例 (52)

11.3Record标签 (54)

11.4field标签 (54)

12查询组件 (55)

12.1QueryWindow (55)

12.2Conditions标签 (55)

12.3QueryText标签 (55)

12.4QueryDate标签 (55)

12.5QueryNumber标签 (56)

12.6QueryComboBox标签 (56)

13通用帮助 (58)

13.1GridHelpWindow (58)

13.2GridHelpColums标签 (58)

13.3GridHelpColumn标签 (58)

13.4TextHelpField标签 (58)

13.5QueryHelpField标签 (59)

13.6示例 (59)

14按钮导航条(DataPilot) (61)

14.1示例 (61)

14.2DataPilot属性 (61)

14.3DPButton属性 (61)

15双栏边框组件 (63)

15.1示例 (63)

15.1.1定义双边栏 (63)

15.1.2初始化 (66)

15.1.3定义界面 (66)

15.2属性说明 (67)

15.3主要方法 (68)

16Excel标签 (69)

16.1Tablelist标签 (69)

16.2Table标签 (69)

16.3Tr标签 (70)

16.4Td标签 (70)

16.5Font标签 (70)

16.6颜色列表 (71)

16.7示例 (71)

1引言

1.1概述

本文介绍了Web前端展现所封装的标签用法和属性说明，主要包括Panel面板组件、布局组件、Window窗口组件、树形组件、网格组件、日期组件、通用查询、通用帮助、Excel导出等标签，目的是为了帮助开发人员去了解标签的使用和属性功能的含义。无需下载安装任何浏览器插件，即能拥有丰富的用户体验和美观的界面。

1.2词汇表

组件：组件不是一个新的概念，Java中的javaBean规范和EJB规范都是典型的组件。组件的特点在于他定义了一种通用的处理方式。例如，JavaBean 拥有内视的特性，这样就可以通过工具来实现JavaBean的可视化。而EJB规范定义了企业服务中的一些特性，使得EJB容器能够为符合EJB规范的代码增添企业计算所需要的能力，例如事务、持久化、池等。

数据模型：数据特征的抽象，是数据库管理的教学形式框架。数据库系统中用以提供信息表示和操作手段的形式构架。数据模型包括数据库数据的结构部分、数据库数据的操作部分和数据库数据的约束条件。

2配置

在页面中定义标签组件需要引入标签库和相应的脚本文件，不管调用哪种组件，均需引入组件标签库和Loushang5基础脚本：

组件标签库：<%@ taglib uri="/tags/next-web" prefix="next"%>

Loushang5基础脚本：

如果页面需要定义数据模型，则需引入数据模型标签库：

<%@ taglib uri="/tags/next-model" prefix="model"%>

说明：

是用来引入Loushang5基础脚本的标签，它提供的属性如下：

属性名是否必须简述

debug 否是否启动js调试模式

withCss 否是否启动css调试模式，如果

withCss="true"，则不再使用L5-all.css，而

是使用单独的css

3ViewPort组件

3.1简述

ViewPort是一个容器组件，它可以根据窗口大小，自适应改变容器的大小。在其中可以增加Panel组件和各种的布局组件。

3.2示例

图3.2-1

当窗口大小变化时，该容器也会随之扩大或缩小。代码如下：

handler="save">

菜单编号:
菜单标题：
菜单连接：

3.3主要属性

属性名是否必须简述id 否组件唯一标识供以后获取使用

4Panel组件

4.1简述

Panel是一个容器组件，作用是将内部的东西包起来，便于控制。Panel主要包括title、topbar，body，bottombar、button。Title是Panel的标题；topbar、bottombar 和button是通过Loushang5的自定义组件标签来描述的；Panel中的body部分，可以使用Loushang5的自定义组件标签，也可以使用标准HTML标签来描述，但是则必须在Panel中增加标签，然后在其内部使用标准HTML标签。

4.2示例

图4.2-1

代码：

用户名：

密码：

4.3主要属性

属性名是否必须简述

id 否组件唯一标识供以后获取使用

anchor 否column布局的控制属性

name 否供页面渲染组件使用

xtype 否组件类型，默认为panel

collapsible 否是否可以伸缩

width 否宽度，支持百分比

height 否高度，支持百分比

cls 否自定义class样式disabled 否是否可用

hidden 否是否隐藏

style 否内联样式autoHeight 否是否根据内容自动高度

autoWidth 否是否根据内容自动宽度

pageX 否当panel浮动的时候的x坐标

pageY 否当panel浮动的时候的y坐标

X 否同上

Y 否同上

hideBorders 否是否隐藏Panel中所有子容器的边框animCollapse 否Panel收缩的时候是否有动画效果

autoScroll 否是否自动出现滚动条

border 否是否显示Panel的边框

floating 否Panel是否绝对布局

frame 否是否显示圆角边框背景titleCollapse 否点击标题任何位置panel都可收缩。要使

该属性生效，还需要设置非空的title属性

和collapsible属性为true。bodyBorder 否内容体是否有边框bodyStyle 否内容体的内联样式columnWidth 否只在为列标签时有用closable 否只在为window时有用

tabTip 否作为tabpanel的成员时有用

ToolBarItem和ToolButton的属性很类似，如下：

属性名是否必须简述

disabled 否是否禁用

text 是需要显示的文本

handler 否点击后触发的函数名id 否唯一标识

icon 否图片的地址

iconCls 否图片样式

href 否链接地址

hrefTarget 否链接目标

xtype 否指定特定类型，默认为button，也可以指

定为textfield、radio、datefield、numberfield

等

symbol 否分割符号如->和-

5布局组件

布局是需要有容器支持的，所以布局需要嵌套在Panel标签里。而布局内部往往会再放置其它一些组件，比如树型，列表或者Panel。

5.1绝对(Absolute)布局

绝对布局就是指设置x，y坐标，定位到指定位置。在下面的例子中，我们有一个panel容器，然后用一个绝对布局包住了另外2个Panel，同时给2个Panel分别设置了x，y坐标，来达到绝对定位的目的。

示例代码：

{bodyStyle:'padding:15px;',width:200,height:100,frame:true}

Panel\'s x:150 y:150

name:

password:

submit

Panel\'s x:250 y:250

【注意】：使用绝对布局时，嵌套布局的panel标签需要指明其高度和宽度，否则不能显示。

效果图：

图5.1-2

5.2手风琴(Accordion)布局

Accordion布局就是推拉布局，点一下当前页，会把其它弹开。在下面的例子中，只需要给容器(Panel)指定一下布局(Layout)，然后容器就具有这样的布局了，很是方便。

示例代码：

bodyStyle="background-color:#DFE8F6">

{bodyStyle:'padding:15px;'}

Here is some accordion content. Click on one of the other bars below for more.

More content.Open the third panel for a customized look and feel example.

Show Next Panel

cls="custom-accordion">

Here is an example of how easy it is to completely customize the

look and feel of an individual panel simply by adding a CSS class in the config.

效果图：

图5.2-3

5.3相对(Anchor)布局

相对布局，就是说可以相对容器指定像素或者100%，支持宽度。此布局是相对容器确定自身长宽，很少使用。

示例代码：

{bodyStyle:'padding:15px;'}

Width = 50% of the container

Width = container width - 100 pixels

Width = container width - 10 pixels

Height = container height - 262 pixels

效果图：

图5.3- 4

5.4东西南北中(Border)布局

Border布局是最常用的一种布局，可以实现上下左右中的相对定位，如果需要自己实现这种布局，需要Css+Div定位，而现在只需要简单的标签就可以实现这样的功能。

代码如下：

{collapsible:true,split:true,animFloat:false,autoHide:false,useSplitTips:true,bodyStyle:'padding:15 px;'}

Footer content

Secondary content like navigation links could go here

Main Page

This is where the main content would go

效果图：

图5.4-5

通过bottom、left、right、center、top等圈定范围，清晰的表示出要放在什么位置。同时每个局部还可以定制一些特性。bottom、left、right、center、top的属性基本相同，统一介绍如下：

属性名是否必须简述

animfloat 否收缩面板是否有动画效果

autohide 否是否自动隐藏

cmargins 否面板margin属性设置

margins 否面板内margin属性设置

floatable 否是否可以收缩

split 否是否可以通过边界条调整大小

splittip 否鼠标放在边界条上显示的提示