OpenUI5 开发的辅助工具 generator-sapui5-templates 介绍

generator-sapui5-templates 包含根据 3 种模板搭建脚手架代码和测试的工具集。package 的 url:

本篇博文介绍 generator-sapui5-templates 的基本使用方法，使用 Visual Studio Code 作为编辑器。假设你的电脑上已经安装 node.js。

环境准备

node.js
yo

node.js 的安装比较简单，不说明。安装 node.js 后，在命令行中使用下面的命令全局安装 yo:

# install yo 
npm install --global yo

安装 generator-sapui5-templates

我们可以参照 @sapui5/generator-sapui5-templates 的说明，选择是以 global 还是 local 的方式进行安装。

假设我们选择 local 方式安装。首先创建一个文件夹，用 Visual Studio Code 打开该文件夹。打开 VS Code 的 Terminal 窗口 (Windows 版本的快捷键为 Shift + Esc)。在 Terminal 窗口中输入如下命令：

npm install @sapui5/generator-sapui5-templates --save-dev

安装后，在 Terminal 窗口使用下面的命令检查是否安装成功：

yo --generators

显示结果如下，表示安装成功。

D:\openui5-demo>yo --generators
Available Generators:

  @sapui5/sapui5-templates
    1worklist
    2masterdetail
    3worklistodatav4

构建 OpenUI5 项目

接下来，我们利用 generators 搭建一个 OpenUI5 项目，展示 https://services.odata.org/V2/Northwind/Northwind.svc/ 提供的 OData Service 中 Products 数据。先在浏览器中查看 Products 数据，可以基于下面的 url。如果你对 OData 的规范不熟悉，请参考其他文档进行熟悉。

https://services.odata.org/V2/Northwind/Northwind.svc/Products?$format=json

在 VS Code 的 Terminal 窗口输入下面的命令：

 yo @sapui5/sapui5-templates

然后根据提示填写值：

D:\openui5-demo> yo @sapui5/sapui5-templates
? Provide the module name OpenUI5Demo
? Provide the module namespace com.stonewang
? Select a template
  SAP Fiori Worklist Application
> SAP Fiori Master-Detail Application
  SAP Fiori Worklist Application OData V4

在第三步，可以使用光标上下移动进行选择。选择 Master-Detail Application。其他项也根据提示填写，我填写的值如下：

下面是 generator 返回的结果：

D:\openui5-demo> yo @sapui5/sapui5-templates
? Provide the module name OpenUI5Demo
? Provide the module namespace com.stonewang
? Select a template SAP Fiori Master-Detail Application
? Title Northwind Product List
? Description Product List
? Choose if your app should run in SAP Fiori Launchpad or standalone Standalone App (optimized for individual deployment)
? Service Base URI https://services.odata.org/V2/Northwind/Northwind.svc/
? Datasource URL /srv/
? Object Collection Products
? Object Collection ID ProductID
? Object Title ProductName
? Object Numeric Attribute UnitPrice
? Object Unit of Measure
? Line Item Collection
? Line Item Collection ID
? Line Item Title
? Line Item Numeric Attribute
? Line Item Unit of Measure
   create package.json
   create .npmignore
   create .npmrc
   create ui5.yaml
   create webapp\Component.js
   create webapp\controller\App.controller.js
   create webapp\controller\BaseController.js
   create webapp\controller\Detail.controller.js
   create webapp\controller\DetailObjectNotFound.controller.js
   create webapp\controller\DetailObjectNotFound.js
   create webapp\controller\ErrorHandler.js
   create webapp\controller\ListSelector.js
   create webapp\controller\Master.controller.js
   create webapp\controller\NotFound.controller.js
   create webapp\i18n\i18n.properties
   create webapp\index.html
   create webapp\localService\metadata.xml
   create webapp\localService\mockserver.js
   create webapp\manifest.json
   create webapp\model\formatter.js
   create webapp\model\models.js
   create webapp\test.html
   create webapp\test\initMockServer.js
   create webapp\test\integration\AllJourneys.js
   create webapp\test\integration\BusyJourney.js
   create webapp\test\integration\BusyJourneyPhone.js
   create webapp\test\integration\MasterJourney.js
   create webapp\test\integration\NavigationJourney.js
   create webapp\test\integration\NavigationJourneyPhone.js
   create webapp\test\integration\NotFoundJourney.js
   create webapp\test\integration\NotFoundJourneyPhone.js
   create webapp\test\integration\PhoneJourneys.js
   create webapp\test\integration\arrangements\Startup.js
   create webapp\test\integration\opaTests.qunit.html
   create webapp\test\integration\opaTests.qunit.js
   create webapp\test\integration\opaTestsPhone.qunit.html
   create webapp\test\integration\opaTestsPhone.qunit.js
   create webapp\test\integration\pages\App.js
   create webapp\test\integration\pages\Browser.js
   create webapp\test\integration\pages\Common.js
   create webapp\test\integration\pages\Detail.js
   create webapp\test\integration\pages\Master.js
   create webapp\test\integration\pages\NotFound.js
   create webapp\test\mockServer.html
   create webapp\test\testsuite.qunit.html
   create webapp\test\testsuite.qunit.js
   create webapp\test\unit\AllTests.js
   create webapp\test\unit\controller\ListSelector.js
   create webapp\test\unit\model\formatter.js
   create webapp\test\unit\model\models.js
   create webapp\test\unit\unitTests.qunit.html
   create webapp\test\unit\unitTests.qunit.js
   create webapp\view\App.view.xml
   create webapp\view\Detail.view.xml
   create webapp\view\DetailObjectNotFound.view.xml
   create webapp\view\Master.view.xml
   create webapp\view\NotFound.view.xml
   create webapp\view\ViewSettingsDialog.fragment.xml

使用 npm install 命令安装依赖，然后使用 npm start 启动服务器端程序。客户端界面如下：