介绍
是时候为我们的应用添加一些交互了。在西门子Mendix中，我们使用页面编辑器来实现这一点。您想为 Summerhill Hospital 的人员创建页面以管理他们的用户和部门。他们应该能够从 HR REST 服务导入新用户、设置和重置密码，以及为外部人员创建用户帐户。数字创新团队要求使用一个页面来管理所有这些方面。他们对特定布局没有强烈的偏好，因此您将使用默认的西门子Mendix页面来启动它们。一旦他们看到第一个版本，您就可以与他们讨论应用程序的用户体验。Mendix 客户端遵循 模型、视图、控制器( MVC ) 模式。领域 模型 它的本地表示是 模型 部分。
西门子Mendix UI模板引擎
MVC的View部分由西门子Mendix模板引擎处理。西门子Mendix 提供了一个基于 Web 的客户端，它基于 JavaScript、CSS 和 HTML5 等现代 Web 标准构建。客户端实现使用 React 和 SCSS 等技术。西门子Mendix 在 Studio Pro 中提供了一个页面构建器，允许您使用这些技术的可视化抽象。这使得快速创建页面变得容易。如果默认页面不能满足您的目的，您始终可以使用相同的编辑器创建自己的布局。然后，您可以在其他应用程序中重用这些布局。
您可以在下方看到 Studio Pro 中显示的页面。此示例中的块是布局网格。这些组件可用于将页面划分为列。这些列中的每一个都可以设置为三个值之一，Auto-Fill、Auto-Fit content或Manual。在Manual的情况下，您最多可以使用 12 列。客户端使用基于 Twitter Bootstrap 的 CSS 来显示页面。这有利于使您的页面响应。
西门子Mendix 在后端为您的页面生成一个 XML文件。页面以布局开始，在本例中为 Atlas_Default 布局。此布局接受一个参数。这个参数包含我们在页面编辑器中看到的页面的 HTML 表示。这是由 HTML 元素组成的。这些元素既可以用作普通的 HTML 元素，也可以用作组件的占位符。模板引擎将在生成页面时将这些占位符替换为适当的 HTML。
一个页面被存储为一个 XML文件，其中包含 HTML 和一个可能的布局文档的链接。将从页面级别开始对文件进行分层。arguments 元素中的 HTML 内容将被传递到 layouts 元素中指定的文件。布局将有一个或多个占位符来接收这些参数。客户端将解析这些文件并渲染一个可以发送到浏览器的 DOM 树。
布局
布局组件本身也是 XML 文件，它们包含 HTML 元素。客户端通过下载适当的 XML 文件来构建页面。该文件由模板引擎解析。任何其他布局文件都会下载并合并到页面中。重复此过程，直到下载所有布局并且最终页面在浏览器中可见。
XML文件具有页面的根元素。该元素可以有多个布局元素。这些布局元素对应于项目中的布局文档。每个布局都有占位符，可以用参数元素中的元素填充。这些元素包含您在 Studio Pro 中创建的页面。除此之外，模板元素还包含一个模板列表，您可以使用这些模板生成具有动态内容的页面。
该页面引用了一个布局，西门子Mendix 客户端将使用该布局来构建最终的 DOM 树。通过单击编辑 → 查找... 并输入 Atlas_Default ，可以在页面编辑器中看到此布局文件 。如果单击搜索结果，您将看到以下图像。
这个布局也有一个 XML文件，如下所示。此布局和为您的页面创建的布局文件用于更新 DOM。
快速生成页面
为了让您作为开发人员更轻松，西门子Mendix 为您提供了一种为您的实体生成页面的简单方法。为了给 Summerhill Hospital 的用户一个基本的用户界面，我们将使用这个功能。生成页面后，我们可以进行更改以确保布局完全符合我们的要求。
- 打开 域模型 页面，右键单击其中一个实体并选择 生成概览页面...
- 在“ 生成页面”窗口中，选择所有实体。
- 确保 内容布局 设置为 Atlas_Default。
- 确保将 弹出布局 设置为 PopupLayout。
- 单击 确定 开始生成页面。
您将看到一个名为OverviewPages的新文件夹添加到应用程序资源 管理器中。此文件夹包含 7 个元素：三个Overview 页面、三个 NewEdit 页面和一个 Entity_Menu 片段。该片段代表一个可重用的用户界面。如果您打开任何 Overview 页面，您将看到一个名为 Snippet call的小部件。这允许您将 Snippet 拉入您的页面，因此您只需要创建一次 UI。
页面的命名约定
您可能已经注意到页面名称中的一种模式。那是因为我们也有这些命名约定。下表概述了这些命名约定。
页面编辑器
既然您知道页面是如何在Sudio Pro构建的，那么让我们看看如何通过使用页面编辑器来使用模板引擎的强大功能。该组件允许您使用小部件构建页面。默认情况下，页面编辑器带有许多小部件，您可以从 Marketplace 添加小部件。如果您找不到您正在寻找的小部件，您总是有机会编写自己的小部件并将其添加到您的项目中。
布局网格
您可以在下方看到在 Studio Pro 中显示的页面。此示例中的块是Layout Grids。布局网格是一个为页面提供结构的小部件。这些组件可用于将页面划分为各种大小的列。客户端使用基于 Twitter Bootstrap 的 CSS 来显示页面。这有利于使您的页面响应。 布局网格包含一行或多行，每行包含一列或多列。行数和列数没有限制。行将垂直显示，每行将占用与行中最大列一样多的垂直空间。列水平显示，每列可以占用与其内容需要一样多的水平空间（自动调整内容) 或者它将获得剩余的一部分可用空间 ( Auto-Fill )。
除此之外，还有第三种模式，您可以手动指定一列获得多少空间。这是手动设置。使用此设置，您最多可以创建 12 列。必须为每列赋予 1 到 12 之间的权重，以指示该列将接收多少水平空间。例如，权重 6 等于水平空间的 50%。一行的总权重不能超过 12，但总权重可以小于 12。这会将您的内容拉到右侧。
笔记：
- 布局决定了它是什么类型的页面（特定于设备、响应式或弹出式）以及菜单的位置。
- 布局网格是用于构建页面结构或布局的小部件。页面内容是否分栏？如果是这样，这些列如何在每种设备类型上显示？
让我们花点时间来试验一下页面编辑器。在您的主页 Home_Web 上，将带有图像构建块的 Card Action 拖出工具箱，并将其放在页面主体的某个位置。
您可以看到这个构建块由三个小部件组成：标题、图像和围绕它们的容器。如果您检查 Card Action 中任何元素的属性，您会发现有许多选项可以让您使按钮独一无二。更重要的功能之一是On-click设置，它允许您确定小部件在单击时将执行的操作。有许多默认行为，以及以微流或纳流形式执行自定义逻辑的选项。
要在不部署应用程序的情况下查看主页上的外观，请单击编辑器右上角的Design mode。 这以所见即所得模式显示页面！卡片操作将显示为一个大而有吸引力的按钮。
Structure mode是 Studio Pro 中的默认编辑模式，因为它清楚地显示了页面的容器结构。您可能会注意到在设计模式下，编辑器顶部有三个特定于设备的布局选项。 这些允许您查看应用程序，就像它在不同屏幕尺寸的设备上显示的一样，还可以更改您的页面，以便它们在每个设备上的显示都不同（如果您愿意）。
完成实验后，删除 Card Action 并返回 Structure 模式，以便我们了解如何在页面中显示数据。
上图是更复杂的构建块的另一个示例，这次是我们尚未讨论的小部件类型：数据上下文小部件。这种类型的小部件将允许您构建动态数据所需的布局，从而大大减少 UI 的开发时间。在第六章中，我们将深入探讨这个小部件的细节。
