目录
一、背景
二、优化目标
三、定位调整点
四、调整步骤
五、效果展示
六、附言
一、背景
在每次通过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 function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
// set the device model
this.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 case
if (jQuery(document.body).hasClass("sapUiSizeCozy") || jQuery(document.body).hasClass("sapUiSizeCompact")) {
this._sContentDensityClass = "";
} else if (!Device.support.touch) { // apply "compact" mode if touch is not supported
this._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.Table
this._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生成项目的预设模板也进行优化。同理，也可根据此方法对其他预设模板进行优化。
👍点赞，您的支持是我创作的动力！
⭐️收藏，您的青睐是我前行的方向！
✏️评论，您的意见是我成长的财富！
