HTML5开发移动web应用——SAP UI5篇(1)
来源:互联网 发布:软件外包服务专业 编辑:程序博客网 时间:2024/05/16 11:01
由于最近的经历,让我对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文件后,首先要引入必要的框架代码库,代码如下:
<script id="sap-ui-bootstrap"
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文件中编写脚本,代码如下:
<!-- 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开发移动web应用——SAP UI5篇(1)
- HTML5开发移动web应用——SAP UI5篇(2)
- HTML5开发移动web应用——SAP UI5篇(3)
- HTML5开发移动web应用——SAP UI5篇(4)
- HTML5开发移动web应用——SAP UI5篇(5)
- HTML5开发移动web应用——SAP UI5篇(6)
- HTML5开发移动web应用——SAP UI5篇(7)
- HTML5开发移动web应用——SAP UI5篇(8)
- HTML5开发移动web应用——SAP UI5篇(9)
- HTML5开发移动web应用—JQuery Mobile(1)
- HTML5开发移动web应用—JQuery Mobile(3)-列表
- HTML5开发移动web应用—JQuery Mobile(4)-事件
- HTML5开发移动web应用——Sencha Touch篇(4)
- HTML5开发移动web应用——Sencha Touch篇(5)
- HTML5开发移动web应用——Sencha Touch篇(6)
- HTML5开发移动web应用——Sencha Touch篇(7)
- HTML5开发移动web应用——Sencha Touch篇(8)
- HTML5开发移动web应用——Sencha Touch篇(9)
- 史上最强大的程序猿装X教程
- 由浅入深探究 MySQL索引结构原理、性能分析与优化
- PHP程序员开发工具
- RBM学习算法
- [Leetcode] 331
- HTML5开发移动web应用——SAP UI5篇(1)
- hdoj 2089 不要62 【数位dp】
- C++链队列类实现
- hdu4352 XHXJ's LIS
- TokuDB · 行锁(row-lock)与区间锁(range-lock)
- 广西首届网络安全选拔赛PWN、REVERSE、决赛题目
- hdu 2025 查找最大元素
- 连接断开导致XA事务丢失
- Codeforces Round #341 (Div. 2) ---补题