tiles都是完整的html,javascript-使用组件实现Tiles布局

我试图在openui5中使用组件创建基于图块的布局.我将代码基于ui5 explored site处的TileContainer示例

编辑：该组件工作,但TileContainer / StandardTile代码将不会显示.如果我直接从Index.html实例化视图,而忽略该组件,则会显示图块.如果使用Page控件将它们包装在视图中,它将无法正常工作.但是,List控件确实与组件一起显示,但是如果我也使用Page控件包装列表,则不会显示.

页面和图块控件不兼容吗？

我已经用当前版本替换了我的代码,这应该可以更好地帮助其他人,因为它现在更直接地专注于在Tile视图中使用组件的问题,而不是我之前已经解决的更简单的错误.

编辑：通过使用XML视图中的控件,该问题已解决.现在,瓷砖可以正确显示.

我的index.html是：

data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_bluecrystal"

data-sap-ui-xx-bindingSyntax="complex">

body, html, #content {

height:100%;

}

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");

我的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是：

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.

showHeader="false"

enableScrolling="false" >

id="container"

tiles="{/TileCollection}">

icon="sap-icon://{icon}"

title="{title}" />

我的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);

}

});

我的tile.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中,如下所示：

xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">

showHeader="false"

enableScrolling="false" >

id="container"

tiles="{/TileCollection}">

当然,sap.m.App可以在单独的视图/控制器文件中实现,并充当“根”视图/控制器.

标签：sapui5,javascript

来源： https://codeday.me/bug/20191028/1955611.html