現在，我們根據運行應用程序的設備配置控件的可見性和屬性。通過使用sap.ui。設備API和定義一個設備模型，我們將使應用程序在許多設備上看起來很棒。

Preview

On phone devices, the panel is collapsed to save screen space and a button is hidden

Coding

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

webapp/view/HelloPanel.view.xml

<mvc:View
        
 
controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
        xmlns="sap.m"
        xmlns:mvc="sap.ui.core.mvc">
        <Panel
               headerText="{i18n>helloPanelTitle}"
               class="sapUiResponsiveMargin"
               width="auto"
               expandable
 
="{device>/system/phone}"
               expanded="{= !${device>/system/phone} }">
               <content>
                       <Button
                               id="helloDialogButton"
                               icon="sap-icon://world"
                               text
 
="{i18n>openDialogButtonText}"
                               press="onOpenDialog"
                               class="sapUiSmallMarginEnd sapUiVisibleOnlyOnDesktop"/>
                       <Button
                               text="{i18n>showHelloButtonText}"
                               press="onShowHello"
                               class="myCustomButton"/>
                       <Input
                               value="{/recipient/name}"
                               valueLiveUpdate="true"
                               width="60%"/>
                       <FormattedText
                               htmlText="Hello {/recipient/name}"
                               class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
               </content>
        </Panel>
</mvc:View>

我們向HelloPanel添加了兩個可擴展的新屬性。用戶現在可以關閉和打開面板，以便在屏幕較小的設備上為下表留出更多空間。可擴展屬性綁定到名為設備和路徑/system/phone.的模型。因此，該面板只能在手機設備上展開。設備模型由sa .ui填充。SAPUI5的設備API。展開屬性控制面板的狀態，我們使用表達式綁定語法在電話設備上關閉面板，並在所有其他設備上展開面板。SAPUI5的設備API提供了更多的功能來檢測各種設備特定的設置，請參閱文檔了解更多細節。

　　請註意 ：sap.ui.Device API根據用戶代理和設備的許多其他屬性檢測設備類型(Phone, Tablet, Desktop)。因此，簡單地減小屏幕大小並不會改變設備類型。要測試這個特性，您必須在瀏覽器中啟用設備模擬，或者在真實設備上打開它。

當我們設置像sapUiVisibleOnlyOnDesktop或sapUiHideOnDesktop這樣的CSS類時，我們還可以根據設備類型隱藏單個控件。我們只顯示在桌面設備上打開對話框的按鈕，並為其他設備隱藏它。有關更多選項，請參見下面鏈接的文檔。

webapp/Component.js

sap.ui.define([
        "sap/ui/core/UIComponent",
        "sap/ui/model/json/JSONModel",
        "sap/ui/demo/walkthrough/controller/HelloDialog",
        "sap/ui/Device"
], function (UIComponent, JSONModel, HelloDialog,Device) {
        "use strict";
        return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
               metadata: {
                       manifest: "json"
               },
               init: function () {
                       // call the init function of the parent
                       UIComponent.prototype.init.apply(this, arguments);
 
                       // set data model
                       var oData = {
                               recipient: {
                                      name: "World"
                               }
                       };
                       var oModel = new JSONModel(oData);
                       this.setModel(oModel);
                       // disable batch grouping for v2 API of the northwind service
                       this.getModel("invoice").setUseBatch(false);
 
                       // set device model
                       var oDeviceModel =newJSONModel(Device);
                       oDeviceModel.setDefaultBindingMode("OneWay");
                       this.setModel(oDeviceModel,"device");
 
                       // set dialog
                       this._helloDialog = new HelloDialog(this.getRootControl());
                       // create the views based on the url/hash
                       this.getRouter().initialize();
               },
 
               exit : function() {
                       this._helloDialog.destroy();
                       delete this._helloDialog;
               },
 
               openHelloDialog : function () {
                       this._helloDialog.open();
               }
 
        });
});

在app組件中，我們向sap.ui添加了一個依賴項。在init方法中初始化設備模型。我們可以簡單地將加載的依賴設備傳遞給JSONModel的構造函數。這將使SAPUI5設備API的大多數屬性作為JSON模型可用。然後將模型作為命名模型設置在組件上，以便我們可以在數據綁定中引用它，正如我們在上面的視圖中看到的那樣。

　　請註意：我們必須將綁定模式設置為單向，因為設備模型是只讀的，並且我們希望在將控件的屬性綁定到模型時避免意外更改模型。默認情況下，SAPUI5中的模型是雙向的(TwoWay)。當屬性更改時，綁定的模型值也會更新。

webapp/view/Detail.view.xml

提示：您可以使用瀏覽器的開發工具測試應用程序的特定設備特性。例如，在谷歌Chrome中，您可以輕松模擬平板電腦或手機，並查看效果。SAPUI5的一些響應選項只在加載應用程序時初始設置，所以您可能需要重新加載頁面才能看到結果。

<mvc:View
        controllerName="sap.ui.demo.walkthrough.controller.Detail"
        xmlns="sap.m"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:wt="sap.ui.demo.walkthrough.control">
        <Page
               title="{i18n>detailPageTitle}"
               showNavButton="true"
               navButtonPress="onNavBack">
               <ObjectHeader
                       responsive="true"
                       fullScreenOptimized="true"
                       number="{
                               parts: [{path: ‘invoice>ExtendedPrice‘}, {path: ‘view>/currency‘}],
                               type: ‘sap.ui.model.type.Currency‘,
                               formatOptions: {
                                      showMeasure: false
                               }
                       }"
                       numberUnit="{view>/currency}"
                       intro="{invoice>ShipperName}"
                       title="{invoice>ProductName}">
                       <attributes>
                               <ObjectAttributetitle="{i18n>quantityTitle}" text="{invoice>Quantity}"></ObjectAttribute>
                               <ObjectAttributetitle="{i18n>dateTitle}" text="{
                                      path: ‘invoice>ShippedDate‘,
                                      type: ‘sap.ui.model.type.Date‘,
                                      formatOptions: {
                                        style: ‘long‘,
                                        source: {
                                              pattern: ‘yyyy-MM-ddTHH:mm:ss‘
                                        }
                                      }
                                 }"/>
                       </attributes>
               </ObjectHeader>
               <wt:ProductRating id="rating" class="sapUiSmallMarginBeginEnd" change="onRatingChange"/>
        </Page>
</mvc:View>

一些控件已經具有可以配置的內置響應特性。ObjectHeader控件可以通過設置響應為true的屬性，以及將fullscreen設置為true，從而將其置於更靈活的模式中。這將顯示我們根據設備大小在屏幕上不同位置添加到視圖中的數據。

我們還將前面步驟列表中的number和numberUnit字段添加到ObjectHeader，並使用與前面步驟相同的貨幣類型格式化程序。然後定義兩個屬性:發票數量和發貨日期，這是數據模型的一部分。到目前為止，我們還沒有從發票JSON文件中使用shippedDate字段，它包含一個典型的字符串格式的日期。

我們現在使用日期類型，並在格式選項的源部分中提供日期格式的模式。它將顯示更易於閱讀的格式化日期文本，也適合小屏幕設備。

webapp/controller/Detail.controller.js

sap.ui.define([
        "sap/ui/core/mvc/Controller",
        "sap/ui/core/routing/History",
        "sap/m/MessageToast",
        "sap/ui/model/json/JSONModel"
], function (Controller, History, MessageToast,JSONModel) {
        "use strict";
        return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {
               onInit : function () {
                       var oViewModel =newJSONModel({
                               currency:"EUR"
                       });
                       this.getView().setModel(oViewModel,"view");
 
                       var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                       oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
               },
               _onObjectMatched : …
});

在Detail控制器中，我們只需添加帶有貨幣定義的視圖模型，以正確顯示數字。它與InvoiceList控制器文件中的代碼相同。

webapp/i18n/i18n.properties

# Detail Page
detailPageTitle=Walkthrough - Details
ratingConfirmation=You have rated this product with {0} stars
dateTitle=Order date
quantityTitle=Quantity

當我們減小瀏覽器的屏幕大小或在一個小設備上打開應用程序時，我們可以看到結果。我們將列名和屬性標題添加到i18n文件中。

Conventions

　　針對手機、平板電腦和桌面設備的不同屏幕大小優化應用程序。

Parent topic: Walkthrough

Previous: Step 35: Responsiveness

Next: Step 37: Content Density

Related Information

API Reference: sap.ui.Device.media.RANGESETS

API Reference: sap.ui.Device

UI5-文檔-4.36-Device Adaptation