JSBin:如何创建 sapui5 的演示示例? [英] JSBin: How to create demo example's of sapui5?

问题描述

我想在 stackoverflow 上分享 SAPUI5 的实际工作示例，但我不知道如何创建 JSBin 示例或我们必须添加哪些内容，或者是否有任何简单的方法来创建 JSBin 的演示示例.

I want share working live example of SAPUI5 on stackoverflow, but I don't know how to create the JSBin example or which things we have to add or is there any simple way to create demo example of JSBin.

推荐答案

或者，您可以创建一个 Stack Snippet 可通过单击蓝色的运行代码片段"按钮运行:

Or, you can create a Stack Snippet which is runnable by clicking the blue 'Run Code Snippet' button:

sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
        rows : [
            { value : "sap-icon://syringe",    col2 : "Value 2",  col3 : "Value 3",  ol4 : "Value 4" },
            { value : "sap-icon://account",    col2 : "Value 10", col3 : "Value 11", col4 : "Value 12" },
            { value : "sap-icon://chalkboard", col2 : "Value 14", col3 : "Value 15", col4 : "Value 16" },
            { value : "sap-icon://e-care",     col2 : "Value 18", col3 : "Value 19", col4 : "Value 20" }
        ]
    });

    this.getView().setModel(oModel);
}
});

sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

/* extra CSS classes here */

<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
    <Table items="{/rows}">
        <columns>
            <Column>
                <Text text="Col1" />
            </Column>
            <Column>
                <Text text="Col2" />
            </Column>
            <Column>
                <Text text="Col3" />
            </Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <core:Icon src="{value}" />
                    <Text text="{col2}" />
                    <Text text="{col3}" />
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</mvc:View>
</script>

这篇关于JSBin:如何创建 sapui5 的演示示例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！