在這一步中，我們提高了應用程序的響應能力。SAPUI5應用程序可以在手機、平板電腦和臺式機設備上運行，我們可以配置應用程序以充分利用每種場景的屏幕狀態。幸運的是，像sap.m.Table這樣的SAPUI5控件已經提供了許多我們可以使用的功能。
1.修改InvoiceList.view.xml，將控件改為Table

<mvc:ViewcontrollerName="ui5.walkthrough.controller.InvoiceList"xmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"><Tableid="invoiceList"class="sapUiResponsiveMargin"width="auto"items="{path : 'invoice>/Invoices',sorter : {path : 'ShipperName',group : true}}"><headerToolbar><Toolbar><Title text="{i18n>invoiceListTitle}" /><ToolbarSpacer /><SearchFieldwidth="50%"search=".onFilterInvoices"/></Toolbar></headerToolbar><columns><ColumnhAlign="End"minScreenWidth="Small"demandPopin="true"width="5em"><Text text="{i18n>columnQuantity}" /></Column><Column><Text text="{i18n>columnName}" /></Column><ColumnminScreenWidth="Small"demandPopin="true"><Text text="{i18n>columnStatus}" /></Column><ColumnminScreenWidth="Tablet"demandPopin="false"><Text text="{i18n>columnSupplier}" /></Column><Column hAlign="End"><Text text="{i18n>columnPrice}" /></Column></columns><items><ColumnListItemtype="Navigation"press=".onPress"><cells><ObjectNumbernumber="{invoice>Quantity}"emphasized="false"/><ObjectIdentifier title="{invoice>ProductName}" /><Textcore:require="{Formatter: 'ui5/walkthrough/model/formatter'}"text="{parts: ['invoice>Status','i18n>invoiceStatusA','i18n>invoiceStatusB','i18n>invoiceStatusC'],formatter: 'Formatter.statusText.bind($controller)'}"/><Text text="{invoice>ShipperName}" /><ObjectNumbercore:require="{Currency: 'sap/ui/model/type/Currency'}"number="{parts: ['invoice>ExtendedPrice','view>/currency'],type: 'Currency',formatOptions: {showMeasure: false}}"unit="{view>/currency}"state="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/></cells></ColumnListItem></items></Table>
</mvc:View>

2.i18n.properties 增加字符

columnQuantity=Quantity
columnName=Name
columnSupplier=Supplier
columnStatus=Status
columnPrice=Price

現在就是用Table控件來展示了！