2017-08-14 Alex Fiori
我在上文中介绍了SAP Web IDE, 今天就基于SAP Web IDE的强大特性，不写一行代码的建立一个Fiori App。
当然，不写一行代码创建的App在实际项目中还是未免过于幼稚，但是通过标准模板可以大体搭建一个App的基本框架，为后来的开发开来非常大的便利。通过这个过程大家对Fiori的基本技术UI5，MVC的体系结构也有一个大体的认识。
我们今天创建一个Fiori App，来显示财务凭证的头信息，这个App和我之前一直作为例子的Manage Journal Entries的第一个页面类似，只是没有了filter等输入信息，直接无条件输出了。会调用oData Service ：FAC_FINANCIAL_DOCUMENT_SRV_01
建立Fiori App包括以下几部分：
- 定义数据源，通过定义数据源可以建立和后端系统数据的连接，完成数据的增删查改，数据源在这里指：OData Service；
- 创建数据模型，配置模型类型、数据源、URI；
- 设计页面布局，基于UI5，在页面展示财务凭证的Header信息；
- 绑定基于OData Service的数据集；
- 绑定页面元素和OData Service 数据字段。
首先登陆WebIDE 然后创建基于模板的项目Create a New Project from Template.
我们选择SAPUI5 Application Template.
创建项目名称：
选择 View Type和名称
点击完成，我们的工程创建完成，Fiori App的基本代码框架就创建完成了，我们会看到如下图的页面：
请注意，有三个独立的文件夹Model, View 和Controller，其中Model是数据模型，View是页面视图，Controller是控制模块，也就是业务代码部分。MVC是前端开发的常见结构，从struts, JSF，Spring等前端框架开始，基本都是这种架构。
添加数据源
开发Fiori App，首先需要定义数据源，所有的App其实不都是消费数据，更新或者添加数据么。开发程序定义数据源大都是JDBC/ODBC的data source,今天的data source是OData Service。之前我也介绍过，Fiori消费ERP数据通过SAP Gateway作为工具OData Service作为接口。
点击文件：manifest.json ，其中有两种编辑视图：Descriptor 和Code Editor，
在文件manifest.json 上右键，选择Open With -> Descriptor Editor
因为我们今天的初衷是尽量不写代码，所以我选择Descriptor，当然作为有经验的大神么，可以选择Code Editor。
在Descriptor Editor，到Data Source Tab，这里我们配置“从哪里”“怎么”获取数据，点击按钮“+”，选择SAP系统和services，如下图：
点击完成。
然后我们会看到如下页面：
请注意OData Service 和URI.
创建默认Model
在文件manifest.json点击Models 页面，默认会出现i18n（国际化信息模型，就是存储Fiori App页面文字信息的）
点击“+”按钮，创建一个新的Model,按照下图添加信息，并设置为默认的模型。
创建完模型，如下图，请注意下面的信息：
虽然我们没有写一行代码，但是WebIDE其实在后台默默的帮我们把代码写好了，请看下图自动生成的代码：
设计页面的视图信息
视图文件同样有可视化界面和代码界面，因为我们今天不写代码，所以就用视图界面拖拽了。视图界面主要是HTML5元素组成，如果是HTML5开发者，可以自行选择开发界面。如下图，我拖拽一个List元素到页面中，来显示财务文档的头信息。
配置页面控件显示信息
我们只需要一个list item,其他两个可以删除了。
选择这个ListItem, 点击Data Set旁边的按钮，进行数据绑定。
绑定 OData Service Data Set Header 到页面控件
绑定OData Service Entity Type Properties (fields) 到 list item里
如下图，List Item有两部分，title和description，我们需要分别绑定信息：
双击字段，选择字段。
好了，我们设置完成，点击save 按钮保存文件，并点击测试按钮，进行测试。
可以看到下面的页面，虽然简陋，但是生成自己的Fiori App，是不是有点小兴奋？
看到title信息是默认的，我们可以修改一下。我之前提到过i18n是国际化的配置信息，可以在那里找到对应的字段信息进行修改。
修改完，保存，再测试一下页面，如下图：
SAPUI5事件
我们今天的文章本来到这里可以结束了，真的没写一行代码！但是为了证明，其实我也可以写代码的，我又加了一点内容。
在List item上单击，选择右手边的Events，选择press,创建function,如下图：
点击new function, 输入function name，然后系统会自动生成function在controller里面，如下图，当然具体代码语句我们还是需要自己写的。
随便写一行：alert("Testing: Navigating to Document Line Item.");
Ok, 测试一下。
今天的文章到这里真的结束了，我们就点一点，拖一拖就创建了一个Fiori App，而且数据真的来自SAP系统，我想说，基于Fiori的开发就是这么简单便捷，未来S4HANA的Fiori应用会越来越多，越来越好。
本文内容属于个人观点，不代表任何官方。
