SAP学习笔记 - 开发30 - 前端Fiori开发 Responsiveness（响应式设计）

上一篇讲了 Custom Controls（自定义控件）。

SAP学习笔记 - 开发29 - 前端Fiori开发 Custom Controls（自定义控件） -CSDN博客

本章继续讲 Fiori 开发的知识。

目录

1，Responsiveness（响应式设计）

1），InvoiceList.view.xml

2），i18n.properties

3），运行看效果

4），Responsiveness（响应式设计）小结

a，核心概念

b，SAP Fiori 中的响应式实现

b-1. 布局控件

b-2. 响应式网格系统

b-3. 断点处理

c，实际应用示例

c-1，响应式表格

c-2，条件渲染

d，最佳实践

---

下面是详细内容。

1，Responsiveness（响应式设计）

1），InvoiceList.view.xml

<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>

1，表格列(columns) - 表头

- 响应式列设置：这里一共定义了 5列

    minScreenWidth：最小显示宽度(Small, Tablet 等)

    demandPopin：在小屏幕上是否折叠为弹出式。true：下一行小字表示；false：不显示

    hAlign：水平对齐方式 (End 表示右对齐)

<columns><Column hAlign="End" minScreenWidth="Small" demandPopin="true" width="5em"><Text text="{i18n>columnQuantity}" /></Column><Column><Text text="{i18n>columnName}" /></Column><Column minScreenWidth="Small" demandPopin="true"><Text text="{i18n>columnStatus}" /></Column><Column minScreenWidth="Tablet" demandPopin="false"><Text text="{i18n>columnSupplier}" /></Column><Column hAlign="End"><Text text="{i18n>columnPrice}" /></Column>
</columns>

2，数据行模板 (items) - 数据行 (可比作HTML 里的TR）

- type="Navigation": 表示行可点击导航

- press=".onPress": 点击时调用控制器的 onPress 方法

<items><ColumnListItemtype="Navigation"press=".onPress"><cells><!-- 各单元格内容 --></cells></ColumnListItem>
</items>

3，单元格内容 (cells)

- <ObjectNumber number="{invoice>Quantity}"  emphasized="false"/> =》不强调显示

  啥叫不强调呢？其实就是字体加粗，稍大；所以不强调就是字体纤细，颜色偏浅，偏小

2），i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=DonecolumnQuantity=Quantity
columnName=Name
columnSupplier=Supplier
columnStatus=Status
columnPrice=Price# Detail Page
detailPageTitle=Walkthrough - Details
ratingConfirmation=You have rated this product with {0} stars# Product Rating
productRatingLabelInitial=Please rate this product
productRatingLabelIndicator=Your rating: {0} out of {1}
productRatingLabelFinal=Thank you for your rating!
productRatingButton=Rate

3），运行看效果

显示多列

缩小宽度，有的列就消失了，不再显示了

 

拉大宽度，隐藏的列又显示出来了

 

除了手动拉动浏览器尺寸之外，更专业的方法是用浏览器的工具栏来调整响应尺寸

 

这是窄屏，或者说手机模式

 

4），Responsiveness（响应式设计）小结

Responsiveness（响应式设计）在SAP Fiori开发中指的是应用程序能够自动适应不同屏幕尺寸和设备类型的能力，确保用户在任何设备上都能获得优化的使用体验。

a，核心概念

1. 设备无关性：

   • 同一套代码适配手机、平板和桌面设备

   • 根据屏幕尺寸自动调整布局和交互方式

2. 核心原则：

   • 弹性布局（Flexible grids）

   • 自适应图片和媒体

   • CSS媒体查询（Media queries）

b，SAP Fiori 中的响应式实现

b-1. 布局控件

SAPUI5提供专门的响应式布局控件：

javascript

sap.ui.require(["sap/f/FlexibleColumnLayout","sap/m/Page","sap/m/SplitApp"
], function(FlexibleColumnLayout, Page, SplitApp) {// 这些控件内置响应式行为
});

b-2. 响应式网格系统

使用Grid和GridData：

xml

<l:Grid defaultSpan="L12 M12 S12"><l:content><Panel gridData="L8 M8 S12">...</Panel><Panel gridData="L4 M4 S12">...</Panel></l:content>
</l:Grid>

b-3. 断点处理

SAPUI5定义了标准断点：

javascript

sap.ui.Device.media.initRangeSet("MyRangeSet", [400, 600, 800],   // 断点值(px)"px", ["S", "M", "L"]    // 范围名称
);

c，实际应用示例

c-1，响应式表格

xml

<Table growing="true"growingThreshold="10"growingScrollToLoad="true"mode="{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}">
</Table>

c-2，条件渲染

javascript

onInit: function() {this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());
}

d，最佳实践

1. 使用Fiori布局模板：

   • sap.f.GridContainer

   • sap.f.DynamicPage

2. 响应式边距/间距：

   xml

• <Button class="sapUiSmallMarginEnd sapUiVisibleOnlyOnDesktop"/>

• 设备特定逻辑：

  javascript

• if (sap.ui.Device.system.phone) {// 手机专用逻辑
  }

• 响应式表单：

  xml

1. <form:SimpleForm layout="ResponsiveGridLayout"labelSpanXL="4"labelSpanL="3"labelSpanM="4"labelSpanS="12">
   </form:SimpleForm>

Responsiveness是SAP Fiori设计系统的核心原则之一，确保应用遵循"一次设计，多端适配"的理念，提供一致的用户体验。

以上就是本篇的全部内容。

更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页

https://blog.csdn.net/shi_ly/category_12216766.html

东京老树根-CSDN博客