fix-deprecated-controls

Name: fix-deprecated-controls
Author: ui5

github.com/ui5开发44144 次安装1 周前更新

代码仓库

关于 fix-deprecated-controls

此技能用于处理 UI5 检查器无法自动修复、需要判断替代 API 的弃用问题，涵盖类、属性、接口和类型，并指出复杂的个性化迁移应手动处理。

主要功能

01查找弃用 API 的替代项
02处理类、属性、接口和类型
03结合检查器详情与 API 参考
04标记需手动处理的 p13n 迁移

适用场景

01替换 UI5 应用中的弃用控件
02更新 JavaScript 或 XML 中的弃用属性
03复核弃用警告并重新运行检查器

MCP 相关

建议使用 UI5 MCP Server 的 `get_api_reference` 工具查询弃用状态和替代 API。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/ui5/plugins-coding-agents --skill fix-deprecated-controls

安装后在 Claude Code 中输入/fix-deprecated-controls确认已加载。

附带文件references/control-modernization-details.md

详细介绍

修复已弃用的控件、类、接口和类型

此技能用于修复 UI5 linter 检测到但无法自动修复的已弃用控件／类／接口／类型问题，因为修复需要了解特定替代 API。

处理的 Linter 规则

规则 ID	消息模式	此技能的操作
`no-deprecated-api`	使用了已弃用的类 '...'	替换为新类
`no-deprecated-api`	使用了已弃用的接口 '...'	替换为新接口
`no-deprecated-api`	使用了已弃用的类型 '...'	替换为新类型
`no-deprecated-api`	使用了已弃用的属性 '...'	移除或替换属性
`no-deprecated-api`	使用了类 '...' 的已弃用属性 '...'	替换为新属性／API

适用场景

当你看到类似以下的 linter 输出时，请使用此技能：

MyController.js:15:5 error Use of deprecated class 'sap.ui.commons.Button'  no-deprecated-api
MyController.js:20:5 error Use of deprecated property 'blocked' of class 'sap.m.Button'  no-deprecated-api
MyView.view.xml:10:5 error Use of deprecated class 'sap.m.DateTimeInput'  no-deprecated-api
Component.js:25:5 error Use of deprecated interface 'sap.ui.core.IFormContent'  no-deprecated-api

获取替代项信息

运行带有 --details 标志的 linter，以获取包含替代指南的 API 文档链接：

npx @ui5/linter --details

使用 UI5 MCP Server 的 get_api_reference 工具检查弃用状态并查找替代项：

查询：sap.ui.commons.Button 或 sap.m.Button#blocked

修复策略

1. `new` 表达式中的已弃用类

问题：使用了已弃用的控件类。

// Before - triggers no-deprecated-api
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/commons/Button"  // Deprecated library!
], function(Controller, Button) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            var oButton = new Button({
                text: "Click me"
            });
        }
    });
});

修复策略：替换为现代等效类。

// After - use sap.m.Button instead
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/Button"
], function(Controller, Button) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            var oButton = new Button({
                text: "Click me"
            });
        }
    });
});

常见的已弃用类替换项：

已弃用的类	替代项
`sap.ui.commons.*`	对应的 `sap.m.*` 类
`sap.ui.ux3.*`	`sap.m.` 或 `sap.f.`
`sap.ui.commons.TextField`	`sap.m.Input`
`sap.ui.commons.Button`	`sap.m.Button`
`sap.ui.commons.Label`	`sap.m.Label`
`sap.ui.commons.CheckBox`	`sap.m.CheckBox`
`sap.ui.commons.DropdownBox`	`sap.m.Select` 或 `sap.m.ComboBox`
`sap.ui.model.odata.ODataModel`	`sap.ui.model.odata.v2.ODataModel`
`sap.m.MessagePage`	`sap.m.IllustratedMessage`（参见第 8 节）
`sap.viz.ui5.controls.VizFrame`（旧版）	查看 `sap.viz` 文档

sap.m 已弃用的控件：

已弃用的类	替代项	备注
`sap.m.UploadCollection`	`sap.m.upload.UploadSet` 或 `sap.m.plugins.UploadSetwithTable`	表格布局使用 UploadSetwithTable
`sap.m.TablePersoDialog`	`sap.m.p13n.*`	不要自动现代化 — 报告以便手动现代化
`sap.m.TablePersoController`	`sap.m.p13n.*`	不要自动现代化 — 报告以便手动现代化
`sap.m.TablePersoProvider`	`sap.m.p13n.*`	不要自动现代化 — 报告以便手动现代化
`sap.m.P13nDialog`	`sap.m.p13n.Popup`	不要自动现代化 — 报告以便手动现代化
`sap.m.P13nColumnsPanel`	`sap.m.p13n.SelectionPanel`	不要自动现代化 — 报告以便手动现代化
`sap.m.P13nSortPanel`	`sap.m.p13n.SortPanel`	不要自动现代化 — 报告以便手动现代化
`sap.m.P13nGroupPanel`	`sap.m.p13n.GroupPanel`	不要自动现代化 — 报告以便手动现代化
`sap.m.P13nFilterPanel`	`sap.m.p13n.FilterPanel`	不要自动现代化 — 报告以便手动现代化
`sap.m.DateTimeInput`	`sap.m.DatePicker` + `sap.m.TimePicker`	拆分为单独的控件
`sap.m.MultiEditField`	—	没有直接替代项，需要自定义实现
`sap.m.RouteMatchedHandler`	`sap.m.routing.RouteMatchedHandler`	使用路由模块

sap.f 已弃用的控件：

已弃用的类	替代项	备注
`sap.f.Avatar`	`sap.m.Avatar`	已移至 sap.m
`sap.f.IllustratedMessage`	`sap.m.IllustratedMessage`	已移至 sap.m
`sap.f.Illustration`	`sap.m.Illustration`	已移至 sap.m

sap.ui.table 已弃用的控件：

已弃用的类	替代项	备注
`sap.ui.table.ColumnMenu`	`sap.m.table.columnmenu.Menu`	新的列菜单框架
`sap.ui.table.AnalyticalColumnMenu`	`sap.m.table.columnmenu.Menu`	新的列菜单框架
`sap.ui.table.TablePersoController`	`sap.m.p13n.*`	请勿自动现代化 — 标记为需要手动现代化

sap.ui.unified 已弃用的控件：

已弃用的类	替代项	备注
`sap.ui.unified.Shell`	—	无替代项 — 使用 `sap.f.ShellBar` 或 `sap.tnt.ToolPage` 重新设计
`sap.ui.unified.ShellOverlay`	—	无替代项
`sap.ui.unified.ShellLayout`	—	无替代项
`sap.ui.unified.SplitContainer`	`sap.m.SplitContainer` 或 `sap.f.FlexibleColumnLayout`	使用响应式布局
`sap.ui.unified.ContentSwitcher`	—	无替代项 — 使用 `NavContainer` 或自定义逻辑

sap.ui.layout 已弃用的控件：

已弃用的类	替代项	备注
`sap.ui.layout.form.GridLayout`	`sap.ui.layout.form.ColumnLayout` 或 `sap.ui.layout.form.ResponsiveGridLayout`	GridLayout 已移除

sap.ui.comp 已弃用的控件：

已弃用的类	替代项	备注
`sap.ui.comp.variants.VariantManagement`	`sap.m.VariantManagement`	属性映射见第 9 节

sap.ui.mdc 已弃用／已更改的 API：

已弃用项	替代项	备注
`sap.ui.mdc.enum.*` 枚举	`sap.ui.mdc.enums.*`	命名空间已重命名（enum → enums）
`sap.ui.mdc.FilterBar` 旧版 API	重构后的 `sap.ui.mdc.FilterBar`	查看 API，了解已更改的属性
`sap.ui.mdc.Link` 的 FLP 集成	与 FLP 解耦	查看新版 API，了解直接用法

2. 构造函数中的已弃用属性

问题：创建控件时使用了已弃用的属性。

// Before - 'blocked' property is deprecated
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/Button"
], function(Controller, Button) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            var oButton = new Button({
                text: "Submit",
                blocked: true  // Deprecated!
            });
        }
    });
});

修复策略：使用替代属性或 API。

// After - use 'enabled' instead
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/Button"
], function(Controller, Button) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            var oButton = new Button({
                text: "Submit",
                enabled: false  // Use enabled: false instead of blocked: true
            });
        }
    });
});

常见的已弃用属性替代项：

控件	已弃用的属性	替代项
`sap.m.Button`	`blocked`	`enabled`（逻辑相反）
`sap.m.Button`	`tap`（事件）	`press`
`sap.ui.table.Table`	`visibleRowCountMode`	`rowMode` 聚合
`sap.ui.table.Table`	`visibleRowCount`	`rowMode` 聚合
`sap.ui.table.Table`	`fixedRowCount`	`rowMode` 聚合
`sap.ui.comp.smarttable.SmartTable`	`useExportToExcel`	`enableExport`
`sap.ui.layout.form.SimpleForm`	`minWidth`	移除（仅用于 ResponsiveLayout）

3. 元数据中的已弃用接口

问题：在控件／组件元数据中使用了已弃用的接口。

// Before - deprecated interface
sap.ui.define([
    "sap/ui/core/Control"
], function(Control) {
    "use strict";

    return Control.extend("my.app.control.MyControl", {
        metadata: {
            interfaces: ["sap.ui.core.IFormContent"]  // Check if deprecated
        }
    });
});

修复策略：替换为当前接口；如果不再需要，则移除。

// After - use current interface
sap.ui.define([
    "sap/ui/core/Control"
], function(Control) {
    "use strict";

    return Control.extend("my.app.control.MyControl", {
        metadata: {
            interfaces: ["sap.ui.core.ISemanticFormContent"]  // Updated interface
        }
    });
});

4. 元数据中的已弃用类型

问题：在属性定义中使用了已弃用的类型。

// Before - deprecated type
metadata: {
    properties: {
        size: { type: "sap.ui.core.CSSSize" }  // May be deprecated
    }
}

修复策略：查看 API 参考文档并使用当前类型。

5. XML 视图中的已弃用控件

问题：在 XML 视图中使用了已弃用的控件。


<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <DateTimeInput value="{/date}" />
</mvc:View>

修复策略：替换为现代化的对应控件。


<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <DatePicker value="{/date}" />
    <TimePicker value="{/time}" />
</mvc:View>

6. XML 视图中的已弃用属性

问题：在 XML 中对控件使用了已弃用的属性。


<Button text="Submit" blocked="true" />

修复策略：替换为当前属性。


<Button text="Submit" enabled="false" />

7. XML 视图中的已弃用聚合

问题：使用了已弃用的聚合。


<table:Table>
    <table:plugins>
        <table:MultiSelectionPlugin />
    </table:plugins>
</table:Table>

修复策略：查看 API 参考文档，了解当前的聚合名称或用法。

8. sap.m.MessagePage → sap.m.IllustratedMessage

sap.m.MessagePage 已弃用，建议改用 sap.m.IllustratedMessage。主要变更：text+description → 单个 description，icon → illustrationType 枚举，showNavButton/navButtonPress → additionalContent 聚合中的 Button。

完整的属性映射表、XML/JS 示例和插图类型列表，请阅读 references/control-modernization-details.md。

9. sap.ui.comp.variants.VariantManagement → sap.m.VariantManagement

主要变更：variantItems → items，VariantItem.text → .title，showExecuteOnSelection → supportApplyAutomatically，showShare → supportPublic。必须通过 rename="false" 和 remove="false" 显式创建标准变体。

完整的属性映射表和标准变体 XML 示例，请参阅 references/control-modernization-details.md。

10. 已弃用的 Core 类

主要替换项：MessageManager → sap/ui/core/Messaging，Export* → sap/ui/export/Spreadsheet，LocalBusyIndicator → Control.setBusy(true)。SearchProvider、OpenSearchProvider 和 ScrollBar 没有替代项。

完整表格和 MessageManager→Messaging 代码示例，请参阅 references/control-modernization-details.md。

实施步骤

运行带有 --details 的 linter，获取替换文档链接：
```
npx @ui5/linter --details
```
从错误消息中确定已弃用的项（类、属性、接口、类型）
检查这是否是 p13n/个性化控件 — 如果已弃用的类属于以下任何一项：
- sap.m.P13nDialog、sap.m.P13nColumnsPanel、sap.m.P13nSortPanel、sap.m.P13nGroupPanel、sap.m.P13nFilterPanel
- sap.m.TablePersoDialog、sap.m.TablePersoController、sap.m.TablePersoProvider
- sap.ui.table.TablePersoController
不要尝试自动现代化这些控件。 p13n 框架的现代化需要重大的架构变更（不同的初始化模式、状态持久化模型和面板配置），无法可靠地自动完成。请改为向用户报告：
```
⚠️ Manual modernization required: <ClassName> at <file>:<line>
Replacement: sap.m.p13n.* framework
Reason: p13n modernization requires architectural changes — see UI5 documentation for sap.m.p13n
```
查找替代项（适用于非 p13n 控件），可查阅：
- npx @ui5/linter --details 提供的详细信息链接
- 使用 get_api_reference 工具查阅 UI5 API 参考
- 上方的弃用表格
应用修复：
- 对于类：更改导入和类名
- 对于属性：更改属性名或使用新 API
- 对于接口/类型：更新元数据
- 对于 XML：更新元素名称和属性
重新运行 linter 以验证

修复示例

给定 linter 输出：

npx @ui5/linter --details

MyController.js:15:5 error Use of deprecated class 'sap.m.DateTimeInput'  no-deprecated-api
  Details: {@link sap.m.DateTimeInput}
MyController.js:25:5 error Use of deprecated property 'blocked' of class 'sap.m.Button'  no-deprecated-api
  Details: {@link sap.m.Button#blocked}

之前：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/DateTimeInput",
    "sap/m/Button"
], function(Controller, DateTimeInput, Button) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            var oDateTimeInput = new DateTimeInput({
                value: "{/date}"
            });

            var oButton = new Button({
                text: "Submit",
                blocked: true
            });
        }
    });
});

之后：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/DatePicker",
    "sap/m/TimePicker",
    "sap/m/Button"
], function(Controller, DatePicker, TimePicker, Button) {
    "use strict";

    return Controller.extend("my.app.controller.Main", {
        onInit: function() {
            // DateTimeInput replaced with separate DatePicker and TimePicker
            var oDatePicker = new DatePicker({
                value: "{/date}"
            });
            var oTimePicker = new TimePicker({
                value: "{/time}"
            });

            var oButton = new Button({
                text: "Submit",
                enabled: false  // blocked: true → enabled: false
            });
        }
    });
});

说明

务必查阅 UI5 API 参考，了解具体的替代指南
某些已弃用的控件可能有多个替代方案，具体取决于使用场景
替换已弃用的库（sap.ui.commons、sap.ui.ux3）时，替代控件可能使用不同的 API
属性替换可能会反转逻辑（例如，blocked: true → enabled: false）
可考虑使用 npx @ui5/linter --details 获取现代化文档的直接链接
sap.f.IllustratedMessage 和 sap.f.Illustration 已弃用，应改用 sap.m.IllustratedMessage 和 sap.m.Illustration — 这只是简单的命名空间迁移，API 保持不变
现代化 sap.ui.comp.variants.VariantManagement 时，必须显式创建标准变体（参见第 9 节）

基本信息

作者: ui5
仓库: ui5/plugins-coding-agents
分类: 开发
安装次数: 144
GitHub Stars: 44

报告问题

fix-deprecated-controls

关于 fix-deprecated-controls

主要功能

适用场景

MCP 相关

安装

详细介绍

修复已弃用的控件、类、接口和类型

处理的 Linter 规则

适用场景

获取替代项信息

修复策略

1. `new` 表达式中的已弃用类

2. 构造函数中的已弃用属性

3. 元数据中的已弃用接口

4. 元数据中的已弃用类型

5. XML 视图中的已弃用控件

6. XML 视图中的已弃用属性

7. XML 视图中的已弃用聚合

8. sap.m.MessagePage → sap.m.IllustratedMessage

9. sap.ui.comp.variants.VariantManagement → sap.m.VariantManagement

10. 已弃用的 Core 类

实施步骤

修复示例

说明

相关技能

评论

fix-deprecated-controls

关于 fix-deprecated-controls

主要功能

适用场景

MCP 相关

安装

详细介绍

修复已弃用的控件、类、接口和类型

处理的 Linter 规则

适用场景

获取替代项信息

修复策略

1. new 表达式中的已弃用类

2. 构造函数中的已弃用属性

3. 元数据中的已弃用接口

4. 元数据中的已弃用类型

5. XML 视图中的已弃用控件

6. XML 视图中的已弃用属性

7. XML 视图中的已弃用聚合

8. sap.m.MessagePage → sap.m.IllustratedMessage

9. sap.ui.comp.variants.VariantManagement → sap.m.VariantManagement

10. 已弃用的 Core 类

实施步骤

修复示例

说明

相关技能

评论

1. `new` 表达式中的已弃用类