smartclient框架 怎么加css

html-css012

smartclient框架 怎么加css,第1张

/**

* 使用SmartClient框架画 界面

*/

ClassFactory.defineClass("com_diskchangecfg_FrameworkLayout", VLayout)

isc.com_diskchangecfg_FrameworkLayout.addProperties({

width : "100%",

height : "100%",

membersMargin : 5,

layoutMargin : 8

})

isc.com_diskchangecfg_FrameworkLayout.addMethods({

initWidget : function() {

this.Super("initWidget", arguments)

this.initLayouts()

//this.refreshData()

},

initLayouts: function(){

//整体布局

var com_cm_diskchangecfg_layout = isc.HLayout.create({

ID : "com_cm_diskchangecfg_layout",

width : "100%",

height : "100%",

membersMargin : 10,

layoutLeftMargin : 25,

members : [

fetchButton,

deleteButton,

afreshButton,

queryStateButton

]

})

//查询按钮

var fetchButton = isc.Button.create({

width: 150,

title: "查询",

click: function(){

}

})

//删除按钮

var deleteButton = isc.Button.create({

width: 150,

title: "删除",

click: function(){

}

})

//注销按钮

var afreshButton = isc.Button.create({

width: 150,

title: "注销",

click: function(){

}

})

//查询任务状态

var queryStateButton = isc.Button.create({

width: 300,

title: "查询任务状态",

click: function(){

}

})

//空白区域

var areatable = isc.Label.create({

height:"100%",

width:"100%",

padding:"5",

align:"center",

valign:"center",

//overflow:"hidden",

showResizeBar:"true",

wrap:"false",

title:"asljdflajflaj",

showEdges:"true",

contents:""})

//表格

var datasourceform = isc.RestDataSource.create({

ID: "datasourceform",

fields: {

taskId:{name:"taskId",title: "任务号"},

tasktype1:{name:"tasktype1",title: "任务类型1"},

tasktype2:{name:"tasktype2",title: "任务类型2"},

client:{name:"client",title: "客户端数"},

state:{name:"state",title: "任务状态"}

}

})

//动态表格

isc.DynamicForm.create({

//left:0,

padding: 60,

//valuesManager:"dd",

numCols: 6,

//canSort:true,

titleWidth:80,

titlePrefix:"",titleSuffix:" ",

ID:"configform",

dataSource:datasourceform,

width: "100%",

height: "100%"

})

//表格

var datasourcelistgrid = isc.RestDataSource.create({

ID: "datasourcelistgrid",

dataFormat: "json",

fetchDataURL: "/aos-web/aos-diskchangecfg",

operationBindings: [{

operationType: "fetch",

dataProtocol: "getParams",

requestProperties: {

httpMethod: "get"

}

}

],

fields: {

grid_ip:{name:"taskId",title: "任务号"},

grid_taskt1:{name:"tasktype1",title: "任务类型1"},

grid_taskt2:{name:"tasktype2",title: "任务类型2"},

grid_client:{name:"client",title: "客户端数"},

grid_state:{name:"state",title: "任务状态"}

}

})

//列表视图

isc.ListGrid.create({

left:0,

canSort:true,

ID:"configGrid",

dataSource:datasourcelistgrid,

autoFetchData: false,

width: "100%",

height: "100%"

})

//将表格添加到上方布局

var resultvlayout = isc.VLayout.create(

{width:"100%",height:"100%",members:[configGrid]

})

//按钮布局

var fetchButton1 = isc.HLayout.create({align:"center",margin:5,membersMargin : 5,members:[fetchButton,

deleteButton,

afreshButton,

queryStateButton]})

//下方布局

var retchvlayout = isc.VLayout.create(

{width:"100%",height:"100%",members:[areatable,fetchButton1]

})

//整体布局调整

isc.SectionStack.create({

ID : "com_timeregion_mainsection",

visibilityMode: "multiple",//multiple

width: "100%",

height: "100%",

border:"0",

sections : [ {

title: "",

expanded: true,

canCollapse:true,

items: [

resultvlayout

]},

{

title: "",

expanded: true,

canCollapse:true,

items: [

retchvlayout

]}

]

})

this.addMembers([

com_timeregion_mainsection

])

}

})

1、在文档(document)对象里面用:

scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子--网页正文全宽)

scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在滚动条左边的页面宽度---页面被卷去左边)

2、在节点对象里面用:

offsetLeft/Top:获取对象相对于版面(css里面没有进行定位,则offsetParent取值为根元素进行计算)或由 offsetParent 属性指定的父坐标的计算左侧位置(当有css定位时,当前对象相对与offsetParent元素的距离)

offsetWidth/Height (width+padding+border)

获取当前对象的宽度。

style.width也是当前对象的宽度(width+padding+border)。

区别:1)style.width返回值除了数字外还带有单位px;

2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值;

3)如果没有给 HTML 元素指定过 width样式,则 style.width 返回的是空字符串;

offsetLeft :

当前对象到其上级层左边的距离。

不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。

style.left当前对象到其上级层左边的距离。

区别:1)style.left返回值除了数字外还带有单位px;

2)如对象到其上级层左边的距离设定值为百分比,style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值;

3)如果没有给 HTML 元素指定过 left样式,则 style.left返回的是空字符串;

注意:如果上级层为body,由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。

IE 1)如果Div的上级层是body,而div与body之间有个div,如body->div->divo;divo的offsetTop=div的padding+margin+boder;

2)如果Div的上级层是body,如body>divo;divo的offsetTop=div的padding+margin+boder;

这divo的offsetTop=divo的margin >body.padding则为divo的margin,否则为body.padding谁大是谁?

FF 上述两种情况:offsetTop=margin+padding

(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13

clientWidth/Height:

获取对象可见内容的宽度,不包括滚动条,不包括边框;

clientLeft/Top:

获取对象的border宽度

3、事件里面用的:

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

4、屏幕的:

window.screenTop 网页正文部分上

window.screenLfet 网页正文部分左

window.screen.height 屏幕分辨律的高

window.screen.left 屏幕分辨律的宽

window.screen.availHeight 屏幕可用工作区的高度

window.screen.availWidth 屏幕可用工作区的宽度

document.documentElement.scrollTop 垂直方向滚动的值

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth (包括边线的宽)

网页可见区域高: document.body.offsetHeight (包括边线的宽)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

网页正文部分上: window.screenTop

网页正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height

屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth

1. CS/CSS系统架构的基本概念 1.1系统架构定义

虽然B/S结构、J2EE架构愈来愈成为流行模式,但基于传统的C/S结构的应用程序还广泛地应用于各种行业。尤其是金融行业中的商业银行柜面-核心帐务系统等。一方面由于传统商业银行一般都有大量的字符终端等需要复用的设备,一方面也是因为他们存在大量密集的对实时性要求很高的高柜业务,使用传统的基于C/S结构或者C/S/S结构的应用效率更有保证。

C/S结构即CLIENT/SERVER结构。传统的C/S结构一般分为两层:客户端和服务器端。该结构的基本工作原理是,客户程序向数据服务器发送SQL请求,服务器返回数据和结果。客户端负责实现用户接口功能,同时封装了部分应用逻辑。服务器端的数据库服务器主要提供数据存储功能,也通过触发器和存储过程提供部分应用逻辑。

C/S/S结构即客户/应用服务器/数据库服务器三层结构,中间增加了应用服务器,通常实现应用逻辑,是连接客户与数据库服务器的桥梁。它响应用户发来的请求执行某种业务任务,并与数据库服务器打交道,技术实现上通常选用中间件产品,如BEA公司的TUXEDO和IBM公司的CICS等。(事实上J2EE架构的应用也属于这种三层或多层结构,这里不包括。)

三层或多层C/S结构与两层C/S结构相比,它的优势主要表现在:安全性加强、效率提高、易于维护、可伸缩性、可共享性、开放性好等。 1.2系统架构示意图

1.3CS/CSS系统架构中性能测试的特点 1.3.1CS/CSS系统架构的性能影响因素

由于CS/CSS系统的以下特性,测试工程师对一个CS/CSS系统实施性能测试具有很大的难度: *整个系统的各个部分使用多种操作系统,性能上有差别;

*整个系统架构的各个环节上使用多种数据库,同样在性能上有差别;

*应用是多个,分属多个种类,分布在不同设备上,包括自行开发的应用、第三方的应用; *系统中的设备、组件通过不同协议进行连接、通讯;

*系统的内部接口多,性能瓶颈多;而系统的整体性能往往取决于最差的部分;需要分别测试和联合测试

*系统的性能指标不光同应用系统架构有关,还和具体行业应用的业务模式有关; *采用此架构的行业应用往往是一个7×24小时系统;

*采用此架构的行业应用可能高柜业务多,这样会影响对性能度量项的选取和转换; *各个环节基本上以交换数据报文的方式通信,其格式经常会比较复杂。

因此这样的系统对于对测试工程师的知识的深度和广度都是一个考验。对于这样的系统,到底如何使用什么样的测试策略、如何分析测试需求、如何选取性能度量项的转换计算模型、如何确定测试内容和轮次、如何设计性能测试案例等等以及规划和实施性能测试中的其它诸多问题,都需要遵循一个系统的方法来解决。

1.3.2CS/CSS系统架构中性能测试的基本策略 1. 确定好测试工作范围

首先可以分析压力测试中最容易出现瓶颈的地方,从而有目的地调整测试策略或测试环境,使压力测试结果真实地反映出软件的性能。例如,服务器的硬件限制、数据库的访问性能设置等常常会成为制约软件性能的重要因素,但这些因素显然不是用户最关心的,我们在测试之前就要通过一些设置把这些因素的影响调至最低。

另外,用户更关心整个系统中哪个环节的性能情况也会影响工作范围。如有的环节是全新系统,而有的环节已经是成熟系统只是稍有改动,这样可能全新系统的局部性能测试就需要系统和全面一些。 2. 分析好客户的性能测试需求

客户是已经明确提出了性能指标,还是只提供了用户使用方式和历史交易流量数据,需要我们自己进行性能基准的计算?性能测试的目的是验证系统性能还是想确定目标系统的理想配置?是否还要使用测试结果预测在不同机型的处理能力?是否要求在性能测试各个轮次中安排性能调优过程等等问题都需要有针对性的解答。

3. 要作好性能测试的计划和方案

测试计划和方案中要注意测试需求分析阶段提出的问题的解决。 4. 确定的测试通过准则、性能测试的计划、结果要获得客户的认可

要和客户确认,系统的性能指标达标的标准是什么;对于性能测试中各个部分和步骤的计划和结果,甚至是性能测试过程,都要根据其重要程度,决定是否需要客户进行确认和签字。获得客户的认可是最重要的。

1.3.3CS/CSS系统中性能测量与性能探测 性能测量

1. 在性能测试开始前必须认真规划性能测量:

软件性能测量技术范围很广。可以包括日志、事件计数、事件持续时间、采样等性能测量技术。 *确定性能测量的策略:我们要测试什么? *规划性能测试中使用什么样的测量工具。