Ubuntu14.04にCordovaの開発環境を構築してFirefoxOSとAndroidアプリを作ってみる

画面が切り替わるようにする 編

今回は画面が切り替わるようにする。

1. ライブラリの導入

前回、画面を追加したが、画面が重なったままだった。これをまずはなんとかする。
いよいよJavaScriptを書く訳だが、ここで便利なライブラリを導入する。

Backbone.js
ごちゃごちゃになりがちなJavaScriptをすっきりした状態にしてくれる。
ModelとViewにレイヤー分けしてJavaScriptが読みやすくなる。

http://backbonejs.org/ よりbackbone-min.jsをダウンロード。

Backbone.jsは以下のライブラリに依存しているのでこれもダウンロード。
・Underscore.js ( >= 1.4.3) またはLo-Dash
・json2.js
・jQuery ( >= 1.7.0)またはZepto

全部、www/jsフォルダにコピー。
www/index.htmlに以下を追加。

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script> 

<script type="text/javascript" src="js/backbone-min.js"></script>

ソースのコメント：@@@1

2. 重なった画面をなおす

JavaScriptで画面を切り替える。
Opening画面だけを表示して他は非表示にする。

www/js/index.jsに以下を追加。

var ViewOpening = Backbone.View.extend({
    el : "#opening",
});

var ViewSettings = Backbone.View.extend({
    el : "#settings",
});

var ViewMain = Backbone.View.extend({
    el : "#main",
});

var viewOpening = new ViewOpening;
var viewSettings = new ViewSettings;
var viewMain = new ViewMain;
var view = {
    showOpening: function() {
        viewOpening.$el.show();
        viewSettings.$el.hide();
        viewMain.$el.hide();
    },
    showSettings: function() {
        viewOpening.$el.hide();
        viewSettings.$el.show();
        viewMain.$el.hide();
    },
    showMain: function() {
        viewOpening.$el.hide();
        viewSettings.$el.hide();
        viewMain.$el.show();
    },
};
 

view.showOpening(); 

ソースのコメント：@@@2

3. 設定画面を表示

オープニング画面の右上のギア（設定アイコン）を押すと設定画面に切り替わるようにする。

まず、ギア（設定アイコン）にIDを付ける。
www/index.htmlに以下を追加。

<span id="settings_button" class="icon icon-settings">settings</span>

www/js/index.jsに以下を追加。

var ViewOpening の中に追加

    events : {
        "click #settings_button" : "settingsButtonClicked",
    },
    
    settingsButtonClicked: function() {
        view.showSettings();
    },

ソースのコメント：@@@3

4. 設定から戻る

設定画面が表示されるようになった。
今度は、「done」を押すとオープニング画面に戻るようにする。

「done」ボタンにIDを付ける。
www/index.htmlに以下を追加。

<button id="settings_done">done</button>

www/js/index.jsに以下を追加。

var ViewSettings の中に追加

    events : {
        "click #settings_done" : "settingsDoneClicked",
    },
    
    settingsDoneClicked: function() {
        view.showOpening();
    },

ソースのコメント：@@@4

5. メイン画面を表示

オープニング画面の「Start」ボタンを押すとメイン画面に切り替わるようにする。

「Start」ボタンにIDを付ける。
www/index.htmlに以下を追加。

<button id="start_button">Start</button>

www/js/index.jsに以下を追加。

var ViewSettings の中に追加

    events : {
        "click #settings_done" : "settingsDoneClicked",

        "click #start_button" : "startButtonClicked", //これを追加

    },
    
    startButtonClicked: function() {
        view.showMain();
    },

ソースのコメント：@@@5

今日の全ソースはこちら

これで、Cordovaで「Hello World」はおしまい。

次回は、これをベースにしてちょっとしたアプリを作ってマーケットプレイスにリリースするまでをやりたい。