HTML5开发移动web应用——SAP UI5篇(1)

最新推荐文章于 2023-03-27 14:04:50 发布

fareise

最新推荐文章于 2023-03-27 14:04:50 发布

阅读量3.1k

点赞数 2

分类专栏： javascript HTML5开发移动web应用——SAP UI5篇 HTML5开发移动web应用——SAP UI5篇企业级前端框架——SAPUI5 HTML5移动应用开发实战文章标签： sap web应用 html5 javascript jquery

本文链接：https://blog.csdn.net/fareise/article/details/50630811

版权

javascript 同时被 3 个专栏收录

82 篇文章 0 订阅

订阅专栏

HTML5移动应用开发实战

15 篇文章 5 订阅

订阅专栏

企业级前端框架——SAPUI5

11 篇文章 14 订阅

订阅专栏

由于最近的经历，让我对SAP的相关产品有了更加深入的理解。其中，SAP Fiori是SAP新的解决方案，简单来说就是建立在SAP HANA平台上的可视化框架，有许多友好强大的功能特点。而支持其响应式前端界面的，是SAP UI5，可以说是一个基于HTML5的前端框架。在这个系列中，我们来探索一下SAP UI5这样一个企业级的移动web开发前端框架，并且和其他的HTML5前端框架进行一些比较，找出目前移动wen前端框架的共性以及不同框架之间各自的特点。

先对SAP UI5进行一些简单的介绍。它是SAP公司的一款前端框架，里面包含如下内容。

首先是前端UI的一些组件、样式等，包括响应式的布局，这些都是一般HTML5框架必须提供的。有了它们，就可以从界面的角度打造出一个接近原声的移动web应用。

接下来是基于Canvas和SVG的图表等，这些主要用来进行数据的可视化，生成漂亮友好的数据可视化组件，这种敏捷可视化也是SAP目前各类产品主打的内容。

以上都属于UI方面SAP UI5给我们提供的组件。除此之外，在数据传输方面，SAP UI5支持AJAX数据传输，支持的数据包括XML/JSON/oData等。后端数据库一般是SAP HANA（SAP HAHA是未来SAP所有产品的基础）

在对SAP UI5有了一个全方位的了解后，我们就可以开始我们的探索了。

首先，SAP UI5并不是开源的，但是其子库Open UI5是开源的，并且涵盖了SAP UI5的大部分主要功能。我们期如下网站下载Open UI5 :http://openui5.org/download.html

选择”Download OpenUI5 SDK”，这会下载带有完整文档的配置完好的SDK包，方便我们学习。

具体的部署方法很简单，由于我们是学习而不是开发，所以只需要部署到我们本地服务器上就行了（一般情况都是部署在SAP HANA上）。具体的部署方法也不用多说，直接把整个文件夹放到服务器路径下即可。

如何开始我们的代码编辑呢？在建立了index.html文件后，首先要引入必要的框架代码库，代码如下：

src="http://localhost:8080/openui5/resources/sap-ui-core.js"

data-sap-ui-theme="sap_bluecrystal"

data-sap-ui-libs="sap.ui.commons"></script>

以上我们引入了核心库sap-ui-core.js另外还有主题库data-sap-ui-theme和将来应用中会引用到的UI库data-sap-ui-libs。

接下来就可以第一个程序代码的编写了，在index.html文件中编写脚本，代码如下：

var myButton = new sap.ui.commons.Button("btn");

myButton.setText("Hello World!");

myButton.attachPress(function(){$("#btn").fadeOut()});

myButton.placeAt("uiArea");

</script>

来研究一下我们的第一个代码。也许有人已经发现，SAP UI5的实现方法和我们正在学习的Sencha Touch类似，都是这种将所有代码写在js文件中的MVC编码模式。但SAP UI5比Sencha Touch要多一些在html中的代码。要想让上述代码有反应，还要在html中添加：

</body>

回到js代码，首先我们创建了一个按钮myButton，并通过setText方法为按钮设定了文字内容。我们为按钮绑定了一个点击事件，点击后执行fadeOut()事件，和JQuery很像。我么通过placeAt方法，选择将按钮放在的位置，这个方法传入了html中div的id值。到此为止，我们就完成了helloworld代码。