smartClient 2--可视化组件
生活随笔
收集整理的這篇文章主要介紹了
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（推薦使用） 三、資源：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，相對于該組件的containerleft: 10,width: 10, //int | string "50%", 默認100contents: "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 tabSelectedeg. 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..."} );orcontactsList.fetchData({lastname: "nihao"} );?
h4.?? ?調用組件方法操作數據 editRecord(); editNewRecord(); saveData();?
?轉載于:https://www.cnblogs.com/hihao/p/7896941.html
總結
以上是生活随笔為你收集整理的smartClient 2--可视化组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WPF 全球化和本地化（图解）
- 下一篇： RHEL6基础之三RHEL官网获取ISO