JSBin : sapui5의 데모 예제를 만드는 방법은 무엇입니까?

Question

SAPUI5의 라이브 예제를 stackoverflow에 공유하고 싶지만 JSBin 예제를 만드는 방법이나 추가해야 할 항목을 모르거나 JSBin의 데모 예제를 만들 수있는 간단한 방법이 있습니다.

Answer 1

당신은 부트 스트랩 스크립트가 필요합니다 View는 탭에만 HTML과 Controller에서 자바 스크립트 탭에있을 것이다.

로그인 한 후 this을 템플릿으로 저장하고 샘플을 시작 지점으로 사용할 수 있습니다.

Answer 2

또는, 파란색 '실행 코드 조각'버튼을 클릭하여 실행 가능한 인 Stack Snippet 만들 수 있습니다 통해 UR 시간 @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>