プロジェクトにコードを追加していきましょう。まずは、アプリケーション（WinWebApp1）のApplication Barに「戻る」ボタンを一つ追加します。
WinJSやWindows Runtimeは、Metroスタイルアプリケーション用のUI部品（「コントロール」と呼びます）をあらかじめ用意しています。Application Barとボタンはコントロールの一種です。このアプリケーションにおいてコントロールはHTMLのマークアップやJavaScriptのオブジェクトとして表現され、イベントハンドラはJavaScriptの関数として実装します。
Application Barに「戻る」ボタンを追加
ボタンを追加しましょう。ソリューションエクスプローラーのツリー上で、default.htmlをダブルクリックして、コードエディター上にコードを表示させます。コードの中から、id属性が"appbar"のdiv要素ブロックを見つけて（リスト2の(1)）、この要素ブロック内の既存のbutton要素ブロック（同(2)）の下に、もう一つbutton要素ブロック（同(3)）を追加します。
リスト2の(1)のdiv開始タグは、data-win-control属性を "WinJS.UI.AppBar"と指定しています。この指定によって、このdiv要素ブロックは、WinJSのAppBarコントロール（Application Bar）として扱われます。リスト2の(2)のbutton要素ブロックは、class属性に"win-command"と指定することで、Application Barのボタンとして定義されます。このコードの実行結果は、図18の左下部のボタンのように表示されます。ボタン内の家の形は、2行目に「家」を表す文字コード「＆#57615;」が記述されているためです。
リスト2の(3)のbutton要素ブロックが新規に追加するボタンです。ここでは、clickイベントハンドラ（click属性）として、doBack関数（後述）を指定しています。2行目の「＆#57557;」はこのボタンに表示される文字コードです。このボタンのスタイルは「Segoe UI Symbol」フォントを使用するようにデフォルトで指定されており、「＆#57557;」は左向き矢印に該当します。
次に、イベントハンドラに当たるdoBack関数を追加しましょう。ソリューションエクスプローラーのツリー上で、jsフォルダーの中のdefault.jsをダブルクリックしてコードエディターで開きます。default.jsの最後に、リスト3のコードを追加します。doBack関数ではまず、WinJSのback関数を呼び出してページを一つ前に戻します（リスト3の(1)）。次に、hide関数でApplication Barを非表示にします（同(2)）。
実行してみましょう。メニューで［Debug］→［Start Debugging］を選んでデバッガーを起動すれば、アプリケーションのビルドから再配置、実行まで行ってくれます。図16のように、マス目のタイル表示のページが表示されたら、タイルの一つをクリックして図17の詳細ページに切り替えます。画面の下端を上方向へ指でなぞるか、スクリーン下部の余白で右クリックして、Application Barを表示させてみましょう。［Back］ボタンが追加していることがわかります（図23）。［Back］ボタンを押すと、前のページに戻ってApplication Barが非表示になります。確認したら、画面をVisual Studioに切り替えて、［Debug］→［Stop Debugging］でデバッガーを停止してアプリケーションを終了します。
