Phonegap: How to show configuration screen only once

Question

I have started work on Phonegap and it is very hard for Native App developer to go for Hybrid.

Just want to know that how I can show configuration screen only once in Phonegap. Below is the screenshot. I just want to show it only when user runs an app first time, and not again and again whenever user launches an app and saves IP address.

eConfig Screen

The problem here is that, whenever I press back button of device, this screen gets display.

Here is my HTML:

<body>

<div data-role="page" id="pageConfig"> // This Div needs to show only first time

    <div class="ui-content" data-role="main">
        <h3>Configurations</h3>

        <label for="ipText">IP Address:</label>
        <input type="url" id="ipText" name="ipText" />
        <a href="#" class="ui-btn ui-btn-b ui-corner-all mc-top-margin-1-5" onclick="saveConfigs()">Save</a>
    </div>

</div>

<div data-role="page" id="pgLgn">

    <div data-role="main" class="ui-content">
        <form id="form1" class="validate">

            <div class="ui-field-contain">
                <label for="usrNme">Username:</label>
                <input type="text" name="usrNme" id="usrNme" placeholder="Username" data-clear-btn="true" data-theme="d" class="required" />
            </div>

            <div class="ui-field-contain">
                <label for="pswrd">Password:</label>
                <input type="password" name="pswrd" id="pswrd" placeholder="Password" data-clear-btn="true" data-theme="d" class="required" />
            </div>

            <div class="ui-field-contain">
                <input type="checkbox" id="chbx-0" class="custom" data-inline="true" />
                <label for="chbx-0">Remember me</label>
            </div>

            <input type="submit" data-inline="true" value="Login" id="btnLogin" data-shadow="false" data-theme="a" onclick="OnLoginClick()"/>
            <input type="reset" data-inline="true" value="Reset" data-shadow="false" />

        </form>
    </div>
</div>
</body>

What Cordova Plugin I need?

NOTE: I am using Jquery Mobile and Cordova SQLite Plugin for data storage. And my app is Single Page Architecture.

Thanks in Advance!

Please let me know if not clear.

ok! As per sessionStorage, it get erased whenever app is closed. http://stackoverflow.com/questions/18670731/sessionstorage-over-localstorage-in-phonegap — Faizan Mubasher, Feb 04 '15 at 06:31
use localstorage as @TamilSelvan suggested...and also restrict backbutton . — Aravin, Feb 04 '15 at 11:48
localStorage does work. Just one more thing! Does it work only in HTML5 or also in previous versions? — Faizan Mubasher, Feb 04 '15 at 13:15

score 2 · Accepted Answer · edited Feb 10 '15 at 05:34

2

You have to write this line in device ready function.

document.addEventListener("backbutton",onBackKeyDown,false);

function onBackKeyDown(){

 if($.mobile.activePage.attr("id") == "pgLgn"){
            navigator.app.exitApp();
        }
        else{
            navigator.app.backHistory();
}
}

Use localStorage. Save a simple string with key and check whether there is a particular value against key or not in deviceready function.

edited Feb 10 '15 at 05:34

Faizan Mubasher

4,427
11
45
81

answered Feb 04 '15 at 11:30

Akshay Tyagi

528
4
7

change your page id as per your need – Akshay Tyagi Feb 04 '15 at 11:33
This is good and working. Just tell me, is this only way to handle back button of device? – Faizan Mubasher Feb 06 '15 at 05:23
I Don't Know...Bt its a convenient way to handle Back Button in Phonegap – Akshay Tyagi Feb 09 '15 at 10:55

Phonegap: How to show configuration screen only once

1 Answers1