SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API

简介: SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API

说明


在 Jerry 这篇文章 对 SAP UI5 一无所知的新手,从哪些材料开始学习比较好? 曾经提到,Jerry 也是从 SAP UI5 菜鸟一路走过来,深知只有 ABAP 开发背景的开发者,向 SAP UI5 开发领域转型的不易,因此我在业余时间设计了这份适合 SAP UI5 初学者的学习教程,把开发一个完整的 SAP UI5 应用的流程,拆分成若干个步骤,力求每个步骤里,把涉及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码分析系列文章那么深入,但力求浅显易懂,便于 SAP UI5 初学者理解。


本教程每一个步骤的源代码,都存放在我的 Github 上,分别用文件夹 01,02,03 等等来标识。

c7bad3447ae1849d56da2f9ae2f4a6e8.png

每一个步骤均是前一步骤的基础上,添加了若干新特性。建议零基础或者对 SAP UI5 知之甚少的初学者,按照顺序从第一个步骤开始循序渐进地学习,把这些代码下载到本地,配合教程的文字讲解,自己动手,以加深理解。


大家如果对教程的每个步骤有任何疑问,欢迎在教程对应的步骤文章里给我评论,进行留言。


本步骤我们介绍如何在 SAP UI5 视图控制器(controller)的 JavaScript 代码里,继续使用 jQuery 以及浏览器自带的原生 DOM API.


本步骤的所有源代码,在这个 Github 地址可以下载:


https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/45


我们任意运行一个 SAP UI5 应用,打开 Chrome 开发者工具 Network 面板,使用快捷键 Ctrl + O,然后输入 jQuery,就能看到一系列加载的包含 jQuery 关键字的文件,这说明:SAP UI5 框架底层基于 jQuery,因而在 SAP UI5 应用程序开发时,仍然能够使用 jQuery 的 API.

da2fa68cd2901453af30b3fa5b3f8f8d.png

看一个实际的需求。假设我们需要使用 console.log 打印出当前 SAP UI5 页面渲染出的所有控件的 id,以及控件实例。


下面是这个需求的分析和具体实现步骤。


  1. 打印语句需要写在控制器的什么函数里?
  2. 如何拿到页面所有的 SAP UI5 控件实例?
  3. SAP UI5 根据控件 id 获取控件实例的函数为:sap.ui.getCore.byId, 该函数输入参数为控件 id,类型为字符串,返回控件实例。


相关文章
|
2月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
83 1
|
2月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
54 0
|
11天前
|
小程序 PHP
全新UI自助图文打印系统小程序源码 PHP后端 附教程
全新UI自助图文打印系统小程序源码 PHP后端 附教程
18 2
|
27天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
1月前
|
Java 大数据 API
【大数据】HDFS、HBase操作教程(含指令和JAVA API)
【大数据】HDFS、HBase操作教程(含指令和JAVA API)
72 0
【大数据】HDFS、HBase操作教程(含指令和JAVA API)
|
1月前
|
XML API Android开发
06. 【Android教程】Android 的 UI 根基 View与View
06. 【Android教程】Android 的 UI 根基 View与View
14 1
|
22天前
|
JavaScript API
【Vue3的组合式API】超详细教程,含computed、watch、组件通信、模版引用......
【Vue3的组合式API】超详细教程,含computed、watch、组件通信、模版引用......
|
2月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
|
2月前
|
Oracle 安全 Java
JAVA用Mail发送API的方法步骤教程
使用Java和Mail发送API实现自动化邮件发送,提高效率。步骤包括:1. 安装JDK并配置JAVA_HOME,2. 添加JavaMail库(可通过Maven或官网下载)。配置邮件发送涉及邮件服务器地址、端口和认证信息。创建邮件会话、邮件消息对象,然后使用Transport发送。示例代码展示完整流程。注意处理认证失败、连接问题和邮件发送失败等常见问题。
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen