CODEWITHSUNDEEP
javascriptandroidhtmlcsscordova
Vinod Kumar Marupu
Vinod Kumar Marupu

Reputation: 547

Apache Cordova - Hybrid Mobile Application page opening like a chrome browser not like cordova application

I'm working on Cordova to develop the hybrid mobile application using HTML, CSS and Javascript.

How can we redirect from one page to other pages not like browser application, it must be Cordova application.

It is working good in a browser but if I generate the .apk file and deploy onto the mobile device it is working like web application not like Cordova application. Here, I'm using coding like window.open(),window.location.href() and window.location.replace().

          $(document).ready(function() {
            $("#btn4").click(function() {
                $lname = $("#lname").val();
                $.ajax({
                    url: 'http://localhost:8080/RESTfulDemoDerby/webresources/com.mss.mmxregistration/session',
                    data: {lname: $lname},
                    type: 'GET',
                    crossDomain: true,
                    ContentType: 'html/text',
                    dataType: 'text',
                    cache: false
            }).done(function(response) {

                   if (response== 'success') {
   window.location.href='http://localhost:8383/HTML5Application1/listform.html';
                   }
                    else {
                 window.location.replace("http://localhost:8383/HTML5Application1/login1.html");

                    }

             }).fail(function(request, textStatus, errorThrown) {
                    //   alert(url);

                    alert(textStatus + " : " + errorThrown.toString());
                });
            });
        });

let me clarify doubt that can we can add a PhoneGap plugin to Cordova application? Because both are different platforms to develop the hybrid application using HTML, CSS and Javascript.

Upvotes: 2

Views: 800

Answers (1)

Sithys
Sithys

Reputation: 3803

You should take a deeper look into cordova/phonegap and the whole thing about this. The normal way for building an hybrid application with phonegap/cordova would be to set up a single-page-application.

That means, that you use a framework: For example - jquery mobile. With help from this framework you're able to set up a single-page-application.

You can set up persistent toolbars for example. After you did that you can navigate through the pages via a normal <a href="#pageID">Page 2</a> where #pageID has to be the id from the page you want to navigate to.

Single-Page Application Template would look like this:

<div data-role="page" id="page1" data-title="Page 1">
    <div class="content">
        <a href="#page2">Testcontent Page 2 - Go to Page 2</a>
    </div>
</div>

<div data-role="page" id="page2" data-title="Page 2">
    <div class="content">
        <a href="#page1">Testcontent Page 2 - Back to Page 1</a>
    </div>
</div>

data-title="Page 1" is the title which will be automatically changed through JavaScript and jQuery. It'll replace the <h1></h1> Tags content inside your persistent header.

Just Google for Single Page Application Cordova Tutorial or things like that, there a tons of results.

Cordova Documentation 5.0

PLUGINS IN CORDOVA

Cordova wouldn't be as well known as it is, if there were not those great plugins. The list of plugins is nearly endless and from day to day there are new ones.

You can install a plugin via terminal.

  1. cd yourProject
  2. cordova plugin add cordova-plugin-pluginName where pluginName would be the name of that plugin. For example: console
  3. cordova plugin add cordova-plugin-console

After you added such a plugin to your project, you're going to run the build command (cordova build - integrate the "plugin add process" inside your normal way of building an application.

So now after you added the plugin you want to, you can use the commands the plugin brings with. But attention: You have to wait for the deviceReady event, before you can use your plugins.

Example for the DeviceReady Event

<!DOCTYPE html>
<html>
  <head>
    <title>Device Ready Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // device APIs are available
    //
    function onDeviceReady() {
        // Now safe to use device APIs
    }

    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>

You can find detailed information about that event and all the other events inside the cordova events docs.

Upvotes: 2

Related Questions