SAP Webide系列（7）- 优化FreeStyle新建项目预设模板

一、背景

二、优化目标

三、定位调整点

四、调整步骤

五、效果展示

六、附言

一、背景

在每次通过Webide进行FreeStyle方式自开发SAP UI5应用的时候，新建项目，得到的模板文件都是只有很少的内容（没有路由配置、没有设置默认全屏等等）。导致每次都需要进行这些重复的配置工作，故而想到优化创建的模板达到一劳永逸的目的。

二、优化目标

1、index.html文件新增指向服务器的核心资源库路径（注释形式增加，便于切换）；设置appWidthLimited属性（使index方式访问应用时能全屏展示应用）；

2、调整manifest.json文件，追加config->fullWidth属性（使Launchpad中访问应用时保持全屏展示应用）;

3、增加路由配置（免除新开发应用时的路由配置操作）。

三、定位调整点

通过此系列第2篇文章一样的方法，根据network(网络)请求的文件来判断原始模板位置。

此处就直接列出模板的对应文件位置：

1、index.html和manifest.json模板的路径为：WebIDE\plugins\com.sap.webide.orionplugin_1.53.9\webide\resources\sap\watt\saptoolsets\fiori\project\plugin\ui5template\basicSAPUI5ApplicationProject\BasicSAPUI5ApplicationProjectTemplateWithManifest.zip

2、剩余文件模板的路径为：

WebIDE\plugins\com.sap.webide.orionplugin_1.53.9\webide\resources\sap\watt\saptoolsets\ui5\project\plugin\ui5template\basicSAPUI5ApplicationProject\BasicSAPUI5ApplicationProjectTemplateWithManifest.zip

四、调整步骤

1、index.html.tmpl模板调整点（上文3.1章节所述压缩包中）

下列仅为调整点的代码：

<!--src="/sap/public/bc/ui5_ui5/resources/sap-ui-cachebuster/sap-ui-core.js"-->
<!--data-sap-ui-appCacheBuster="./"-->
<!--src="/sap/public/bc/ui5_ui5/resources/sap-ui-core.js"-->data-sap-ui-theme="sap_fiori_3"appWidthLimited: false<body class="sapUiBody sapUiSizeCompact" id="content">

2、manifest.json.tmpl模板调整点（上文3.1章节所述压缩包中）

下列仅为调整点代码：

"sap.ui5": {
{{#if basicSAPUI5ApplicationProject.hasView}}"rootView": {"viewName":"{{basicSAPUI5ApplicationProject.parameters.namespace.value}}.view.App","type":"{{basicSAPUI5ApplicationProject.parameters.ViewTypesCollection.value.value}}"},"routing": {"config": {"routerClass": "sap.m.routing.Router","viewType": "XML","async": true,"viewPath": "{{basicSAPUI5ApplicationProject.parameters.namespace.value}}.view","controlAggregation": "pages","controlId": "app","clearControlAggregation": false},"routes": [{"name": "Main","pattern": "","target": ["Main"]}],"targets": {"Main": {"viewType": "XML","transition": "slide","clearControlAggregation": false,"viewName": "{{basicSAPUI5ApplicationProject.parameters.name.value}}"}}},
{{/if}}"config": {"fullWidth": true},

3、Component.js.tmpl模板调整点（上文3.2章节所述压缩包中）

下列仅为调整点代码：

init: function() {// call the base component's init functionUIComponent.prototype.init.apply(this, arguments);// enable routingthis.getRouter().initialize();// set the device modelthis.setModel(models.createDeviceModel(), "device");
},/*** Get the page compactness that should be set for the current state.* @public* @returns {String} Compact CSS*/
getContentDensityClass: function() {if (this._sContentDensityClass === undefined) {// check whether FLP has already set the content density class; do nothing in this caseif (jQuery(document.body).hasClass("sapUiSizeCozy") || jQuery(document.body).hasClass("sapUiSizeCompact")) {this._sContentDensityClass = "";} else if (!Device.support.touch) { // apply "compact" mode if touch is not supportedthis._sContentDensityClass = "sapUiSizeCompact";} else {// "cozy" in case of touch support; default for most sap.m controls, but needed for desktop-first controls like sap.ui.table.Tablethis._sContentDensityClass = "sapUiSizeCozy";}}return this._sContentDensityClass;
}

4、新增App.view.xml.tmpl模板文件（上文3.2章节所述压缩包中）

在view文件夹中新增文件App.view.xml.tmpl

<mvc:View controllerName="{{basicSAPUI5ApplicationProject.parameters.namespace.value}}.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"xmlns="sap.m"><App id="app"/>
</mvc:View>

5、新增App.controller.js.tmpl模板文件（上文3.2章节所述压缩包中）

在controller文件夹中新增文件App.controller.js.tmpl

sap.ui.define(["sap/ui/core/mvc/Controller"
], function(Controller) {"use strict";return Controller.extend("{{basicSAPUI5ApplicationProject.parameters.namespace.value}}.controller.App", {onInit: function() {this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass()); //Set Compactness}		});
});

6、调整BasicSAPUI5ApplicationProjectTemplate.js逻辑以使项目生成的命名空间更准确（上文3.2章节所述压缩包一样的路径下）

下面截图仅演示效果，实际开发请始终保持项目名和命名空间录入为小写，以保证最终命名空间为SAP规范中的命名空间全小写

针对上面截图阐述的现象，对FreeStyle模板的命名空间逻辑调整点如下图所示

下列仅为调整点代码

//model.basicSAPUI5ApplicationProject.parameters.namespace.value = model.basicSAPUI5ApplicationProject.parameters.namespace.value + model.projectName;
//将上面一行代码注释掉，换成下面这行即可达到以“.”分隔开项目名和命名空间
model.basicSAPUI5ApplicationProject.parameters.namespace.value += "."+ model.projectName;//可选，添加此代码会将命名空间强制转化为小写
model.basicSAPUI5ApplicationProject.parameters.namespace.value = model.basicSAPUI5ApplicationProject.parameters.namespace.value.toLowerCase();

五、效果展示

完成上述修改后，重启Webide（并确保Webide缓存已清除），通过选择FreeStyle模板生成项目的结果展示如下：

六、附言

虽然SAP已战略性将Webide本地版抛脑后，强推本地开发采用VSCode+Fiori Tools插件，并且也针对Fiori Tools里生成项目的预设模板进行了更新迭代。但我们仍可将Webide本地版开发工具作为一个选择，毕竟选择权应该交由用户，故而写此篇文章对Webide生成项目的预设模板也进行优化。同理，也可根据此方法对其他预设模板进行优化。