JSBin：sapui5のデモ版の作成方法は？

Question

私は、stackoverflow上でSAPUI5の実例を共有したいと思いますが、JSBinのサンプルの作成方法や追加する必要のあるもの、またはJSBinのデモの例を作成する簡単な方法はありません。

Answer 1

あなたはHTMLのみタブとそのController下のJavascriptタブになり、ブートストラップスクリプト、Viewが必要になります。

ログイン後にthisをテンプレートとして保存し、サンプルとして使用することができます。

Answer 2

それとも、あなたが青の「ファイル名を指定して実行コードスニペット」ボタンをクリックすることで実行可能であるStack Snippet作成することができます：ウル時間@Qualitureため

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>