前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SAP Fiori的ABAP编程模型-在Fiori中使用Fiori Elements讲解

SAP Fiori的ABAP编程模型-在Fiori中使用Fiori Elements讲解

作者头像
matinal
发布2021-12-06 16:12:50
9860
发布2021-12-06 16:12:50
举报
文章被收录于专栏:SAP TechnicalSAP Technical

在深入研究类似于Display的Fiori应用程序的创建之前,让我们了解Fiori Element的相关性和用法。为了在开发SAP Fiori应用程序时减少前端代码的数量并保持设计的一致性,SAP引入了生成UI的框架。它称为 SAP Fiori Element。SAP Fiori Element使用元数据注释和预定义模板来生成SAP Fiori应用程序。

因此,SAP Fiori Element模板通过仍使用前端中的预定义扩展点来提供灵活性,从而极大地减少了必要的前端SAPUI5 JavaScript代码,并显着提高了开发人员的生产率。

与SAP Fiori元素相比,自由式应用程序为前端开发人员提供了UI设计和逻辑方面的完全灵活性,但在开发阶段需要大量的精力。UI布局及其控件必须由开发人员手动声明,并且必须实现必要的SAPUI5 JavaScript逻辑。此外,开发自由式应用程序时的另一个风险是违反SAP Fiori设计准则。

有各种可用的Fiori元素模板。以下是SAPUI5 App开发中最常用的那些:

  • 列表报告模板 –由列表和对象页面组成。
  • Master-Detail模板 –列表和详细信息页面将在一个页面本身中显示为拆分屏幕。
  • 概述页面(OVP) –由多种样式的卡片组成。卡片可以包括条形图,图形。
  • 分析列表页面(ALP) –由带有条形图和图表以及列表的分析视图组成。

让我们考虑开发List-Report页面,这是最常用的基于Fiori的模板的应用程序。要使用Fiori Elements模板,我们必须使用SAP Web IDE。

  1. 启动SAP WebIDE并从模板中选择File-> New-> Project

2.选择list report application模板,然后选择下一步。

3.输入以下详细信息,然后单击下一步

4.选择系统(网关系统),输入OData服务名称,然后在下面的列表中选择服务。最后单击下一步。

5.选择注释,然后单击下一步。

6.选择OData集合。OData集合应该始终是整个数据模型的主要实体。在这里,我们必须选择航空公司实体,因为它是主要实体。OData导航必须是必须在导航上显示的下一个实体。

7.单击下一个选项卡中的完成,将创建项目。

8.选择项目,然后单击运行

9.项目执行后,Fiori应用程序将如下所示。

由于未放置任何UI元素,因此Fiori应用程序中不会显示任何标签或其相应的值。为了在应用程序中显示智能表,窗体,字段等,我们利用UI批注将UI元素放置/放置在Fiori应用程序上。

我们在CDS视图级别将UI注释编写为@UI。但是,使用Metadata扩展文件并将所有UI注释放入其中是一个好习惯。这是因为将来可能会更改UI / UX,这样UI元素也可以轻松适应新的UI / UX设计。

要创建元数据扩展文件,请右键单击CDS节点,然后选择“元数据扩展名”。提供类似于CDS数据定义的名称和描述。

创建元数据扩展文件后,最重要的步骤是:

  1. 提供我们要进行UI注释的视图名称。

2.在“数据定义”中的“元数据扩展名”注释下方添加顺序,以显示“数据定义”和“元数据扩展名文件”之间链接。

以下是UI批注及其行为描述。

参考上面的UI批注语法,让我们将其应用并在实施后比较Fiori应用。根据上表,添加了UI批注。以下是航空公司和航班信息的元数据扩展文件的源代码。数据模型。将屏幕中的编号与UI注释表中的编号进行比较。

同样,我们为航班信息和航班时刻表创建元数据。以下是构建元数据并使用UI注释正确放置后的Fiori应用程序。

使用所有UI注释和Fiori元素模板,现在可以构建类似Display的应用程序。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-12-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档