如何在浏览器里开发并运行 SAP UI5 应用
除了 SAP 公司官方支持的 WebIDE,SAP Business Application Studio 这些运行在浏览器端的开发工具,可以进行 SAP UI5 的开发之外,我们还可以使用 StackBlitz 这款在线 web 应用的开发工具,来开发 SAP UI5 应用。
我这里做了一个例子,大家可以通过这个链接 访问。
我们打开这个页面,观察到的屏幕可以分成四个区域,下面逐一介绍。
用过 Visual Studio Code 这款编辑器的朋友们不难发现,这其实就是 Visual Studio Code 的浏览器版本。
(1) 显示一个文件树结构,包含了该 SAP UI5 工程的所有资源文件,包含 xml 视图实现和控制器实现(JavaScript 代码)。Jerry 提供的这个例子,SAP UI5 应用采取了 ui5 cli 这个开源的构建工具来构建和启动,而 ui5 cli 基于 Node.js,因此上图还能观察到 ui5 cli 的配置文件 ui5.yaml 和 Node.js 项目所需的 package.json 文件。
(2) StackBlitz 在线开发环境里编辑文件的主要区域。
(3) StackBlitz 的终端控制台,我们可以在此处执行各种命令行。
(4) SAP UI5 应用一旦启动后,渲染的页面会出现在这个区域。
目前上图区域 4 显示的是 botting webcontainer. 在浏览器编辑环境的上下文里,Web Container 技术能够让 Node.js 应用在浏览器环境里以原生方式运行。
我们在区域 3 的终端里,输入命令行 ui5 serve:
首先会看到 StackBlitz 自动去下载 ui5 cli 的 package,相当于为我们执行了 npm install:
紧接着, 区域 4 显示了当前这个 SAP UI5 工程的所有文件夹列表。
我们将这个 url 拷贝下来:
https://jerry-ui5-app–8080.local.webcontainer.io
新开一个浏览器窗口,在末尾添加上 index.html,就可以访问到这个 SAP UI5 应用了:
https://jerry-ui5-app–8080.local.webcontainer.io/index.html
关于运行在 StackBlitz 上的 SAP UI5 应用的调试,同运行在其他环境的并无区别,ctrl+alt+shift+p,在弹出的对话框里启用调试模式,刷新浏览器,即可加载调试版本的 JavaScript 源代码进行调试。
更多Jerry的原创文章,尽在:“汪子熙”:
相关文章
- 136. SAP UI5 应用 SimpleForm 控件 ResponsiveGridLayout 布局的工作原理深入剖析
- SAP Corbu Theme 在浏览器和 SAPGUI 应用中的使用场景
- SAP Fiori Launchpad 上看不到任何 tile 应该怎么办?
- SAP UI5 应用开发教程之五十五 - 如何将本地 SAP UI5 应用通过 Node.js Express 部署到公网上试读版
- 什么是 SAP UI5 的 Hybrid Web Containers
- SAP UI5 应用的 OData 元数据请求响应的解析原理分析
- SAP UI5 应用开发教程之二十九 - SAP UI5 的路由和导航功能介绍试读版
- SAP UI5 应用 index.html 里各个属性赋值逻辑的讲解
- 使用 mock 数据在本地运行 SAP Fiori Elements 应用的工作原理
- SAP UI5应用里使用jQuery.ajax异步读取xml文档并显示在SAP UI5应用界面上
- SAP UI5框架Component.js里extend函数的实现原理
- SAP CRM Fiori my task应用是如何在My Account应用里加载的
- SAP CRM Fiori My task应用里roundtrip取舍的讨论
- 使用SAP XIF Adapter发送IDoc数据
- 如何启用SAP CRM附件UI上的advanced按钮
- 如何在SAP S/4HANA Cloud系统里创建employee
- 如何用SAP ABAP编程语言实现一个简单的区块链模型
- SAP Spartacus cx-page-layout 属性运行时的赋值原理, set 是如何被框架调用的?
- SAP CRM Fiori应用里取top20的service url的determine逻辑
- OAuth 2.0协议在SAP产品中的应用
- SAP UI5 应用在 Business Application Studio 里的构建单步分析
- SAP UI5应用白屏的原因分析
- SAP UI5 应用在 Business Application Studio 里的构建单步分析
- 如何在 SAP BTP 上通过 CDS view 快速创建 Fiori Elements 应用
- SAP CRM Fiori 应用的 Deep Create 行为和实现分析
- SAP UI5 应用开发教程之九十六 - SAP UI5 列表控件分页显示数据时,如何自定义分页大小试读版
- SAP UI5 应用开发教程之四十六 - 使用 Message Manager 实现开箱即用的验证(Validation)信息抛出