HTML5从入门到精通——SAP UI5篇(1)-职坐标

HTML5从入门到精通——SAP UI5篇(1)

沉沙 2018-06-26 来源：阅读 1235 评论 0

摘要：SAP UI5是SAP公司的一款前端框架，里面包含前端UI的一些组件、样式等，包括响应式的布局，这些都是一般HTML5框架必须提供的。还有基于Canvas和SVG的图表等，这些主要用来进行数据的可视化，生成漂亮友好的数据可视化组件，这种敏捷可视化也是SAP目前各类产品主打的内容。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

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 ://openui5.org/download.html

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

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

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

<script id="sap-ui-bootstrap"
    src="//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文件中编写脚本，代码如下：

 <!-- 2.) Create a UI5 button and place it onto the page -->
<script>
    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 class="sapUiBody">
    <div id="uiArea"></div>
</body>

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

除了这种编码方式外，我们还有一种更像JQuery的编码方式，能实现同样的效果，代码如下：

<script>
$(function(){
        $("#uiArea").sapui("Button", "btn", {
            text:"Hello World!",
            press:function(){$("#btn").fadeOut();}
        });
     });
</script>

代码意思很简单，就不解释了，大家可以在自己的环境中测试一下这个代码。

本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！

web前端开发html5+css3教程 html5css3从入门到精通视频教程 html5教程百度云

本文由 @沉沙发布于职坐标。未经许可，禁止转载。