浪潮 Loushang5 WEB组件 开发指南.docx

上传人:b****6 文档编号:8864537 上传时间:2023-02-02 格式:DOCX 页数:82 大小:300.77KB
下载 相关 举报
浪潮 Loushang5 WEB组件 开发指南.docx_第1页
第1页 / 共82页
浪潮 Loushang5 WEB组件 开发指南.docx_第2页
第2页 / 共82页
浪潮 Loushang5 WEB组件 开发指南.docx_第3页
第3页 / 共82页
浪潮 Loushang5 WEB组件 开发指南.docx_第4页
第4页 / 共82页
浪潮 Loushang5 WEB组件 开发指南.docx_第5页
第5页 / 共82页
点击查看更多>>
下载资源
资源描述

浪潮 Loushang5 WEB组件 开发指南.docx

《浪潮 Loushang5 WEB组件 开发指南.docx》由会员分享,可在线阅读,更多相关《浪潮 Loushang5 WEB组件 开发指南.docx(82页珍藏版)》请在冰豆网上搜索。

浪潮 Loushang5 WEB组件 开发指南.docx

浪潮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

name:

password:

submit

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

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 高等教育 > 农学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1