smartClient 2--可視化組件
阿新 • • 發佈：2017-11-26
數組 tar ole man change eas www. func glib 一、功能：
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（推薦使用） 三、資源：https://www.smartclient.com/smartclient/showcase/?id=formLayoutFilling&skin=Simplicity&fontIncrease=1&sizeIncrease=2 四、樣式修改： 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--可視化組件