Cordova Android App - 開始創造 App


新建立的Cordova專案,預先封裝了必要的內容,展開專案視窗中的www節點,其中的Index.html為預設的App啟動內容,因此當你執行App時,會看到其中是一個標準的網頁內容,你可以加入任何想要的HTML標籤與CSS,建立自己的App視覺介面。



Cordova可以直接利用HTML5技術開發各種裝置平台適用的App,因此你必須理解HTML標籤、CSS樣式以及JavaScript在Cordova專案結構中的配置,才能正確的建立行動App。

HTML標籤與一般的網頁設計無異,只要在適當的位置配置合適的標籤即可,CSS寫在行內或是外部引用均可,而在Cordova專案中,如你所見,預設配置於css資料夾中的index.css樣式檔中。

JavaScript的部份必須特別注意,在之前預先配置了三組外部JavaScript 檔案,除了Cordova相關功能,最後一行引用script資料夾中index.js 檔案,為 App 專屬的JavaScript,開發者需要的JavaScript預設會寫在這個JavaScript檔案中,將其展開來看看其中的內容。

// 如需空白範本的簡介,請參閱下列文件:
// http://go.microsoft.com/fwlink/?LinkID=397704
// 若要針對在 Ripple Android 裝置/模擬器上載入的頁面…
// 然後在 JavaScript 主控台中執行 "window.location.reload()"
(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // 處理 Cordova 暫停與繼續事件
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
       
        // TODO: Cordova 已載入。請在這裡執行任何需要 Cordova 的初始化作業。
    };

    function onPause() {
        // TODO: 這個應用程式已暫停。請在這裡儲存應用程式狀態。
    };

    function onResume() {
        // TODO: 這個應用程式已重新啟動。請在這裡還原應用程式狀態。
    };
} )();

其中註冊了 deviceready 事件,同時配置了事件的回應處理函式onDeviceReady(),在這個函式中,另外註冊pause與resume事件,分別於App暫停以及重新啟動時被觸發,如果想在App暫停或重新啟動時進行相關的事件處理,可以將程式碼寫分別在 onPause() 與onResume()這兩個函式中。

onDeviceReady() 是非常重要的方法,當行動裝置準備好表示App可以開始正常運作時,便會觸發deviceready事件並執行這個函式,因此若要確保App正常執行,必須將啟動執行的相關程式碼寫在這個函式當中。

Cordova專案還有更多的細節必須討論,例如外掛的運用,不過具備初步的概念之後,我們先來進行一些簡單的App開發。切換至 index.html,配置以下的標籤:

<body>
    <p>加法訓練</p>

    <label id="a" ></label> + <label  id="b" ></label> =<input id="result" />
    <div id="buttons">
        <button id="ebutton" type="button">解答</button>
        <button id="nbutton" type="button">下一題</button>
    </div>

    <!-- Cordova 參考,建置後會加入您的應用程式。 -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/index.js"></script>
</body>

接下來開啟 index.css ,輸入以下的CSS樣式以調整合適的配置呈現。

input, label {
    display: inline-block;
    width: 22%;
    font-size: 1.4em;
    margin: 0 0.2em;
    border: 1px solid silver;
    text-align: center;
}
label {
    color: gray;
}
button {
    width: 40%;
    font-size: 1.4em;
}
#buttons {
    margin: 1em;
    text-align: center;
}

最後調整index.js,撰寫以下的程式碼:

(function () {
    "use strict";
    var a, b;
    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
    function onDeviceReady() {
        // 處理 Cordova 暫停與繼續事件
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener('resume', onResume.bind(this), false);
        next();
        document.getElementById('nbutton').onclick = function () {
            next();           
        }
        document.getElementById('ebutton').onclick = function () {   
             if ( (a + b) == parseInt(document.getElementById('result').value))
                alert("TRUE");
            else
                alert("FALSE");

             document.getElementById('result').focus();
             document.getElementById('result').select();
        }
        // TODO: Cordova 已載入。請在這裡執行任何需要 Cordova 的初始化作業。
    };
    function onPause() {
        // TODO: 這個應用程式已暫停。請在這裡儲存應用程式狀態。
    };
    function onResume() {
        // TODO: 這個應用程式已重新啟動。請在這裡還原應用程式狀態。
    };
    function next() {
        a = Math.floor((Math.random() * 100) + 1);
        b = Math.floor((Math.random() * 100) + 1);
        document.getElementById('a').textContent = a;
        document.getElementById('b').textContent = b;
        document.getElementById('result').value = "";
        document.getElementById('result').focus();
    }
} )();

其中的next() 產生新數值以提供加法測驗,在onDeviceReady()方法中,分別註冊畫面上兩個按鈕的Click事件,支援新題目的建立以及結果驗證。以下是結果畫面:



受測者輸入計算結果,按「解答」按鈕可以顯示結果,按「下一題」按鈕則重新產生題目。



沒有留言: