UI5-文檔-4.36-Device Adaptation

如今，咱們根據運行應用程序的設備配置控件的可見性和屬性。經過使用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