UI5
袋鼠云数栈UI5.0设计实战｜B端表单这样设计，不仅美观还提效
我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：大喜 相关文章：袋鼠云出品！数栈UI 5.0全新体验升级，设计背后的故事 前言 表单是B端产品中最常见的组件之一，主要⽤于数据收集、校验和提交。比如登陆流程的 ......
数栈UI5.0设计实战｜B端表单这样设计，不仅美观还提效
表单是B端产品中最常见的组件之一，主要⽤于数据收集、校验和提交。比如登陆流程的账号密码填写，注册流程的邮箱、用户名等信息填写，都是表单应用的常见案例，在数栈产品中也是出现频率⾮常⾼的组件。 尽管表单应用十分普遍，但在我们对旧版数栈产品进行调研时，发现许多产品同学都反馈了关于表单的问题。所以在实际设计 ......
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
UI5 是一款企业级 Web 前端应用的开发框架。笔者不时会收到社区朋友发起的咨询，问我如果 UI5 应用开发好之后，运行时出现性能问题，应该怎么办。 在我们的生活中，病人向医生求助，医生会开具各种检查和化验单，病人检查完后，医生根据报告上的各种参数，进行病情诊断和开药。刑警在案发现场，通过地上的脚 ......
SAP Fiori Tools 的 Application Information 视图里的 Min UI5 Version
如下图所示： 这个值位于 manifest.json 文件中的 sap.ui5.dependencies.minUI5Version 字段。 manifest.json 是 SAP UI5 应用程序的一个重要文件，它包含了应用程序的所有元数据。这个文件是以 JSON 格式编写的，所以它是人类可读的， ......
SAP UI5 开发项目 package.json 文件里的 @sap/ux-specification 依赖
如下图所示： 在SAP UI5中，@sap/ux-specification 是一个由SAP提供的库，旨在帮助开发人员实现符合SAP Fiori设计准则的用户界面（UI）。该库提供了一系列工具、资源和指南，以确保UI5应用程序的设计和实现符合SAP Fiori标准，从而提供一致、易用且美观的用户体验 ......
本地 SAP UI5 应用部署到远端 ABAP 系统，幕后英雄 ABAP_REPOSITORY_SRV
SAP OData Service 是一种基于 HTTP 的数据访问协议，它支持全功能的 CRUD 操作（创建、读取、更新和删除），并且支持查询和导航。OData 协议的主要优势是其基于标准的 HTTP 协议，并且使用标准的 HTTP 动词，如 GET、POST、PUT、DELETE 等进行数据操作 ......
如何理解 SAP UI5 的 sap.ui.define 函数？
我们在 SAP UI5 官网能查到 sap.ui.define 的详细文档： 在一个 JavaScript 文件中，通常和建议的做法是在文件顶部有一个对 sap.ui.define 的调用。当通过其模块 ID 首次请求一个模块时，会根据 ID 和当前配置来确定对应的资源。该资源将被加载并执行，这将反 ......
如何给 SAP UI5 应用设置背景图片试读版
本需求来自笔者的知识星球。 一个朋友询问如何给开发好的 SAP UI5 应用设置一个背景图片。 其实这个需求，按照咱们之前学习的内容，已经可以实现了。 假设下面是我事先准备好的一张背景图片。 我的需求是想把这张图片，平铺在我的 SAP UI5 应用里。做出来的效果如下： 本需求的实现，利用了本教程之 ......
我的心血之作：一套适合 SAP UI5 从业人员从入门到进阶的学习教程，以及教程背后的故事
一转眼 2023 年又要结束了。我从 2007 年开始，以软件开发工程师的角色进入职场，马上也快满 17 年了。 在这快 17 年的软件开发职业生涯里，我也见识并使用了许许多多的开发技术，编程语言，开发框架，平台。IT 界这十多年来涌现出的一些新技术，我也主动或被动地去追逐过。 比如 2015 年时 ......
SAP UI5 控件双向数据绑定后显示数据出问题，可以调试这个方法
在 ClientPropertyBinding 构造函数里调试 _getValue 方法。 在 ClientPropertyBinding 的实现中，_getValue 方法起着关键的作用。这个方法的主要任务是从模型中获取数据，并将其返回，以便在视图中使用。为了理解 _getValue 方法的详细工 ......
通过 SAP UI5 IconTabBar 控件结合 FlexibleColumnLayout 实现多页面 Master-Detail 布局试读版
本文也是来源于网络上一位朋友的咨询，这是这位朋友实际项目中的真实需求。 本文介绍了一个实际项目中开发需求的详细实现过程。通过使用 SAP UI5 IconTabBar 控件，我们可以让逻辑上属于不同业务范畴的界面，通过点击对应的 Icon，以切换的方式，在同一块屏幕区域显示出来。 IconTabBa ......
本地 SAP UI5 开发环境里执行 ui5 serve 命令行后失败，该怎么办
笔者本教程这篇文章是专门讲解使用 Visual Studio Code 搭建 SAP UI5 本地开发环境的详细步骤，至今已有超过 8000 的点击量了。 SAP UI5 本地开发环境的搭建 笔者在 2014 年接触 SAP UI5 开发之前，已经做了 7 年的 ABAP 开发了。在我看来，这两种开 ......
SAP UI5 官网上提供的例子，如何下载到本地运行试读版
上个月的时候，有个朋友问了我这个问题，SAP UI5 官网上的例子，如何下载到本地运行呢？ 本文就来介绍详细步骤。 我们打开 SAP UI5 官方帮助文档，点击 Samples： 然后从左边随便选一个 Samples，比如 Breadcrumbs： 然后在屏幕右侧看到的区域，就是这个例子渲染出来的动 ......
SAP UI5 里 Namespace，Class 和 Enum 的区别
SAP UI5是一种用于构建企业级Web应用程序的前端开发框架，它提供了丰富的UI组件和工具，以便开发者可以轻松创建现代、响应式和高性能的应用程序。在SAP UI5的API文档中，我们可以找到不同类型的树节点，包括Namespace、Class和Enum。 下图的 C 代表 Class，N 代表 N ......
关于 ui5-middleware-fe-mockserver Mock Server 的使用介绍
@sap-ux/ui5-middleware-fe-mockserver 是一个用于 SAP UI5 本地开发的中间件，它的作用是模拟后端服务，以便在没有实际后端服务器的情况下进行前端开发和调试。这个 Mock Server 具有丰富的功能，可以帮助开发人员模拟不同的后端场景，包括模拟数据、模拟 O ......
关于 SAP UI5 框架里的 flpSandbox.html
flpSandbox.html 文件在 SAPUI5 项目中用于本地测试 Fiori 应用程序的开发。 它与 flpSandbox.js 文件结合使用，为 SAP UI5 的 container service 添加配置功能。 flpSandbox.html 的主要作用之一，是借助 UI5 Tool ......
关于 SAP UI5 扩展标准应用的两种方式
SAP UI5 提供了两种方式来让应用开发人员对标准 SAP UI5 应用进行扩展： SAP UI5 Flexibility: 这种方式是扩展 SAP Fiori Elements 应用程序(基于 SAP UI5 1.56 或更高版本）的首选方式。 它使用更好的界面，支持分层(layering)以及 ......
关于 SAP UI5 Page Map 里 Flex Enabled 标志位
我们在本地使用 Visual Studio Code 开发 SAP UI5 应用，通过 Page Map 打开 SAP UI5 应用，能编辑一个叫做 Flex Enabled 的标志位，true 代表启用 UI Adaptation，false 代表禁用 UI Adaptation. Flex En ......
什么是 SAP UI5 的命名空间
在 SAP UI5 开发中，`命名空间`（`namespace`）是一个重要的概念，它用于组织和管理 UI5 应用的资源、模块和库。命名空间提供了一种结构化的方式来命名和引用 UI5 应用的各个部分，以避免命名冲突并使开发更具可维护性。在本文中，我将详细解释什么是 SAP UI5 的命名空间，为什么 ......
什么是 SAP UI5 的 BaseObject
`SAP UI5`是一种用于构建现代Web应用程序的JavaScript框架，它提供了丰富的UI控件、数据绑定和模型驱动的开发模式，用于创建用户友好、功能强大的企业级应用。在SAP UI5框架中，`BaseObject`是一个重要的基类，`Object.js`是其中的一个文件，用于实现`BaseOb ......
关于 SAP UI5 预定义的 CSS Margin class
与 padding 不同，margin 是透明的，`不是`控件可单击区域的一部分，并且它们与相邻边距`折叠在一起`，这意味着它们不会相互添加。 例如，有两个相邻的 32 像素 margin，则结果是仅显示一个 32 像素边距，而不是 64 像素的空间。 SAPUI5 中预定义的所有边距都支持从右到左 ......
什么是 SAP UI5 中的预定义 CSS 响应式边距（Responsive Margins）
SAP UI5是SAP公司的开源前端开发框架，用于构建现代、移动优先的Web应用程序。预定义的CSS响应式边距是UI5框架中的一个重要特性，它可以帮助开发人员轻松管理和控制应用程序中不同元素之间的间距，以适应不同的屏幕大小和设备类型。本文将详细介绍预定义的CSS响应式边距的概念、用途以及通过示例演示 ......
关于 SAP UI5 框架代码中的 Metadata.createClass
这段代码定义了一个名为 `Metadata.createClass` 的函数，用于在 SAPUI5 框架中创建类并添加元数据信息。我将逐行解释这段代码的含义和作用。 ```javascript /** * @since 1.3.1 * @private */ Metadata.createClass ......
SAP UI5 MVC 框架实现中的 JSONPropertyBinding
SAP UI5 应用里无论 XML 视图还是通过 JavaScript 视图的代码进行 JSON model 的数据绑定，底层都会自动生成一个 `JSONPropertyBinding` 的实例。 的方式给 SAP Fiori ......
SAP UI5 manifest.json 里定义的 sap.ui.viewExtensions 区域的解析代码位置
笔者这篇教程介绍了如何在 SAP Fiori Elements 应用的 manifest.json 里注册 Extension fragment，从而给 List Report 应用的 Table 区域新增`自定义列`： - [10. 如何通过扩展(Extension)的方式给 SAP Fiori ......
SAP UI5 XML 视图里解析 Extension Point 的触发点
解析到 XML 视图里的 `ExtensionPoint` 定义后，开始实例化过程：  JavaScript 编码里单引号和双引号的用法澄清
笔者这篇教程文末，有朋友提问： * [SAP UI5 应用开发教程之十 - 什么是 SAP UI5 应用的描述符文件 manifest.json](https://jerry.blog.csdn.net/article/details/121049973) 问题1：在 index.html 文件中 ......
什么是 SAP UI5 XML 视图里的 customData
下面是 XML 视图里的代码： ```xml xfld.Rating}" /> xfld.BreakoutColumn}" /> ``` 在 SAP UI5 中，`customData` 是一个非常有用的功能，它允许我们在特定的 UI 控件上附加额外的数据。这些数据可以是任何我们需要的数据，例如一些 ......