appleTVでpush/pop画面遷移 #JavaScript

はじめに

前回記事の続きになります。
appleTVでpresentModal画面遷移
http://qiita.com/senseiswift/items/eccc7b48328484c25976

全回はpresentModalで画面を切り替えていましたが、
今回はpush/popで2つの画面間を遷移できるようにします。

やること

pushDocumentで1画面目をPUSH
pushDocumentで2画面目をPUSH
popDocumentで1つ前の画面に戻る

1. pushDocumentで1画面目をPUSH

main.js

// 起動時に呼ぶ1画面目をPUSHするメソッドです
function pushFirstXML() {

    var parser = new DOMParser();
    var alertDOMElement = parser.parseFromString(firstXMLString, "application/xml");
    alertDOMElement.addEventListener("select", /*  */, false);

    // 1画面目をPUSHします。
    navigationDocument.pushDocument(alertDOMElement);
}

2. pushDocumentで2画面目をPUSH

1画面目のボタンを押した時に2画面目をPUSHするように
イベントリスナーにセットします。

main.js

// 起動時に呼ぶ1画面目をPUSHするメソッドです
function pushFirstXML() {

    function pushSecondXML() {
        var parser = new DOMParser();
        var alertDOMElement = parser.parseFromString(secondXMLString, "application/xml");
        alertDOMElement.addEventListener("select", function(){/* */}, false);

        // 2画面目をPUSHします。
        navigationDocument.pushDocument(alertDOMElement);
    }

    var parser = new DOMParser();
    var alertDOMElement = parser.parseFromString(firstXMLString, "application/xml");
    alertDOMElement.addEventListener("select", pushSecondXML, false);

    // 1画面目をPUSHします。
    navigationDocument.pushDocument(alertDOMElement);
}

3. popDocumentで1つ前の画面に戻る

2枚目の画面のボタンを押した時にPOPするよう追記します。

main.js

// 起動時に呼ぶ1画面目をPUSHするメソッドです
function pushFirstXML() {

    function pushSecondXML() {
        var parser = new DOMParser();
        var alertDOMElement = parser.parseFromString(secondXMLString, "application/xml");

        // ボタンを押した時に、POPするようにします。
        alertDOMElement.addEventListener("select", function(){navigationDocument.popDocument();}, false);

        // 2画面目をPUSHします。
        navigationDocument.pushDocument(alertDOMElement);
    }

    var parser = new DOMParser();
    var alertDOMElement = parser.parseFromString(firstXMLString, "application/xml");
    alertDOMElement.addEventListener("select", pushSecondXML, false);

    // 1画面目をPUSHします。
    navigationDocument.pushDocument(alertDOMElement);
}

動作確認

pushFirstXML

準備が整ったので、実際に動かしてみましょう！
今回もmain.jsがあるディレクトリで、
「python -m SimpleHTTPServer 8000」するのを忘れないように注意してください。

また、起動時に呼ばれるmain.jsのApp.onLaunchで、
先ほど作成したpushFirstXML()を呼ぶようにしておきましょう。

また、アプリ起動後シミュレータの「HardWare > Show　Apple TV Remote」の順に選択して、
リモコンを表示しておきましょう。

1枚目

2枚目

まとめ

今回はpush/popを使って、複数のTVMLを遷移できるようになりました。

次回からはTVMLの様々なテンプレートを紹介していきます。

ソース全文はgithubを参考にしてください。
https://github.com/senseiswift/appleTVtutorial/commit/82d2faafea7d4471bdcb5ab0279e10448bb63a88