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

 

 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM