smartClient 2--可视化组件
Posted 霓好
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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）必须定义数据类型；......）
<DataSource ID="contactsDS">
<fields>
<field primaryKey="true" name="id" hidden="true" type="sequence" />
<field name="salutation" title="Title" type="text" >
<valueMap>
<value>Ms</value>
<value>Mr</value>
<value>Mrs</value>
</valueMap>
</field>
<field name="firstname" title="First Name" type="text" />
<field name="lastname" title="Last Name" type="text" />
<field name="birthday" title="Birthday" type="date" />
<field name="employment" title="Status" type="text">
<valueMap>
<value>Employed</value>
<value>Unemployed</value>
</valueMap>
</field>
<field name="bio" title="Bio" type="text" length="2000" />
<field name="followup" title="Follow up" type="boolean" />
</fields>
</DataSource>
h1. xml格式的DataSource创建好之后，在js文件里引入该文件，并通过 dataSource 属性，即可绑定数据（此时用dataSource代替了fields属性）
<isomorphic:loadDS ID="contactsDS" />
<%@ taglib uri="isomorphic" prefix="isomorphic" %>
<HTML>
<HEAD>
<isomorphic:loadISC />
</HEAD>
<BODY>
<SCRIPT>
<isomorphic:loadDS ID="contactsDS" />
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
});
</SCRIPT>
</BODY>
</HTML>
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();
以上是关于smartClient 2--可视化组件的主要内容，如果未能解决你的问题，请参考以下文章