Fiori-hello world

今天正式开始学习Firor了，我是SAP UI5的小白，也是Javascript的小白,所以学习过程中一些很简单很基础的问题都能浪费我大量时间找资料，如果身边有一Javascript高手,会节约非常多的时间。我基本是按官方的资料一步步看下去的，遇到不明白的就百度，然后再继续，进度比较慢，但很享受。
https://sapui5.hana.ondemand.com/sdk/#docs/guide/

声明：下面内容有一些是我从其它公众号或网站中摘的，如有侵权，请告知

问题

开始之前有几个问题需要搞清楚：

1. Fiori和SAPUI5是什么关系？

简单说，Fiori是基于HTML5和SAPUI5的，可以理解成Fiori是用SAPUI5开发的一个应用。

Fiori 是使用SAPUI5 的JS UI库并且遵照 SAP Fiori的设计指导开发的，使用SAP 云平台，WEBID可以快速实现新的应用场景。

2. Launchpad是个什么鬼？

个人理解这就是个平台组件，可以方便组织SAP Fiori APP和用户自己用SAPUI5开发的APP。

3. Firoi架构是什么样的？开发的APP发布到哪里？怎么跨平台？

Launchpad是一些组件，UI5是一些JS库,这些都是装在frontend server上的（Frontend server有三种安装方式，其中一种就是和装在backend server上，没有深入了解），有这些Launchpad组件Fiori就可以和SAP交互了么？不，这里还有一个非常重要的组件，Gateway ，Launchpad包括我们开发的UI5 APP都是通过Gateway使用ODATA来与SAP商业套件进行连接交互的,可以理解成SAP Netweaver Gateway就是SAP基于ODATA协议（OData协议支持一系列流行的数据格式,包括JSON，XML。）开放出来的一个接口，这样就可以开发基于Web和Mobile的程序而不用考虑Web程序和Mobile应用是用什么技术开发的了，实现了SAP Fiori的跨平台特性。

放一个图在这里

4. WEBIDE 是干嘛的？

SAP Web IDE 是基于 Eclipse 内核的在线开发 IDE，用来开发和扩展SAP Fiori APP,SAPUI5 APP，有专门针对物联网和HANA应用开发的控件，并且它非常容易扩展。可以使用在线的试用版本，但服务器在德国，访问的网速特别慢，也可以使用 Personal Edition，在本机启动和编写代码。

与 Eclipse 相比，SAP Web IDE 有几个优点：

支持基于 XML View 的可视化操作，支持控件的拖放;
支持 Application Descriptor (manifest.json) 文件编辑的 Application Descriptor Editor:
根据 Template 生成项目文件的结构，减少开发的工作量。而且 SAP 已经停止对 Eclipse 开发插件的支持，所以后续 IDE 功能的更新将主要在 Web IDE。
提供内置 Proxy，解决开发页面运行的 cross-origin 问题，方便开发测试
SAP 对Eclipse开发所需要的SAP Developer Tools for Eclipse不再更新，所以一些代码框架比较陈旧，比如 Controller 的代码框架等等。

缺点呢？感觉 IDE 中对中文输入的支持不好，支持中文显示，但输入比较困难。另外，操作友好性也还不够，比如代码剪贴不是很方便。

WEBIDE 有版本：

SAP Cloud Platform, Web IDE
SAP Web IDE for SAP HANA

4.1 下载

链接：http://pan.baidu.com/s/1boT3cnH 密码：jgxm
这个是1.45.3 官方最新的现在是1.53.1，地址奉上：
https://tools.hana.ondemand.com/#sapui5

根据自己系统下载即可。

4.2 安装

本地试用版几乎是傻版，不需要任何安装

安装JDK,这个大家应该都装过N次就不说了。版本要求
1.7以上的都可以
打开Orion
下载后解压到任何路径，以防万一，最好不要有中文，Orion提供了WEBIDE需要的后端的服务，它可以理解为一个文件管理器，可以给每个用户分配不同的空间管理不同的project，它可以关联本地的git库以实现版本控件。
我们要做的就是双击打开这个Orion服务

出现下面这个窗口（不要关闭）就可以开始打开浏览器开发hello world喽
打开Chrome
http://localhost:8080/webide/index.html出现登录界面，虽然是本地IDE，也要注册一个用户的，然后点击色子‘3点’进行登录。

至此，你已经可以开始开发工作了！
8080 端口是 Tomcat 的默认端口，如果需要变更 Web IDE 的端口，打开安装目录下面的 orion.ini 文件，将端口改了即可
5. WEBIDE 的架构是什么样的？

官网的一个图，意思就是使用WEBIDE开发的应该可以部署在不同的平台上（右边黑色部分），可以使用不同类型的数据源（下面），可扩展（左边）。

下面还有一个图，这个更容易看出来SAP WEBIDE在整个架构中的位置

SAP HANA Cloud Connector通过简单的配置使SAP WEBIDE和SAP HANA cloud Platform连接到一个预置的系统。SAP Gateway 为SAP WEBIDE连接外部SAP系统提供了一个简单的连接。

step 1 Hello world

https://sapui5.hana.ondemand.com/sdk/#docs/guide/2680aa9b16c14a00b01261d04babbb39.html

新建文件夹‘step1_hello_world’（这里不能有空格）

新建文件 ‘index.html’

简单点就直接copy代码吧

<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
   </head>
   <body>
      <p>Hello World</p>
   </body>
</html>

貌似是写完了，但根本不能执行 T_T

原因就是缺少了项目的配置文件，如果参考模版或是其它应用创建会自动生成配置文件，但这里直接创建html是需要手工创建的

新建文件 ‘neo-app.json’

{
  "welcomeFile": "index.html",
  "routes": [
    {
      "path": "/resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "version": "snapshot",
        "entryPath": "/resources"
      },
      "description": "SAPUI5 Resources"
    },
    {
      "path": "/test-resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/test-resources"
      },
      "description": "SAPUI5 Test Resources"
    }
  ]
}

copy ,保存，绿色三角执行

传说中的hello world 出现了，从此又会了一门手艺:clap::clap:

在进行UI开发前要注意查看服务器中Gateway的库的版本，以服务器的库版本为基准进行开发，否则有可能会导致EDI里开发所用到的控件传到服务器后报错，TCODE:SICF

顺便也说一个如何查看WEBIDE的库版本
Ctrl+Shift+Alt+'S'
前段开发部署到服务器上是以BSP Application的形式存在的

**注意：这里其实是有3个版本的：

一个是你开发的WEBIDE版本，这个在开发界面按Ctrl+Shift+Alt+'S'查看;
还有一个是执行程序时按Ctrl+Shift+Alt+'S'查看（前提是index.html的src标签用是src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"）;
然后是部署在server上的Gateway中库的版本,查看地址：http ://:/sap/public/bc/ui5_ui5/index.html**

这3者的作用相信你也能猜出来了，使用时需要注意，有奇怪的问题出现时考虑一下是不是版本差异造成的。

延伸这个话题，如果我就是想用某一个控件怎么办呢？比如CustomTreeItem，这个控件在要求1.48以上才可能用的，但我们的WEBIDE是1.44，怎么办呢？

github( https://github.com/SAP/openui5/tree/master/src/sap.m/src/sap/m )中找到这两个js文件(‘CustomListItem.js’和’CustomListItemRenderer.js’),down下来放到本地的sap.m库中即可。

我本地的地址是：E:\SAPWEBIDE\eclipse\plugins\com.sap.webide.orionplugin_1.53.1\ui5\1.44.12\resources\sap\m
供参考。

如果你用的是cloud的webide会更方便一些，可以直接用‘Library Manager’下载引用

Tips:

快捷键：

CTRL+ALT+B: 代码美化，相当于ABAP的pretty print

CTRL+/：行注释

CTRL+ALT+/: 块注释

Outline:这个功能特别适合快速定位代码块，很方便

升级SAP Web IDE Personal Edition

如果发现新版本的WEBIDE Edition想要升级的话，升级方法很简单:

1. 备份下面这三个文件（夹）
config_master<br>
serverworkspace<br>
orion.ini<br>
2. 下载新的WEBIDE，解压后用备份覆盖

参考

简书：

翱翔云天SAP: http://www.jianshu.com/nb/10985020

StoneWM:
http://www.jianshu.com/nb/8494430

再分享几个学习Fiori非常有用的网址：

SAP Fiori Cloud Demo:
https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001

SCN:
https://wiki.scn.sap.com/wiki/display/Fiori/SAP+Fiori+Cloud

你可以在这个网址找到有哪些可用的 Fiori app:https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/

问题