SAPUI5 控件不显示

Question

我正在尝试创建一个 SAPUI5 应用程序，我已经得到了第一个视图。在第一个视图中，我想要的只是 2 个面板，一个带有 4 个按钮，另一个带有 table，但是当我运行解决方案时，我无法全部显示。任何帮助将不胜感激 - 提前致谢！

这是 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");
},

Answer 1

您忘记return您的视图中的控件。将所有东西放在周围的容器中，然后 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 文件中只需要一次。

SAPUI5 控件不显示

SAPUI5 controls not displaying

javascript

sapui5

hana