SmartClient框架组件介绍中文帮助.docx

SmartClient框架组件介绍Jsp页面引入smartClient类库：var isomorphicDir=/isomorphic/;一、SmartClient常用组件接口说明 SmartClient组件清单列表组件名称组件描述ClassFactorySmartclient组件库类工厂组件，用于定义smartclient类ClassClass类是Smartclient组件库类结构树的根类。用于创建类实例，把方法和属性添加到类中。Timer定时器组件，用于执行定时任务。XMLToolsXml工具类JSONJson工具类UploadForm文件上传form组件。PageListGrid表格分页组件。TreeGrid资源树组件。Datasouce数据源组件。Record数据源记录组件DataSourceField数据源字段组件OperationBinding数据源数据绑定对象RpcManager远程调用管理组件。RPCRequest远程调用参数组件。RPCResponse远程调用返回值组件。Canvas界面可视化组件父类Layout布局组件父组件。VLayout垂直布局组件。Hlayout水平布局组件TabSet标签页布局组件。Window窗口布局组件Menu菜单。MenuItem菜单项MenuButton菜单按钮HTMLPanehtml区域Img图片Label标签IButton按钮。ToolStrip工具栏。DynamicForm表单布局组件。FormItem表单项父组件。FormItemType表单项类型和常用子组件介绍ListGrid列表组件。ListGridField列表字段组件TreeGrid树表格组件。Tree树组件。TreeNode树节点SecurityUtil鉴权组件ConfigUtil个性化定制接口HttpRequestUtils工具类GraphPie饼图组件GraphBar柱状图组件GraphLine折线图组件GraphMeter仪表盘组件GraphBarVsLine柱状/折线合并组件组件描述组件属性、方法清单属性名称/描述属性名：类型属性的描述。例如：title: String文本标题width:Number组件宽度urls: ArrayString资源描述符configInfo:Object配置信息。包括以下属性：action:String请求服务端servlet的urlwidth: Number组件宽度方法名称/描述方法名方法的描述。对于自定义组件例如：defineClass创建一个smartclient类。通过该类的create()方法可以创建一个类的实例。Class defineClass(className, superClass)decode将json字符串反序列化为对象Object decode(jsonString:String)removeItems从窗体区域中删除一批组件。Array removeItems (items)参数:items -类型: Arraycanvases 被删除的一批组件返回值:类型: Array 被删除的一批组件。newInstance方法(详细描述)详述方法名newINstance概述用给定的类名称字符串，创建一个该类的实例。返回Object：一个新创建的对象。参数参数说明className:String类名字Props1:Object (可选)要设置到类实例上的属性1。Props2:Object(可选)要设置到类实例上的属性2。使用示例varmyclassObj=isc.ClassFactory.newInstance(MyClass,name:zongying);ClassFactory:类工厂组件Smartclient组件库类工厂组件，用于定义smartclient类。组件属性、方法清单方法名称/描述defineClass创建一个smartclient类，通过该类的create()方法可以创建一个类的实例。Class defineClass(className, superClass)newInstance用给定的类名称字符串，创建一个该类的实例。ClassInstance newInstance(className, props, props2, props3)getClass用给定的类名称字符串，创建一个类。注意，是类而不是类的实例。Class getClass (className:Sting)defineClass方法详述方法名defineClass概述定义一个smartclient类。后续通过该类的create()方法可以创建实例。返回Class:一个新的类。参数参数说明className:String类名字superClass:Class (可选)当前类继承的父类名。该参数可选。使用示例ClassFactory.defineClass(AosTreeGrid,TreeGrid);newInstance方法详述方法名newINstance概述用给定的类名称字符串，创建一个该类的实例。返回ClassInstance：一个新创建的类实例对象。参数参数说明className:String类名字Props1:Object (可选)要设置到类实例上的属性1。Props2:Object(可选)要设置到类实例上的属性2。使用示例varmyclassObj=isc.ClassFactory.newInstance(MyClass,name:zongying);Class：类组件Class类是Smartclient组件库类结构树的根类。用于创建类实例，把方法和属性添加到类中。组件属性、方法清单方法名称/描述addClassProperties给类添加静态属性和方法。void addClassProperties(arguments 0-N)addProperties给类添加实例属性和方法。void addProperties(arguments 0-N)create创建一个smartclien类的实例。Object create() (arguments 0-N)delayCall延迟调用本类的某个方法StringdelayCall(methodName:String, arrayArgs:Array, time:Number)logInfo打印info级别的信息void logInfo (message:String,category:String)logDebug打印debug级别的信息void logDebug (message:String,category:String)getStackTrace取得当前线程执行堆栈。堆栈是以字符串形式返回StringgetStackTrace()echo将某个smartclient对象的信息放到一个字符串中，便于后续打印输出String echo() (obj:Object)addClassProperties方法详述方法名addClassProperties概述给类添加静态属性和方法。返回无。参数参数说明参数: 0-N (可选)一个或多个类属性或类方法。使用示例TimeCounter.addClassProperties(name:logname1,setTag:function(tag);addProperties方法详述方法名addProperties概述给类添加实例属性和方法。返回无。参数参数说明参数 0-N (可选)一个或多个类属性或类方法。使用示例TimeCounter.addProperties(statTime:0,endTime:0,tag:,start:function()this.statTime=newDate();this.endTime=this.statTime;if(this.isNotfilter()TimeC(this.tag+ begin.);returnthis;,);create方法详述方法名create概述创建一个smartclien类的实例。返回Object:一个新的类实例。参数参数说明使用示例ClassFactory.defineClass(AosTreeGrid,TreeGrid);AosTreeGrid.create();delayCall方法详述方法名delayCall概述延迟调用本类的某个方法。返回无。参数参数说明methodName:String一个或多个类属性或类方法。arrayArgs:Array（可选）调用参数数组time:Number（可选）延迟调用事件，单位微秒。使用示例var node = treeData.findById(idRelative);treeGrid1.delayCall (deselectRecord, node, 200);echo方法详述方法名echo概述将某个smartclient对象的信息放到一个字符串中，便于后续打印输出返回String:当前smartclient对象的信息。参数参数说明object:Object某个smartclient对象使用示例arbutton1=Button.create(left:200,top:20,width:150,title:setContents(goodbye),click:function()/打印当前调用堆栈varstr=this.getStackTrace(null,null,null,true);isc.Log.logInfo(str);/打印当前对象属性str=isc.Log.echo(button1);isc.Log.logInfo(str););二、 界面布局SmartClient主要常用水平布局（HLayout）、垂直布局（VLayout）等布局方式。水平布局代码示例：isc.HLayout.create(Width:200,/指定宽度Members:/指定成员组成isc.Label.create(showResizeBar=true/组件显示手动改变宽度barcontents: red ,/组件标题backgroundColor=red,/背景颜色align: center/标题对齐方式);isc.Label.create(contents: blue,/组件标题backgroundColor= blue/背景颜色align: center/标题对齐方式);效果图：垂直布局代码示例：isc.VLayout.create(Width:200,/指定宽度Members:/指定成员组成isc.Label.create(showResizeBar=true/组件显示手动改变宽度barcontents: red ,/组件标题backgroundColor=red,/背景颜色align: center/标题对齐方式);isc.Label.create(contents: blue,/组件标题backgroundColor= blue/背景颜色align: center/标题对齐方式);效果图：三、 菜单Menu：菜单类(Menu)实现互动式菜单控件,并可选配图标,子菜单和快捷键,通常用于表格和树的右键菜单，和工具栏的下拉菜单。组件属性、方法清单Menu继承至ListGrid所以拥有ListGrid的所有方法和属性属性名称/描述data: ArraymenuItem指定菜单的菜单项defaultWidth:Number指定菜单项的缺省宽度items:ArrayMenuItem 同 Menu.datashowIcons:Boolean是否显示图标showKeys:Boolean是否显示快捷键emptyMessage:String当没有菜单项的时候需要显示的信息cellHeight:Number菜单项的单元高度cellPadding:Number菜单项外围填充宽度target:Canvas可选目标画布的这个菜单。可作为一个参数来动态菜单项配置方法如MenuItem.checkIf()。baseStyle：StringCSS style for a normal cellshowSubmenus：Boolean一个布尔值,指示是否应该显示子菜单指示列。submenuDirection:String该子菜单出现在我们的左边或右边。能有效被设置为“左”或“右”iconWidth：Number默认的宽度应用到自定义图标在这个菜单。iconHeight：Number默认高度适用于自定义图标在这个菜单.方法名称/描述setData设置在菜单中需要显示的菜单项voidsetData(items：ArrayMenuItems)itemClick当菜单被用户点击的时候该方法将为被执行BooleanitemClick(item:Object, colNum:Number)showContextMenu显示上下文菜单BooleanshowContextMenu()setItems同Menu的setData方法voidsetItems(items：ArrayMenuItems)hideContextMenu隐藏上下文菜单voidhideContextMenu()getItem获取指定的菜单项对象MenuItemgetItem(item:Number)setItemProperties设置指定菜单项的属性voidsetItemProperties(item:Number, properties)getItems获取Menu的所有MenuItem对象ArrayMenuItemgetItems()getItemNum根据MenuItems对象获取下标NumbergetItemNum(item: MenuItem)showSubmenu显示指定菜单项的子菜单voidshowSubmenu(item: MenuItem)getSubmenu获取指定菜单项的子菜单MenugetSubmenu(item: MenuItem)setItemEnabled设置指定菜单项的使能状态BooleansetItemEnabled(item:MenuItem, newState:Boolean)setItemChecked设置指定菜单项的选中状态BooleansetItemChecked(item: MenuItem , newState: Boolean)setItemTitle设置指定菜单项的标题BooleansetItemTitle(item:MenuItem, newTitle:String)setItemIcon设置指定菜单项的图标BooleansetItemIcon(item:MenuItem, newIcon:String, newDisabledIcon:String)使用实例：Menu.create(/菜单项的创建 ID:imageMenu, autoDraw:false, cellHeight:18,/设置菜单项高度 menuButtonWidth:60,/设置菜单项宽度 data:/菜单项数据源，显示 title:Visible, title:Reset,keys:keyName:R, shiftKey:true,keyTitle:Shift+R,click:say(1212),/设置快捷键 title:Image/菜单显示名称);Menu.create( ID:sizeMenu, autoDraw:false, cellHeight:18, menuButtonWidth:60, data: title:Small, title:Medium, title:Large , title:Size);Menu.create( ID:positionMenu, autoDraw:false, cellHeight:18, menuButtonWidth:60, data: title:Up, click:say(aaaa), keys:U,/菜单快捷键设置 title:Right, click:moveRight(), keys:K, title:Down, click:moveDown(), keys:J, title:Left, click:moveLeft(), keys:H , title:Position);Menubar.create(/创建菜单栏 ID:menuBar, autoDraw:false, backgroundColor:#CCCCCC, menus:imageMenu, sizeMenu, positionMenu/菜单条添加菜单项);VStack.create(/创建显示面板 top:200, left:50, width:500, members:menuBar/面板添加菜单条);MenuItem：菜单项组件组件属性、方法清单MenuItem继承至ListGridRecord所以拥有ListGridRecord的所有方法和属性属性名称/描述checked : Boolean是否被选中enabled: Boolean可否可用icon：String图片的urliconHeight：Number图片的高度iconWidth：Number图片的宽度isSeparator：Boolean是否是分隔符keys：String指定菜单的快捷键submenu：Menu指定子菜单title：HTML指定标题方法名称/描述action触发菜单的点击事件voidaction()click菜单的东西响应函数，当菜单被点击的时候该方法会被调用voidclick(target:Canvas, item:MenuItem, menu:Menu, colNum:Number)click方法详述方法名click概述当菜单被用户点击的时候，该方法就会被执行返回Menu对象参数（可以是菜单组件的任意一个属性）参数说明target:Canvas菜单所在的组件item:MenuItem被点击的菜单项menu:Menu被点击菜单项所属的菜单colNum:Number（可选）菜单项的编号使用示例var menu = Menu.create(showIcons : false,data: title: 当前告警时候监控,enabled: true,click: function(target,item,menu)/do something);MenuButton：菜单按钮组件MenuButton类是Button的子类，可以弹出下拉菜单的按钮组件组件属性、方法清单MenuButton是Button的子类，继承Button的所有方法和属性属性名称/描述height：Number指定按钮高度menu：Menu指定按钮的弹出菜单showMenuBelow：Boolean指定弹出菜单的方向，为true想下弹出，为false想上弹出title：String按钮的标题四、 Img，Label，IButton组件，ToolStrip工具栏IMG组件属性、方法清单属性名称/描述imageHeight: Integer图片的高度imageWidth: Integer图片的宽度imageType: ImageStyle设置图片的类型，缺省类型是stretchname: String设置组件在html中的name属性showTitle: Boolean是否显示标题size: Number设置图片的高和宽为指定的值src: SCImgURL设置图片的urlusePNGFix: Boolean设置是否需要在IE浏览器中进行对png图片修正方法名称/描述resetSrc重新加载图片voidresetSrc()setImageType设置图片的类型voidsetImageType(imageType：ImageStyle)setSrc设置图片的urlvoidsetSrc(URL)使用实例Img.create(left:20%,/图片距离当前浏览器左部位置：也可以是数字(单位px) border:1px solid gray,/图片边框样式设置 imageType: center,/图片显示位置 src:/images/login.jpg/图片路径);Label：一个可以用来显示图片加文字的组件组件属性、方法清单属性名称/描述Align: Alignment文本显示的位置，缺省值为“left”autoFit: Boolean是否需要根据内容自动调整组件大小icon: SCImgURL指定图片的urliconAlign: String指定图片显示的位置，可以是“right”或“left”iconHeight: Integer设置图片的高度，缺省为图片的原始高度iconSize: Integer设置图片的高和宽iconSpacing: Integer设置图片的四周的填充宽度iconWidth: Integer这边图片的宽度wrap: Boolean当文本显示不小的时候，是否需要自动换行方法名称/描述setContents设置需要显示的文本内容voidsetContents(newContents:String)setIcon设置需要显示的图片的urlvoidsetIcon(icon:Url)IButton：按钮组件属性、方法清单属性名称/描述actionType: SelectionType按钮的类型，可以是“button”, “radid”, “checkbox” align: Alignment指定按钮标题的位置，缺省为“center”capSize: NumberHow big are the end pieces by defaulthiliteAccessKey: Boolean如果标题中包括有快捷键盘，是否需要给快捷键加下划线icon: SCImgURL设置图片的url。iconAlign: String设置图片的位置。iconHeight: Integer设置图片的高。iconSize: Integer设置图片的宽和高iconSpacing: Integer设置图片四周的填充宽度iconWidth: Integer设置图片的宽radioGroup: String分组标示selected: Boolean是否选中showDisabled: Boolean在组件不可用的时候是否需要显示状态的改变showDisabledIcon: Boolean当按钮不可用的时候，是否需要显示不可以用的图片showDown: Boolean当按钮不点击的时候，是否需要显示被按下去的状态showDownIcon: Boolean如果使用一个图标为这个按钮,是否切换图标图像当鼠标向下的按钮。showFocus: BooleanShould we visibly change state when the canvas receives focus? Note that by default the over state is used to indicate focus.showFocused: BooleanShould we visibly change state when the canvas receives focus?showFocusedIcon: BooleanIf using an icon for this button, whether to switch the icon image when the button receives focus.showRollOver: BooleanShould we visibly change state when the mouse goes over this object?showRollOverIcon: BooleanIf using an icon for this button, whether to switch the icon image on mouse rollover.showSelectedIcon: BooleanIf using an icon for this button, whether to switch the icon image when the button becomes selected.showTitle: BooleanDetermines whether any specified title will be displayed for this component.src: SCImgURLBase URL for the image. By default, StretchImgButtons consist of three image parts: A start image (displayed at the top or left), a scalable central image and an end image displayed at the bottom or right.state: StateCurrent state of this widget. StatefulCanvases will have a different appearance based on their current state.title: StringThe text title to display in this button.titleStyle: CSSStyleNameCSS style applied to the title text only. Defaults to StretchImgButton.baseStyle when unset.valign: VerticalAlignmentVertical alignment of this components title.vertical: BooleanDefault is a horizontal button. Vertical StretchImgButtons are allowed, but title text, if any, will not be automatically rotated.wrap: BooleanShould the title for this button wrap? If unset, default behavior is to allow wrapping if this.vertical is true, otherwise disallow wrapping方法名称/描述action触发按钮点击事件voidaction()addToRadioGroup指定按钮的分组idvoidaddToRadioGroup(groupID：String)deselect去选中void deselect ()getActionType获取按钮类型void getActionType ()getState获取按钮状态State getState ()getTitle获取按钮标题StringgetTitle()iconClick按钮图标是否支持点击BooleaniconClick()isSelected按钮是否选中BooleanisSelected()removeFromRadioGroup移除分组void removeFromRadioGroup (groupID：String)select选中按钮void select ()setActionType设置按钮类型void setActionType ()setDisabled设置按钮的使能状态voidsetDisabled(disabled：Boolean)setIcon设置按钮图标voidsetIcon(icon：url)setTitle设置按钮标题void setTitle (newTitle)create方法详述方法名Create概述通过输入设置的各个属性创建对应的按钮返回菜单参数（可以是菜单组件的任意一个属性）参数说明width:N设置按钮宽度disabled:Boolean是否灰化action:function按钮动作响应title:String按钮标题使用示例isc.IButton.create( width: 75, autoDraw : true, disabled:false, action:function() /do action, title: abc,);-Isc.Button.create(title:重置,/按钮显示字符width:100,/按钮的宽度top:60%,/按钮距离当前浏览器顶部位置：也可以是数字(单位px)left:55%,/按钮距离当前浏览器左部位置：也可以是数字(单位px)click:function()/按钮的点击发生的事件);ToolStrip：工具栏ToolStrip是一个工具条容器，可以将各种按钮放到这个容器上构成一个工具条组件属性、方法清单属性名称/描述formWrapper：AutoChildDynamicForm instance created by ToolStrip.addFormItem() to contain form items for display in this toolStrip. Each time addFormItem() is run, a new formWrapper autoChild will be created, picking up properties according to the standard AutoChild pattern.formWrapperConstructor ：String：SmartClient class for generated ToolStrip.formWrapper components.formWrapperDefaults ：ObjectDefault properties to apply to ToolStrip.formWrapper components.formWrapperProperties：ObjectProperties to apply to ToolStrip.formWrapper components.height：NumberToolStrips set a default height to avoid being stretched by containing layouts.members ：ArrayCanvasArray of components that will be contained within this ToolstripseparatorSize：IntegerSeparator thickness in pixelsvertical：BooleanIndicates whether the components are drawn horizontally from left to right (false), or vertically from top to bottom (true).方法名称/描述addFormItem添加一个表单到组件上DynamicForm addFormItem (formItem: FormItem , formProperties:Object, position:Number)addMember添加一个成员到组件上voidaddMember (newMember:Canvas, position:Number)addMember方法详述方法名addMember概述添加一个组件返回无参数参数说明newMember：Canvas被添加的组件对象position：Number（可选）新组件的的位置使用示例var btn= isc.IButton.create(width:75,autoDraw:true,disabled:false,action:function()/doaction, title:abc,);var toolStrip = isc.ToolStrip.create( membersMargin : 5,width : 100%,height : 100%);toolStrip.addMember(btn); /向工具条上添加一个按钮 五、 ResourceTreeGrid：资源树组件资源树组件封装了获取资源树相关信息的功能组件属性、方法清单ResourceTreeGrid提供资源相关的数据，现在支持按资源类型过滤，该组件继承自TreeGrid，具有TreeGrid的所有方法。资源树组件的方法：方法名称/描述Create创建资源树组件，一般组件都是通过这个方法创建实体对象fetchData查询资源数据，条件参数为JSON对象，比如根据资源类型和用户名查询：fetchData(moc:Virtual Ne, Common Group, userName:admin);资源树节点的属性：方法名称/描述locateId资源树在树上的位置ID，为主键parentLocateId资源树在树上父节点ID，指明外键oid资源编号name资源名字ipAddress网元ip地址，该属性可能为空，只有网元才有此属性location资源所在位置，该属性可能为空connectionState资源连接状态，该属性后续在界面是以状态小图标的方式呈现managementState资源管理状态，该属性后续在界面是以状态小图标的方式呈现workState资源工作状态，该属性是一个数组visible资源可见状态，如果为false，资源不能在界面显示movable资源可移动状态，如果为false资源不能在树上移动位置timeZone资源时区description 资源描述，该属性可能为空create方法详述方法名Create概述通过输入设置的各个属性创建对应的资源树返回资源树的实体对象参数（可以是树组件的任意一个属性）参数说明ID树组件的IDrowContextClick设置节点右键响应事件recordClick设置节点单击事件recordDoubleClick设置节点双击事件使用示例示例一：ResourceTreeGrid.create(ID:resourceTree,left:50, top:50, width:300, height:500,rowContextClick : function( record ) /设置右键事件this.contextMenu = Menu.create(width : 100,data:title : 刷新,resourceTreeGrid : this,icon : uep-2/unacknownledge.gif,click : function()this.resourceTreeGrid.data.re