对于sap.m.StandardTile,我们拥有出色的sap.m.TileContainer,但是我找不到与sap.m.GenericTile类似的东西。
基本上,我正在寻找一个包含多个Generic Tiles的控件,并将根据设备的大小自动调整其大小和居中。
现在,这就是我正在做的事情:
<GenericTile header="{/0/header}" subheader="{/0/subheader}" press="onTilePress">
<TileContent>
<ImageContent src="{/0/src}"/>
</TileContent>
</GenericTile>
<GenericTile header="{/1/header}" subheader="{/1/subheader}" press="onTilePress">
<TileContent>
<ImageContent src="{/1/src}"/>
</TileContent>
</GenericTile>
除了必须手动调用JSON文件中的每个条目之外,是否有自动化的方法?
请帮助。
答案 0 :(得分:1)
您可以使用Flexbox
来聚合和绑定项目,而不是单独/手动绑定它们,而可以使用grid layout
来控制设备的视图。 GridLayout 中的defaultSpan
控件属性决定了磁贴的外观,具体取决于设备的屏幕尺寸,即XL,L,M和S屏幕显示。
//Example data.json
{
"ProductCollection": [{
"productHeader": "Tile Header - 1",
"productSubHeader": "Tile SubHeader - 1",
"ProductPicUrl": "sap-icon://competitor"
}, {
"productHeader": "Tile Header - 2",
"productSubHeader": "Tile SubHeader - 2",
"ProductPicUrl": "sap-icon://badge"
}, {
"productHeader": "Tile Header - 3",
"productSubHeader": "Tile SubHeader - 3",
"ProductPicUrl": "sap-icon://broken-link"
}, {
"productHeader": "Tile Header - 4",
"productSubHeader": "Tile SubHeader - 4",
"ProductPicUrl": "sap-icon://create"
}, {
"productHeader": "Tile Header - 5",
"productSubHeader": "Tile SubHeader - 5",
"ProductPicUrl": "sap-icon://pending"
}, {
"productHeader": "Tile Header - 6",
"productSubHeader": "Tile SubHeader - 6",
"ProductPicUrl": "sap-icon://decision"
}, {
"productHeader": "Tile Header - 7",
"productSubHeader": "Tile SubHeader - 7",
"ProductPicUrl": "sap-icon://process"
}, {
"productHeader": "Tile Header - 8",
"productSubHeader": "Tile SubHeader - 8",
"ProductPicUrl": "sap-icon://accept"
}, {
"productHeader": "Tile Header - 9",
"productSubHeader": "Tile SubHeader - 9",
"ProductPicUrl": "sap-icon://alert"
}]
}
<!--In **Main.view.xml** -->
<Page id="page" title="Page Title" showHeader="true" enableScrolling="true">
<content>
<Panel height="100%" width="100%" backgroundDesign="Transparent">
<layout:Grid containerQuery="true" defaultSpan="XL12 L12 M12 S12" width="100%">
<layout:VerticalLayout width="100%" class="gridWrapper">
<FlexBox alignItems="Center" alignContent="Center" direction="Row" renderType="Bare" wrap="Wrap" width="100%" displayInline="true" fitContainer="true" items="{/ProductCollection}">
<items>
<GenericTile header="Headers" subheader="Subheader" press="onTilePress">
<TileContent>
<ImageContent src="{ProductPicUrl}" />
</TileContent>
</GenericTile>
</items>
</FlexBox>
</layout:VerticalLayout>
</layout:Grid>
</Panel>
</content>
</Page>