libro
www.tuyano.com
JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

アプリバー／メニュー／HTMLコントロール (2/4)

作成:2012-11-15 08:04
更新:2012-11-15 08:20

■ポップアップメニュー（PopupMenu）を使おう

次に取り上げるのは「メニュー」です。メニューといっても、Modern UIのアプリには、いわゆるメニューバーはありません。アプリバーで表示されるのはアイコンですし……。ただし、ボタンをクリックして現れるポップアップメニューは健在です。

ポップアップメニューは、やはり<div>タグにdata-win-control属性を用意することで作ることができます。タグ内には<button>タグを使ってメニュー項目を用意します。こんな感じですね。
<div data-win-control="WinJS.UI.Menu">
    <button data-win-control=
        "WinJS.UI.MenuCommand">
    ……必要なだけ用意……
</div>
実際の利用例を下のリスト欄に掲載しておきます。ここでは、チェックをON/OFFするトグルタイプのメニュー項目とセパレーターも入れてみました。それぞれのボタンのタグを見てみましょう。

・通常のメニュー項目
<button data-win-control="WinJS.UI.MenuCommand" 
    data-win-options="{label:'表示テキスト', section:'global'}"></button>
これは、アプリバーのところで使った<button>タグとほとんど同じですね。AppBarCommandがMenuCommandに変わっているだけです。data-win-options属性には、表示するテキストを示すlabelと、sectionの指定をしてあります。

・トグルメニュー項目
<button data-win-control="WinJS.UI.MenuCommand" 
    data-win-options="{label:'Second Item', type:'toggle', selected:'true', 
        section:'global'}">
</button>トグルタイプのメニューは、選ぶとメニュー項目の左側にチェックマークをON/OFFすることができます。これはdata-win-options属性に、「type:'toggle'」という値を用意します。これでトグルタイプのメニューとして表示されるようになります。チェックのON/OFFは、同様にdata-win-optionsに「selected」という項目で用意します。これがtrueならばチェックはONになります。

このメニューのチェック状態を調べるには、DOMオブジェクトを取得し、そのwinControlプロパティの「selected」の値を取得します。サンプルでは、ボタンをクリックした時、以下のようにしてチェック状態を取得しています。
var sel = event.target.winControl.selected;
イベント用の関数では引数にeventオブジェクトが渡され、そのtargetでイベントの発生したDOMオブジェクトが得られます。そのwinControl.selectedを取得すればチェック状態がわかる、というわけです。

・セパレーター
<hr data-win-control="WinJS.UI.MenuCommand" 
    data-win-options="{type:'separator', section:'global'}" />
セパレーター（メニュー項目の間に表示される仕切り）は、data-win-options属性の中に「type:'separator'」という値を用意します。これでセパレーターとして表示されるようになります。注意したいのは、これは<div>タグではなく、<hr />タグを使う、という点でしょう。


●メニューの表示
《DOMオブジェクト》.winControl.show( DOMオブジェクト , 表示場所 );
メニューの表示は、data-win-control="WinJS.UI.MenuCommand"を設定した<div>タグのDOMオブジェクトからwinControl.showを呼び出します。引数には、表示場所の基準となるDOMオブジェクト（アンカー）と、表示場所を示す値（"top", "bottom", "right", "left"）を指定します。これは、フライアウトを表示する時と同じですね。

ここでは、show(event.target, "bottom"); というようにしてshowを呼び出しています。event.targetをアンカーにして、その下に表示させていた、というわけです。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※default.htmlへの追記

<div data-win-control="WinJS.UI.Menu" id="menu1">
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-options="{label:'First Item', section:'global'}"></button>
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-options="{label:'Second Item', tye:'toggle', selected:'true', section:'global'}"></button>
    <hr data-win-control="WinJS.UI.MenuCommand" 
        data-win-options="{type:'separator', section:'global'}" />
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-options="{label:'Last Item', section:'global'}"></button>
</div>


※app.onactivatedに用意する記述

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.
            ApplicationExecutionState.terminated) {} else {}
        args.setPromise(WinJS.UI.processAll().then(function completed() {
            var button1 = document.getElementById("button1");
            button1.addEventListener("click", button1Click, false);
            var tgglbtn1 = document.getElementById("togglebtn1");
            tgglbtn1.addEventListener("click", tgglbtn1Click, false);
            }));
    }
}


※イベント処理用関数

function button1Click(event) {
    document.getElementById("menu1").winControl.show(event.target, "bottom");
}
function tgglbtn1Click(event) {
    var sel = event.target.winControl.selected;
    ……処理を用意……
}
※関連コンテンツ

「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る