小部件——快速应用程序开发中终端用户体验的基石

跳到主要内容

小部件:UI 构建块

在上一篇文章中,我介绍了领域模型的 3 个组件以及如何构建应用程序的基础。现在我将重点介绍用户界面的构建块。用户界面由用户在其中导航的页面组成。应用程序页面是 使用 CSS 样式 并使用基于 JavaScript 构建的小部件进行建模。

我们 App Store 中的大多数小部件(例如数据网格、输入文本和下拉菜单)都是现成的。在我的第一篇文章中,我重点介绍了一些我最喜欢的小部件。今天,我们将深入研究有助于提供出色用户界面的主要小部件,并展示使用它们进行构建是多么容易。

我将在本文中使用的示例取自我们的 App Store 员工目录应用程序.

数据视图和数据网格

数据视图和数据网格是 Mendix 开发人员的日常工作。它们是向最终用户显示动态数据的基础。数据视图显示数据库中的单个对象,而数据网格显示数据库中的对象列表。

考虑您可能需要的任何概览页面。创建概览页面的最简单方法是在页面中添加数据网格并选择要显示的实体。从那里,我总是自动填充并自动生成其余页面。创建主页后,我仅显示与用户相关的数据,并通过添加容器、组框或选项卡来修复界面。

作为一个 Mendix 开发人员,如果您转到 Desktop_Employee_Directory 页面,您可以看到 groupbox 和 dataview 以及监听网格的使用。我建议您尝试使用所有工具和小部件!

图1-数据视图

图 1:带有 GroupBox 和数据视图的页面示例

图2-UI

图 2:最终用户看到的内容示例

输入

输入小部件显示实体内的属性。您可以根据数据类型拥有不同的输入字段。在下面的示例中,有三种类型的输入小部件。

  1. 文本输入小部件用于字符串和其他字母数字数据类型。
  2. 日期数据类型显示员工记录的创建日期。相同的日期输入小部件还用于显示出生日期。
  3. 单选按钮列表用于显示员工的性别。我们也可以使用下拉输入小部件,但 App Store 中的单选按钮列表提供了更具吸引力的用户界面。

图 3-InputWidget

图 3:输入小部件示例 - 显示 Desktop_EmployeeSnippet

图4-UI

图 4:最终用户将看到的内容示例

片段

片段是 Mendix 5+ 也是我最喜欢的工具之一。当您想要重复使用页面或布局组件时,片段小部件非常有用。

在员工目录应用程序中,员工信息是在两个不同页面上使用的片段(如下所示)。

图5-结果

图 5:在员工详细信息中以及创建新员工时调用员工信息的次数

您无需在多个页面上生成相同的信息,只需构建一次代码片段,然后根据需要多次调用即可!通过使用代码片段,您只需在一个位置更改数据视图或数据网格信息,这样效率更高。此外,页面加载速度更快!

我最近在一个项目中使用了代码片段,发现它们非常有用。有关如何使用代码片段的更多信息,请阅读 Free Introduction 很有帮助的文章!查看 员工目录应用程序 以及我们的其他示例应用程序 App Store.

Mendix 开发人员看到用户看到的内容

在构建用户界面时,小部件是必不可少的。它们使 UI 开发变得更容易,因为它们很直观。作为 Mendix 作为开发人员,您看到的或多或少与用户看到的一样。而 Mendix App Store 拥有大量预先构建的小部件和组件,我们始终鼓励社区帮助贡献更多想法。

选择你的语言