データ グリッド、入力テキスト、ドロップダウンなど、App Store のウィジェットの大半はすぐに使用できます。最初の記事では、お気に入りのウィジェットをいくつか紹介しました。今日は、優れたユーザー インターフェイスを実現するのに役立つ主要なウィジェットについてさらに詳しく調べ、それらを使用して簡単に構築できることを紹介します。

この投稿で使用する例は、App Storeから取得したものです。 従業員ディレクトリアプリ.

データビューとデータグリッド

データビューとデータグリッドは、 Mendix 開発者の基本です。エンド ユーザーに動的なデータを表示するための基盤です。データ ビューにはデータベース内の単一のオブジェクトが表示されますが、データ グリッドにはデータベース内のオブジェクトのリストが表示されます。

必要になるかもしれない概要ページを検討してください。概要ページを作成する最も簡単な方法は、ページにデータ グリッドを追加し、表示するエンティティを選択することです。そこから、私は常に残りのページを自動入力して自動生成します。メイン ページを作成した後、ユーザーに関連するデータのみを表示し、コンテナー、グループ ボックス、またはタブを追加してインターフェイスを修正します。

として Mendix 開発者の皆さん、Desktop_Employee_Directory ページにアクセスすると、リスニング グリッドとともにグループ ボックスとデータ ビューが使用されていることがわかります。すべてのツールとウィジェットをぜひ試してみてください。

図 1: GroupBox とデータ ビューを含むページの例

図2: エンドユーザーが目にする画面の例

入力

入力ウィジェットは、エンティティ内の属性を表示します。データ型に応じて異なる入力フィールドを設定できます。以下の例では、3 種類の入力ウィジェットがあります。

1. テキスト入力ウィジェットは、文字列やその他の英数字データ型に使用されます。
2. 日付データ型は、従業員レコードが作成された日付を表示します。同じ日付入力ウィジェットは、生年月日の表示にも使用されます。
3. ラジオ ボタン リストは、従業員の性別を表示するために使用されます。ドロップダウン入力ウィジェットを使用することもできますが、App Store のラジオ ボタン リストの方が魅力的なユーザー インターフェイスを提供します。

図3: 入力ウィジェットの例 – Desktop_EmployeeSnippet を表示

図4: エンドユーザーに表示されるものの例

スニペット

スニペットは、 Mendix 5+ で、私のお気に入りのツールの XNUMX つです。スニペット ウィジェットは、ページやレイアウト コンポーネントを再利用する場合に役立ちます。

従業員ディレクトリ アプリでは、従業員情報は 2 つの異なるページで使用されるスニペットです (以下に表示)。

図5: 従業員情報が呼び出される回数 – 従業員の詳細と新しい従業員の作成時

複数のページにまたがって同じ情報を生成する代わりに、スニペットを一度作成して、それを何度でも呼び出すことができます。スニペットを使用すると、データ ビューまたはデータ グリッド情報を 1 か所で変更するだけで済むため、効率が向上します。さらに、ページの読み込みも速くなります。

最近、あるプロジェクトでスニペットを使用しましたが、非常に便利だとわかりました。スニペットの使用方法の詳細については、以下をお読みください。 この 役に立つ記事です！ 従業員ディレクトリアプリ その他のサンプルアプリケーション .

Mendix 開発者はユーザーが見ているものを見る

ユーザーインターフェースを構築するときは、ウィジェットが必須です。ウィジェットは直感的なので、UI開発がはるかに簡単になります。 Mendix 開発者は、ユーザーが見ているものをほぼそのまま見ることができます。 Mendix App Store には多数の既成ウィジェットとコンポーネントが用意されており、コミュニティではさらに多くのアイデアの提供を常に奨励しています。