我正在尝试在 openui5 中使用组件创建基于图 block 的布局。我的代码基于 ui5 explored site 处的 TileContainer 示例
编辑:该组件有效，但不会显示 TileContainer/StandardTile 代码。如果我直接从 Index.html 实例化 View ，忽略组件，则显示图 block 。如果我使用 Page 控件将它们包装在 View 中，它将不起作用。但是，List 控件确实会与组件一起显示，但如果我还使用 Page 控件来包装列表，则不会。
Page 和 Tile 控件是否不兼容？
我已经用我当前的版本替换了我的代码，这应该能够更好地帮助其他人，因为它现在更直接地关注将组件与 Tile View 一起使用的问题，而不是我之前遇到的更简单的错误现在已经解决了。
编辑:问题已通过使用 XML View 中的控件得到解决。磁贴现在可以正确显示。
我的 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.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<style >
body, html, #content {
height:100%;
}
</style>
<script>
sap.ui.localResources("my_info");
sap.ui.localResources("view");
sap.ui.localResources("component");
sap.ui.localResources("data");
var oCompCont1 = new sap.ui.core.ComponentContainer("CompCont1", {
name: "component"
});
oCompCont1.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
我的 Component.js 是:
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.core.mvc.ViewType");
jQuery.sap.require("sap.m.Page");
jQuery.sap.declare("component.Component");
sap.ui.core.UIComponent.extend("component.Component", {
metadata: {
properties: {
text: "string"
}
}
});
component.Component.prototype.createContent = function(){
this.oView = sap.ui.xmlview({id:"view1", viewName:"view.Home"});
return this.oView;
};
我的 Component.json 是:
{
"name": "component.Component",
"version": "0.1.0",
"description": "Tiles Component"
}
我的 Home.view.xml 是:
<mvc:View
height="100%"
controllerName="view.Home"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
//ensure you use the App control, this fixed the problem for me.
<App>
<Page
showHeader="false"
enableScrolling="false" >
<TileContainer
id="container"
tiles="{/TileCollection}">
<StandardTile
icon="sap-icon://{icon}"
title="{title}" />
</TileContainer>
</Page>
</App>
</mvc:View>
我的 Home.controller.js 是:
sap.ui.controller("view.Home", {
onInit : function (evt) {
var sPath = jQuery.sap.getModulePath("data", "/tiles.json");
var oModel = new sap.ui.model.json.JSONModel(sPath);
this.getView().setModel(oModel);
}
});
我的 tiles.json 是:
{
"TileCollection" : [
{
"icon" : "document-text",
"title" : "Personal Data"
},
{
"icon" : "addresses",
"title" : "Address Data"
},
{
"icon" : "simple-payment",
"title" : "Bank Details"
},
{
"icon" : "car-rental",
"title" : "Vehicle Details"
},
{
"icon" : "study-leave",
"title" : "Training and Qualifications"
}
]
}
提前谢谢你。
最佳答案
正如上面的评论和根据 this 所讨论的问题你应该把你的 sap.m.TileContainer 包装成一个 sap.m.App 像这样:
<mvc:View height="100%" controllerName="sap.ui.demo.Onepage.view.App"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<App>
<Page
showHeader="false"
enableScrolling="false" >
<TileContainer
id="container"
tiles="{/TileCollection}">
<StandardTile icon="sap-icon://{icon}" title="{title}" />
</TileContainer>
</Page>
</App>
当然，sap.m.App 可以在单独的 View / Controller 文件中实现，并充当“根” View / Controller 。
关于javascript - 使用组件实现 Tiles 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27501283/