PG.Lib

アプリ開発関連とかガジェット関連とか

トップ > Cordova > デザインをするところ、ロジックを書くところ

デザインをするところ、ロジックを書くところ

Cordova UWP

いざアプリを作ろう！となったら、どこへコードを書けばいいのか、最初しばらく探してしまった。

デザインするところ

これは以前の説明の中にもあったが、www/index.htmlを直接記述する。

SS

普通にHTMLなので、Web開発経験者であれば問題ないと思う。

C#なアプリでいうところの、XAMLに当たる部分かなと。

HTMLなので共通的なデザインはCSSへの記述が望ましい。

基本的には、www/css/index.cssへ記述をしていくことになるが、用途に合わせてファイル追加、linkタグを追記で対応する。

SS

 

ロジックを書くところ

このTipsは基本TypeScriptで話を進めていく。

（JavaScriptなUWPだとちょっと違うと思う）

ロジックは、scripts/index.tsに記述する。

SS

中を見ると初期化時や停止時のイベントが定義されている。

module BlankCordovaApp3 {
    "use strict";

    export module Application {
        export function initialize() {
            document.addEventListener('deviceready', onDeviceReady, false);
        }

        function onDeviceReady() {
            // Cordova の一時停止を処理し、イベントを再開します
            document.addEventListener('pause', onPause, false);
            document.addEventListener('resume', onResume, false);

            // TODO: Cordova が読み込まれました。ここで、Cordova を必要とする初期化を実行します。
        }

        function onPause() {
            // TODO: このアプリケーションは中断されました。ここで、アプリケーションの状態を保存します。
        }

        function onResume() {
            // TODO: このアプリケーションが再アクティブ化されました。ここで、アプリケーションの状態を復元します。
        }

    }

    window.onload = function () {
        Application.initialize();
    }
}

起動時の処理はこちらに書くことになるだろう。

 

当然のことながらwww/scripts配下にJSファイルを追加して、HTMLでscript参照するのもアリだと思うけど・・・。

最初のロジックで見るべきところがwww配下ではなかったので。

 

ちなみにデバッグ実行すると、index.tsがappBundle.jsに変換されて読み込まれてるのがわかる。

SS