SAP UI5 应用的两种开发方式的教程

简介: SAP UI5 应用的两种开发方式的教程

要开发连接到 SAP OData 服务的 SAP UI5 应用程序,开发人员可以使用以下选项之一:


SAP Fiori Elements


这种方式基于常见业务场景的几个基本 Floorplans 创建标准应用程序。


这些 Floorplans 提供 UI 代码,包括一些预置的逻辑,以便来自后端的数据准确地到达预期的位置,并且 UI 行为基于 OData 元数据的注解(英文名为 annotation)来进行实现。


可以使用 XML 注释自定义 Fiori Elements 的 floorplans.


笔者编写的 Fiori Elements 开发教程(正在写作中):

SAP Fiori Elements 从入门到进阶


Fiori Elements 设计要点


SAP Fiori Elements 框架解释 OData 元数据和注解以呈现应用程序 UI。


元数据描述您的数据模型或屏幕上的内容,而注解描述数据语义或它的可视化方式


例如,任何将 Communication.IsEmailAddress 注释术语设置为 true 的实体类型属性都被 SAP Fiori 元素框架解释为电子邮件地址,并在应用程序 UI 中显示为指向电子邮件客户端的可点击链接。


注释可以关联到服务的实体(entities)、关系(relationship)和属性(properties).


开发人员还可以使用 annotation 来执行以下操作:


  • 描述属性之间的关系,例如金额和相关货币之间的关系。SAP Fiori Elements 在应用程序 UI 中并排显示这些属性。
  • 将属性分组在一起,以便它们在表单中彼此相邻显示。
  • 描述对给定对象可用的操作,用户是否可以编辑它、删除它、应用一些过滤器等等。


所有这些都由 SAP Fiori Elements 框架解释并相应地显示在应用程序中。


注解可以与元数据一起定义,也可以在专用 annotation 文件中定义,既可以在后端与服务一起定义,也可以在前端的本地注解文件中定义。


对于 SAP Fiori Elements 框架在运行时要考虑的注解,它必须驻留在应用程序的应用程序描述符文件 manifest.json 中注册的注解源中。


此外,在 Web 应用程序清单中,可以找到应用程序基本元数据的描述,例如它的名称和版本,以及它的内容,例如应用程序页面、导航、使用的服务详细信息等。


作为注解的运行时源的同一描述符文件 manifest.json 可用于以下操作:


  • 从页面添加导航,例如从列表报表向下 drill down 到对象页面。
  • 定义表、列或其他 UI 元素的设置。 此外,注册自定义扩展,如自定义列、页面或部分。
  • 对于单个页面中的 flex 更改,例如启用导出,可以使用页面编辑器。


SAPUI5 freestyle


这种开发方式提供有关应用程序外观和性能的完全灵活性。开发人员可以选择平面图并指定布局、流程、菜单结构、颜色、字体、交互、模式等。


对于每个屏幕,开发人员都必须编写 JavaScript UI 代码,这意味着同 Fiori Elements 开发方式相比,SAP UI5 freestyle 开发更加费时。


笔者编写的 SAP UI5 Freestyle 开发教程(正在写作中):

一套适合 SAP UI5 开发人员循序渐进的学习教程


相关文章
|
4天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
27 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
4天前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
33 0
|
4天前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
18 0
|
3天前
|
Android开发 缓存 双11
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
|
4天前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
15 0
|
4天前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
8 0
|
4天前
UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
|
4天前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
|
4天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
4天前
|
机器学习/深度学习 人工智能 自然语言处理
【AI大模型应用开发】3.2 RAG实战 - RAG应用+UI实现加载本地文件并对话
【AI大模型应用开发】3.2 RAG实战 - RAG应用+UI实现加载本地文件并对话
36 0
http://www.vxiaotou.com