smartClient 2--可視化組件

時間 2019-11-09

標籤 smartclient 可視化組件简体版

原文原文鏈接

1、功能：

一、標準功能

Foundation Services
Foundation Components
Event Handling
Controls
Forms
Grids
Trees
Layout
DataBinding
Themes/Skins

二、擴展功能

SmartClientServer  //包含Java類庫的集成後端
Analytics
Real-Time Messaging
Network Performance

2、開發語言

一、XML

二、JavaScript（推薦使用）

3、資源： https://www.smartclient.com/smartclient/showcase/?id=formLayoutFilling&skin=Simplicity&fontIncrease=1&sizeIncrease=2

4、樣式修改：

一、更換系統皮膚：引用不一樣的css包

二、自定義樣式：

a. 同系統皮膚自成一個文件夾的形式同樣，新建文件夾（如BrushedMetal），將最接近目的皮膚的文件夾裏的內容（包含skin_styles.css images/ load_skin.js）copy進新文件夾

b. 在首頁入口文件中引用的皮膚樣式文件中引入新建樣式

c. 在skin_styles.css和load_skin.js的文件底部重寫樣式（找到某個須要修改的類，例如button，在後面寫上覆蓋樣式便可）

三、重構獨立的組件內部的樣式

5、可視化組件

一、獨立組件

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();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。