不寫一行代碼建立Fiori App

標籤：介紹   模型   儲存   document   iam   ssl   結構   gnu   cdn   

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應用會越來越多，越來越好。

 

 

本文內容屬於個人觀點，不代表任何官方。

不寫一行代碼建立Fiori App