使用代码给 SAP UI5 XML 视图添加自定义 CSS

简介: 使用代码给 SAP UI5 XML 视图添加自定义 CSS

一个例子如下图所示:


this.getView().addStyleClass(Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy");



样式表以与纯 HTML 相同的方式包含在 XML 视图中。 要向 SAPUI5 控件添加更多 CSS 类,请使用 class 属性。SAP UI5 开发人员务必需要仔细选择设置样式的元素,因为 CSS 始终会影响整个页面,并且不限于视图。


例子:下面介绍如何添加样式定义并定义在 XML 视图中使用它的按钮。


<mvc:View controllerName="sap.hcm.Address" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"
           xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style>
      .mySuperRedButton {
         color: red;
      }
   </html:style>
   <Panel>
      <Button class="mySuperRedButton" text="Press Me"/>
   </Panel>
</mvc:View>


一个最直接的例子:


myButton.addStyleClass("mySuperRedJerryButton");

上面的代码里,作为 sStyleClass 给出的字符串将被添加到该控件的根 HTML 元素的 class 属性中。


此方法旨在用于将控件标记为特殊类型,可以使用引用此样式类名称的 CSS 选择器为其提供特殊样式。


一个应该避免的做法是直接样式化DOM元素,这会导致不可预测的结果,因为SAPUI5不能保证内部控制DOM树的稳定性。此外,当应用程序运行在共享运行时环境(如SAP Fiori launchpad)或添加自定义HTML时,这可能会导致样式冲突。最好将样式更改限制在特定使用的CSS类中。


应该避免下面这种做法:


div {
  width: 120px;
}

推荐的做法:


.myStyleClass {
  width: 120px;
}


SAPUI5应用程序可以为元素创建动态id。不要在自定义CSS中使用这些id作为选择器,因为它们不是一种稳定的 id(stable id),会随时间变化。最好是添加和使用CSS类。


不推荐的做法:


#__view1__button0 {
  font-weight: bold;
}

推荐的做法:

.myEmphasizedButton {
  font-weight: bold;
}
相关文章
|
1月前
|
存储 测试技术 UED
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
67 1
|
3月前
|
SQL 存储 数据可视化
SAP HANA 内存数据库不同类型的视图的应用场景介绍
SAP HANA 内存数据库不同类型的视图的应用场景介绍
56 0
|
21天前
|
存储
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
21 0
|
21天前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
10 0
|
25天前
|
数据库
迈入 SAP CDS View 世界的前置知识 - SAP ABAP 数据库视图介绍试读版
迈入 SAP CDS View 世界的前置知识 - SAP ABAP 数据库视图介绍试读版
10 0
迈入 SAP CDS View 世界的前置知识 - SAP ABAP 数据库视图介绍试读版
|
1月前
|
XML Java Apache
Apache Flink自定义 logback xml配置
Apache Flink自定义 logback xml配置
152 0
|
3月前
|
存储 传感器 监控
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
32 0
|
3月前
|
存储 数据库
SAP HANA 数据库支持的几种不同类型的视图
SAP HANA 数据库支持的几种不同类型的视图
36 0
|
3月前
|
Web App开发 开发者
5. 问题解答:SAP Fiori Launchpad 点了 Logout 之后,背后都运行了哪些代码
5. 问题解答:SAP Fiori Launchpad 点了 Logout 之后,背后都运行了哪些代码
24 0
|
3月前
|
Web App开发 存储 前端开发
谈谈企业级应用的自定义 UI 创建和集成方法一览
谈谈企业级应用的自定义 UI 创建和集成方法一览
31 0