zoukankan      html  css  js  c++  java
  • 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,
        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,
        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,
             500,
            dataSource: contactsDS
        });
        isc.DynamicForm.create({
            ID: "contactsForm",
            left: 50, top: 200,
             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();
     
     
     
     
     
  • 相关阅读:
    Linkedin工程师是如何优化他们的Java代码的
    如何调试 Android 上 HTTP(S) 流量
    Facebook工程师是如何改进他们Android客户端的
    modified: xxx(modified content, untracked content)
    在Android工程中加入AIDL文件时,gen目录生成的文件报错-问题解决
    Ubuntu14.04LTS下使用eclipse搭建Cocos2d-x的Android环境
    Ubuntu Linux下安装Oracle JDK
    查看Android源码版本
    Ubuntu Linux下安装Oracle JDK
    Android Initializing a Build Environment
  • 原文地址:https://www.cnblogs.com/hihao/p/7896941.html
Copyright © 2011-2022 走看看