通过一个实际例子学习SAP UI5的控件绘制和渲染

已于 2024-10-13 10:57:27 修改
阅读量803 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： SAP UI5 百科全书 文章标签： UI5
于 2018-12-12 16:51:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/i042416/article/details/84975650

以下面这个UI为例：

在这里插入图片描述

首先生成按钮对应的渲染器，即ButtonRenderer实例：
在这里插入图片描述
将渲染好的button对应的原生html代码存储到buffer里：
在这里插入图片描述
接下来依次是这些ui element的渲染器：page, XMLView and UIArea.
在这里插入图片描述

把html源代码赋给dom：

在这里插入图片描述

了解本专栏 订阅专栏 解锁全文
SAP UI5 基于 OData V4 的表格控件，Patch 请求的发送原理
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-03 409
按照这篇文章介绍的代码，开发一个包含了基于 OData V4 的 SAP UI5 表格控件的应用，所有的表格行项目都是采用 sap.m.Input 开发，处于可编辑状态。 假设我们把 Age 从 23 改成 24，回车： 这个回车产生一个 keydown 事件：InputBase.prototype.onsapenter this.oContext.doSetProperty 最终会触发一个 batch 请求： 这里的 xhr 已经是被 sinon Mock Server patch 之后的 Fa
62. 基于 OData V4 的 SAP UI5 表格控件使用方法介绍
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-02 2450
SAP UI5 + OData 模型这对技术组合，几乎是 SAP 很多产品比如 SAP S/4 应用里的技术标配，所以从本步骤开始，我们继续深入学习 OData 数据模型的使用。 出于简单起见，我沿用了本教程第 26 个步骤介绍的 OData Mock 服务器，在 SAP UI5 应用里启动一个 Mock 服务器。当 SAP UI5 应用启动，向配置好的 OData 服务 endpoint 发起请求时，这个本地 Mock 服务器会拦截该请求，并将本地准备好的 OData 数据响应返回给 SAP UI5 应用
sap ui5表格例子
04-29
sap ui5表格例子，教你如何使用表格进行数据的显示和绑定
sap ui5通用组件例子
04-29
sap ui5通用组件例子,常用组件的使用例子
SAP Fiori UI5 开发环境搭建和部署（含增强开发）
最新发布
Cappuccino0001的博客
06-09 1186
本文介绍了 SAPUI5、OpenUI5 和 Fiori 的关系,记录了使用 VSCode 进行 Fiori 开发的步骤：环境搭建、两种开发模式（自由开发和增强开发）的工程创建与运行，以及应用部署和磁贴发布的完整流程。
SAPUI5-Button
Liuyingao_dao的专栏
07-09 2053
SAPUI5-按钮
153. 使用 SAP UI5 Smart Chart 控件轻松绘制十数种不同类型的专业图表
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
12-14 1081
通过本文的介绍，相信大家能初步领略 Smart Chart 在绘制专业图表领域强大的本领。作为应用开发人员，我们付出的工作量其实不多：在 XML 视图里定义 Smart Chart 实例，告诉其数据源来自 OData 模型的哪一个 EntitySet，仅此而已。 OData 服务的开发人员，需要在 Smart Chart 使用的 EntitySet 对应的 Entity Type 上，用 com.sap.vocabularies.UI.v1.Chart 注解，定义出 Dimensions 和 Measur
95. SAP UI5 下拉菜单(Select) 控件的使用方式
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
05-30 1796
本教程前一步骤，我们已经实现了一个简单的 SAP UI5 表格分页显示的需求，效果如下： 在本教程后续步骤里，我们会一步步对目前这个已经完成的应用进行优化。 目前我们对每页显示的产品个数是硬编码为 20，本步骤我们会对这个硬编码进行优化，允许用户能够指定分页的大小，可以在 20，30 和 50 三种大小里选择。因此，需要学习如何使用 SAP UI5 的下拉菜单，即 sap.m.Select 来给用户提供选择。 本步骤我们暂时不考虑 SAP UI5 表格的分页显示，先将 sap.m.Select 的使用方式
104. SAP UI5 表格控件的支持复选(Multi-Select)以及如何用代码一次选中多个表格行项目
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-01 1771
在实际项目中，通过本文介绍的采取 JavaScript 编码的方式，根据某种规则，来自动选中表格某些行项目。这种功能比较有用，能省去用户手动点击的繁复操作，提高用户的工作效率。
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
热门推荐
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-05 2万+
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。 对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。
SAP UI5 初学 ( 一 )、简介
weixin_42646630的博客
06-23 3448
SAPUI5
UI5-FIORI-安装配置开发环境搭建及测试程序案例.pdf
10-02
UI5-FIORI-安装配置开发环境搭建及测试程序案例.pdf
【SAP UI5 控件学习】DAY03 Input组Part III
lyx7762的博客
07-10 955
只需要给Input添加属性即可。默认的匹配规则是匹配每一个单词的开头，比如，如果输入ma，或者驶入pr都可以匹配到，但是如果输入oo，则匹配不到。我们可以通过设置Input的来自定义自己的规则。具体代码如下：
sapui5代码中使用jquey插件flot画图
杨江的IT分享专栏
08-09 864
下载js类库放到app的js目录下面修改文件manifest.json "resources": { "js": [ { "uri": "js/jquery.flot.js" }, { "uri"
深入学习SAP UI5框架代码系列之五：SAP UI5控件的实例数据修改和读取逻辑
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
01-06 1138
注释写得很棒，不过setProperty的代码本身的执行逻辑也很清晰。第1295行this.mProperties即SAP UI5控件的实例数据存储结构。上图右上角Watch面板里的含义是，当前setProperty方法调用，需要修改text属性，修改成新的值为"Button1".1295行首先从this.mProperties中取出text属性修改前的值，存储在变量oOldValue里。
第34步:自定义控件
Pianpianluoye
07-23 300
说明 在这一步中，我们将使用自定义控件扩展SAPUI5的功能。我们希望对详细页面上显示的产品进行评级，因此我们使用SAPUI5扩展机制创建了多个标准控件的组合，并添加了一些粘合代码，使它们能够很好地一起工作。这样，我们就可以在整个应用程序中重用控件，并将所有相关功能保存在一个模块中。 预览 将自定义产品评级控件添加到详细页面 代码 您可以在演练-步骤34查看和下载所有文件。 webapp/control/ProductRating.js (New) sap.ui.define([ "sap/
SAPUI5基础知识2 - 手动创建一个SAPUI5的项目
SAP领域技术博客
05-20 1992
本文通过一个hello world应用程序，展示了如何手动创建出一个SAPUI5的项目，并如何运行SAPUI5应用程序。
SAPUI5基础知识1 - 概览，库，支持工具，自学教程
SAP领域技术博客
05-06 2709
本文介绍了SAPUI5的基础概念，常用库，调试工具和支持工具，同时给出了自学SAPUI5的demo教程的访问方式。
SAPUI5 (03) - 简单控件的使用
王敏的专栏
12-23 8844
SAPUI5 控件的基本使用方法，以及控件的两种基本关系 agrregation 和association。
SAPUI5控件 学习
11-10
学习SAPUI5控件主要包括以下几个步骤： 1. **了解基础**: 首先，熟悉JavaScript语言和HTML/CSS，因为SAPUI5是在这些基础上构建的。 2. **掌握SAPUI5架构**: 学习MVC（模型-视图-控制器）模式，这是SAPUI5应用设计...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值