SmartClient框架组件介绍中文帮助

《SmartClient框架组件介绍中文帮助》由会员分享，可在线阅读，更多相关《SmartClient框架组件介绍中文帮助（50页珍藏版）》请在装配图网上搜索。

1、SmartClient框架组件介绍;v/SCRIPTv/SCRIPTv/SCRIPTv/SCRIPTv/SCRIPTv/SCRIPTv/SCRIPTv/SCRIPTv/SCRIPTJsp页面引入smartClient类库：vSCRIPTvarisomorphicDir=/isomorphic/vSCRIPTSRC=isomorphic/system/modules/ISC_History.jsautoDraw:falsecellHeight:18,menuButtonWidth:60,data:title:Up,click:say(aaaa),keys:U,/菜单快捷键设title:Right

2、,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/面板添加菜单条

3、）;Menuitem:菜单项组件组件属性、方法清单Menultem继承至ListGridRecord所以拥有ListGridRecord的所有方法和属性属性名称/描述checked:Boolean是否被选中enabled:Boolean可否可用icon:String图片的urliconHeight:Number图片的高度iconWidth:Number图片的宽度isSeparator:Boolean是否是分隔符keys:String指定菜单的快捷键submenu:Menu指定子菜单title:HTML指定标题方法名称/描述action触发菜单的点击事件voidaction()click菜单的东

4、西响应函数，当菜单被点击的时候该方法会被调用voidclick(target:Canvas,item:Menultem,menu:Menu,colNum:Number)click方法详述方法名click概述当菜单被用户点击的时候，该方法就会被执行返回Menu对象参数(可以是菜单组件的任意一个属性)参数说明target:Canvas菜单所在的组件item:MenuItem被点击的菜单项menu:Menu被点击菜单项所属的菜单colNum:Number(可选)菜单项的编号使用示例varmenu=Menu.create(showicons:false,data:title:当前告警时候监控,enab

5、led:true,click:function(target,item,menu)/dosomething）；MenuButton:菜单按钮组件MenuButton类是Button的子类，可以弹出下拉菜单的按钮组件组件属性、方法清单MenuButton是Button的子类，继承Button的所有方法和属性属性名称/描述height:Number指定按钮高度menu:Menu指定按钮的弹岀菜单showMenuBelow:Boolean指定弹岀菜单的方向，为true想下弹岀，为false想上弹岀title:String按钮的标题四、Img，Label，IButton组件，ToolStrip工具栏I

6、MG组件属性、方法清单属性名称/描述imageHeight:Integer图片的高度imageWidth:Integer图片的宽度imageType:ImageStyle设置图片的类型，缺省类型是stretchname:String设置组件在html中的name属性showTitle:Boolean是否显示标题size:Number设置图片的高和宽为指定的值src:SCImgURL设置图片的urlusePNGFix:Boolean设置是否需要在IE浏览器中进行对png图片修正方法名称/描述resetSrc重新加载图片voidresetSrc()setImageType设置图片的类型voidse

7、tImageType(imageType:ImageStyle)setSrc设置图片的urlvoidsetSrc(URL)使用实例lmg.create(（单位px）left:20%，/图片距离当前浏览器左部位置：也可以是数字border:1pxsolidgray，/图片边框样式设置imageType:center，/图片显示位置src:/images/login.jpg/图片路径);Label:一个可以用来显示图片加文字的组件组件属性、方法清单属性名称/描述Align:Alignment文本显示的位置，缺省值为“left”autoFit:Boolean是否需要根据内容自动调整组件大小icon:

8、SCImgURL指定图片的urliconAlign:String指定图片显示的位置，可以是“right”或“left”iconHeight:Integer设置图片的高度，缺省为图片的原始高度iconSize:Integer设置图片的高和宽iconSpacing:Integer设置图片的四周的填充宽度iconWidth:Integer这边图片的宽度wrap:Boolean当文本显示不小的时候，是否需要自动换行方法名称/描述setContents设置需要显示的文本内容voidsetContents(newContents:String)setIcon设置需要显示的图片的urlvoidsetIcon

9、(icon:Url)IButton:按钮组件属性、方法清单属性名称/描述actionType:SelectionType按钮的类型，可以是“button”,“radid”,“checkbox”align:Alignment指定按钮标题的位置，缺省为“center”capSize:NumberHowbigaretheendpiecesbydefaulthiliteAccessKey:Boolean如果标题中包括有快捷键盘，是否需要给快捷键加下划线icon:SCImgURL设置图片的url。iconAlign:String设置图片的位置。iconHeight:Integer设置图片的高。iconS

10、ize:Integer设置图片的宽和高iconSpacing:Integer设置图片四周的填充宽度iconWidth:Integer设置图片的宽radioGroup:String分组标示selected:Boolean是否选中showDisabled:Boolean在组件不可用的时候是否需要显示状态的改变showDisabledIcon:Boolean当按钮不可用的时候，是否需要显示不可以用的图片showDown:Boolean当按钮不点击的时候，是否需要显示被按下去的状态showDownIcon:Boolean如果使用一个图标为这个按钮，是否切换图标图像当鼠标向下的按钮。showFocus:

11、BooleanShouldwevisiblychangestatewhenthecanvasreceivesfocus?Notethatbydefaulttheoverstateisusedtoindicatefocus.showFocused:BooleanShouldwevisiblychangestatewhenthecanvasreceivesfocus?showFocusedIcon:BooleanIfusinganiconforthisbutton,whethertoswitchtheiconimagewhenthebuttonreceivesfocus.showRollOver:

12、BooleanShouldwevisiblychangestatewhenthemousegoesoverthisobject?showRollOverIcon:BooleanIfusinganiconforthisbutton,whethertoswitchtheiconimageonmouserollover.showSelectedIcon:BooleanIfusinganiconforthisbutton,whethertoswitchtheiconimagewhenthebuttonbecomesselected.showTitle:BooleanDetermineswhethera

13、nyspecifiedtitlewillbedisplayedforthiscomponent.src:SCImgURLBaseURLfortheimage.Bydefault,StretchImgButtonsconsistofthreeimageparts:Astartimage(displayedatthetoporleft),ascalablecentralimageandanendimagedisplayedatthebottomorright.state:StateCurrentstateofthiswidget.StatefulCanvaseswillhaveadifferent

14、appearancebasedontheircurrentstate.title:StringThetexttitletodisplayinthisbutton.titleStyle:CSSStyleNameCSSstyleappliedtothetitletextonly.DefaultstoStretchImgButton.baseStylewhenunset.valign:VerticalAlignmentVerticalalignmentofthiscomponentstitle.vertical:BooleanDefaultisahorizontalbutton.VerticalSt

15、retchImgButtonsareallowed,buttitletext,ifany,willnotbeautomaticallyrotated.wrap:BooleanShouldthetitleforthisbuttonwrap?Ifunset,defaultbehavioristoallowwrappingifthis.verticalistrue,otherwisedisallowwrapping方法名称/描述action触发按钮点击事件voidaction()addToRadioGroup指定按钮的分组idvoidaddToRadioGroup(groupID:String)de

16、select去选中voiddeselect()getActionType获取按钮类型voidgetActionType()getState获取按钮状态StategetState()getTitle获取按钮标题StringgetTitle()iconClick按钮图标是否支持点击BooleaniconClick()isSelected按钮是否选中BooleanisSelected()removeFromRadioGroup移除分组voidremoveFromRadioGroup(groupID:String)select选中按钮voidselect()setActionType设置按钮类型voi

17、dsetActionType()setDisabled设置按钮的使能状态voidsetDisabled(disabled:Boolean)setIcon设置按钮图标voidsetIcon(icon:url)setTitle设置按钮标题voidsetTitle(newTitle)create方法详述方法名Create概述通过输入设置的各个属性创建对应的按钮返回菜单参数（可以是菜单组件的任意一个属性）参数说明width:N设置按钮宽度disabled:Boolean是否灰化actionfunction按钮动作响应title:String按钮标题使用示例isc.lButton.create(widt

18、h:75,autoDraw:true,disabled:false,action:function()/doaction,title:abc,);Isc.Button.create（title:重置“，/按钮显示字符width:100，/按钮的宽度top:60%，/按钮距离当前浏览器顶部位置：也可以是数字（单位px）left:55%，/按钮距离当前浏览器左部位置：也可以是数字（单位px）click:function（）/按钮的点击发生的事件);ToolStrip工具栏ToolStrip是一个工具条容器，可以将各种按钮放到这个容器上构成一个工具条组件属性、方法清单属性1名称/描述formWrap

19、per:AutoChildDynamicForminstancecreatedbyToolStrip.addFormltem()tocontainformitemsfordisplayinthistoolStrip.EachtimeaddFormItem()isrun,anewformWrapperautoChildwillbecreated,pickinguppropertiesaccordingtothestandardAutoChildpattern.formWrapperConstructorString:SmartClientclassforgeneratedToolStrip.fo

20、rmWrappercomponents.formWrapperDefaults:ObjectDefaultpropertiestoapplytoToolStrip.formWrappercomponents.formWrapperProperties:ObjectPropertiestoapplytoToolStrip.formWrappercomponents.height:NumberToolStripssetadefaultheighttoavoidbeingstretchedbycontaininglayouts.members:ArrayCanvasArrayofcomponents

21、thatwillbecontainedwithinthisToolstripseparatorSize:IntegerSeparatorthicknessinpixelsvertical:BooleanIndicateswhetherthecomponentsaredrawnhorizontallyfromlefttoright(false),orverticallyfromtoptobottom(true).addFormItem添加一个表单到组件上DynamicFormaddFormItem(formItem:FormItem,formProperties:Object,position:

22、Number)addMember添加一个成员到组件上voidaddMember(newMember:Canvas,position:Number)addMember方法详述方法名addMember概述添加一个组件返回无参数参数说明newMember:Canvas被添加的组件对象position:Number(可选)新组件的的位置使用示例varbtn=iscButton.create(width:75,autoDraw:true,disabled:false,action:function()/doaction,title:abc,);vartoolStrip=isc.ToolStrip.cre

23、ate(membersMargin:5,width:100%,height:100%)；toolStrip.addMember(btn);/向工具条上添加一个按钮五、ResourceTreeGrid:资源树组件资源树组件封装了获取资源树相关信息的功能组件属性、方法清单ResourceTreeGrid提供资源相关的数据，现在支持按资源类型过滤，该组件继承自TreeGrid，具有TreeGrid的所有方法。资源树组件的方法：方法名称/描述Create创建资源树组件，一般组件都是通过这个方法创建实体对象fetchData查询资源数据，条件参数为JSON对象，比如根据资源类型和用户名查询：fetchD

24、ata(moc:VirtualNe,CommonGroup,userName:admin);资源树节点的属性:方法名称/描述locateId资源树在树上的位置ID，为主键parentLocateId资源树在树上父节点ID，指明外键oid资源编号name资源名字ipAddress网元ip地址，该属性可能为空，只有网元才有此属性location资源所在位置，该属性可能为空connectionState资源连接状态，该属性后续在界面是以状态小图标的方式呈现managementState资源管理状态，该属性后续在界面是以状态小图标的方式呈现workState资源工作状态，该属性是一个数组visible

25、资源可见状态，如果为false，资源不能在界面显示movable资源可移动状态，如果为false资源不能在树上移动位置timeZone资源时区description资源描述，该属性可能为空create方法详述方法名Create概述通过输入设置的各个属性创建对应的资源树返回资源树的实体对象参数（可以是树组件的任意一个属性）参数说明ID树组件的IDrowContextClick设置节点右键响应事件recordClick设置节点单击事件recordDoubleClick设置节点双击事件使用示例示例一：ResourceTreeGrid.create(ID:resourceTree,left:50,to

26、p:50,width:300,height:500.this.contextMenu=Menu.create(width:100,data:title:刷新,resourceTreeGrid:this,icon:uep-2/unacknownledge.gif,click:function()this.resourceTreeGrid.data.reloadChildren(record););this.showContextMenu();,recordClick:isc.say(clickedcountry:+record.name+),/设置单击事件recordDoubleClick:is

27、c.say(Double-clickedcountry:+record.name+)/双击事件设置);fetchData方法详述方法名fetchData概述根据条件对资源树进行查询返回根据条件对资源树进行查询的结果使用示例根据资源类型即moc的值和当前登录的用户名进行资源查询：resourceTree.fetchData(moc:VirtualNe,CommonGroup,userName:admin);六、HTMLPane:HTMLPane组件可以用来显示html内容，如果html内容很多，组件将会提供滚动条效果图AjaxAsvnchroiiauE*JavaScriptArdX?-IL(AJ

28、AX)isaIVebdevelopm亡nttechniqueforcreatinginteractiveivebapplicationTheintentistomakewebpagesfeelmoreresponsivebyexchangingEmailamountsof组件属性、方法清单属性名称/描述contentsURL:URL组件需要显示的html的URLcontentsType:String显示html的方式contentsURLParams:Object组件需要显示的html的URL的参数dynamicContents:BooleanDynamiccontentsallowsthec

29、ontentsstringtobetreatedasasimple,butpowerfultemplate.Whenthisattributeissettotrue,expressionsoftheform$arbitraryJSherearereplacedtriggerare-evaluationoftheexpressionsinthecontentsstringyoucancallmarkForRedraw()onthecanvas.evalScriptBlocksIfevalScriptBlocksistrue,HTMLFlowwillpre-processtheloadedHTML

30、inordertomimichowtheHTMLwouldexecuteifitwereloadedasanindependentpageorloadedviaanIFRAME.httpMethod:SendMethodSelectstheHTTPmethodthatwillbeusedwhenfetchingcontent.ValidvaluesarePOSTandGET.loadingMessage:HTMLHTMLtoshowwhilecontentisbeingfetched,方法名称/描述contentLoaded当组件的内容加载完成后该方法会被触发voidcontentLoaded

31、()handleError当组件加载的内容加载错误的时候该方法会被调用BooleanhandleError(rpcRequest:RPCRequest,rpcResponse:RPCResponse)loadingContent当组件正在从服务端加载内容的时候该方法返回truevoidloadingContent()setContentsURL设置组件内容的urlvoidsetContentsURL(url,params)transformHTML覆盖该方法可以对加载的html内容进行修改后再显示voidtransformHTML(html)七、UploadForm:文件上传组件文件上传组件。

32、效果图上传文件二浏览提交组件属性、方法清单属性名称/描述action:String请求服务端servlet的urlwidth:Number组件宽度方法名称/描述create创建组件。UploadFormcreate(configlnfo:Object)onSuccess上传成功时的回调方法。voidonSuccess(fileName:String)onFailed上传失败时的回调方法。voidonFailed(fileName:String)create方法详述方法名create概述创建组件。返回UploadForm:新创建的组件实例。参数参数说明params：Object参数对象，包括以下

33、属性：action:String请求服务端servlet的urlwidth:Number组件宽度使用示例varuploadForm=isc.MyUploadForm.create(width:100%,showTitle:true,action:/servlets-examples/upload,cellPadding:2,/元素内补丁cellSpacing:2,/元素间间隙onSuccess:function(filenamethis.Super(onSuccess,arguments);isc.say(onSuccess:function+filename);,onFailed:funct

34、ion(filename)this.Super(onSuccess,arguments);isc.say(onFailed:function);八、PageListGrid:表格分页组件对表格组件进行简单封装，对表格提供分页功能。效果图MPB厲武理期Inthu片鼻f*?!Kwt鼻MHW1_tM*3maM$TMhmJhUw_WJMhvwiWDHHWIJMIrinmjItSHn_W，hM_ttJ#_WMfWjHClKnwi,tridfrwi,tTTr-tTlttmitfBYlffniinruvntnrmintFBYIVAWAiW*VMg_m：artnW).*Irvlim|idwwhptaMto.flMIrvl4WVl4Mp_m#dfl*EIWto9M_MItotl细feiWIte*1MthwiWgrirtb-WUrtfl曲WbOfMy牌创jg)H