Front-End

Mendix 如何支持多通道应用程序?

Mendix 支持使用通用开发工具和单个代码库将 Web 和移动应用程序组合到同一个应用程序模型中。这提高了生产效率,降低了维护成本,还减少了构建 Web 和移动应用程序所需的不同技能。

借助 Mendix,您可以构建响应式用户界面,以自动适应最终用户的设备。Mendix 默认提供一整套布局、页面、构建块和小组件。Mendix 有一个灵活的网格系统,可以很容易嵌套和配置不同的屏幕大小。Mendix 前端基于 Bootstrap,具有完全响应能力,使(新)用户可以轻松构建响应用户界面。

为了获得更高灵活性并优化用户体验,Mendix 支持为每种设备类型(台式机,平板电脑和移动设备)指定用户界面。此外,还可以区分移动网站和可以安装的移动应用程序。此操作可以手机和平板电脑上完成,这意味着您可以从单个模型构建移动网站和原生移动应用程序。您可以使用导航配置文件的概念为应用程序配置频道和相应的用户流。除了这些导航配置文件之外,还可以将逻辑中的设备类型用于其他场景。

这种多通道方法允许开发人员通过使用不同的通道来优化用户体验,同时通过重用 UI 组件和构建响应性界面来快速构建用户界面。

基于 JavaScript 的 Mendix Client 在处理操作和与服务器通信时渲染前端页面。对于 Web 和混合移动应用程序,Mendix 使用 ReactJSDojo 以最佳方式呈现和更新用户界面。原生移动应用程序完全基于 React Native,支持通过使用最佳页面重新加载 (OPR) 仅重新加载页面中已更改的那些元素高度优化客户端。这与所有小组件的异步数据传输以及缓存在设备/浏览器上呈现页面和数据所需的资产相结合。这有助于减少往返服务器的次数,总体上提高应用程序性能。

有关更多信息,请参见架构原则中的 Runtime

如何构建应用程序的前端?

使用 Mendix,您可以从空白或预定义的可配置布局和模板中为应用程序的前端用户界面创建页面,始终如一地为您的环境中的所有应用程序提供出色且响应迅速的用户体验。

Mendix 平台中提供的 Atlas UI 框架有多种布局、模板和构建块,可以轻松地对其实施以设计精美的应用程序。您可以通过标准的 Mendix 资源创造丰富的用户体验,或者创建可以在其他应用程序中重用的自己的公司构件、布局和模板。

Mendix 提供了各种现成 UI 元素(称为小组件),可以用来构建丰富的用户界面。小组件可以直接放置在页面上,也可以组合为构建基块。Mendix 提供了包括基本输入、按钮和文本框,以及用于 Google Maps、富文本、滑块功能等的小组件。Mendix 社区还开发、发布和维护 600 多种开源自定义小组件,可通过 Mendix 应用商店在应用程序开发中使用这些小组件。除此之外,还可以使用自己的自定义小组件扩展 Mendix

Mendix 应用程序可以完全格式化(如用户页面设计中所述)和扩展(如如何扩展 Mendix 前端?中所述)。

您可以在 Mendix Academy 学习路径创造引人入胜的用户体验中了解更多有关 Mendix app UX 的可能性(必须登录 Mendix 平台才能看到这一学习路径)。

Mendix 如何支持客户端逻辑?

使用 Mendix,您可以通过纳流可视化地对客户端逻辑进行建模,纳流在 Web 和移动应用程序中均可使用。纳流无需连接,因此在离线移动应用程序中也非常有用。其语言和编辑器与微流相同,但包含一组侧重于客户端可能性的不同活动。纳流可以在设备或浏览器中完全运行,非常迅速。这里提供一则纳流示例:

有关更多信息,请参见 Mendix Studio Pro 指南中的纳流

除了纳流外,还可以直接将页面上的客户端表达式用于验证,条件可见性和可编辑性,以创建高度交互的页面。

如何扩展 Mendix 前端?

Mendix 可以创建与 Mendix Studio 和 Mendix Studio Pro 无缝集成的扩展,使它们成为应用程序模型的一部分。Mendix 支持如下所述两种类型的前端扩展。

  • 可插入小组件

    Mendix 支持构建自定义 UI 组件(即可插入小组件),这些组件可用于不同类型的可视化和交互中。您可以定义所有参数类型并使这些小组件可重用。输入参数将转换为易于使用的设置屏幕,可以从 Mendix Studio 和 Mendix Studio Pro 对其进行配置。此外,自定义小组件具有预览功能,可以实现所见即所得的效果,从而可以轻松获得小组件的印象并快速验证其配置。

    自定义小组件可以基于 JavaScript 或 TypeScript 构建,并且可以用于创建自定义输入、可视化和逻辑以及利用设备功能。Mendix 提供了广泛的 Client API 以调用 Mendix 功能。对于其他功能,可以通过 npm 轻松集成第三方库

    开发人员可以使用他们喜欢的 IDE。此外,为了简化自定义小组件的开发过程,Mendix 提供 Yeoman generator,可帮助通过简单快速的开发人员工作流程建立项目。

    有关更多信息,请参见 Mendix Studio Pro 操作方法中的如何构建可插入小组件

  • 可插入纳流操作

    Mendix 在创建自定义应用程序逻辑方面帮助开发人员构建自定义纳流操作。这些可插入纳流动作(在 Studio Pro 中称为 JavaScript 动作)基于 JavaScript 构建,并且可以利用许多的 ReactNative、Cordova 或浏览器功能。

    这些 JavaScript 操作类似于 Java 操作

    您可以直接从 Mendix Studio Pro 进行 JavaScript 操作。其中 Monaco 编辑器支持最受欢迎的 IDE Visual Studio Code。此编辑器支持智能上下文感知自动完成、Web 和 Mendix API 上嵌入式文档、正确缩进和代码友好的快捷方式,提供了出色的体验。

    开发人员如愿意,还可以使用他们首选的 IDE 在 Mendix Studio Pro 之外编辑代码。文件将保持同步。

    有关更多信息,请参见 Mendix Studio Pro 操作方法中的如何编写 JavaScript 操作

  • 分发

    您可以对可插入小组件以及可插入纳流操作进行版本控制,并将其传到私人 Mendix 应用商店,以便公司中的其他开发人员可以轻松使用。也可以手动共享小组件/操作或将其嵌入公司的入门应用程序中。

Mendix 是否支持多语言应用程序?

Mendix 完全支持多语言应用程序。在 Mendix Studio 和 Mendix Studio Pro 中,您可以为每个应用程序配置多种语言,文本和标题均可配置为多种语言。针对每种语言,可以为整个应用程序配置默认数字和日期格式。使用数字和日期时,将自动应用此默认格式,但也可以在本地指定自定义格式。

有关更多信息,请参见用户界面中的 Mendix 支持多语言应用程序?