SAPUI5控件不顯示

我正在嘗試創建一個SAPUI5應用程序，並且直到第一個視圖爲止。我想要的第一個視圖是2個面板1和4個按鈕，另一個有一個表格，但是當我運行解決方案時，我無法全部顯示。任何幫助將非常感謝 - 提前感謝！SAPUI5控件不顯示

爲index.html的繼承人代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> 


     <script src="resources/sap-ui-core.js" 
       id="sap-ui-bootstrap" 
       data-sap-ui-libs="sap.ui.commons, sap.ui.table" 
       data-sap-ui-theme="sap_bluecrystal"> 
     </script> 
     <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required --> 

     <script> 
       sap.ui.localResources("casemanagement"); 
       var view = sap.ui.view({id:"idHome1",  viewName:"casemanagement.Home.Home", type:sap.ui.core.mvc.ViewType.JS}); 
      view.placeAt("content"); 
     </script> 

    </head> 
    <body class="sapUiBody" role="application"> 
     <div id="content"></div> 
    </body> 
</html>

這裏是我的javascript視圖代碼：

createContent : function(oController) { 

    var oPanelButtons = new sap.ui.commons.Panel({width:"600px",position:"center"}); 

    oPanelButtons.setTitle(new sap.ui.core.Title({text:"Case Management",icon:"images/hula.jpg"})); 

    var oMatrix = new sap.ui.commons.layout.MatrixLayout({layoutFixed: tue, width:"400px",columns:"4"}); 
    oMatrix.setWidths("100px","100px","100px","100px"); 

    var createCaseButton = new sap.ui.commons.Button({id:'createId',text:"Create Case"}); 
    var searchButton = new sap.ui.commons.Button({id:'searchId',text:"Search Cases"}); 
    var analyticsButton = new sap.ui.commons.Button({id:'analyticsId',text:"Case Analytics"}); 
    var helpButton = new sap.ui.commons.Button({id:'helpId',text:"Help"}); 

    oMatrix.createRow(createCaseButton,searchButton,analyticsButton,helpButton); 

    oPanelButtons.addContent(oMatrix); 

    var oPanelTable = new sap.ui.commons.Panel({width:"600px",position:"center"}); 

    var oTable = new sap.ui.table.Table({title: "Open Cases Pending Your Action", 
             visibleRowCount:10, 
             firstVisibleRow:3, 
             selectionMode: sap.ui.table.selectionMode.Single 
     }); 

    oTable.addColumn(new sap.ui.table.Column({ 
     label: new sap.ui.commons.Label({text: "Case#"}), 
     template: new sap.ui.commons.TextView().bindProperty("text", "caseNumber"), 
     sortProperty: "caseNumber", 
     filterProperty: "caseNumber", 
     width: "100px" 
    })); 

    oTable.addColumn(new sap.ui.table.Column({ 
     label: new sap.ui.commons.Label({text: "Submitted By"}), 
     template: new sap.ui.commons.TextView().bindProperty("text", "submittedBy"), 
     sortProperty: "submittedBy", 
     filterProperty: "submittedBy", 
     width: "100px" 
    })); 

    oTable.addColumn(new sap.ui.table.Column({ 
     label: new sap.ui.commons.Label({text: "Created On"}), 
     template: new sap.ui.commons.TextView().bindProperty("text", "createDate"), 
     sortProperty: "createDate", 
     filterProperty: "createDate", 
     width: "100px" 
    })); 

    oTable.addColumn(new sap.ui.table.Column({ 
     label: new sap.ui.commons.Label({text: "Case Type"}), 
     template: new sap.ui.commons.TextView().bindProperty("text", "caseType"), 
     sortProperty: "caseType", 
     filterProperty: "caseType", 
     width: "100px" 
    })); 

    oPanelTable.addContent(oTable); 

    oPanelButtons.placeAt("casemanagement.Home.Home"); 
    oPanelTable.placeAt("casemanagement.Home.Home"); 
},

來源

2015-09-05 Ryan232

你在你看來忘了return您的控件。把一切都放在一個容器周圍，然後返回它是這樣的：

createContent : function(oController) { 
    // create controls like you do it right now 
    // but rather than using placeAt put them in one container 
    // and return the container. For Example: 
    var container = new sap.ui.layout.VerticalLayout({ 
     content : [oPanelButtons, oPanelTable] 
    }); 
    return container; 
}

該框架將它注入你到HTML。您無需在您的視圖中明確呼叫placeAt。這只是在你的HTML文件中一次。

來源

2015-09-05 10:05:51

非常感謝很多解決了我的問題 – Ryan232

SAPUI5控件不顯示

回答

相關問題