CookBook

IM-BloomMaker エレメントを狙った位置に配置する方法

投稿日:

この CookBook ではエレメントを狙った位置に配置する方法について紹介します。
エレメントを配置する方法として、エレメントをドラッグ&ドロップする方法がありますが、
配置先のスペースが狭いとなかなか思い通りの位置に配置できない場合があります。

そこでエレメントを狙った位置に配置する方法を以下のシチュエーションごとに動画で説明します。

  1. エレメントを新規で配置する場合
  2. 配置済みのエレメントを移動させる場合

1. エレメントを新規で配置する場合

エレメントパレットをダブルクリックすることでエレメントを配置できます。


動画の操作説明

ボックス内に更にボックスを配置したレイアウトを使用しています。
ここでは親のボックスをボックス①、その子にあたるボックスをボックス②とします。

動画では最初にボックス②を選択しています。
これはボックス②の中にエレメントを配置するためです。
ダブルクリックでエレメントを配置する場合、選択しているエレメント内に配置されます。

エレメントパレットからラベルをダブルクリックしています。
ボックス②の中にラベルが配置されました。

ボックス①を選択し、エレメントパレットから強調ラベルをダブルクリックしています。
ボックス①の中に強調ラベルが配置されました。

ダブルクリックでエレメントを配置する場合、選択しているエレメント内の最後尾に配置されます。
そのため強調ラベルボックス②の後ろに配置されています。

2. 配置済のエレメントを移動させる場合

画面構成からエレメントツリーをドラッグ&ドロップすることでエレメントの移動ができます。


動画の操作説明

「1. エレメントを新規で配置する場合」の続きから実施しています。
画面の右側にある「画面構成」を使用します。

「画面構成」のタブをクリックするとコンテナページ内に配置しているエレメントの情報がツリー状に表示されます。
このツリーの中身をドラッグ&ドロップで移動させることで、実際に配置しているエレメントの位置も変わります。

強調ラベルを移動させるためドラッグしています。

ツリー上でラベルの上にドロップすると、ボックス②内のラベルの前に移動しました。

続いてラベルをドラッグしています。

ツリー上でボックス②の上にドロップすると、ボックス①内のボックス②の前に移動しました。

このように画面構成のエレメントツリーを操作することでレイアウト上の間隔に関係なく
狙った位置にエレメントを配置することができます。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

Payara の Docker を作成する。

この CookBook では、Payara の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Payara の Docker イメージを作成します 実行します 1. …

no image

WebServer へのリクエスト情報から動的に BaseURL を決定する方法(Apache 編)

ここでは、WebServer(Apache)へのリクエスト情報から BaseURL を動的に決定する方法を BaseUrlProvider のサンプル実装、Apache との連携例と共に紹介します。 …

no image

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(単一アイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、アイテムからアイテムへ値を渡す方法について紹介します。 今回は例として、文字列と数値の値を同時にアイテムからアイ …

no image

IM-BloomMaker 排他制御エレメントの使い方

このCookBookでは、2021 Winterでリリースした共通エレメント「排他制御」の利用方法について紹介します。 「排他制御」エレメントは、特定の業務画面、特定の業務データにおける操作を排他的に …

no image

IM-BloomMaker コンボボックスエレメントのサジェストにサーバから取得した値を表示する

このCookBookでは、intra-mart Accel Platform 2020 Spring から利用可能になったコンボボックスエレメントのサジェストにサーバから取得した値を表示する方法につい …