在这篇文章中,我们将讨论OpenUI5的基础知识教程。
SAP OpenUI5简介
OpenUI5是开源的现代javascript框架,用于构建基于HTML5 规范的软件Web应用程序。
OpenUI5是一个响应式的互动框架,支持所有设备和所有流行的浏览器。
这个框架是由SAP开发的开源框架,类似于SAPUI5框架。
它支持内置的200多个组件。
要学习这个前端库,你需要基本的知识和了解javascript、HTML和CSS技术。
我们可以很容易地进行快速的应用开发,因为有几乎所有的UI部件可用,从button,Dropdowns 到复杂的grid 和tree 。
OpenUI5支持以下功能
- 有200多个UI组件可用
- 支持数据绑定的MVC
- 支持远程API集成,并集成了对JSON、XML和ODATA等各种格式的支持
- 支持内部化 - 本地化和全球化
- 响应性,可在所有设备上使用,包括桌面应用程序、平板电脑和移动设备
- 支持所有主要的浏览器
- 可使用流行的小部件 布局和主题扩展功能 开源框架 混合应用开发和部署 一致和丰富的用户体验设计原则
- 双向数据绑定 键盘互动
优势
- 快速的应用开发
- 在所有设备上都有一致的用户界面
- 由于这是由SAP开发的,有大量的社区支持
- 由于有大量的UI组件,生产力得到提高
- 由于它是基于javascript/html5/css的,所以学习曲线较小。
它是可扩展的,有几个plugins 和tools ,可用于不同的IDE和编辑器。没有推荐特定的IDE。Eclipse是在OpenUI5中开发应用程序的主要IDE。
SAP UI开发工具可作为Sublime Text和Webstorm IDE和Eclipse的插件。SAP UI5和OpenUI5都提供了丰富的控件集。
SAP UI5是其产品套件中的一个产品。OpenUI5是在Apache许可证下发布的开放源代码。两者都是一样的,许可证是不同的。
你也可以使用SAP web IDE,这是一个云IDE,用于编写代码而不需要在你的本地环境中进行设置。
SAP OpenUI5 Hello World 示例
要编写应用程序,需要下载运行时库和SDK。运行任何应用程序(包括移动应用程序)都需要这两样东西。代码可以被部署到任何网络服务器上。对于这个示例应用程序,我们将使用CDN库。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>SAPUI OpenUI5 Demo Applicaotn</title>
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-compatVersion='edge'>
</script>
<script>
var oBtn;
oBtn = new sap.ui.commons.Button({
text : "Button Sample Demo",
press : function (oEvent) {
alert(this.getText());
}
});
oBtn.placeAt("main");
</script>
</head>
<body class='sapUiBody'>
<div id='main'></div>
</body>
</html>
上面的例子有一个按钮,点击这个按钮,就会显示警告内容。这是hello world的例子,展示了OpenUI5代码的原因。
SAP Fiori设计库
所有的openUI5控件都是基于Fiori library 。SAP Fiori 是一种设计语言,在所有的组件/主题/设备上提供丰富一致的用户体验。fiori 提供不同的简单和复杂的控件,我们可以将其整合到前端应用程序中。
Fiori设计原则
- 基于你的需求,你可以定制设计
- 简单的使用和整合
- 在所有设备上保持一致的用户体验
- 流畅的用户体验