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 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生成项目的预设模板也进行优化。同理，也可根据此方法对其他预设模板进行优化。

👍点赞，您的支持是我创作的动力！

⭐️收藏，您的青睐是我前行的方向！

✏️评论，您的意见是我成长的财富！