java smartclient_smartClient 2--可视化组件

一、功能：

1、标准功能

Foundation Services

Foundation Components

Event Handling

Controls

Forms

Grids

Trees

Layout

DataBinding

Themes/Skins

2、扩展功能

SmartClientServer //包含Java类库的集成后端

Analytics

Real-Time Messaging

Network Performance

二、开发语言

1、XML

2、JavaScript(推荐使用)

四、样式修改：

1、更换系统皮肤：引用不同的css包

2、自定义样式：

a. 同系统皮肤自成一个文件夹的形式一样，新建文件夹(如BrushedMetal)，将最接近目的皮肤的文件夹里的内容(包含skin_styles.css   images/   load_skin.js)copy进新文件夹

b. 在首页入口文件中引用的皮肤样式文件中引入新建样式

c. 在skin_styles.css和load_skin.js的文件底部重写样式(找到某个需要修改的类，例如button，在后面写上覆盖样式即可)

3、重构独立的组件内部的样式

五、可视化组件

1、独立组件

a. 识别组件(引用组件方式)

采用 id:   默认组件的id是全局命名空间下的(所以命名id时，需要注意唯一性)

isc.Label.create({

ID:"helloWorldLabel",

contents:"hello world"});

自动分配id，规则：isc_ClassName_ID_#

var helloWorldLabel =isc.Label.create({

contents:"Hello World"});

b. 组件布局：通过设置组件属性的方式创建组件    注意：如果不是在组件中定义组件布局(如下)，而是在CSS/HTML中直接修改，则必须手动做好浏览器兼容问题

isc.Label.create({

top:10, //int，相对于该组件的container

left: 10,

width:10, //int | string "50%", 默认100

contents: "hello world",

overflow:"hidden | scroll | auto",

position:"relative | absolute | fixed" //默认absolute，相对于该组件的container

});

c. 组件的渲染、隐藏、显示

autoDraw: true | false; //默认TRUE，即create即显示，如果FALSE，则需要js控制： hiddenBtn.show();

show();

hide();

eg.

isc.Button.create({

ID:'hiddenBtn',

title:'Hidden',

autoDraw:false});

d. 组件的事件

click recordClick change tabSelected

eg.

isc.Button.create({

ID:"clickBtn",

title:"click me",

click:function(){},

click:"isc.warn('button was clicked')",

click:"clickFn()"});function clickFn() {......}

e. 数据绑定

字段field：包括组件字段 和 数据源字段

//网格的形式显示

isc.ListGrid.create({

ID:"contactList",

left:50, top: 50,

width:300,

fields: [

{name:"salutation", title: "Title"}, //name 是关联数据库中的value，title是显示文字(在表单控件中是作为label显示，在button中是作为button上的文字显示)

{name: "firstname", title: "First Name"}

]

});

data: [

{salutation:"Ms", firstname: "Kathy"},

{salutation:"Ms", firstname: "Kathy"},

];//DynamicForm的格式显示

isc.DynamicForm.create({......同上});

g. 表单控件    注意：一旦组件绑定了数据源，组件将会根据数据源的数据格式自动匹配表单控件《即不需要fields字段，会自动匹配并绑定数据》。但是通常fields和

dataSource共存，行使不同的职责( 表单字段(field)或者说控件的默认类型(editorType)是text )//editorType： text select date checkbox radioGroup textArea

isc.DynamicForm.create({

ID:"contactForm",

......,

fields: [

{name:"salutation", title: "Title", editorType: "select"},

{name:"firstname", title: "First Name", editorType: "date"},

{name:"gender", title: "gender", editorType: "radioGroup", valueMap: ["female", "male"]} //valueMap 是数组形式的radio的选项显示文字

]

});

h. 数据源(数据源的定义格式类似SQL数据存储格式，区别在于：1)存储方式是XML或者js；2)必须定义数据类型；......)

Ms

Mr

Mrs

Employed

Unemployed

h1.    xml格式的DataSource创建好之后，在js文件里引入该文件，并通过 dataSource 属性，即可绑定数据(此时用dataSource代替了fields属性)

isc.ListGrid.create({

ID:"contactsList",

left:50, top: 50,

width:500,

dataSource: contactsDS

});

isc.DynamicForm.create({

ID:"contactsForm",

left:50, top: 200,

width:300,

dataSource: contactsDS

});

h2.    字段属性(fields的属性type)和表单控件一一对应规则：

Field attribute Form control

valueMap provided SelectItem (dropdown)

type:"boolean"CheckboxItem (checkbox)

type:"date"DateItem (date control)

length> 255 TextAreaItem (large text box)

h3.    数据源的操作

//以下方法均包含可选三个参数：dataObject，callback，propertiseObject

fetchData();

filterData();

addData();

updateData();

removeData();//使用方法: 1)直接在数据源中使用 2)直接在组件做数据绑定的时候使用

contactDS.addData(

{salutation:"Mr", firstname: "Steven", lastname: "Hua"},"say("hello")",

{prompt:"add new contact..."}

);

or

contactsList.fetchData(

{lastname:"nihao"}

);

h4.    调用组件方法操作数据

editRecord();

editNewRecord();

saveData();