その Mendix UIフレームワークは、最近発表された Mendix DXリリース（3月XNUMX日発売）^rd)。この新しいフレームワークは、UI パターン、テーマ、ナビゲーション レイアウト、ページ テンプレートの包括的なセットを提供し、開発者が魅力的で応答性の高いアプリケーションをより簡単に作成できるようにします。

興味深いことに、UIフレームワークはR&Dリサーチデイのプロジェクトとして始まりました。 Mendix、私たちは定期的にこの日を企画し、プラットフォームで探求したり貢献したりするのに興味深いと思われる革新的なアイデアに取り組むようにしています。一日の終わりには、コンセプトやプロトタイプが提示され、最も多くの票を獲得した候補が製品化されます。さて、このアイデアは大いに歓迎されました。

お客様やパートナーと同様に、私たちは、成長し続けるポートフォリオの外観と雰囲気を簡単に維持できる機能を望んでいました。 Mendix アプリケーションです。ご存知ないかもしれませんが、私たちは社内で多くのものを構築しています Mendix開発センター、クラウド ポータル、App Store、多数の社内アプリケーションなどが含まれます。

UIフレームワークにより、複数のレベルでこれらのアプリケーションの望ましい外観と操作性を維持するための柔軟性が向上しました。ライブラリを更新するだけで、すべてのアプリケーションを一度に更新することも、個別に選択することもできます。さらに、フレームワークにより、各アプリケーションに独自のカスタムスタイルを簡単に設定できます。マーケティングチームが Mendix たとえば、App Store では、特定のアプリケーション用のカスタム変数のセットを含むカスタム フォルダーを作成できます。

その Mendix UIフレームワーク

作成しました Mendix 高度な技術や設計スキルを持たない開発者でも、魅力的でレスポンシブなマルチデバイス アプリケーションを構築できる UI フレームワークです。このフレームワークでは、テーマ、ナビゲーション レイアウト、ページ テンプレート、デザイン要素、強力な CSS/Sass フレームワークなど、複数のレベルでアプリケーションの外観と操作性を定義できます。それぞれについてさらに詳しく見ていきましょう。

部門

新しいアプリケーションを作成するときは、さまざまなテーマの中から選択できます。 Mendix UI フレームワーク。以下のショーケースでわかるように、テーマは同じに見えますが、まったく異なるものもあります。多くの作業を行わなくても、アプリケーションを希望の外観と操作性に合わせてすばやくブランド化できます。もちろん、すべてのテーマはレスポンシブで、マルチデバイスに対応しています。

ナビゲーションレイアウト

アプリケーション全体で一貫したナビゲーションをすばやく作成するために、ナビゲーション レイアウトを導入しています。レイアウトは、トップバーまたはサイドバーのメイン メニューとサブ メニューを使用して、アプリ内のナビゲーション方法を制御します。各デバイス タイプ (電話、タブレット、デスクトップ) 用のナビゲーション レイアウト セットがテーマにバンドルされています。

ページテンプレート

社内プロジェクトで、適切なページ レイアウトとインタラクションの設計に膨大な時間がかかることに気づきました。そして正直なところ、UI の専門家を関与させなければ、結果は通常それほど良くありません。UX チームの規模を簡単に 2 倍にしても、UI の専門家の需要を満たすのは困難です。

そこで、UI パターンを検討し、ページ テンプレートを提供することでそれらを製品化することにしました。これらは、概要、マスター詳細、ダッシュボード、場所、ウィザードなど、さまざまなページ タイプのセット用に事前定義されたテンプレートです。すべてレスポンシブで、あらゆるタイプのデバイスに最適化されています。

設計要素

最後に、少なくとも Mendix UIフレームワークにはデザイン要素の完全なセットが付属しています。デザイン要素を使用すると、標準 Mendix ウィジェットは、スタイル、色、サイズ、配置など、好みに合わせてすばやく調整できます。すべてのデザイン要素について、アプリケーション全体で異なる外観と雰囲気を作成できるように、さまざまなバリエーションを作成しました。すべてのコンポーネントを手動でスタイル設定する必要はありません。たとえば、デザイン要素「タブ」は、 Mendix UI フレームワーク。

フレームワークの背後にあるテクノロジー

舞台裏を見て、フレームワークをどのように構築したか、そして Mendix コミュニティのメンバーはそれを使用したり、拡張したりすることもできます。

フレームワークはCSSとプリプロセッサで構成されています サス (使用は任意ですが、強くお勧めします)。CSS についてはよくご存知でしょうし、アプリケーションの外観や雰囲気を変更するのはかなり簡単であることもご存知でしょう。CSS 自体は楽しいものですが、スタイルシートはますます大きく、複雑になり、維持するのが難しくなっています。ここで、Sass のようなプリプロセッサが役立ちます。Sass を使用すると、変数、インライン インポート、ネストなど、CSS には存在しない機能を使用できます。Sass を使用すると、適切なフォルダーとドキュメントを作成できます。Sass をいじり始めると、Sass はプリプロセスされた Sass ファイルを取得し、アプリケーションで使用できる通常の CSS ファイルとしてエクスポートします。

ブートストラップ統合

Mendix Bootstrapの使用を導入したのは、 Mendix 5.0。 の中に Mendix UIフレームワークでは、Bootstrap標準に準拠し、ビジネスモデラーにさらなる改善を加えました。 Mendix DX リリースでは、モデラー用に次のような新しいウィジェットをいくつか作成しました。

レイアウトグリッド

Modeler に「レイアウト グリッド」ウィジェットを追加したので、開発者は Bootstrap と 100% 統合されたグリッド システムを簡単に作成できます。レイアウト グリッドは、コンテンツを格納する一連の行と列を使用してページ レイアウトを作成するために使用されます。

フォームグループ（水平 / 垂直）

このウィジェットは最小限に見えるかもしれませんが、従来のウィジェット開発と比較すると大きな変化です。フォームに個別のラベルや入力を配置する必要はもうありません。フォーム グループを使用すると、Bootstrap からの統合により適切なフォームを非常に簡単に作成できます。マウスをクリックするだけで、ラベルと入力を垂直に配置するか水平に配置するかを選択できます。

グリフィコン

グリフィコンはモデラーの一部となり、さまざまなウィジェットで使用できるようになりました。詳細については、 このブログ記事.

カスタマイズ

独自のカスタムテーマを構築します Mendix UIフレームワークまたはフレームワークに貢献する githubの詳細な、しかし 簡単なガイド 独自のテーマの作成を開始するのに役立ちます。

フレームワークの改善にご協力いただき、フィードバックをお寄せください。 Mendix コミュニティには、仕事を遂行するための適切なツールがすべて揃っています。

今後の予定 Mendix UIフレームワーク?

このリリースはほんの始まりに過ぎません。今後、Bootstrap を Business Modeler にさらに緊密に統合していきます。さらに、アクセシビリティ、Web 標準、WYSIWYG は、開発者が優れたアプリケーションをさらに迅速に提供できるようにするために、引き続き重要な役割を果たします。

その Mendix DXリリースは3月XNUMX日に発売予定^rdどうぞお楽しみに。その間、皆様のフィードバックをお待ちしています。