首页 > SAP > FIORI > APUI5 (01) – SAPUI5环境搭建
2019
08-27

APUI5 (01) – SAPUI5环境搭建

SAPUI5是SAP公司推出的HTML5开发工具包,用于开发现代的、基于web的企业级应用程序。学习SAPUI5,首先要了解和区分三个概念:SAPUI5, SAPUI5和Fiori。SAPUI5刚才已经解释过了,接下来看其它两个概念。

什么是SAPUI5?

SAPUI5是SAPUI5的开源版本,SAPUI5和SAPUI5的核心框架(core framework)和库是相同的,SAP公司移除了一些库,比如BPM。SAPUI5的官方网站:http://SAPUI5.org/

什么是Fiori?

Fiori是SAP基于SAPUI5的一系列apps,运行在LaunchPad上。SAP非常重视Fiori,计划逐步取代传统的GUI,所以代表未来的方向。你可以在这个网址找到有哪些可用的Fior app:https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/

也可以在SAP Fiori Cloud上通过Demo来了解。比如下面的截图是采购订单审批:

APUI5 (01) - SAPUI5环境搭建 - 第1张  | 优通SAP

SAPUI5开发环境搭建

后面通过SAPUI5来学习。开发可以用手工的方式,或选择一个IDE。SAP强烈推荐自家的Web IDE,但我主要是使用Eclipse。开发环境按自己的习惯和喜欢就好。Eclipse中搭建开发环境包括:

Java JDK下载和安装Eclipse Java EE下载和安装Java Web Server安装Eclipse中添加Web Server安装SAP Development Tools for Eclipse
Java JDK下载和安装

安装JDK并配置环境变量。安装完成使用Java -version测试是否安装成功。配置JAVA_HOME和PATH环境变量。比如在我的计算机上:

JAVA HOME: C:\Program Files (x86)\Java\jdk1.8.0_65 PATH: %JAVA_HOME%;%JRE_HOME%12
12
Eclipse Java EE下载和安装

并不是所有Eclipse版本都可以。目前,支持SAPUI5的有Luna和Mars版,可以在https://tools.hana.ondemand.com/ 网站查询SAPUI5支持的Eclipse。

Java Web Server安装

需要一个JavaWeb Server用于部署和运行应用。最常见的有Tomcat。Tomcat版本要与Eclipse版本匹配,最新版本可以能不被支持。在Apache官网下载后,解压到指定的目录。你可以到tomcat的bin目录下执行startup.bat批处理文件启动和停止服务器。如果碰到问题,网上搜索下。

Eclipse中添加Web Server

如果你想从Eclipse里直接部署应用,你需要在Eclipse里创建服务器实例。打开Eclipse,选择File –> New –> Other,然后选择Server,在接下来的窗口中选择(你自己的版本)Apache Tomcat,确定Tomcat的路径,完毕。

添加Tomcat后,可以在Server视图中看到你的Tomcat服务器实例,你可以在这里方便的启动和停止Tomcat。

安装SAP Development Tools for Eclipse

开打Eclipse菜单Help –> Install New Software,点击Add来添加连接。你可以自己到https://tools.hana.ondemand.com/ 上看看目前支持的Eclipse版本信息和插件信息。
由于我的Eclipse是Mars,因此添加连接 https://tools.hana.ondemand.com/Mars

选择插件:

APUI5 (01) - SAPUI5环境搭建 - 第2张  | 优通SAP

安装插件后需要重启Eclipse,环境搭建完毕。

SAPUI5 Hello World

Eclipse中,File -> New -> Other,在下面的界面中,选中SAPUI5 Application Development下Application Project

APUI5 (01) - SAPUI5环境搭建 - 第3张  | 优通SAP

点击Next, Project name输入zSAPUI5_hello,Library选择sap.m,去掉Create an initial View,然后点击Finish。

sap.ui.commons和sap.m是两个不同的界面库,但现在因为跨平台的原因,sap.ui.commons中很多控件都标记为deprecated,所以我们直接选择sap.m。

View是MVC开发模型中的view,第一个例子,我们先不考虑MVC。

APUI5 (01) - SAPUI5环境搭建 - 第4张  | 优通SAP

在Eclipse项目中,找到index.html,运行程序,打开浏览器,输入http://localhost:8080, 出现天蓝色背景,表示hello world运行成功。这一篇主要说明环境搭建,对代码不作讲解。

最后编辑:
作者:yangsen
本站为个人博客网站,全由我个人维护,我从事SAP开发13年,其它ERP开发7年,基本都是零售行业。本站记录工作学习的过程, 有SAP相关询问专、兼职工作可随时联系我。 有网站相关的问题可直接在文章下方留言,或者联系我。 邮件:yan252@163.com给我。 QQ:415402519

留下一个回复

你的email不会被公开。