Ajaxフレームワーク UI部品リファレンス
目次 索引 前ページ次ページ
第2章 画面部品> 2.7 メニュー部品

2.7.1 ContextMenu

ContextMenuは、マウスの右クリックによりコンテキストメニューを表示する部品です。ContextMenuのメニュー項目の内容は、Ajaxフレームアプリケーションで独自に定義することが可能です。また、表示や非表示のほか、内容を動的に変更することができます。


WebブラウザのデフォルトのContextMenuの表示と重複しないように、アプリケーション側で制御する必要があります。詳細は“ContextMenuManagerクラスのJavascript API”を参照してください。

■表示例

ContextMenuで表示される部分を、以下のように呼びます。

ブラウザの表示領域とContextMenuの表示
マウスの右クリック時のマウスポインタの座標とブラウザの表示領域に応じて、コンテキストメニューの表示座標(サブメニューも含む)を移動させ、表示領域のスクロール処理が発生しないように最大限表示できるようにします。

■記述形式

<div rcf:id="model1" rcf:type="MenuModel" rcf:object="modelData"></div>
<div rcf:type="ContextMenu" rcf:id="ctxm1" rcf:data="{model1.menuData}"></div>


子要素は指定できません。


MenuModelの仕様については、“MenuModel”を参照してください。

■プロパティ

表の項目の意味は、“Text”の“プロパティ”を参照してください。

名前

データ型

説明

省略

省略値

属性指定

更新

部分更新

data

String

メニュー形式のObjectのルートを指定します。データには、ルート以降の各メニュー項目のデータを記述します。
“dataプロパティと表示データの指定方法”を参照してください。

不可

なし

バインド

可

可

timerInterval

Number

子階層のメニューを表示するまでの操作待ち時間をミリ秒で設定します。

可

200

値

不可

不可

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

dataプロパティと表示データの指定方法
以下のJavascriptデータで1つのメニュー項目を表現し、1つのルートのメニュー項目から子階層のメニュー項目のデータを入れ子形式で指定します。 
{
    name:    "item01",       // メニュー項目名
    label:     "項目1",      // メニュー項目のラベルの表示文字列
    isChecked:    false,     // メニュー項目のチェック済みフラグ(true:チェック済み、false:チェック未)
    isSelectable:   true,    // メニュー項目の選択可否(true:選択可、false:選択不可)
    headImage:
        {   normal:  "/img/icon_item01.gif"          // メニューアイコン
        },
    eventType:  "ctxm_item01",    // メニュー項目が選択されたときに送出されるイベントタイプのベース名
    children: []                  // 子階層のメニュー項目のリスト
};

子階層のメニュー項目を持つ場合は、以下のように記述します。

{
    name:    "item01",
    label:   "項目1",
    isSelectable:  true,
    isChecked:     false,
    headImage:
        {   normal:"/img/icon_item01.gif"
        },
    eventType:     "ctxm_item01",
    children: [
          {
           name:  "input_list1",
           label: "入力候補1",
           eventType: "ctxm_item01"
          },
          {
           name:  "input_list2",
           label: "入力候補2",
           eventType: "ctxm_item01"
          },
          {
           name:  "input_list3",
           label: "入力候補3", 
           eventType: "ctxm_item01"
           }
    ] //  children
};

メニュー項目ごとに持つプロパティを説明します。

プロパティ名

データ型

説明

省略

省略値

name

String

メニュー項目の名前を指定します。
メニュー項目の位置を示すパスを表現する際に使用します。同一メニュー項目の子階層のメニュー項目では、nameの値は一意でなければなりません。/を含む文字列、および空の文字列は指定できません。
メニュー項目名にrcf-ContextMenu-hlineを指定すると区切り線が表示されます。

不可

なし

label

String

メニュー項目のラベルに表示する文字列です。

可

nameの値

eventType

String

メニュー項目を選択した場合に送出されるイベントタイプ名を指定します。
送出されるイベントタイプ名は、“ContextMenuのID”＋“_”＋eventTypeの形式となります。
このイベントタイプ名に対応するイベントリスナをイベントマップに定義し、rcf.event.EventRegistrar.registerEventsで登録することにより、個々のメニュー項目に対応したユーザ独自のイベントリスナを呼び出すことができます。

可

なし

isChecked

Boolean

チェック済みかどうかを指定します。

  • true: チェック済み
  • false: チェック未

trueの場合、メニューアイコンより優先してチェックアイコンがアイコン表示エリアに表示されます。

可

false

isSelectable

Boolean

選択可能かどうかを指定します。

  • true: 選択可能
  • false: 選択不可

可

true

headImage

Object

メニューアイコンのイメージを指定します。
指定しない場合、メニューアイコンは表示されません。

可

なし

children

Array

子階層のメニュー項目のデータを保持するObjectの配列を指定します。
配列の1要素に1つのメニュー項目を割り当てます。省略時はメニュー項目がないことを示します。データをあとで追加する場合は、children:[]を指定します。

可

なし


headImageプロパティ
以下にheadImageのプロパティを示します。

プロパティ名

データ型

説明

normal

String

メニューアイコンのURLまたはパスを指定します。
空の文字列を指定した場合、および省略時は、メニューアイコンは表示されません。

unselected

String

選択不可のメニューアイコンのURLまたはパスを指定します。
空の文字列を指定した場合、および省略時は、メニューアイコンは表示されません。

headImageプロパティで指定するメニューアイコンは、14×14ピクセルまたは16×16ピクセルの大きさの透過GIFを推奨します。

それぞれのURLには、クエリ文字列およびURLリライティングで用いるセションIDを付加することができます。詳細は、“ユーザーズガイド”を参照してください。


プロパティで指定した文字列に対するエスケープ処理は行いません。フォーム画面などからユーザが入力したデータを本プロパティに設定する場合は、アプリケーション側で < > & " ' の5つの文字をエスケープするようにしてください。

dataプロパティの記述例
以下にdataプロパティの記述例を示します。 
<script type="text/javascript">
//<![CDATA[
  var modelData = {       // モデルデータ名は任意
    menuData: {
        name:     "root",  // ルート階層
        children: [
          { // 1つ目のメニュー項目
            name:    "item01",
            label:     "項目1",
            isChecked:        false,
            isSelectable:       true,
            headImage:
                {   normal:  "/img/icon_img1.gif"
                },
            eventType:     "ctxm_item01"
            },
            {
            name: "rcf-ContextMenu-hline"
            },
          { // 2つ目のメニュー項目
            name:   "item02",
            label:    "項目2",
            isChecked:    false,
            isSelectable:  true,
            headImage:
                {    normal:  "/img/icon_img3.gif"
                },
            eventType:       "ctxm_item02",
            children: [
                    {
                    name: "list1",
                    label:  "候補1",
                    eventType:  "ctxm_item02"
                    },
                    {
                    name: "list2",
                    label:  "候補2",
                    eventType:  "ctxm_item02"
                    },
                    {
                    name: "list3",
                    label:  "候補3",
                    eventType:  "ctxm_item02"
                    }
                ] //  children
          }
        ] // children
    }
};
//]]>
</script>
<body>
<div rcf:id="modelData1" rcf:type="MenuModel" rcf:object="modelData"></div>
<div rcf:id="ctxm1" rcf:type="ContextMenu" rcf:data="{modelData1.menuData}"></div>
</body>

このdataプロパティが指定された場合のContextMenuの表示例は、以下になります。

ContextMenuのフォ−カス
ContextMenu部品にフォーカスを当てることはできません。メニュー項目上にマウスポインタがある場合は、メニュー項目にはアイテムフォーカスがあたります。
マウス操作
マウスを右クリックしたあと、マウスポインタをContextMenu上で移動して操作できます。

操作

処理

ContextMenuのエリア上をクリック

アイテムフォーカス状態のメニュー項目を選択します。

ContextMenuのエリア外をクリック

ContextMenuを非表示にするようにアプリケーション側で制御する必要があります。詳細は、“ContextMenuManagerクラスのJavaScript API”を参照してください。


キーボード操作
マウスを右クリックしたあと、キーによるContextMenuの操作ができます。

操作

処理

↑

アイテムフォーカスが上に移動します。

↓

アイテムフォーカスが下に移動します。

→

子階層がある場合は子階層を表示し、アイテムフォーカスを子階層に移動します。

←

子階層を非表示にして親階層に戻ります。

Enter

アイテムフォーカス状態にあるメニュー項目を選択します。

ESC

ContextMenuを非表示にします。

■スタイルプロパティ

本部品全体のスタイルプロパティを以下に示します。

パーツ名

プレフィックス

クラス名

指定可能なスタイル

部品全体

なし

rcf-ContextMenu
  • 背景色(注1)
  • ボーダー(注2)
  • パディング
  • マウスポインタの形状
  • zIndex(注3)

メニュー項目

itemMain

rcf-ContextMenu-itemMain
  • パディング

アイテムフォーカスが当たっているメニュー項目

itemFocus

rcf-ContextMenu-itemFocus
  • 背景色(注4)
  • ボーダー

メニュー項目のラベル

label

rcf-ContextMenu-label
  • カラー
  • フォント(注5)
  • パディング(注6)

メニュー項目のラベル(アイテムフォーカスが当たっているラベル)

focusedLabel

rcf-ContextMenu-focusedLabel
  • カラー(注7)
  • フォント(注5)
  • パディング(注6)

メニューアイコン

headImage

rcf-ContextMenu-headImage
  • パディング

非選択

unselectable

rcf-ContextMenu-unselectable
  • カラー(注8)
  • フォント(注5)
  • パディング(注6)

注1) デフォルトの背景色は、#FFFFFF(白)です。

注2) デフォルトのボーダー色は、#808080(灰色)です。

注3) zIndexのデフォルトは、30000です。

注4) デフォルトの背景色は、#4682B4(スチールブルー)です。

注5) デフォルトのフォントサイズは14pxです。
IE6では、lineHeightは指定できません。
フォントサイズは一定にしてください。一定にしない場合、表示が崩れる可能性があります。

注6) padding-left、padding-rightが有効となります。
パディングサイズは一定にしてください。一定にしない場合、表示が崩れる可能性があります。

注7) デフォルトのフォント色は、#FFFFFF(白)です。

注8) デフォルトのフォント色は、#C0C0C0(シルバー)です。

詳細は、“スタイルプロパティ”を参照してください。

マウスポインタの形状

名前

データ型

説明

省略

省略値

cursor

String

マウスポインタの形状を指定します。

可

ブラウザのデフォルトの形状



ContextMenuの横幅、および子階層の横幅は、メニュー項目のラベルの最大長に合わせて表示されます。

■イベントリスナ

本部品全体のイベントリスナを以下に示します。

アプリケーションでは、以下のイベントリスナの発生をキャッチして、アプリケーション独自の動作を記述することができます。

名前

説明

イベントオブジェクト

onContextMenuShow

ContextMenuを表示したときに呼ばれます。

ContextMenuEvent

onContextMenuHide

ContextMenuを非表示したときに呼ばれます。

onContextMenuSelect

メニュー項目を選択したときに呼ばれます。

指定イベントタイプ名(注)

メニュー項目を選択したとき

onDataChange

モデルのデータが変更されたとき

MenuDataChangeEvent

注) メニュー項目が選択された際に、MenuModelのオブジェクトのeventTypeで指定されたイベントタイプ名を持つイベントが送出されます。
このとき、イベント名は一意性保証のため、“ContextMenuのID” + “_” + eventType の形式となります。

例) ContextMenuのID=“ctxm1”、 eventType= item01 の場合
送出されるイベント名=“ctxm1_item01”

eventTypeが省略された場合は、上記イベントタイプ名のイベントは送出されません。

部品共通のイベントリスナもあります。詳細は、“画面部品共通イベントリスナ”を参照してください。


dblclickイベントは発生しません。最初のクリックでContextMenuが非表示になるためです。

■JavaScript API

ContextMenuのJavascript APIには、ContextMenuクラスとContextMenuManagerクラスがあります。

ContextMenuクラス

以下に、ContextMenuクラスのJavaScript APIを説明します。

■showメソッド

メソッド

show(eventObject)

引数

eventObject
[Object]

イベントオブジェクト(ActionEventまたはnativeEvent)

戻り値

なし

例外

なし

説明

ContextMenuを表示します。すでに表示済みの場合は何もせず復帰します。

■getNodeDataProviderメソッド

メソッド

getNodeDataProvider(nodePath)

引数

nodePath
[String]

メニュー項目のパス名

戻り値

指定したメニュー項目のデータにアクセスするためのDataProvider

例外

以下の場合にエラーとなります。

  • 引数が省略された場合
  • nodePathに空文字列が指定された場合
  • nodePathに存在していないメニュー項目のパスが指定された場合

説明

指定したメニュー項目のデータにアクセスするためのデータプロバイダを取得します。メニュー項目のデータは、dataプロパティ中の指定メニュー項目とその配下を表示するための部分データとなります。

部品共通のJavaScript APIもあります。ただし、部品共通のshowメソッドは使用できません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

ContextMenuManagerクラス

ContextMenuManagerは、ContextMenuの表示に関わる動作を管理するクラスです。
ContextMenuManagerクラスとそのメソッドを使用するには、“rcf.widget.menu.ContextMenuManager.getInstance();”により、オブジェクトを生成してから使用する必要があります。

以下に、ContextMenuManagerクラスのJavascript APIを説明します。

■getInstanceメソッド

メソッド

getInstance()

引数

なし

戻り値

ContextMenuManagerのオブジェクト

例外

なし

説明

ContextMenuManagerのオブジェクトを返します。
本メソッドを利用する場合は、以下のようにクラスを指定します。
ctxm_mgr = rcf.widget.menu.ContextMenuManager.getInstance();

■getContextMenuListメソッド

メソッド

getContextMenuList()

引数

なし

戻り値

ContextMenuManagerに登録されているContextMenuのオブジェクトの配列

例外

なし

説明

ContextMenuManagerに登録されているContextMenuのオブジェクトの配列を返します。

■onClickHideMenuメソッド

メソッド

onClickHideMenu(listener)

引数

listener
[Function]

イベントリスナ

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

マウスのクリックですべてのContextMenuを非表示にするリスナを設定します。

■hideAllメソッド

メソッド

hideAll()

引数

なし

戻り値

なし

例外

なし

説明

すべてのContextMenuを非表示にします。

■hideメソッド

メソッド

hide(ctxm)

引数

ctxm
[Object]

ContextMenuのオブジェクト

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

指定されたContextMenuを非表示にします。

■onContextMenuByElementメソッド

メソッド

onContextMenuByElement(element, listener)

引数

element
[Object]

DOM要素

listener
[Function]

イベントリスナ

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

指定された要素上にマウスポインタがある場合、マウスの右クリックで呼ばれるリスナを設定します。

■onContextMenuByIdメソッド

メソッド

onContextMenuById(id, listener)

引数

id
[String]

UI部品の部品ID

listener
[Function]

イベントリスナ

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

指定されたUI部品の要素上にマウスポインタがある場合、マウスの右クリックで呼ばれるリスナを設定します。

■resetContextMenuByElementメソッド

メソッド

resetContextMenuByElement(element)

引数

element
[Object]

DOM要素

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

onContextMenuByElementで設定されたリスナを削除します。

■resetContextMenuByIdメソッド

メソッド

resetContextMenuById(id)

引数

id
[String]

UI部品の部品ID

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

onContextMenuByIdで設定されたリスナを削除します。

■preventDefaultCtxmByElementメソッド

メソッド

preventDefaultCtxmByElement(element)

引数

element
[String]

対象要素

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

指定された要素上でのWebブラウザの右クリックの動作を抑止します。

■preventDefaultCtxmByIdメソッド

メソッド

preventDefaultCtxmById(id)

引数

id
[String]

UI部品の部品ID

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

指定されたUI部品の要素上でWebブラウザのデフォルトの右クリックの動作を抑止します。

■preventDefaultCtxmByIframeIdメソッド

メソッド

preventDefaultCtxmByIframeId(iframeId)

引数

iframeId
[String]

iframeのID

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

指定されたiframe上でのWebブラウザの右クリックの動作を抑止します。

■resetDefaultCtxmByElementメソッド

メソッド

resetDefaultCtxmByElement(element)

引数

element
[String]

対象要素

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

指定された要素上でのWebブラウザの右クリックの動作を元に戻します。

■resetDefaultCtxmByIdメソッド

メソッド

resetDefaultCtxmById(id)

引数

id
[String]

部品ID

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

指定された要素上でのWebブラウザの右クリックの動作を元に戻します。

■resetDefaultCtxmByIframeIdメソッド

メソッド

resetDefaultCtxmByIframeId(iframeId)

引数

iframeId
[String]

IframeのID

戻り値

なし

例外

引数が不正な場合、RCF18850のエラーとなります。

説明

指定されたiframe上でのWebブラウザの右クリックの動作を元に戻します。


FragmentContainer上のUI部品に対して、以下のJavaScript APIを設定している場合、FragmentContainerをアンロードする際には、それぞれに対応したJavaScript APIを使用してリセットしてください。

設定しているJavaScript API

リセットに使用するJavaScript API

onContextMenuById

resetContextMenuById

onContextMenuByElement

resetContextMenuByElement

preventDefaultCtxmByIframeId

resetDefaultCtxmByIframeId

ContextMenuの利用例1
コンテクストに応じて別メニューに切り替える例を以下に示します。 
<script type="text/javascript">
//<![CDATA[
var modelData1 = {
       menuData: {
              ...
}
var modelData2= {
       menuData: {
              ...
}
var eventMap = {  // メニュー項目が選択された際に呼び出されるイベントリスナ
      ctxm1:{  ctxm1_item01: func01 },
      ctxm2:{  ctxm2_item01: func02 }
};
RCF.addInitializedListener(function(eventObject) {

    rcf.event.EventRegistrar.registerEvents(eventMap, "eventMap");

    // ページ全体でWebブラウザのデフォルトの右クリックの動作を抑止。
       var ctxm_mgr = rcf.widget.menu.ContextMenuManager.getInstance();
       ctxm_mgr.preventDefaultCtxmByElement(document);

    // 右クリックで呼び出すContextMenuを切替え表示。
       ctxm_mgr.onContextMenuByElement(document, mkContextMenu);

    // マウス左クリックで非表示にするためのイベントリスナを呼び出す
       ctxm_mgr.onClickHideMenu( hideContextMenu);
});
function mkContextMenu(eventObject) {
var focus_id = fm1.getFocusedComponentId();
      if (focus_id == "t1") {         // FocusがTextInputのt1にある
          ctxm1.show(eventObject);       // 表示
      }
      else if (focus_id == "t2") {   //FocusがTextInputのt2にある
          ctxm2.show(eventObject);       // 表示
      }
      else {
          var ctxm_mgr = rcf.widget.menu.ContextMenuManager.getInstance();
          ctxm_mgr.hideAll();
      }
}
// マウス左クリックで起動されるイベントリスナ
function hideContextMenu(eventObject) {
    var ctxm_mgr = rcf.widget.menu.ContextMenuManager.getInstance();
    ctxm_mgr.hideAll();
}
// メニュー項目の選択された際に呼び出されるイベントリスナ
function func01(eventObject) {
    alert("func01が呼び出されました");
}
function func02(eventObject) {
    alert("func02が呼び出されました"); 
}
</script>
<body>
    <div rcf:id="model1" rcf:type="MenuModel" rcf:object="modelData1"></div>
    <div rcf:id="model2" rcf:type="MenuModel" rcf:object="modelData2"></div>
    <div rcf:type="ContextMenu" rcf:id="ctxm1" rcf:data="{model1.menuData}"></div>
    <div rcf:type="ContextMenu" rcf:id="ctxm2" rcf:data="{model2.menuData}"></div>
    <div rcf:type="FocusManager" rcf:id="fm1" rcf:targets="t1;t2"></div>
    <div rcf:type="TextInput" rcf:id="t1"></div>
<div rcf:type="TextInput" rcf:id="t2"></div>

</body>


ContextMenuの利用例2
コンテクストに応じてメニューの内容を動的に切り替える例を以下に示します。 
<script type="text/javascript">
//<![CDATA[
  var modelData1 = {
      menuData: {
          name:     "root"
          children: [
           { // 1つ目のメニュー項目
              name:    "item01",
              label:     "項目1",
              children:[]
           }
      ...
  }

RCF.addInitializedListener(function(eventObject) {

    // 対象要素のViewContainer上でデフォルトの右クリックの動作を抑止する。
    var ctxm_mgr = rcf.widget.tree.ContextMenuManager.getInstance();
    ctxm_mgr.preventDefaultCtxmById("vc01");

    // 右クリックで呼び出す関数を定義
    ctxm_mgr.onContextMenuById("vc01", mkContextMenu);
});
function mkContextMenu(eventObject) {

    // 例:TextInputとTextAreaでメニューの内容を切り替える
    // フォーカスがTextInputにある場合はメニュー項目をTextInput用にする
    // フォーカスがTextAreaにある場合はメニュー項目をTextArea用にする
     var focus_id = fm1.getFocusedComponentId();
     var compo = RCF.getComponent(focus_id);

     if (compo.type == "TextInput" ) {
         func_addChild("sub-TextInput");        // TextInput用のメニュー項目を追加
     }
     else if (compo.type == "TextArea" ) { 
         func_addChild("sub-TextArea");         // TextArea用のメニュー項目を追加
     }
     ctxm1.show(eventObject);       // 表示
}
function func_addChild(targetName) {
    // 追加するメニュー項目
    var _newMenuNode = {
      name:            targetName,
      label:            targetName,
      eventType:      "menuSelect",
      children: []
      };

    // 追加メニュー項目のパスの部分データを取得
    var _provider = ctxm1.getNodeDataProvider( "/item01" );
    if ( _provider != null ) {
        // 子メニュー項目の配列を取得
        var _children = _provider.getDataProvider("children");
        // 子メニュー項目の配列からすべて削除
        var len = _children.getLength();
        for(var i=0; i<len; i++ ) {
            _children.removeItemAt(0);
        }
        // 子メニュー項目の配列に1つのメニュー項目のデータを追加
        _children.addItem(_newMenuNode);
    }
}
</script>
<body>
    <div rcf:id="model1" rcf:type="MenuModel" rcf:object="modelData1"></div>
    <div rcf:type="ContextMenu" rcf:id="ctxm1" rcf:data="{model1.menuData}" ></div>
    <div rcf:id="vc01" rcf:type="ViewContainer">
    <div rcf:type="FocusManager" rcf:id="fm1" rcf:targets="t1;ta1"></div>
      <div rcf:type="TextInput" rcf:id="t1"></div>
      <div rcf:type="TextArea" rcf:id="ta1"></div> 
    </div>
</body>

■補足事項

目次 索引 前ページ次ページ
Copyright 2009 FUJITSU LIMITED