PhoneGap: Startup or Bootstrap Javascript & index file


init.js

// collected from: Jamie Munro

// Global variable that will tell us whether phonegap is ready
var isPhoneGapReady = false;

function init(){
    // onDeviceReady will be fired: soon as device is ready
    document.addEventListener('deviceready', onDeviceReady, false);
}

function onDeviceReady() {
    isPhoneGapReady = true;

    console.log('*Device is ready');
    console.log('*Device UUID: ' + device.uuid);
    console.log('*Device Platform: ' + device.platform);
    console.log('*Device Name: ' + device.name);
    console.log('*Device Version: ' + device.version);

    networkDetection();

    // attach events for online and offline detection
    document.addEventListener("online", onOnline, false);   // fired: soon as user go online
    document.addEventListener("offline", onOffline, false); // fired: soon as user go offline
}

function networkDetection(){
    if(isPhoneGapReady) {
        if(navigator.network.connection.type != Connection.NONE) {
            console.log('*Internet Available: ' + navigator.network.connection.type);
        }
        /*
         navigator.network.connection.type values:

         consider slow internet connection
         Connection.UNKNOWN
         Connection.CELL_2G

         consider fast internet connection
         Connection.CELL_3G
         Connection.WIFI
         */
    }
}

function onOnline(){
    console.log('*user connected Online');
}

function onOffline(){
    console.log('*user goes Offline');
}

// fired: when the application first loads
window.onload = init;

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Cordova</title>

    <!--Jquery Mobile library with respective css files added -->

    <link rel="stylesheet" href="styles/jquery.mobile-1.2.0.min.css"/>
    <link rel="stylesheet" href="styles/jquery.mobile.structure-1.2.0.min.css"/>
    <link rel="stylesheet" href="styles/jquery.mobile.theme-1.2.0.min.css"/>

    <script type="text/javascript" charset="UTF-8" src="scripts/cordova-2.0.0.js"></script>
    <script type="text/javascript" charset="UTF-8" src="scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="scripts/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="scripts/common.js"></script>
</head>
<body>

<h1>Hello Phonegap</h1>

<div data-role="footer" data-position="fixed">
    <div data-role="navbar" data-theme="e">
        <ul>
            <li><a href="index.html" class="ui-btn-active">Home</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
    </div>
</div>

</body>
</html>

phonegap first screen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s