如何在浏览器里开发并运行 SAP UI5 应用

简介: 如何在浏览器里开发并运行 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 源代码进行调试。

相关文章
|
6天前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
17 1
|
13天前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
27 0
|
13天前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
23 0
|
13天前
|
开发者 Android开发 UED
打造流畅应用:深入探索如何在Xamarin项目中选择并实现最佳UI/UX设计的实践指南
【8月更文挑战第31天】在数字化时代,UI/UX设计成为应用成功的关键。Xamarin以高效开发和强大兼容性著称,其设计理念“一次编写,处处运行”需充分适应多平台特性,提供一致体验。选择Xamarin.Forms或结合Xamarin.Native可实现跨平台UI设计;遵循各平台设计指南,保持布局一致性和简洁性;通过用户测试不断优化。最终,结合技术和用户需求,打造美观实用的应用,脱颖而出。
23 0
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
4月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
|
4月前
|
缓存 JavaScript 前端开发
如何理解 SAP UI5 的 sap.ui.define 函数?
如何理解 SAP UI5 的 sap.ui.define 函数?