在這一步中，我們將改進應用程式的響應能力。SAPUI5應用程式可以在手機、平板電腦和桌面裝置上執行，我們可以對應用程式進行配置，以便為每個場景充分利用螢幕空間。幸運的是，SAPUI5控制元件類似於sap.m.Table已經提供了許多我們可以使用的特性。

Preview

A responsive table is hiding some of the columns on small devices

Coding

You can view and download all files at Walkthrough - Step 35.

webapp/view/InvoiceList.view.xml

<mvc:View
                controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
               xmlns="sap.m"
               xmlns:mvc="sap.ui.core.mvc">
        <Table
               id="invoiceList"
               class="sapUiResponsiveMargin"
               width="auto"
 

               items="{
                       path : 'invoice>/Invoices',
                       sorter : {
                               path : 'ShipperName',
                               group : true
                       }
               }">
               <headerToolbar>
 

                       <Toolbar>
                               <Title text="{i18n>invoiceListTitle}"/>
                               <ToolbarSpacer/>
                               <SearchField width="50%" search="onFilterInvoices"/>
                       </Toolbar>
               </headerToolbar>
               <columns>
                       <Column
                               hAlign="End"
                               minScreenWidth="Small"
                               demandPopin="true"
                              width="4em">
                               <Texttext="{i18n>columnQuantity}"/>
                       </Column>
                       <Column>
                               <Texttext="{i18n>columnName}"/>
                       </Column>
                       <Column
                               minScreenWidth="Small"
                               demandPopin="true">
                               <Texttext="{i18n>columnStatus}"/>
                       </Column>
                       <Column
                               minScreenWidth="Tablet"
                               demandPopin="false">
                               <Texttext="{i18n>columnSupplier}"/>
                       </Column>
                       <Column
                               hAlign="End">
                               <Texttext="{i18n>columnPrice}"/>
                       </Column>
               </columns>
               <items>
                       <ColumnListItem
                               type="Navigation"
                               press="onPress">
                               <cells>
                                      <ObjectNumbernumber="{invoice>Quantity}" emphasized="false"/>
                                      <ObjectIdentifiertitle="{invoice>ProductName}"/>
                                      <Texttext="{
                                              path: 'invoice>Status',
                                              formatter: '.formatter.statusText'
                                      }"/>
                                      <Texttext="{invoice>ShipperName}"/>
                                      <ObjectNumber
                                              number="{
                                                     parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
                                                     type: 'sap.ui.model.type.Currency',
                                                     formatOptions: {
                                                             showMeasure: false
                                                     }
                                              }"
                                              unit="{view>/currency}"
                                              state="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>
                               </cells>
                       </ColumnListItem>
               </items>
        </Table>
 
</mvc:View>

由於表的每行有多個單元格，我們必須為表定義列，並根據資料命名這些列。加入5個sap.m.Column列控制元件的列聚合和配置各略有不同:我們只需將標記< list >替換為< table >，就可以用表替換列表。該表有一個內建的響應特性，使我們能夠使應用程式更加靈活。表和列表共享相同的屬性集，因此我們可以簡單地重用這些屬性和排序器。

▪ Quantity: 這一列將包含一個短數字，因此我們將對齊設定為End(在LTR語言中表示“正確”)，並將寬度設定為4em，這對於列描述來說已經足夠長了。作為描述文字，我們使用 sap.m.Text引用資源包屬性的文字控制元件。我們將屬性minScreenWidth設定為Small，以表明此列在電話上不那麼重要。通過將屬性demandPopin設定為true，我們將告訴表在主列下面顯示這一列。

▪ Name: 我們的主列有相當大的寬度width來顯示所有的細節。它將始終顯示.

▪ Status: 狀態並不是那麼重要，所以我們也會將minScreenWidth設定為small, demandPopin設定為true，將它顯示在小螢幕的name欄位下面。

▪ Supplier：我們將minScreenWidth設定為Tablet，將demandPopin設定為false，從而完全隱藏了電話裝置上的Supplier列。

▪ Price：這一欄總是可見的，因為它包含我們的發票價格。

現在我們將把資訊拆分到與上面定義的列匹配的單元格上，而不是以前的ObjectListItem。因此，我們將其更改為具有相同屬性的ColumnListItem控制元件，但現在使用的是單元格聚合。這裡我們建立五個控制元件來顯示我們的資料:

▪Quantity

A simple sap.m.ObjectNumber control that is bound to our data field.

▪Name

A sap.m.ObjectIdentifier controls that specifies the name.

▪Status

A sap.m.Text control with the same formatter as before.

▪Supplier

A simple sap.m.Text control.

▪Price

An ObjectNumber control with the same formatter as the attributes number and numberUnit from the previous steps.

現在我們已經響應性地定義了我們的表，並且可以在減小瀏覽器螢幕大小時看到結果。供應商欄沒有顯示在電話號碼上，這兩欄的數量和狀態將顯示在名稱下面。

webapp/i18n/i18n.properties

...
# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Done
columnQuantity=Quantity
columnName=Name
columnSupplier=Supplier
columnStatus=Status
columnPrice=Price
 
# Detail Page
...

當我們減小瀏覽器的螢幕大小或在一個小裝置上開啟應用程式時，我們可以看到結果。我們將列名和屬性標題新增到i18n檔案中。

Conventions

　　針對手機、平板電腦和桌面裝置的不同螢幕大小優化應用程式。

Parent topic: Walkthrough

Previous: Step 34: Custom Controls

Next: Step 36: Device Adaptation

Related Information

Configuring Responsive Behavior of a Table