Web 用アクショングループのコントロール

Web プラットフォームのアクショングループとは、コントロール (ボタン、画像、テキストブロック、および変数) をグループ化するために使用するユーザーインターフェースのエレメントです。アクショングループを使用すると、ツールバーを簡単に作成できます。
アクショングループは抽象レイアウトでサポートされています。アクショングループの主な目的は、レスポンシブテーブルの同じセル内に複数のコントロールを挿入できるようにすることです。
つまり、グループ全体が 1 つのエレメントとして表示されるため、異なるコントロール間でオフセット設定を調整する必要はありません。
アクショングループの他の使用方法は、メニューを作成することです。

アクショングループを使用するタイミング:
同じセル内に複数のコントロールを挿入する。コントロール間でのオフセット設定の調整を回避する。これは、ツールバーアクショングループです。
レスポンシブメニューを作成する。これは、メニューアクショングループです。

ツールバーアクショングループの作成

アクショングループをツールバーで表示するには、アクショングループの [ Control Type ] プロパティを Toolbar に設定します。
このグループは、すべてのデバイスで 1 行に表示されます。
たとえば、Web トランザクションのナビゲーションボタンと選択ボタンは、[ Control Type ] プロパティ = Toolbar のアクショングループ内にあります。

図 1:

さらに、確認、キャンセル、削除のボタンが、[ Control Type ] プロパティ = Toolbar の別のアクショングループ内にあります。

図 2:

メニューアクショングループの作成

アクショングループをメニューで表示するには、アクショングループの [ Control Type ] プロパティを Menu に設定する必要があります。詳細については、「Web ナビゲーションバー」を参照してください
ツールバーとメニューアクショングループの両方が、ダイナミックコンポーネントを持つことができます。詳細は、「WEB アプリケーション用のダイナミックメニューを作成する方法」を確認してください。

アクショングループの作成

下記で説明しているアクショングループの作成方法には 2 つあります。
オプション 1: 次に示すように、レイアウトの左上隅にある矢印をクリックして、 [ アクショングループを追加 ] を選択します:

図 3:

レスポンシブテーブルのツールボックスで、アクショングループをフォームにドラッグできるようになります:

図 4:

オプション 2: ツールボックスから Web フォームに「新規アクショングループ」アイテムをドラッグします。

図 5:

アクショングループ名と、ダイナミックかどうかを設定することができます。

図 6:

アクショングループは、ツールバー内にも表示されます。

図 7:

その後、どの方法でフォームにコントロールを追加したかに関わらず、新しいコントロールをグループに追加するには、レイアウト上で右クリックして [ <コントロール> を挿入 ] を選択します。

図 8:

アクショングループのコントロールのプロパティは、レスポンシブテーブル内にあるコントロールと同じです。

ツールバー内のコントロールのグループのネスト

アクショングループ内では、コントロールのサブグループを追加できます。
ツールボックスからツールバーにグループをドラッグすると矢印が表示されます。ここに他のコントロールをドロップできます。

図 9:

次に、コントロールをグループに追加またはドラッグできます。

図 10:

注: アクショングループにグループを追加するもう 1 つの方法としては、右クリックして [ グループを挿入 ] を選択します。
たとえば、Web トランザクションの既定の Web フォームでは、サブグループにページングボタンが定義されています (図 1 を参照)。
注: サブグループは Bootstrap のボタングループとして生成されます。

アクショングループのプロパティ

Control Name	アクショングループのコントロール名。
Caption	表示するキャプション。 [ Control Type ] = [ Menu ] の場合にのみ適用されます。キャプションが表示されるのは、 [ Menu ] に対して [ Image() ] が設定されていない場合です。画像が設定されている場合は、 [ Caption ] がその代替テキストとして使用されます。 [ Caption ] のスタイルは、ActionGroup のテーマクラスの [ Caption Class ] プロパティ*を使用して設定できます。
Class	アクショングループのコントロールに関連付けられたテーマクラス。
Control Type	{Toolbar, Menu}。「Web ナビゲーションバー」を参照してください。
*Image()**	[ Control Type ] = [ Menu ] の場合にのみ適用されます。メニューの左側に表示する画像 (ロゴ)。ActionGroup のテーマクラスの [ Image Class ] プロパティを使用して設定できます。
Position	[ Control Type ] = [ Menu ] の場合にのみ適用されます。有効な値は次のとおりです。{Default, Fixed top, Fixed bottom}