SAP ABAP 平台 Fiori 功能展示项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00452/article/details/141379975

SAP ABAP 平台 Fiori 功能展示项目教程

abap-platform-fiori-feature-showcaseFeature showcase that demonstrates and documents how to implement annotation-driven SAP Fiori Elements UI features for oData V4, using the ABAP RESTful Application Programming Model (RAP).项目地址:https://gitcode.com/gh_mirrors/ab/abap-platform-fiori-feature-showcase

1. 项目的目录结构及介绍

目录结构

abap-platform-fiori-feature-showcase/
├── README.md
├── LICENSE
├── src/
│   ├── ZFIORI_FEATURE_SHOWCASE/
│   │   ├── includes/
│   │   ├── programs/
│   │   ├── types/
│   │   ├── tables/
│   │   ├── screens/
│   │   ├── forms/
│   │   ├── classes/
│   │   ├── interfaces/
│   │   ├── messages/
│   │   ├── documentation/
│   │   └── test/
│   └── ZFIORI_FEATURE_SHOWCASE_UI/
│       ├── fragments/
│       ├── views/
│       ├── controllers/
│       ├── models/
│       ├── components/
│       ├── resources/
│       ├── test/
│       └── documentation/
└── tools/
    ├── abapgit/
    └── abaplint/

目录介绍

README.md: 项目介绍和使用说明。
LICENSE: 项目许可证。
src/: 源代码目录。
- ZFIORI_FEATURE_SHOWCASE/: ABAP 后端代码。
  - includes/: 包含子程序和函数组。
  - programs/: ABAP 程序。
  - types/: 数据类型定义。
  - tables/: 数据库表定义。
  - screens/: 屏幕元素。
  - forms/: 表单定义。
  - classes/: ABAP 类。
  - interfaces/: ABAP 接口。
  - messages/: 消息定义。
  - documentation/: 文档。
  - test/: 测试代码。
- ZFIORI_FEATURE_SHOWCASE_UI/: Fiori UI 代码。
  - fragments/: UI 片段。
  - views/: 视图定义。
  - controllers/: 控制器。
  - models/: 数据模型。
  - components/: UI 组件。
  - resources/: 资源文件。
  - test/: 测试代码。
  - documentation/: 文档。
tools/: 开发工具。
- abapgit/: ABAP Git 工具。
- abaplint/: ABAP 代码检查工具。

2. 项目的启动文件介绍

启动文件

ZFIORI_FEATURE_SHOWCASE_UI/Component.js: Fiori UI 的主组件文件，负责初始化和配置 UI 应用。

启动文件介绍

Component.js 文件是 Fiori UI 应用的入口点，它包含了应用的初始化逻辑和配置信息。以下是该文件的主要内容：

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "ZFIORI_FEATURE_SHOWCASE_UI/model/models"
], function (UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("ZFIORI_FEATURE_SHOWCASE_UI.Component", {
        metadata: {
            manifest: "json"
        },

        init: function () {
            // 调用父类的 init 方法
            UIComponent.prototype.init.apply(this, arguments);

            // 设置设备模型
            this.setModel(models.createDeviceModel(), "device");

            // 初始化路由
            this.getRouter().initialize();
        },

        getContentDensityClass: function () {
            if (this.contentDensityClass === undefined) {
                if (Device.support.touch) {
                    this.contentDensityClass = "sapUiSizeCozy";
                } else {
                    this.contentDensityClass = "sapUiSizeCompact";
                }
            }
            return this.contentDensityClass;
        }
    });
});