不写一行代码创建Fiori App _创建

男儿欲遂平生志，六经勤向窗前读。这篇文章主要讲述不写一行代码创建Fiori App相关的知识，希望能为你提供帮助。
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，如下图：

文章图片

点击完成。

文章图片

然后我们会看到如下页面：

文章图片

【不写一行代码创建Fiori App】请注意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.");