资源描述
浪潮 Loushang5 WEB组件 开发指南.docx
《浪潮 Loushang5 WEB组件 开发指南.docx》由会员分享,可在线阅读,更多相关《浪潮 Loushang5 WEB组件 开发指南.docx(82页珍藏版)》请在冰豆网上搜索。
![浪潮 Loushang5 WEB组件 开发指南.docx](https://file1.bdocx.com/fileroot1/2023-1/31/00d56e70-4b8f-4379-9b56-04b382dbf9db/00d56e70-4b8f-4379-9b56-04b382dbf9db1.gif)
浪潮Loushang5WEB组件开发指南
浪潮Loushang5WEB组件开发指南
文档状态:
发布版
山东浪潮齐鲁软件产业股份有限公司
版权声明
《浪潮Loushang5WEB组件开发指南》的版权归山东浪潮齐鲁软件产业股份有限公司所有。
未经山东浪潮齐鲁软件产业股份有限公司的书面准许,不得将本文档的任何部分以任何形式、采用任何手段(电子的或机械的,包括照相复制或录制)、或为任何目的,进行复制或扩散。
Copyright©2009-2010山东浪潮齐鲁软件产业股份有限公司。
版权所有,翻制必究。
前言
美观的界面,统一的风格,丰富的用户体验是每一款优秀的软件产品所追求的。
完善的客户端可以大大提高用户对软件的满意程度。
近年来,与客户端相关的技术不断发展,从最早的瘦客户端模式,到后来的胖客户端,再到最近流行的富客户端,软件的客户端越来越被人们重视,在软件产品中的比重也越来越大。
但客户端的开发效率一直被开发人员所担忧。
我们浪潮Loushang5Web组件经过不断创新,利用领先的技术,开发出成熟完善的客户端解决方案。
可以非常轻松的搭建出令人耳目一新的,具有RIA(RichInternetApplication)特征的Web应用界面。
阅读指南
【文档目标】
本文档主要针对开发人员,是为了方便开发人员了解和查找标签属性,方便开发而编写的开发指南。
【阅读对象】
该文档适用于浪潮Loushang5平台的开发人员,作为开发人员前台开发的参考资料。
【文档构成】
本手册基本上由以下部分组成:
第一章,“引言”,介绍了Loushang5Web组件的背景和基本组成。
第二章,“配置”,介绍了使用Loushang5Web组件的前提配置。
第三章,“ViewPort组件”,介绍了Loushang5Web组件中ViewPort容
器的示例和主要属性说明。
第四章,“Panel组件”,介绍了Loushang5Web组件中的最基本的容器
Panel。
第五章,“布局组件”,介绍了绝对布局、相对布局、东西南北的border
布局、列布局和自适应布局等。
第六章,“窗口组件”,介绍了Loushang5Web组件中窗口组件的示例和
主要属性说明。
第七章,“Html组件”,介绍了基本的HTML在Loushang5Web组件中
的使用。
第八章,“网格组件”,介绍了查询显示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.1GridPanel23
8.1.1示例23
8.1.2主要属性24
8.1.3和GridPanel相关的标签26
8.2EditGridPanel28
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顶级标签Datasets50
11.2数据模型Dataset50
11.2.1属性50
11.2.2isGroup示例52
11.3Record标签54
11.4field标签54
12查询组件55
12.1QueryWindow55
12.2Conditions标签55
12.3QueryText标签55
12.4QueryDate标签55
12.5QueryNumber标签56
12.6QueryComboBox标签56
12.7示例56
13通用帮助58
13.1GridHelpWindow58
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基础脚本:
组件标签库:
<%@tagliburi="/tags/next-web"prefix="next"%>
Loushang5基础脚本:
ScriptManager/>
如果页面需要定义数据模型,则需引入数据模型标签库:
<%@tagliburi="/tags/next-model"prefix="model"%>
说明:
ScriptManager/>是用来引入Loushang5基础脚本的标签,它提供的属性如下:
属性名
是否必须
简述
debug
否
是否启动js调试模式
withCss
否
是否启动css调试模式,如果withCss="true",则不再使用L5-all.css,而是使用单独的css
3ViewPort组件
3.1简述
ViewPort是一个容器组件,它可以根据窗口大小,自适应改变容器的大小。
在其中可以增加Panel组件和各种的布局组件。
3.2示例
图3.2-1
当窗口大小变化时,该容器也会随之扩大或缩小。
代码如下:
ViewPort>
Paneltitle="菜单修改">
TopBar>
ToolBarItemsymbol="->">
ToolBarItem>
ToolBarItemtext="保存"iconCls="save"handler="save">
ToolBarItem>
TopBar>
Html>
100%">
|
|
|
Html>
Panel>
ViewPort>
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>
Html>标签,然后在其内部使用标准HTML标签。
4.2示例
图4.2-1
代码:
Panelname="user"title="用户信息"height="200"width="300">
TopBar>
ToolBarItemtext="增加">
ToolBarItem>
TopBar>
Html>
Html>
BottomBar>
ToolBarItemtext="底部按钮">
ToolBarItem>
BottomBar>
Buttons>
ToolButtontext="其他按钮">
ToolButton>
Buttons>
Panel>
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坐标,来达到绝对定位的目的。
示例代码:
Panelname="container"title="container"height="550"width='700'>
Defaults>
{bodyStyle:
'padding:
15px;',width:
200,height:
100,frame:
true}
Defaults>
AbsoluteLayout>
Paneltitle="panel1"collapsible="true"height="200"x="150"y="150">
Html>
Panel\'sx:
150y:
150
Html>
Panel>
Paneltitle="panel2"collapsible="true"x="250"y="250">
Html>
Panel\'sx:
250y:
250
Html>
Panel>
AbsoluteLayout>
Panel>
【注意】:
使用绝对布局时,嵌套布局的panel标签需要指明其高度和宽度,否则不能显示。
效果图:
图5.1-1
5.2手风琴(Accordion)布局
Accordion布局就是推拉布局,点一下当前页,会把其它弹开。
在下面的例子中,只需要给容器(Panel)指定一下布局(Layout),然后容器就具有这样的布局了,很是方便。
示例代码:
Panelname="accordion-panel"width="200"height="590"bodyBorder="false"bodyStyle="background-color:
#DFE8F6">
Defaults>
{bodyStyle:
'padding:
15px;'}
Defaults>
AccordionLayout>
Paneltitle="Introduction">
Html>
Hereissomeaccordioncontent.Clickononeoftheotherbarsbelowformore.
Html>
Panel>
Paneltitle="BasicContent">
Html>
Morecontent.Openthethirdpanelforacustomizedlookandfeelexample.
ShowNextPanel
Html>
Panel>
Panelid="acc-custom"title="CustomPanelLookandFeel"cls="custom-accordion">
Html>
HereisanexampleofhoweasyitistocompletelycustomizethelookandfeelofanindividualpanelsimplybyaddingaCSSclassintheconfig.
Html>
Panel>
AccordionLayout>
Panel>
效果图:
图5.2-1
5.3相对(Anchor)布局
相对布局,就是说可以相对容器指定像素或者100%,支持宽度。
此布局是相对容器确定自身长宽,很少使用。
示例代码:
Panelname="anchor-div"height="590">
AnchorLayout>
Defaults>
{bodyStyle:
'padding:
15px;'}
Defaults>
Paneltitle="Panel1"height="100"anchor="50%">
Html>
Width=50%ofthecontainer
Html>
Panel>
Paneltitle="Panel2"height="100"anchor="-100">
Html>
Width=containerwidth-100pixels
Html>
Panel>
Paneltitle="Panel3"anchor="-10,-262">
Html>
Width=containerwidth-10pixels
Height=containerheight-262pixels
Html>
Panel>
AnchorLayout>
Panel>
效果图:
图5.3-1
5.4东西南北中(Border)布局
Border布局是最常用的一种布局,可以实现上下左右中的相对定位,如果需要自己实现这种布局,需要Css+Div定位,而现在只需要简单的标签就可以实现这样的功能。
代码如下:
Panelname="border-div"height="590"bodyBorder="false">
Defaults>
{collapsible:
true,split:
true,animFloat:
false,autoHide:
false,useSplitTips:
true,bodyStyle:
'padding:
15px;'}
Defaults>
BorderLayout>
Bottomcmargins="5000">
Paneltitle="Footer"height="150">
Html>
Footercontent