第6章 低代码新手入门系列，西门子Mendix UI页面组件

雍一辰
1,083 阅读10分钟

数据组件

西门子Mendix 页面编辑器的关键组件之一 是 数据组件。这些组件安排运行时和前端之间的连接，在客户端所基于的模型、视图、控制器模式中提供 控制器 部分 。在西门子Mendix中，我们将页面最初可以访问的数据称为Context。上下文涉及由西门子Mendix传递给页面的单个对象。

西门子Mendix在此类别中提供 4组件：

  • Data view

Data view组件允许您通过 1-1 或 1-many 关系访问实体。您的实体中的任何数据都可以使用 Common widgets 和 Input Widgets等类别中的一个组件显示。这是唯一可以显示通过 Context传递给页面的单个对象的组件。它还具有收听其他组件的能力。 

  • Data grid

Data grid组件的数据，最常用于显示对象列表。它支持许多开箱即用的网格功能，并具有用于服务器端排序、搜索和分页等功能的钩子。此组件通常从数据库中获取其数据，但它可以通过关联获取其数据。 

  • Templage grid

Templage grid组件在平铺视图中显示对象列表。例如，模板网格可以显示员工列表及其个人资料图片。使用模板网格提供的控件，您可以浏览、搜索和操作这些对象。与 数据网格 一样，这个组件通常从数据库中获取数据，但也可以使用关联。 

  • List view

List view组件显示对象列表。例如，您可以显示所有员工的列表。每个对象都使用模板显示。该模板是通过将组件放置在列表视图的拖放区中来定义的。这是构建块派上用场的地方，因为它们为构建列表视图中的各个项目提供了很好的基础。与 数据网格 和 模板网格一样， 此组件通常直接访问数据库，但可以使用关联。

image.png

从Overview页面中删除导航菜单

虽然西门子Mendix为您生成概览页面非常棒，但不需要导航菜单，因为您将在整个项目中添加自己的导航。您可以在所有概述页面中使用代码段调用摆脱列。您也应该将布局网格设置为自动填充。

  1. 打开Department_Overview并删除包含 UserManager.Entity_Menu 的列。

image.png

  1. 选择具有数据网格的列，然后双击以编辑列设置。将桌面宽度设置为自动填充，然后单击确定。

  2. 对Employee_Overview和Shift_Overview页面重复此操作。

  3. 从您的应用浏览器中删除Entity_Menu片段。

image.png

调整员工页面

由于您现在有一个 Employee_NewEdit 页面，并且您希望能够为员工创建和编辑帐户，因此您必须更新 Employee_NewEdit 页面的布局。这里的关键是以巧妙的方式使用组件。

image.png 您的页面应该看起来像屏幕截图。

  1. 在Toolbox中，找到一个Layout grid，并将其拖到 Employee id 组件上方的 Data 网格中。
  2. 从出现的布局选项菜单中选择6,6。

image.png

  1. 将所有输入组件拖到刚刚添加的布局网格的左栏中并删除帐户组件；-我们不需要它。
  2. 将您的HasAccount复选框拖到右栏中。
  3. 在HasAccount复选框下方添加一个数据视图。 双击它并将实体（路径） 设置为关联Employee_Account上的Account实体

image.png

  1. 在Visibility部分中，对于Visible，单击屏幕右侧的Edit...按钮。
  2. 将显示数据视图选项设置为基于属性值并选择属性HasAccount。当值为true时显示

image.png

  1. 单击确定。
  2. 再次单击确定。
  3. 说是自动填充Data view

编辑关联账户实体

  1. 将名称 的 标签标题更改  为 用户名

  2. 双击 用户角色 选择组件进行配置：

    • 将数据源更改为 Name 而不是 ModelGUID。 
    • 将Editability 设置 更改 为Default。 

  3.  对于 选择页面 参数，单击 选择...。

    • 在 Select web page 窗口中， 使用 PopupLayout Navigation 布局和 Select With List View 模板创建一个名为 UserRole_Select的新页面。 Mendix 将为您创建这个。
    • 单击 确定。
    • 再次单击 确定 。

  4. 从工具箱中获取一个 Call Microflow 按钮 并将其放在数据视图的底部。 

    • 查找并选择微流 Administration.ShowPasswordForm

image.png

  1. 双击 显示密码表单 按钮并进行配置：

    • 将 Caption更改 为 Change Password。
    • 将 Button 样式设置 为 Warning 。
    • 单击选项卡 外观 并将属性 Align self设置 为 Right。
    • 完成后，单击 确定。

  2. 删除下图中未显示的任何字段。

image.png

设置您的主页

现在您已经有了自己的页面，是时候确保人们可以访问它们了。有几种方法可以实现这一点，而主页是最好的方法之一。这样，夏山医院的人们就可以快速找到他们需要的东西。现在只需添加 4 个按钮链接到部门、员工、技能和计划期的概览页面即可。

  1. 打开Home_Web页面并在底部布局网格中再添加三列

image.png

  1. 从工具箱的 Building blocks选项卡中，添加三个Card Action构建块，一个到您在上一步中创建的每个列。

image.png

  1. 适当地为每张卡片设置标题。

image.png

  1. 选择图标和文本周围的容器，右键单击并选择Edit on-click action。将每个按钮设置为链接到相应的概览页面。

image.png

  1. 最后，更改应用程序的标题。

image.png

导航菜单

西门子Mendix还具有导航菜单等功能。您可以直接从您的项目中编辑它。它位于App Explorer 中的 App 节点下， 名为 Navigation。如果单击它，您将看到一个窗口，其中包含一个名为 Responsive Web的选项卡。这是一个 导航配置文件。当客户端访问 Mendix 应用程序时，运行时确定正在使用的客户端类型，并根据客户端发送的 User-Agent 字符串选择适当的导航配置文件。

image.png

响应配置文件是默认配置，  您无法将其删除。如果没有合适的配置文件可用，  西门子Mendix 将使用此配置文件。选择 脱机 配置文件将允许您利用 Power Web Apps (PWA) 功能。 移动原生 将允许您开发将在 Android 或 iOS 上运行原生的页面。

Mendix 提供了七种 导航配置文件 ：

  • Responsive web
  • Responsive web offline
  • Tablet web
  • Tablet web offline
  • Phone web
  • Phone web offline
  • Native mobile (tablet & phone)

配置文件设置应用程序标题并确定将哪个页面用作主页。此外，它还提供创建导航菜单的选项。您可以选择通过单击新建项来创建菜单项，并通过单击 新建子项来创建 子菜单 项。每个项目都可以有一个标题、一个图标和一个动作。让我们将您的新知识付诸实践。

创建导航菜单

默认情况下，每个 导航配置文件 都有一个指向主页的链接。您想为概览页面添加项目。 

  1. 单击 “菜单”部分 中的“新建”项目并为其指定标题“ 部门”
  2. 作为图标，  通过单击  窗口右侧的选择...来选择 公文包
  3. 将 On click 操作设置为 Show a page。 
  4. 选择 Department_Overview 页面。 
  5. 重复此过程： 
  • 具有图标用户的 员工
  • 带图标日历的 班次
  1. 添加带有标题Logout 和图标 log out的最后一项 。将 On click 操作设置为 Sign out。

  您的 响应式 Web 导航配置文件现在应如下图所示：

image.png

个性化您的页面

西门子Mendix提供了很多开箱即用的主题，但即使是最好的主题也无法满足所有人的需求。因此，  西门子Mendix 允许您自定义该主题。您可以直接在项目的主题文件夹中使用 Sass 来执行此操作。除此之外，还有一个 github 存储库可以作为您自己主题的基础。这可以在 mendix/ux-theming 找到。 

最后但同样重要的是，您可以创建自己的主题模块。如果您在App Explorer中打开您的 App节点并双击 Settings ，您将在 App Settings 窗口中看到一个 Theme 选项卡  。无论选择哪个模块作为 UI 资源包 ，都将用于所有主题化。不过要小心，这也包括您所有的页面模板和布局。最好以 Atlas_Core 模块为基础。完成后，您可以导出此模块并将其提供给您的同事、您的客户或将其上传到市场，以便其他人可以从您的主题技能中受益。因为您将该模块设置为您的 UI 资源包 , Mendix 知道使用该模块导出包含所有 Sass 和 CSS 的主题文件夹。

image.png

添加自定义样式

开箱即用的样式通常绰绰有余。但是，有时您想稍微更改样式。也许您的最终客户想要完全不同的外观，或者某些默认样式对您不起作用。在这种特殊情况下，应用程序中的弹出窗口相对较小。这对大多数人来说不是什么大问题，但是由于您对Employee_NewEdit页面的布局进行了相当大的更改，因此弹出页面的宽度已经成为一个问题。

对于渐进式 Web 应用程序，例如我们的应用程序，自定义样式应放置在我们的应用程序文件目录中的theme/web文件夹中。 main.scss文件是西门子Mendix使用的中心文件，用于在我们的应用程序中包含我们的自定义样式 。 虽然您可以将所需的样式直接放在此文件中，但最好将它们放在主题/web中自己的文件中，并在main.scss文件中引用它。如果你想定制一个原生移动应用程序，同样的原则也适用，除了你应该把你的样式放在theme/native文件夹中，并在 main.js文件中引用它。

在您的自定义样式中，您经常会重复使用主题设置（即颜色、间距等）。您可以在custom-variables.scss（用于渐进式 Web 应用程序）或custom-variables.js（用于本机应用程序）中创建可重用变量，并在您的自定义样式文件中使用它们。强烈建议这样做以提供一致的用户体验。

所以让我们开始改变这个应用程序的样式。

  1. 使用您喜欢的代码编辑器（即 Visual Studio Code、Sublime Text、Notepad++ 等），转到主题 → Web并打开custom-variables.scss。
  2. 将以下代码添加到文件中：
    $hospital-window-width: 1200px;
  3. 在您的代码编辑器中，在名为hospital-window.scss的同一文件夹中创建一个新的 *.scss 文件。
  4. 将以下内容添加到您的新文件中：
.mx-window {
    width: $hospital-window-width;
  }
  1. 在您的代码编辑器中，打开同一文件夹中的main.scss并将以下代码添加到 @import “custom-variables” 下方的文件中；以确保您的弹出页面足够大以容纳您添加的新字段。
    @import "hospital-window";

好了，到这里我们基本完成了我们页面编辑器相关模块的学习了。 下一章，我们将会来学习，在Mendix里面，通过图形化的逻辑算子组件，完成业务逻辑的构建。

低代码新手入门系列，快速导航

avatar
文章
阅读
粉丝