克米亚sap论坛,中国最好的sap论坛,sap系统,sap培训,kemiya,克米亚,sap账号,sap ides,sap mm,sap hana,sap fico,sap pp

 找回密码
 注册
查看: 89|回复: 4

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

[复制链接]
kmy 发表于 2018-12-6 16:14:17 | 显示全部楼层 |阅读模式
由于最近的经历,让我对SAP的相关产品有了更加深入的理解。其中,SAP FioriSAP新的解决方案,简单来说就是建立在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">

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

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


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


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

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

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


Knigreent 发表于 2019-1-7 07:21:42 | 显示全部楼层
sap basis
z3765295 发表于 2019-2-8 16:50:25 | 显示全部楼层
sap pp
fengyunsnake 发表于 6 天前 | 显示全部楼层
sap sd
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|克米亚sap论坛,sap账号,sap系统,sap ides,sap学习机,sap练习环境 ( 渝ICP备18002525号-5 )

GMT+8, 2019-3-19 04:27

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表