为了学习SAPUI5，自己就想了个需求，做了个手机版本的会员管理系统，折腾了一周，总算做出一个页面来，这只是会员卡页面的一个样子，后面继续完善，
此页在HEAD中用的数据元素有：ObjectHeader，HeaderContainer，IconTabHeader
在主内容中显示是的会员卡内容，使用的是SlideTile，为了使用此内容居中，我又在此的外面加了一层Panel，其实我也有许多是不知所以然的，反正对照着SAPUI5,官网的例子，写的
以下是XML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:l="sap.ui.layout" height="100%" controllerName="aa.aaa.controller.Page"> <Page title="我的会员卡" id="mycard" navButtonPress="onNavButtonPress" showNavButton="true"> <ObjectHeader class="Header" id="oh1" responsive="true" binding="/ProductCollection/0" intro="Description" title="Name" number="11" numberUnit="CurrencyCode" showMarkers="true" markFlagged="true" markFavorite="true" numberState="Success" backgroundDesign="Transparent"> <headerContainer> <HeaderContainer class="IconTab" id="aaa" height="99px" showDividers="true"> <IconTabHeader id="idIconTabBar" select="handleIconTabBarSelect" class="sapUiResponsiveContentPadding" backgroundDesign="Transparent"> <items> <IconTabFilter icon="sap-icon://hint" iconColor="Positive" count="1" text="我关注的" key="Ok"> </IconTabFilter> <IconTabFilter icon="sap-icon://credit-card" iconColor="Critical" count="2" text="我的会员卡" key="Heavy"/> <IconTabFilter icon="sap-icon://inventory" iconColor="Negative" count="1234" text="我的积分" key="Overweight" textDirection="LTR"/> </items> </IconTabHeader> </HeaderContainer></headerContainer> </ObjectHeader> <content> <Panel id="__panel0"> <SlideTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout"> <tiles> <GenericTile backgroundImage="../image/vip11.png" frameType="TwoByOne" press="press"> <TileContent footer="有效期至：2021年12月31日"> <NewsContent contentText="商家名称：*********" subheader="商家地址：******************"/> </TileContent> </GenericTile> </tiles> </SlideTile> <SlideTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout"> <tiles> <GenericTile backgroundImage="../image/vip21.png" frameType="TwoByOne" press="press"> <TileContent footer="August 21, 2016"> <NewsContent contentText="Wind Map: Monitoring Real-Time and Fore-casted Wind Conditions across the Globe" subheader="Today, SAP News"/> </TileContent> </GenericTile> <GenericTile backgroundImage="../image/vip22.png" frameType="TwoByOne" press="press"> <TileContent footer="August 21, 2016"> <NewsContent contentText="SAP Unveils Powerful New Player Comparision Tool Exclusively on NFL.com" subheader="Today, SAP News"/> </TileContent> </GenericTile> </tiles> </SlideTile> </Panel> </content> </Page> </mvc:View> |
