使いやすさと構造化されたインターフェイスを設計するために、AppMaster Web Designer は広範なアトミック UI コンポーネントを提供します。これらのコンポーネントは、目的や目標に合わせてさまざまな方法で組み合わせたり、グループ化したりできます。

AppMaster は次の UI コンポーネントを提供します。

コンテナ: 他のコンポーネントを論理的に構造化およびグループ化するための基本要素。
モーダルとドロワー: 現在の画面を離れることなく追加情報やアクションを表示するための対話型コンポーネント。
動的値出力コンポーネント: データを動的に表示するための Lists 、 Grids 、および Tables が含まれます。
基本的な UI 要素: Button 、 Text 、 Icon など、基本的なインターフェイスの操作に不可欠です。
ナビゲーションコンポーネント: 垂直および 水平メニュー、タブ、および同様のナビゲーションツールが含まれます。
フォーム要素: ユーザー対話とデータ収集のためのさまざまな入力とコントロール。

コンポーネントライブラリを定期的に更新すると、Web アプリケーションをより効率的に開発できるようになります。

AppMaster のドラッグアンドドロップ Web サイトビルダーの可能性を示すために、単純な電卓アプリケーションの UI を構築してみましょう。このアプリは、入力値に基づいてさまざまな数学演算の結果を表示します。

フレックスコンテナ

Flex Container を使用すると、コンテナ内のすべての子要素の位置合わせとスタッキング管理を簡単に管理できます。

Flex Container は、Web ページの構造を構築するための基本コンポーネントです。 AppMaster Web アプリデザイナーの Flex Container を使用すると、ユーザーは子要素 (ウィジェットまたはコンテナ) を柔軟に配置できます。水平方向と垂直方向の両方の配置をサポートしているため、開発者はさまざまな画面サイズに適応する複雑なレイアウトを作成できます。

コンテナの追加

2 つのメインコンテナを使用します。1 つはデータ入力用で、もう 1 つは 1 つの共通コンテナにラップされた計算結果を表示するためです。

まず、 フレックスコンテナを キャンバスに追加して、他のすべての要素を格納します。

[外観] パネル では、さまざまな設定を検討できます。

要素 ID: ビジネスプロセスでコンテナを参照するための一意の識別子。
共通グループ: 可視性やカーソルスタイルなど、コンポーネントのデフォルト状態を定義する設定。
フレックス子グループ: フレックス親コンポーネント内で要素がどのように動作するかを決定します。
レイアウト: コンテナ内に子アイテムを配置するための設定。
サイズ: 要素の寸法を指定します。
間隔: 要素の内側と周囲の間隔を調整します。
背景: 背景色とレイヤーのオプション。
コーナー半径、境界線、影: 要素のエッジ、境界線、影の効果をカスタマイズします。
ツールチップ: ホバーまたはフォーカス操作のツールチップを追加します。

メインコンテナをカスタマイズします。たとえば、 Direction を 水平に設定し、 Gap 、 Padding 、 Corner radius 、および Borders を調整してみましょう。

次に、フォームに値を入力するためのメインコンテナ内に別の Flex コンテナ を追加します。親コンテナ内の利用可能なスペースを埋めるには、全幅に設定します。

このコンテナを複製して ( CTRL/⌘+D を使用)、結果を表示するための別のブロックを作成します。「幅」プロパティを 30% に設定します。

UI要素の追加

アプリケーションの構築を続けるには、必要な UI 要素を追加します。

フォームの追加

私たちのビジネスプロセスでは、ユーザーは 2 つの数値 (両方とも Float 型) を入力する必要があります。これを可能にするには、2 つの Float 入力と 1 つのボタンを追加して、計算プロセスを開始します。

左側の フレックスコンテナの 方向を垂直に切り替え、ネストされた要素の間に少しスペースができるように ギャップ を追加します。この Flex コンテナ内に最初の値の 入力浮動小数点 を追加します。これに「X」というラベルを付けます。

「Input Float」 要素を左側のコンテナにドラッグアンドドロップします。
外観パネル で、 ラベル と プレースホルダー を追加してフィールドをカスタマイズします。
アプリケーションの設計に合わせてフィールドの外観を微調整します。

キャンバス上で追加したフィールドを選択し、 CTRL/⌘+D を使用して複製します。複製されたフィールドの ラベル と プレースホルダー を変更して、2 番目の値「Y」を表すようにします。

次に、追加したフィールドの下に Button 要素をドラッグアンドドロップします。 [外観]パネル で、ボタンが幅全体に広がるように調整します。これを実現するには、 「Flex Child」 グループの 「Align」 プロパティを 「Stretch」 に設定します。

ボタンの ラベル を入力し、オプションで アイコン を追加して視覚的な魅力を高めます。

これらの要素を追加した後、明確にして識別しやすくするために、名前を変更することをお勧めします。これにより、ビジネスプロセスで参照しやすくなり、理解性が向上し、開発プロセスが高速化されます。

結果ブロックの追加

親コンテナの右側に、ビジネスプロセスの実行後の結果を表示するスペースを構成します。まず、このコンテナの [方向] プロパティを [垂直] に設定し、要素の間隔をきちんと保つために小さな ギャップ を追加します。幅を 30% に変更します。

この右側のコンテナ内に、新しい水平 Flex コンテナ を挿入し、その中に操作を表す Icon 要素、等号記号のある テキストブロック、および操作の結果が表示される テキストブロックを 追加します。このコンテナを 4 回複製し、定義した数学的演算をそれぞれ更新します。

外観パネル を使用して、各要素を必要に応じてカスタマイズします。

ヒントブロックを追加する

インターフェイスの使いやすさを向上させるために、結果が得られるまで表示されるプレースホルダーを作成します。このために、追加の Flex Container を追加して、適切なコンテナの幅 (30%) をミラーリングし、その中に説明的なヒントを含む Text Block を配置します。

結果を含むコンテナーの重要な特徴は、その初期の可視性ステータスです。デフォルトでは、 Visible スイッチをオフに設定し、最初は非表示にします。

要素を隠す

このコンテナを可視化し、ビジネスプロセスが実行され結果が得られた後にのみデータを更新します。テキストブロック名を割り当てて、ビジネスプロセスの作成時や表示する結果の書き込み時に簡単に識別できるようにすることが重要です。

🎉 頑張ってね！アプリケーションに最適な UI を作成し、要素にインタラクティブ性を追加する準備が整いました。

UIの構築