コンポーネントデザイン

キャンバスの空いているスペースに要素を配置することも可能ですが、すぐにすべてを整然としたものにしようとする方がよいでしょう。そこで、まず最初にワークスペースをデザインします。コンポーネント(Container)をキャンバスに追加してみましょう。追加後、歯車のアイコンをクリックし、このコンテナの設定に進んでください。

コンテナの設定

利用可能な設定を確認しましょう。

• Name- は、アプリケーションのビジネスプロセスでこのコンテナを参照するための名前です。例えば、このコンテナの設定を変更するためのビジネスプロセスを作成する場合です。
• Direction- 指定されたコンテナ内の要素がレイアウトされる方向。水平に並べる場合は1つずつ、逆に垂直に並べる場合は要素が互いの下に入るようにします。
• Wrap- 要素の出力を設定します。同じ行に並べるべきか（nowrap）、それとも折り返すことができるか（wrap）。
• Alignment- コンテナ内の要素の整列方法（水平方向と垂直方向の整列を別々に設定）。
• Size- コンテナの大きさ。利用可能なスペースに対するパーセンテージで設定するか、ピクセル単位で厳密に固定したサイズを設定することができる。
• Max Width-最大許容幅（厳密に設定されておらず、コンテンツによって異なる場合）。
• Margin/Padding- コンテナの境界線からインデントする。それぞれ、外部または内部。
• Image, Gradient or Overlay (Background color)- 希望する背景を設定する機能。特定の色（またはグラデーションによる異なる色の組み合わせ）、または背景画像の選択が可能です。
• Border- フレームとその外観の選択（色、太さ、丸め半径）。
• Visible- 要素（およびすべてのネストされた要素）の可視性。

選択された設定は、スクリーンショットに表示されています。もちろん、これらの設定を変更し、独自のデザインを選択することも可能です。

作成したコンテナに、もう一つ追加してみましょう。必要な入力フィールドを追加していきます。縦書き、中央揃え、幅40％、左詰め（padding-left 20px）に設定します。

アプリケーションのコンポーネント

次に、コンポーネントそのものをコンテナに追加します。このビジネス・プロセスでは、float 型の 2 つの数値を受け取ります。これを入力するには、2 つの Inputコンポーネント (float)、ボタン(Button) を追加する必要があります。また、計算処理を開始するボタン ( ) を追加し、署名のために小さな視覚的な調整を行います。 Label.

もう一つブロックを追加して、一般的に計算する予定のもの（合計、引き算など）を署名するようにしましょう。幅を30%に設定し、要素を縦に並べ、中央揃え、右揃えにしましょう(end/center)。コンテナ自体に5つのLabel コンポーネントを追加し、すぐにそのテキストを希望のものに変更しましょう。

ビジュアルデザインの最後のステップは、計算結果を表示するための別のコンテナを追加することです。先ほどのコンテナと類推して追加しましたが、アライメントを右に設定し、左側に小さなパディングを付けています。このコンテナの特徴は、最初は見えないようになっていることです（Visible スイッチはオフになっています）。計算結果が出た瞬間にONにしましょう。Label コンポーネントを5つ追加してみましょう。ブロックはまだ見えないので、テキストを変更する必要はありません（主な内容は、ビジネスプロセスを作成するときに必要な要素を識別できるように、Name を設定することです）。

すべてが正しく行われた場合、Webデザイナーには次のような結果が表示されます。

そして、これが公開されたアプリに表示されます。