《NCV轻量级组件技术红皮书》由会员分享，可在线阅读，更多相关《NCV轻量级组件技术红皮书（53页珍藏版）》请在金锄头文库上搜索。
1、NC Rich Client轻量级组件技术红皮书NC-UAP 5.0用友NC-UAP2007-10-221第 页目 录第一章前言11.文档介绍12.概述13.组件整体继承关系介绍1第二章各组件详细设计与使用方法介绍21.BaseComponent22. ModalDialogComp2.ConfirmDialogComp53.MessageDialogComp64.WarningDialogComp75.ErrorDialogComp96.ProgressDialogComp107.PanelComp118.TabComp129.ButtonComp1410.ComboComp1611.Lis
2、tToListComp1912.StringTextComp2213.IntegerTextComp2414.DateTextComp2515.FloatTextComp2616.TreeViewComp2717.OutLookBarComp3118.SliderbarComp3319.GridComp35第 18 页第一章 前言1. 文档介绍 文档目的该文档主要面向NC Rich Client的开发和使用人员，通过系统介绍每个组件的构成，外观定制(css),使开发人员具体了解每个组件的结构，使使用人员了解每个组件的使用方法，能够轻松自如的使用每个组件。 文档范围NC Rich Client的
3、维护，作用于组件的开发阶段和维护阶段。 读者对象NC Rich Client轻量级组件的开发人员、维护人员、项目负责人、项目核查人员及使用人员。 术语与缩写解释缩写、术语解 释组件、控件在本文档中均指NC Rich Client中的轻量级控件2. 概述在为传统的web应用编写HTML页面的时候，页面编写者只有非常有限的一套预定义GUI组件，即HTML表单元素。他们的特征集在近10年的时间里几乎没有什么变化，与现代的GUI工具集相比，它们是非常基础的。如果页面作者希望引入树控件或者可编辑的栅格、日历控件或者分级菜单之类的，就需要借助于基础文档元素的底层编程。由于开发Portal的需要，为了Por
4、tal更具实用性和易用性，同时随着Ajax技术的逐渐流行，客户端的重视程度日益提高，为了很好的利用Ajax技术提高web界面的响应速度，并带给用户更好的浏览体验，开发一套适用于portal并具有一定灵活性和可扩展性的基础控件库也成了势在必行的工作。 3. 组件整体继承关系介绍由于JavaScript代码均是下载到客户端解释执行，所以为了减轻客户端压力，类的继承层次不能太深，否则在客户端运行时代码的执行速度就会变慢，生成的原始js代码就会增多，考虑这个效率原因，NC Rich Client的大部分组件均采用一级继承，即直接继承自基类BaseComponent。4. NC Rich Client组
5、件特色1 通过prototype属性建立面向对象的轻量级控件库2 接口标准化,比如所有事件触发以onXX开放3 支持动态更改皮肤外观。尽量以css将展现分离，支持单个控件的各个细节的自定义外观修改4 将控件本身与数据绑定分离。树控件，grid控件均采用MVC设计模式实现5 使控件适应于tag和ajax等多种环境6 提供丰富的控件类别。Rich Client控件库提供了几十种轻量级控件，完全满足大多数Web应用的需要7 同时对各个控件，进行尽量轻度的封装，减轻客户端压力8 提供完善的js调试方式。比如WatchTime(监测代码执行时间)和log(前台日志)注意: 控件使用过程中，如果要销毁一个
6、控件，必须调用destroySelf方法，这样才能保证控件所占用资源完全被释放5. Rich Client控件的一些开发规范1. 如果子控件的显示对象不是Div_gen,必须覆盖getObjHtml()方法返回真正的显示对象2. 如果objHtml是显示对象，那么使用objHtml.owner可以得到控件的数据对象3. 如果obj是数据对象，那么使用obj.parentHtml可以得到父控件的显示对象4. 如果obj是数据对象，那么使用obj.parentOwner可以得到父控件的数据对象5. 基类BaseComponent采用了template pattern设计模式为控件放入父控件的过程提
7、供了统一的流程，子类必须实现manageSelf方法,子控件在放入父控件后会调用此方法6. 子控件兼听父控件的大小改变调整自己的大小，子控件如果需要改变自己的大小必须提供adjustSelf方法第二章 各组件详细设计与使用方法介绍1. BaseComponent组件名称：BaseComponent 组件类型：所有控件的基类 1.1 组件说明所有控件基类,包含了所有控件的共同属性和操作方法，此类不需要用户主动调用。以下给出了这个类的详细函数原型描述。1.2 函数介绍Constructor SummaryBaseComponent(name, left, top, width, height) P
8、arameters: name - 控件名称 left - 控件左部x坐标 top - 控件顶部y坐标 width - 控件宽度 height - 控件高度 void add(ObjHtml) 添加子控件默认方法.如果需要特殊控制,需覆盖此方法 Parameters: ObjHtml - 子控件对象的显示对象 void addContextMenu(menu) 添加控件的右键菜单 Parameters: menu - 要添加的ContextMenuComp控件 void destroySelf() 销毁控件 Object getCompHeight() 得到组件的height属性 Object
9、 getCompWidth() 得到组件的width属性 Object getContentHeight() 得到容器内容部分的高度. Object getContentWidth() 得到容器内容部分的宽度. Object getObjHtml() 获取控件的显示对象 void hide() 隐藏控件(显示属性是display) void hideV() 隐藏控件(显示属性是visibility) void manageSelf() 添加进父控件之后,如果控件需要依据父控件设定值,则覆盖此函数 void oncontextmenu(e) 默认控件右键菜单显示如果需要额外控制,覆盖此函数 vo
10、id placeIn(parent) 将控件添加到父控件中,如有特殊要求,子控件可以覆盖此方法. Parameters: parent - 此控件将要放入的父容器组件 void setBounds(left, top, width, height) 设置控件边界值.子控件可根据实际情况覆盖此函数 Parameters: left - 控件左侧X坐标 top - 控件顶部Y坐标 width - 控件的宽度 height - 控件的高度 void setPosition(left, top) 设置控件位置 Parameters: left - 控件左侧X坐标 top - 控件顶部Y坐标 void
11、setSize(width, height) 设置控件大小 Parameters: width - 控件的宽度 height - 控件的高度 void setZIndex(zIndex) 设置控件立体高度 Parameters: zIndex - 控件的第三维高度 void show() 显示控件(显示属性是display) void showV() 显示控件(显示属性是visibility) 2. ModalDialogComp组件名称：ModalDialogComp 组件类型：Container 组件父类：BaseComponent2.1 组件说明模态对话框控件，提供基本的状态对话框容器，
12、同时由此派生一些常用对话框，比如MessageDialog,WarningDialog等2.2 函数介绍Constructor SummaryModalDialogComp(name, title, left, top, width, height, className) Parameters: name - 控件名称 title - 控件标题 left - 控件左部x坐标 top - 控件顶部y坐标 width - 控件宽度 height - 控件高度 className - css文件的名字 void add(objHtml) 给对话框添加一个组件,覆盖base的add方法 Paramet
13、ers: objHtml - 显示对象 Object getContentPane() 得到内容面版 void hide() 隐藏模式对话框 void onAfterClose() 暴露的方法,在对话框关闭之后调用此方法 void onBeforeClose() 暴露的方法,在对话框关闭的时候调用此方法 void onClosing() 暴露的方法,对话框关闭时调用此方法 void setBounds(left, top, width, height) 重载父类的方法 Parameters: left - 新的左部x坐标 top - 新的顶部y坐标 width - 新宽度 height - 新高度 void setSize(width, height) 设置对话框大小Parameters: width - 新宽度 height - 新高度 void setTitle(title) Paramet
