メッセージダイアログとフライアウト (2/4)
作成:2012-11-12 08:31
更新:2012-11-12 08:31
更新:2012-11-12 08:31
■ダイアログにボタンを追加しよう
メッセージダイアログは、メッセージを表示するだけでなく、ボタンを追加することもできます。世の中の多くのダイアログでは、「OK」と「Cancel」のようにいくつかのボタンを表示し、どのボタンを押したかによって処理を決めるようなものがあります。こうしたダイアログも簡単に作ることができるのです。
MessageDialogに表示されるボタンは、オブジェクトの「commands」というプロパティで管理されています。ここには、後述するUICommandの配列が用意されており、ここにオブジェクトを追加することで、表示されるボタンが変更できるのです。
では、簡単なサンプルを下のリスト欄にあげておきましょう。ボタンをクリックすると、2つのボタンを持ったメッセージダイアログが現れます。ここでどちらかのボタンを押すと、選択したボタン名が表示されます。
ここでは、UICommandの第2引数にはnullを指定しておき、showAsync().doneで終了時の処理をしています。UICommandでボタンを追加した場合も、このdoneによる処理はちゃんと機能します。
MessageDialogに表示されるボタンは、オブジェクトの「commands」というプロパティで管理されています。ここには、後述するUICommandの配列が用意されており、ここにオブジェクトを追加することで、表示されるボタンが変更できるのです。
《MessageDialog》.commands.append( オブジェクト );このような具合です。引数に指定する「ボタンを扱うオブジェクト」は、Windows.UI.Popups.UICommandというオブジェクトとして用意されます。
new Windows.UI.Popups.UICommand( 表示テキスト , 選択時の処理)このようにしてUICommandオブジェクトは作成します。第1引数には表示するテキストを、そして第2引数にはボタンを選択した時に実行する処理(通常は関数として用意)をそれぞれ用意します。――複数のボタンを追加した場合には、どのボタンがデフォルトで選択されるかを指定できます。
《MessageDialog》.defaultCommandIndex = ボタンの番号;このdefaultCommandIndexは、デフォルトで選択されるボタンの番号を示すプロパティです。これで番号を指定することでそのボタンがデフォルトに設定されます。注意したいのは、「最初に追加したボタンが1番になる」ということです。インデックス番号のようにゼロから開始されないので間違えないように。
では、簡単なサンプルを下のリスト欄にあげておきましょう。ボタンをクリックすると、2つのボタンを持ったメッセージダイアログが現れます。ここでどちらかのボタンを押すと、選択したボタン名が表示されます。
ここでは、UICommandの第2引数にはnullを指定しておき、showAsync().doneで終了時の処理をしています。UICommandでボタンを追加した場合も、このdoneによる処理はちゃんと機能します。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※doActionの修正 function doAction(event) { var field = document.getElementById("text1"); var msg = document.getElementById("msg"); msg.textContent = "show message dialog!"; var dlog = new Windows.UI.Popups.MessageDialog("どっち?"); dlog.commands.append(new Windows.UI.Popups.UICommand("オバマ", null)); dlog.commands.append(new Windows.UI.Popups.UICommand("ロムニー", null)); dlog.defaultCommandIndex = 1; dlog.showAsync().done(function (command) { if (command) { msg.textContent = "あなたは「" + command.label + "」を選びました。"; } }) }
※関連コンテンツ
「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る