主页 > 电脑硬件 >

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

电脑硬件
2025-09-19 18:33:02

一、背景

二、优化目标

三、定位调整点

四、调整步骤

五、效果展示

六、附言

一、背景

在每次通过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章节所述压缩包中）

下列仅为调整点的代码：

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

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

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

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

标签：

SAPWebide系列（7）-优化FreeStyle新建项目预设模板由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“SAPWebide系列（7）-优化FreeStyle新建项目预设模板”

上一篇
数据结构（初阶）（三）----单链表

下一篇
SEO长尾关键词优化策略精要