引人注目 Mendix UI框架

埃里克·赫德玛
2015 年 7 月 30 日
分钟阅读

此 Mendix UI 框架是我们最近发布的 Mendix DX 版本（3 月 XNUMX 日上市）^rd）。这个新框架提供了一套全面的UI模式、主题、导航布局和页面模板，使开发人员能够更轻松地创建引人入胜、响应迅速的应用程序。

有趣的是，UI 框架最初是我们研发日的一个项目。 Mendix，我们会定期计划在这些天里研究任何您认为值得探索或贡献给平台的创新想法。在一天结束时，我们会展示概念或原型，并将得票最多的候选方案产品化。好吧，这个想法受到了热烈的欢迎。

与我们的客户和合作伙伴一样，我们希望能够轻松维护不断增长的 Mendix 应用程序。如果你不知道，我们在内部构建了很多 Mendix，包括开发中心、云门户、应用商店和众多内部应用程序。

有了 UI 框架，我们现在可以更灵活地在多个层面上维护这些应用程序所需的外观和感觉。只需更新一个库，我们就可以一次性更新所有应用程序，也可以选择单个应用程序。此外，该框架使每个应用程序都可以轻松拥有自己的自定义样式。如果我们的营销团队想要重塑应用程序的品牌 Mendix 例如，在 App Store 中，我们可以创建一个自定义文件夹，其中包含一组针对该特定应用程序的自定义变量。

此 Mendix UI框架

我们创建了 Mendix UI 框架可让没有深厚技术和设计技能的开发人员构建引人入胜、响应迅速的多设备应用程序。该框架的工作原理是允许您在多个级别上定义应用程序的外观和感觉，包括主题、导航布局、页面模板、设计元素和强大的 CSS/Sass 框架。让我们更详细地探讨每一个。

主题

当你创建新的应用程序时，你可以选择各种主题，这些主题都基于 Mendix UI 框架。正如您在下面的展示中看到的，主题可以看起来相同，但也可以完全不同。无需大量工作，您就可以快速将应用程序打造成所需的外观和感觉。当然，每个主题都是响应式的，并且适用于多设备。

为了快速在整个应用中创建一致的导航，我们引入了导航布局。布局控制您在应用中的导航方式，包括顶栏或侧栏主菜单和子菜单。主题附带一组适用于每种设备类型（手机、平板电脑或台式机）的导航布局。

页面模板

我们在内部项目中发现，设计正确的页面布局和交互可能需要花费大量时间。老实说，如果没有 UI 专家的参与，结果通常不会太好。我可以轻松将 UX 团队的规模扩大一倍，但仍然面临满足 UI 专家需求的挑战。

因此，我们研究了 UI 模式，并决定通过提供页面模板将其产品化。这些是针对大量页面类型的预定义模板，例如概览、主从、仪表板、位置和向导等。所有模板都响应迅速，并针对每种类型的设备进行了优化。

设计元素

最后但同样重要的是， Mendix UI 框架带有一套完整的设计元素。通过使用设计元素，标准 Mendix 可以根据您对样式、颜色、大小和对齐方式的偏好快速调整小部件。对于每个设计元素，我们创建了大量的变体，以帮助您在整个应用程序中创建不同的外观和感觉，而无需手动设置每个组件的样式。例如，设计元素“选项卡”可以以七种不同的方式使用，只需使用 Mendix UI 框架。

框架背后的技术

让我们看看幕后情况，看看我们如何构建框架，以及 Mendix 社区成员可以使用它，甚至扩展它。

该框架由 CSS 和预处理器组成萨斯（可选使用，但强烈推荐）。您可能熟悉 CSS，并且知道更改应用程序的外观和感觉相当容易。CSS 本身很有趣，但样式表越来越大、越来越复杂、越来越难维护。这就是 Sass 这样的预处理器可以提供帮助的地方。Sass 允许您使用 CSS 中不存在的功能，例如变量、内联导入、嵌套等等。使用 Sass，我们可以创建适当的文件夹和文档。一旦您开始摆弄 Sass，它将获取您的预处理 Sass 文件并将其导出为您可以在应用程序中使用的普通 CSS 文件。