Hello UI5!

最新推荐文章于 2023-01-10 10:38:47 发布

W1nt3rs

最新推荐文章于 2023-01-10 10:38:47 发布

阅读量489

点赞数

分类专栏： Fiori

本文链接：https://blog.csdn.net/starshus/article/details/104702501

版权

Fiori 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

快速创建第一个UI5 App

Fiori是什么？

Fiori是SAP的前端设计语言，为客户提供了一致、美观、已用的用户体验设计。
在技术上，有很多技术的实现，比如iOS for Fiori, Android for Fiori, UI5 for Fiori等。

UI5是什么？

UI5是SAP的Web前端技术，提供了对Fiori设计在Web技术实现，可以运行在电脑、平板、手机移动端上。
UI5分为了两个版本，SAPUI5和OpenUI5。 SAPUI5作为SAP标准产品开发中使用的技术，在SAP中广泛被使用。
OpenUI5是开源免费版本，相比SAPUI5会缺少一点点功能，比如一些高级分析组件没有包含在里面。

Hello UI5！

通过SAP WebIDE

最快速创建Ui5的方法是通过SAP WEBIDE。
SAP WebIDE是SAP云平台上的一项服务，提供了很多功能，能够大幅提高开发生产力，SAP的产品开发主要都是用的它。

登录后创建一个UI5 App项目，可以自动生成了项目模板。

最主要的index.html文件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>myapp</title>
		<script id="sap-ui-bootstrap"
			src="resources/sap-ui-core.js"
			data-sap-ui-theme="sap_fiori_3"
			data-sap-ui-resourceroots='{"myapp.myapp": "./"}'
			data-sap-ui-compatVersion="edge"
			data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
			data-sap-ui-async="true"
			data-sap-ui-frameOptions="trusted">
		</script>
	</head>
	<body class="sapUiBody">
		<div data-sap-ui-component data-name="myapp.myapp" data-id="container" data-settings='{"id" : "myapp"}'></div>
	</body>
</html>

resources/sap-ui-core.js包括了UI5的核心代码。

data-sap-ui-theme=“sap_fiori_3”，这是最新的Fiori3设计主题。

加上一个按钮，点击运行按钮即可运行：

在这里插入图片描述

本地创建

在本地创建最快的方式，是通过SAP提供的模板项目。

git clone https://github.com/SAP/openui5-basic-template-app

运行:

npm start

小结

UI5是基于JQuery之上的UI框架，提供了完善的UI控件，提供了MVC的开发模式。在SAP产品开发的打磨下，组件非常完善，功能很强大，在企业应用开发上有很大的优势。在SAP的生态圈，学习了解Fiori和UI5也是很有必要的。

参考阅读

https://openui5.org/

W1nt3rs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Hello UI5!

快速创建第一个UI5 AppFiori是什么？Fiori是SAP的前端设计语言，为客户提供了一致、美观、已用的用户体验设计。在技术上，有很多技术的实现，比如iOS for Fiori, Android for Fiori, UI5 for Fiori等。UI5是什么？UI5是SAP的Web前端技术，提供了对Fiori设计在Web技术实现，可以运行在电脑、平板、手机移动端上。UI5分为了...
复制链接

扫一扫

专栏目录