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

相关文章
|
2月前
|
Android开发 缓存 双11
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
|
19天前
|
数据可视化 安全 区块链
区块链钱包浏览器开发功能,价格和时间周期
开发区块链钱包浏览器涉及账户管理、交易查询、区块浏览、智能合约查询及数据可视化等功能。价格因开发难度、需求、团队专业度及第三方服务费用而异,通常在数万至数百万元。开发周期约数月到半年,包括需求分析、设计、开发、测试和上线等阶段。
区块链钱包浏览器开发功能,价格和时间周期
|
3天前
|
机器学习/深度学习 移动开发 文字识别
视觉智能开放平台产品使用合集之h5页面使用人脸活体检测,是否需要自己开发UI
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
2月前
|
JavaScript API
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
29 1
|
2月前
UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
18 2
|
2月前
|
Android开发 开发者 UED
探索安卓应用开发中的UI设计趋势
随着移动应用市场的不断发展和用户需求的变化,安卓应用的UI设计趋势也在不断演进。本文将深入探讨当前安卓应用开发中的UI设计趋势,包括暗黑模式、原生化设计、动效设计等方面的发展趋势,为开发者提供参考和启发。
|
2月前
|
开发框架 前端开发 JavaScript
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
【4月更文挑战第30天】Flutter是一款高效跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称,简化了动态UI和数据驱动视图的实现。本文深入讨论了动态UI构建原理,包括基于Widget树模型的UI更新和状态管理,如使用StatefulWidget和数据流库(如Provider、Redux)。此外,文中还介绍了实现技巧,如使用ListView等可滚动组件、StreamBuilder进行数据流驱动的UI更新,以及应用响应式布局以适应不同设备。Flutter为开发者提供了构建高效动态界面的强大工具。
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
|
2月前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
|
2月前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
2月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
128 1