概述

中服云开发平台提供了丰富的前端组件,可以极大的简化研发人员对前台页面的工作,而专注于自己的业务,只需调用对应的组件即可开发出实用且绚丽的功能应用。

1.数据列表

countryData = [
{
    continent:"North America",
    countryName:"United States",
    countryCode:"US",
    area:9631420,
    population:298444215,
    gdp:12360.0,
    independence:new Date(1776,6,4),
    government:"federal republic",
    government_desc:2,
    capital:"Washington, DC",
    member_g8:true,
    article:"http://en.wikipedia.org/wiki/United_states"
}
]
isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital", showIf:"false"},
        {name:"continent", title:"Continent"}
    ],
    canReorderFields: true
})

isc.IButton.create({
    left:0, top:240,
    title:"Show Capitals",
    click:"countryList.showField('capital')"
})

isc.IButton.create({
    left:120, top:240,
    title:"Hide Capitals",
    click:"countryList.hideField('capital')"
})

2.表单

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 250,
    fields: [
        {name: "username",
         title: "用户名",
         type: "text",
         required: true,
         defaultValue: "bob"
        },
        {name: "email",
         title: "Email",
         required: true,
         type: "text",
         defaultValue: "bob@isomorphic.com"
        },
        {name: "password",
         title: "密码",
         required: true,
         type: "password"
        },
        {name: "password2",
         required: true,
         title: "确认密码",
         type: "password"
        }
    ]
});

3.表单控制

  • 文本
isc.DynamicForm.create({
    width: 300,
    fields: [
        {title:"Item", type:"text"}
    ]
});

  • 文本域
isc.DynamicForm.create({
    width: 300,
    fields: [
        {title:"Description", type:"textArea"}
    ]
});

  • 日期
isc.DynamicForm.create({
    ID: "dateForm",
    numCols: 4,
    width: 600,
    fields: [
        {name:"pickListDate", title:"PickList Date", type:"date", change:"dateLabel.setContents(value)"},
        {name:"directInputDate", title:"Direct Input Date", type:"date", useTextField:true, change:"dateLabel.setContents(value)"}
    ]
});

  • 时间
isc.DynamicForm.create({
    ID: "timeForm",
    fields: [
        {name: "time", title: "Time", type: "time"}
    ]
});

  • 下拉框
isc.DynamicForm.create({
    width: 500,
    fields: [{
        name: "shipTo", title: "Ship to", type: "select",
        hint: "<nobr>Overnight shipping available for countries in bold</nobr>",
        valueMap: {
            "US" : "<b>United States</b>",
            "CH" : "China",
            "JA" : "<b>Japan</b>",
            "IN" : "India",
            "GM" : "Germany",
            "FR" : "France",
            "IT" : "Italy",
            "RS" : "Russia",
            "BR" : "<b>Brazil</b>",
            "CA" : "Canada",
            "MX" : "Mexico",
            "SP" : "Spain"
        },
        imageURLPrefix:"flags/16/",
        imageURLSuffix:".png",
        valueIcons: {
            "US" : "US",
            "CH" : "CH",
            "JA" : "JA",
            "IN" : "IN",
            "GM" : "GM",
            "FR" : "FR",
            "IT" : "IT",
            "RS" : "RS",
            "BR" : "BR",
            "CA" : "CA",
            "MX" : "MX",
            "SP" : "SP"
        }
    }]
});

  • 数字
isc.DynamicForm.create({
    width: 200,
    fields: [
        { name: "shoeSize", title: "Shoe Size", editorType: "spinner", defaultValue: 8.5,
          min: 6, max: 13, step: 0.5, width: 70}
    ]
});

  • 布尔型
isc.DynamicForm.create({
    fields: [
        {title:"In Stock", type:"checkbox"}
    ]
});

4.数据明细

isc.DetailViewer.create({
    ID:"itemViewer",
    dataSource:"supplyItem",
    width:"100%",
    margin:"25",
    emptyMessage:"Select an item to view its details"
});

5.树列表

isc.TreeGrid.create({
    ID: "employeeTree",
    width: 500,
    height: 400,
    dataSource: "employees",
    autoFetchData:true,
    nodeIcon:"icons/16/person.png",
    folderIcon:"icons/16/person.png",
    showOpenIcons:false,
    showDropIcons:false,
    closedIconSuffix:"",
    fields: [
        {name: "Name", formatCellValue: "record.Job+': '+value"}
    ]
});

6.图表

var chartData = [
    {region: "West",  product: "Cars", sales: 37},
    {region: "North", product: "Cars", sales: 29},
    {region: "East",  product: "Cars", sales: 80},
    {region: "South", product: "Cars", sales: 87},

    {region: "West",  product: "Trucks", sales: 23},
    {region: "North", product: "Trucks", sales: 45},
    {region: "East",  product: "Trucks", sales: 32},
    {region: "South", product: "Trucks", sales: 67},

    {region: "West",  product: "Motorcycles", sales: 12},
    {region: "North", product: "Motorcycles", sales: 4},
    {region: "East",  product: "Motorcycles", sales: 23},
    {region: "South", product: "Motorcycles", sales: 45}
]

// 像这样构造简单的图表 ...

isc.FacetChart.create({
    ID: "simpleChart",
    // You use facets to define the ways in which you would like the chart to
    // break down the data. In this case, our data has two dimensions: region and product.
    facets: [{
        id: "region",
        title: "Region"  // 图标中显示的标题
    },{
        id: "product",
        title: "Product"
    }],
    data: chartData,        // 关联数据
    valueProperty: "sales",
    chartType: "Area",
    title: "Sales by Product and Region"  // 整个图表的标题
});

7.布局

isc.HLayout.create({
    width: "100%",
    height: "100%",
    members: [
        isc.Label.create({
            contents: "Navigation",
            align: "center",
            overflow: "hidden",
            width: "30%",
            showResizeBar: true,
            border: "1px solid blue"
        }),
        isc.VLayout.create({
            width: "70%",
            members: [
                isc.Label.create({
                    contents: "Listing",
                    align: "center",
                    overflow: "hidden",
                    height: "30%",
                    showResizeBar: true,
                    border: "1px solid blue"
                }),
                isc.Label.create({
                    contents: "Details",
                    align: "center",
                    overflow: "hidden",
                    height: "70%",
                    border: "1px solid blue"
                })
            ]
        })
    ]
});

8.更多...

点击下面链接以了解更全面的组件以及使用示例。

组件示例