由于在类似于手机的小面板上显示时，我们为了留出更多空间展示数据，可以将一些控件折叠。
1.修改HelloPanel.view.xml，加入expandable=“{device>/system/phone}”
expanded="{= !${device>/system/phone}
<mvc:ViewcontrollerName="ui5.walkthrough.controller.HelloPanel"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><PanelheaderText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto"expandable="{device>/system/phone}"expanded="{= !${device>/system/phone} }"><content><Buttonid="helloDialogButton"icon="sap-icon://world"text="{i18n>openDialogButtonText}"press=".onOpenDialog"class="sapUiSmallMarginEnd sapUiVisibleOnlyOnDesktop"/><Buttontext="{i18n>showHelloButtonText}"press=".onShowHello"class="myCustomButton"/><Inputvalue="{/recipient/name}"valueLiveUpdate="true"width="60%"/><FormattedTexthtmlText="Hello {/recipient/name}"class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/></content></Panel>
</mvc:View>
2.修改Component.js
sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel","sap/ui/Device"
], (UIComponent, JSONModel, Device) => {"use strict";return UIComponent.extend("ui5.walkthrough.Component", {metadata: {interfaces: ["sap.ui.core.IAsyncContentCreation"],manifest: "json"},init() {// call the init function of the parentUIComponent.prototype.init.apply(this, arguments);// set data modelconst oData = {recipient: {name: "World"}};const oModel = new JSONModel(oData);this.setModel(oModel);// set device modelconst oDeviceModel = new JSONModel(Device);oDeviceModel.setDefaultBindingMode("OneWay");this.setModel(oDeviceModel, "device");// create the views based on the url/hashthis.getRouter().initialize();}});
});
3.修改Detail.view.xml
<mvc:ViewcontrollerName="ui5.walkthrough.controller.Detail"xmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"xmlns:wt="ui5.walkthrough.control"><Pagetitle="{i18n>detailPageTitle}"showNavButton="true"navButtonPress=".onNavBack"><ObjectHeadercore:require="{Date: 'sap/ui/model/type/Date',Currency: 'sap/ui/model/type/Currency'}"responsive="true"fullScreenOptimized="true"number="{parts: ['invoice>ExtendedPrice','view>/currency'],type: 'Currency',formatOptions: {showMeasure: false}}"numberUnit="{view>/currency}"intro="{invoice>ShipperName}"title="{invoice>ProductName}"><attributes><ObjectAttributetitle="{i18n>quantityTitle}"text="{invoice>Quantity}"/><ObjectAttributetitle="{i18n>dateTitle}"text="{path: 'invoice>ShippedDate',type: 'Date',formatOptions: {style: 'long',source: {pattern: 'yyyy-MM-ddTHH:mm:ss'}}}"/></attributes></ObjectHeader><wt:ProductRatingid="rating"class="sapUiSmallMarginBeginEnd"change=".onRatingChange"/></Page>
</mvc:View>
4.修改Detail.controller.js
sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/core/routing/History","sap/m/MessageToast","sap/ui/model/json/JSONModel"
], (Controller,History,MessageToast,JSONModel) => {"use strict";return Controller.extend("ui5.walkthrough.controller.Detail", {onInit() {const oViewModel = new JSONModel({currency: "EUR"});this.getView().setModel(oViewModel, "view");const oRouter = this.getOwnerComponent().getRouter();oRouter.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);},onObjectMatched(oEvent) {this.byId("rating").reset();this.getView().bindElement({path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").invoicePath),model: "invoice"});},onNavBack() {const oHistory = History.getInstance();const sPreviousHash = oHistory.getPreviousHash();if (sPreviousHash !== undefined) {window.history.go(-1);} else {const oRouter = this.getOwnerComponent().getRouter();oRouter.navTo("overview", {}, true);}},onRatingChange(oEvent) {const fValue = oEvent.getParameter("value");const oResourceBundle = this.getView().getModel("i18n").getResourceBundle();MessageToast.show(oResourceBundle.getText("ratingConfirmation", [fValue]));}});
});
5.i18n.properties新增
dateTitle=Order date
quantityTitle=Quantity
)
