UIの構築
AppMaster Web Designer をドラッグ アンド ドロップして美しく構造化された Web アプリ インターフェイスを構築する方法に関する簡単なガイド。
使いやすさと構造化されたインターフェイスを設計するために、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 を作成し、要素にインタラクティブ性を追加する準備が整いました。