SAP UI5 被弃用的库 sap.ui.ux3

简介: SAP UI5 被弃用的库 sap.ui.ux3

自版本 1.38 起,sap.ui.ux3 库已弃用。


该库包含更复杂的 UI 控件,这些控件基于 sap.ui.commons 以及 UX3 设计方法。 sap.m 库 - sap.ui.commons 的后继者 - 实现 SAP 新的 SAP Fiori 设计,它取代了 UX3。 因此,sap.ui.ux3 库也已弃用。 一些UX3概念在SAP Fiori中得到了体现,一些则被放弃,如下表所示:


下表左边是 sap.ui.ux3 里的概念,右边则是这些概念的替代品。


sap.ui.ux3 是 SAP 的 UI5 框架中的一个库,用于构建具有丰富用户体验的 Web 应用。


sap.ui.ux3 库中提供了一系列丰富的用户界面组件,例如 Shell,NavigationBar,ThingInspector 等。这些组件可以帮助开发人员快速构建出复杂的 Web 应用。然而,需要注意的是,SAP.ui.ux3 库是 SAP UI5 框架的一部分,但并不是最新的,也并非最常用的部分。随着 SAP UI5 框架的发展,更多的开发者和项目转向了使用 sap.m 库,它提供了更多的现代化的,响应式的 UI 组件。


关于 SAP.ui.ux3 的使用例子,我们可以拿 Shell 组件来说。Shell 是一个全屏的应用程序容器,它由一个顶部工具栏、一个导航工具栏和一个主内容区域组成。使用 SAP.ui.ux3.Shell 组件,我们可以很方便地构建出一个具有导航和工具栏的 Web 应用。例如:

new sap.ui.ux3.Shell("myShell", {
    appTitle: "My App",
    showLogoutButton: true,
    logout: function () { alert("Logout clicked!"); },
    worksetItems: [
        new sap.ui.ux3.NavigationItem("wi_home", {key: "wi_1", text: "Home"}),
        new sap.ui.ux3.NavigationItem("wi_page1", {key: "wi_2", text: "Page 1"}),
        new sap.ui.ux3.NavigationItem("wi_page2", {key: "wi_3", text: "Page 2"})
    ],
    content: new sap.ui.commons.Label({text: "Welcome to my App!"}),
    worksetItemSelected: function(oEvent) {
        var sId = oEvent.getParameter("id");
        var oShell = oEvent.oSource;
        switch (sId) {
            case "wi_home":
                oShell.setContent(new sap.ui.commons.Label({text: "Welcome to my App!"}));
                break;
            case "wi_page1":
                oShell.setContent(new sap.ui.commons.Label({text: "This is Page 1"}));
                break;
            case "wi_page2":
                oShell.setContent(new sap.ui.commons.Label({text: "This is Page 2"}));
                break;
        }
    }
}).placeAt("content");

在上面的例子中,我们首先创建了一个 Shell 组件,并配置了它的标题,是否显示注销按钮,以及点击注销按钮时的行为。接着,我们添加了三个 NavigationItem 到 Shell 的 worksetItems 中,这些 NavigationItem 会在 Shell 的导航工具栏上以按钮的形式显示。最后,我们设置了 Shell 的内容,以及当选择不同的工作集项目时,Shell 内容的变化。


相关文章
|
6月前
|
JavaScript 前端开发 小程序
Vue 3的高颜值UI组件库
Vue 3的高颜值UI组件库
232 1
|
6月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
368 0
|
6月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
18天前
|
Linux C# Android开发
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
|
2月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
|
6月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
3月前
|
API Android开发
Android项目架构设计问题之选择和使用合适的UI库如何解决
Android项目架构设计问题之选择和使用合适的UI库如何解决
43 0
|
3月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
|
3月前
|
数据可视化 数据挖掘 持续交付
Axure Web端元件库:从Quick UI到500+组件的飞跃
在快速变化的数字世界中,产品设计不仅仅是功能的堆砌,更是用户体验的精心雕琢。原型设计作为产品开发过程中的关键环节,其重要性不言而喻。Axure,作为业界领先的原型设计工具,凭借其强大的交互设计和丰富的功能,赢得了全球设计师和开发者的信赖。而Axure Web端元件库,则是这一平台上的一颗璀璨明珠,它以超过500个精心设计的组件为基础,为设计师们打开了一扇通往高效、高质量原型设计的大门。
122 0
|
4月前
|
前端开发 API
前端框架与库 - Material-UI组件库
【7月更文挑战第20天】Material-UI 是一个基于 React 的 UI 组件库,它遵循 Google 的 Material Design 设计规范,提供了丰富的预构建组件,极大地简化了前端开发过程。本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题,并附带代码示例,帮助你更好地掌握 Material-UI 的使用技巧。
127 0