ポップアップ・メニュー

ポップアップ・メニューを他のビューに追加します。 メニュー項目がクリックされたとき、またはビューのフォーカスが失われたときに、メニュー項目にポップアップ・メニューをピン留めできます。

構成プロパティー

「構成」で、ビューの外観および動作プロパティーを設定または変更します。

画面サイズ
プロパティー名の横に画面サイズ・アイコン 画面サイズ・アイコン がある構成プロパティーは、画面サイズごとに異なる値を持つことができます。 値を設定しない場合、画面サイズはそのデフォルト値として次に大きい画面サイズの値を継承します。
テーマ定義
テーマ定義は、ビューの色およびスタイルを指定し、その外観を決定します。 ビューのルック・アンド・フィールをテーマ・エディターでプレビューできます。 テーマを参照してください。
以下の表に、ポップアップ・メニュー・ビューの外観構成プロパティーを示します。
表 1. ポップアップ・メニューの外観構成プロパティー
外観構成プロパティー 説明 データ・タイプ
ラベルの表示 ポップアップ・ビューのラベルを指定します。 「ラベルの表示」が選択されると、組み込まれているビューのラベルがポップアップ・メニューに表示されます。 デフォルトでは、組み込まれたビューのラベルは非表示です。 Boolean
ラベルの配置 画面サイズ・アイコン ラベルの位置を指定します。
  • 上部
  • 左側
 String
ラベルの幅 大画面アイコン ラベルの幅です。 幅の単位は px (ピクセル)、% (パーセント)、または em で指定できます。 例えば、50px、20%、または 0.4em のようにします。 単位タイプが指定されていない場合は、px と見なされます。 String
水平位置合わせ (Horizontal alignment) 画面サイズ・アイコン 組み込まれたビューに対するポップアップ・メニューの水平位置を指定します。
  • 左側
  • 右側
 String
垂直位置合わせ (Vertical alignment) 画面サイズ・アイコン 組み込まれたビューに対するポップアップ・メニューの垂直位置を指定します。
  • 上部
  • 下部
 String
シャドー ポップアップ・メニューのフレームに影を付けます。 Boolean
幅 画面サイズ・アイコン ビューをラップするエンベロープの幅を指定します。 String
以下の表に、ポップアップ・メニュー・ビューの動作構成プロパティーをリストします。
表 2. ポップアップ・メニューの動作構成プロパティー
動作構成プロパティー 説明 データ・タイプ
メニューをピン留め メニュー項目がクリックされたときまたはビューがフォーカスを失ったときにポップアップ・メニューが自動的に閉じないようにします。 Boolean
メニュー項目 メニュー内の項目を指定します。
コマンド (String)
このメニュー項目を選択すると実行されるコマンド。
項目タイプ (String)
メニュー項目タイプを指定します。
  • ラベル
  • セパレーター
  • セクション・ヘッダー
アイコン (String)
指定したメニュー項目に追加するアイコン。 アイコンなしの場合はブランクのままにします。
項目テキスト (String)
指定したメニュー項目で表示するテキスト (分離文字には適用されません)。
バッジの形状 (String)
使用するバッジの形状。
  • なし
  • 正方形
  • 丸め
バッジの色 (String)
バッジに使用するカラー・スタイル。 色は、指定したテーマの変数に対応します。
バッジ・テキスト (String)
バッジに追加されるテキスト。
 MenuItemSpec[]

例

この例では、入力グループ・ビューがポップアップ・メニュー・ビュー内に配置されます。 入力グループ・ビューの構成プロパティーを次のように設定します
  1. 「外観」で、 「ラベルの配置」 を Topに、 「色のスタイル」 を Warningに、 「ボタンの位置」 を Leftに、 「ボタンのタイプ」 を Menuに、 「ボタン情報」 を Click to see Menu Itemsに設定します。
  2. 「イベント」の「ボタンのクリック時」に、以下のコード行を入力します。
    ${Popup_Menu1}.setMenuVisible(!${Popup_Menu1}.isMenuVisible{})
ここで、'Popup_Menu1' は、ポップアップ・メニュー・ビューのコントロール ID です。
ポップアップ・メニュー・ビューの以下の構成プロパティーを設定します。
  1. 「外観」の下で、 「ラベルの配置」 を Topに設定し、 「水平位置合わせ」 を Leftに設定し、 「垂直位置合わせ」 を Bottomに設定し、 「シャドー」を選択して、 「幅」 を 25%に設定します。
  2. 「動作」の下で、 「メニューのピン留め」を選択します。
  3. 「メニュー項目」の正符号 (+) をクリックして、表に 3 行追加し、それぞれに以下の値を設定します。
    • 行 1: Commandには 1を入力し、 Item type を Labelに設定します。 Item textの場合は Item 1を入力し、 「Badge shape」 を Roundedに、 「Badge color」 を Primaryに設定し、 「Badge text」 に 1を入力します。
    • 行 2: Commandには 2を入力し、 Item type を Labelに設定します。 Item textには Item 2を入力し、 Badge shape を Roundedに、 Badge color を Infoに設定し、 Badge text に 2を入力します。
    • 行 3: Commandには 3を入力し、 Item type を Labelに設定します。 Item textには Item 3を入力し、 「Badge shape」 を Roundedに、 「Badge color」 を Successに設定し、 「Badge text」 に 3を入力します。
実行時に、以下の画像のようなポップアップ・メニューが表示されます。

イベント

「イベント」プロパティーでビューのイベント・ハンドラーの設定や変更を行います。 イベントをプログラムでトリガーするかユーザーがビューと対話したときにトリガーするように設定できます。 イベントを定義およびコーディングする方法については、 ユーザー定義イベントを参照してください。 ポップアップ・メニュー・ビューには、以下のタイプのイベント・ハンドラーがあります。
  • : ページのロード時にアクティブ化されます。 例：
    me.setMenuVisible(true)
  • : 項目がクリックされたときにアクティブ化されます。 ラベルにのみ適用され、セクション・ヘッダーには適用されません。 例：
    ${Text1}.setLabelPosition(command) //sets the label position of the Text1 control to the value of command
//the value of command is set in the menu item command property

方法

ポップアップ・メニューに使用できるメソッドの詳細情報については、 ポップアップ・メニュー JavaScript API を参照してください。

その他のリソース

Coach またはページの作成方法については、 Coach の作成を参照してください。
標準プロパティー (「一般」、 「構成」、 「位置決め」、 「可視性」、および 「HTML 属性」) について詳しくは、 「プロパティーの表示」を参照してください。