介绍一个能开发简单SAP UI5应用的在线IDE：StackBlitz

这是Jerry 2021年的第 15 篇文章，也是汪子熙公众号总共第 286 篇原创文章。

Jerry 之前写过一篇文章介绍一个免费的云开发工具：Cloud Shell，这个工具其实就是在浏览器里使用的远程 Linux Shell 环境，预装了 Java，npm，git，nodejs，docker 等常用的开发和部署工具。

本文介绍另一个在浏览器里使用的在线 IDE .

Jerry 所在的团队，使用 Visual Studio Code 进行 SAP Spartacus 的 TypeScript 开发。

除了 Visual Studio Code 之外，StackBlitz 是另一个我们团队经常使用的在线 IDE：

StackBlitz 无需注册，使用 Github 账号即可登录。其界面风格和 Visual Studio Code 极为相似，支持前端三驾马车 Angular，React 和 Vue 项目的创建，包含 Web 项目在线开发，自动管理项目依赖，自动编译，页面效果实时预览等实用功能。

[此处插入动画]

StackBlitz 一个典型的使用场景：Jerry 在开发过程中发现某个 Angular 功能点，没有按照我期望的方式工作。显然是我使用的方法不对，我想寻求团队内 Angular 大佬的帮助。

简单地把我遇到问题的代码和错误截图发给大佬们，显然是一种不礼貌的做法。仅仅凭借静态代码和错误提示远远不够，最好能提供一个大佬能够在其本地方便地复现问题的环境：StackBlitz 就是一个比较好的选择。

于是我在 StackBlitz 里创建一个简单的 Angular 工程，把我遇到的问题在这个 Angular 工程里复现，然后通过下图的 Share 按钮，将项目 url 发生给团队大佬。对方在浏览器里打开该 url，就可立即复现我的问题。

StackBlitz 能否作为 SAP UI5 开发的在线 IDE 呢？Jerry 简单试了试，虽然 StackBlitz 无法像原生支持 Angular，React 和 Vue 那样支持 SAP UI5，但仍然可以用来做一些简单的 SAP UI5 应用的验证工作，比如测试某些 SAP UI5 控件的行为。

之前 Jerry 的文章一个用于SAP UI5学习的脚手架应用，没有任何后台API的依赖介绍的脚手架应用，运行在 nodejs express 框架上。同样，我们可以把这个脚手架应用迁移到 StackBlitz 上。

看一个实际的使用 SAP UI5 脚手架应用的需求。

下图是 SAP Spartacus 用户编辑页面，每个用户可以分配若干个角色，除了点击下图红色每种角色对应的圆角正方形框之外，点击绿色的文本框，也需要能选中对应的角色。

这是一个 Accessibility 的需求，为了确保用户在屏幕尺寸较小的移动设备上，也能毫不费力的勾选某个角色。

现在我想验证 SAP UI5 的 Checkbox 控件，是否也同样具有该 Accessibility 功能，即点击 Checkbox 的文本本身，也能选中该 Checkbox.

StackBlitz 中新建一个基于 HTML/JS/CSS 的 Static 项目：

把下图的27行代码粘贴到 StackBlitz 正中的 HTML 编辑器里去：

屏幕最右边区域中，StackBlitz 的嵌入服务器，会自动把 index.html 的内容渲染出来。

渲染出的 SAP UI5 页面里，我看到了期望出现的 Customer Checkbox，并且点击 Customer 文本，发现前面的小勾也自动被勾上了，说明 SAP UI5 的 Checkbox 控件，和 Spartacus 一样，也满足 Accessibility 的需求。

查看渲染出的 HTML 源代码可知道实现原理：sap.m.Checkbox 在运行时会渲染出 div( role 为 checkbox ) 和 label 元素，label 元素的 for 属性的值，等于 div 元素的 id，从而建立起二者的绑定关系。浏览器即可确保，label 被点击时，其关联到的 role 为 checkbox 的 div 元素也自动被选中。

遗憾的是，通过 StackBlitz 向导创建的 Static Web 项目，只支持加载 HTML/CSS/JS/JSON 类型的资源，而 SAP UI5 XML 视图，因为其格式为 xml，无法正常被 StackBlitz 加载。因此，在 StackBlitz 里进行 SAP UI5 开发，只能使用基于 JavaScript 的视图类型。

如果有朋友找到在 StackBlitz 里使用 SAP UI5 XML 视图的办法，欢迎分享给大家。

当然，大家也可以尝试 Visual Studio Code 这些和 SAP UI5 相关的 Extensions，感谢阅读。

更多阅读

那些年我用过的SAP IDE
Jerry和您聊聊Chrome开发者工具
ABAP开发环境语法高亮的那些事儿
介绍一个免费的云开发工具：Cloud Shell

更多Jerry的原创文章，尽在：“汪子熙”:

介绍一个能开发简单SAP UI5应用的在线IDE：StackBlitz相关推荐

如何把本地开发的 SAP UI5 应用部署到 ABAP 服务器上
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之三十五 - 如何把本地开发的 SAP UI5 应用部署到 ABAP 服务器上试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
本地开发的 SAP UI5 应用，部署到 ABAP 服务器执行出错的问题分析
我使用 SAP UI5 Tools 的 CLI 工具,运行命令 npm run deploy 将 Visual Studio Code 里开发的 SAP UI5 应用,部署到 ABAP 服务器后,成功 ...
一个详尽的面向 SAP UI5 初学者的教程 - 如何在 SAP UI5 中绘制图表 Chart
这是 Jerry 2021 年的第 65 篇文章,也是汪子熙公众号总共第 342 篇原创文章. 观沧海曹操东临碣石,以观沧海. 水何澹澹,山岛竦峙. 树木丛生,百草丰茂. 秋风萧瑟,洪波涌起. 日 ...
SAP UI5 应用开发教程之三十五 - 如何把本地开发的 SAP UI5 应用部署到 ABAP 服务器上
本教程前 34 个步骤, SAP UI5 应用一直是在本地 Visual Studio Code 中开发并通过本地命令行 ui5 serve 启动然后本地测试的. 本步骤我们将学习,如何使用 SAP ...
一个好用的 SAP UI5 本地打包(build)工具，自动生成Component-preload.js
在阅读本文之前,推荐先阅读 Jerry 这篇文章,以了解必要的前置知识: 什么是 SAP UI5 的 Component-preload.js, 什么是Minification和Ugification ...
介绍一个软件开发工具，堪称快速开发神器
软件快速开发平台是一种软件开发工具,以通用技术架构(如MVC)为基础,集成常用建模工具.二次开发包.基础解决方案等而成.可以大幅缩减编码率,使开发者有更多时间关注客户需求,在项目的需求.设计.开发.测 ...
如何将自开发的SAP UI5应用以tile的方式配置到SAP Fiori Launchpad里
使用一个具有Business Role SAP_CORE_BC_EXT的用户登录S/4HANA: 在Custom Catalog Extensions tile里搜索需要配置到SAP Fiori La ...
js图表报表html5图表,介绍一个！非常简单非常方便！制作图表报表的js库 —— ichartjs 【详细操作】...
ichartjs是一个国产的图表库,提供各种api,以及多种样式的图表图表包括:面积图.2d条形图.2d柱状图.3d柱状图.折线图.饼状图等,并且可以组合图形. ichart是一个轻量级的js组件, ...

介绍一个能开发简单SAP UI5应用的在线IDE：StackBlitz

介绍一个能开发简单SAP UI5应用的在线IDE：StackBlitz相关推荐

最新文章

热门文章