Mendix UI方法论和定制开发实践

Mendix

于 2021-06-25 16:06:29 发布

阅读量1.3k

点赞数 1

文章标签： Mendix 低代码低代码开发原子设计 ui设计

本文链接：https://blog.csdn.net/Mendix/article/details/118221829

版权

本文目录

什么是原子设计（Atomic Design）

随着网页设计的持续发展，我们逐渐认识到开发设计系统（design system）的重要性。它们最早就是为了让网页设计师更容易理解网页构成而设，后来延伸到UI设计当中。于是出现了Atomic Design、主流的Material Design、已经处于被挑战地位的Flat/Metro Design，还有已经被放弃的拟物化设计，这几种是目前UI设计的常见方式。

设计系统方法论

什么是原子设计（Atomic Design）

原子设计（Atomic Design）是一种网页设计方法，出自于Brad Frost在2013年时发表的文章。这种方法现在仍处于成长期。Brad Frost认为按照传统方式花几个月的时间去写一本书然后出版实在太老土，他想要写一本会成长会呼吸的不完整的书，于是他直接在自己的网站上连载，并且不断的修订。有关其方法论，可以在[1][2]中获得更多信息，国内也有网站开设专栏进行翻译和解读[3]。

这种方法由五个不同的阶段构成，以更慎重和更具层次的方式创建界面设计系统。 原子设计的五个阶段分别是：

原子Atomic，为网页构成的基本元素，HTML的tags，可以是标签、输入，或是一个按钮，也可以是抽象的概念，例如字体、色调等；
分子Molecules，由元素构成的简单UI物件；
有机体Organisms，相对分子而言，较为复杂的构成物，由原子及分子所组成；
模板Templates，基础的页面架构，将以上元素进行排版；
页面Pages，将实际内容（图片、文章等）套在特定模板中。

原子设计的五个阶段

原子设计是由原子、分子、有机体、模板和页面共同协作以创造出更有效的用户界面系统的设计方法。Mendix的Atlas UI设计方法论，和原子设计有着较为相似的设计思路。

Mendix前端和原子设计

Mendix 的前端（Atlas UI）的设计遵循三个原则：简洁性、和谐性、灵活性，前端工程师可以参考Atlas UI完整的设计系统（Design System）[4]，主要包括Design Properties、widgets、Building Blocks、Page Templates、Navigation Layouts，元素由小及大，实现了原子设计从原子到页面的各个阶段。模块化的UI设计方法论，让Mendix低代码平台不仅实现了业务模型（Model）和业务逻辑（Microflow/Nanoflow）的封装，而且还确保了UI设计的灵活搭建。

零代码构建企业风格的布局（Layout）

借助Atlas设计系统，用户可以在Mendix中通过拖拉拽，零代码构建符合企业风格的用户界面。

在Mendix Studio Pro中，用户可以快速创建空白布局文件。

创建Layout文件

通过Mendix Studio Pro，用户可以创建支持Web、原生应用下的各种Layout，解决开发者对应用兼容性的顾虑。

下一步构建Layout的各种元素，采用上下-左右的结构，在Scroll Container中划分出top region、left region；为了完成统一配色，top region 采用预制的region-top样式，sidebar采用region-sidebar样式，top region中填入Logo图标和应用名称，如下图所示：

用户设计的Layout，可以在项目范围内使用，通过页面的General标签，下拉可以看到创建的新Layout（不同的Layout，受到Platform和Layout Type参数的限制）。

采用新模板的Landing Page

在设计Layout的时候，我们用到了一些Atlas预制的样式Class，如region-topbar，region-sidebar等，用户可以使用这些样式，进行更高级的零代码定制样式。具体参考[5]，只要简单学习Atlas的设计系统，用户就可以轻松做出漂美观的页面。

高级定制开发Mendix应用前端UI

Atlas UI为应用程序的样式设计提供了一种模块化且灵活的方法。可以在应用程序级别上进行不同的样式定制，以实现特定的应用程序样式，并且可以方便地将模块导入导出，将样式放入不同项目以供重复使用。

每个Mendix应用创建后默认包含Atlas UI的模块，模块对应到项目目录中的theme目录。项目编译运行后，Mendix会自动在项目deployment目录中生成应用程序所依赖的css和js文件。

样式加载过程

Studio和Studio Pro会按一定顺序组合不同的.scss文件，并将Scss编译为浏览器中使用的CSS。编译后的输出和必要的资源保存在名为theme-cache的文件夹中。.scss文件的编译按以下顺序进行[6]：

首先加载开发者从Marketplace中下载模块的themesource文件夹中的所有main.css文件，按模块名称的首字母顺序排列加载；
用户模块的themesource文件夹中的所有main.css文件，均按Studio Pro中的顺序排序；
主题文件夹（theme/web/custom-variables.scss)）中的自定义变量；
主题文件夹(theme/web/main.scss)中的main.scss文件。

对于Native移动应用程序，React Native框架使用“捆绑程序（Bundler）”将所有JavaScript文件组合为一个文件，该“捆绑程序”负责创建用于运行该应用程序的JavaScript bundle。不同模块的js样式文件，按以下顺序由捆绑程序处理：

Marketplace模块的themesource文件夹中的所有main.js文件（按模块名称的字母顺序）。
用户模块的themesource文件夹中的所有main.js文件，均按Studio Pro中的顺序排序。
主题文件夹（theme）中的main.js (theme/native/main.js)
主题文件夹下原生的style.js（非必须，theme/styles.js）

在专业的前端开发人员的技术加持下，企业可以使用从0到1的构建方式[7]，创建css和js。后续专业定制UI的博文会介绍到相关内容。即使是非专业前端开发工程师，在Mendix的支持下，也可以使用Calypso辅助UI设计。

Calypso和Chrome定制开发UI

Calypso是Mendix Atlas UI提供的UI设计工具，帮助用户在运行时所见即所得，实现UI框架中样式定制的工作需求。开发人员可以将Calypso看作是加载步骤过程的实现，把源码中的样式文件编译成运行时需要的css资源。

目前Calypso 1.0.0和Mendix 8的应用仍可以稳定工作，Mendix 9由于采用了Atlas 3，在兼容性上会出现一点问题。用户在Mendix 8创建应用并使用Calypso进行设计，可以获得更好的体验。

Calypso的安装和使用，可以参考官方文档[7]。下文采用Calypso和现代浏览器，如配合使用Chrome，尝试让开发者获得更好的调试和定制开发体验，屏蔽不必要的主题文件夹和scss学习曲线，直接上手修改定制UI。

参照文档[8]启动Mendix应用，并在Calypso选择相应的应用，对项目路径进行监视。

Calypso启动监控Mendix项目

启动后，浏览器自动打开端口为1111的本地应用（代理Mendix应用8080端口）。打开浏览器的调试模式，通过浏览器加载项目的主题样式文件夹style/，选择文件夹后，浏览器会弹出提示，选择“允许”后浏览器将加载文件系统中的文件夹。

加载项目主题目录的文件系统

此时，开发人员可以通过传统的开发模式，采用常规的样式定位后，对样式进行定制化修改。当浏览器修改css/scss文件并保存样式后，Calypso将能捕捉文件的修改，动态编译更新应用程序的main.css文件，通过重启Mendix应用，或者清除浏览器缓存重新加载应用，可以看到修改后的效果。

获取代码变更事件

实时编译同步main.css

本文对Mendix的UI设计和定制开发做了基础的讲解，更详细的使用和开发步骤，用户可以移步到Mendix官方文档，对Mendix的Front End进行进一步了解[9]。Mendix 9和Atlas UI 3采用新的机制和文档结构，简化了使用Calypso进行编译的依赖，Mendix Pro可以获取文件的修改并自动重新编译发布。目前Mendix9 GA已发布，欢迎用户前往获取并进行体验[10]，有任何疑问和建议欢迎留言讨论。