Hybrid Mobile App, Hybrid Communications Part 1

4.71 avg. rating (93% score) - 7 votes

In your Android application, if you are using webView or cordovaWebView, you are probably using JavaScript in your HTML pages. However, using HTML pages and native pages separately will come in handy up to a point. At some time, it might be needed to make data transfer or function calling between those pages. In Android, native pages are written in Java while web pages use HTML, JavaScript etc.. In this post we are going to run a JavaScript function from Java, and send some data from Java to JavaScript!! More specifically, let’s first achieve a page transition of HTML pages by using only native Android buttons.

Call JavaScript function from Java

In the middle of our app, there is a webView, which is all the hybrid part of the app. In order to get this challenge to work, we got to define some function in JavaScript. Let’s add two divs, which will be used as two separate pages:

        <div id="firstpage">//contents of page one</div>
        <div id="secondpage">//contents of page two</div>
    

Then, hide the second page in CSS file:

        #secondpage{
            display:none;
        }
    

Now it’s time to write our main function which will do the opposite, i.e., hide the first page and show the second one. The snippet below right does it:

        <script type="text/javascript">
        function secondPage(){
            $("#firstpage").hide();
            $("#secondpage").fadeIn("slow"); 
        }
        </script>
    

The practice made here is actually the working mechanism of JQuery Mobile. In JQuery Mobile also pages are located in one HTML page which all have unique ID’s as separate divs. However the magic of “data-role=page” makes it through and no need for hide() or fade() remains. Anyway, we’ve just made this by only JQuery and now all we have to do is to trigger this. Calling this JavaScript from Java page is as follows;

        webview.loadUrl("javascript:secondPage()");
    

As you see, it is the same as loading an URL to our webView. But we only call a function by this method. In the first image below, the hybrid “data” page is opened, and in in the second one, the hybrid “plugin” page is opened by Android buttons:

data

plugin

Send data from Java to JavaScript

This is a little bit harder than calling a function. Because we have to create a JSON object and transfer it. As you see in the images, I created an EditText in Android to enter a data, which will be sent to the hybrid window. First we have to get the input as a string, then convert to JSON. And we need a function that will read this JSON on JavaScript section. Let’s first write this simple function, assuming we will generate a JSON object with on field “Value”. This function will also set the text named “datatransfer” in HTML page with the data entered:

        function setJson(Jsonobj)
        {
            var log="";	
            log = Jsonobj.Value ;
            document.getElementById("datatransfer").innerHTML = "Sent string: " + log;
        }
    

Let’s then generate the JSON object. In more detail, let’s add this code that converts the data from EditText named “text” inside the listener of the “send” button:

        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String s=text.getText().toString();
                JSONObject jObject = new JSONObject();
                try
                {
                    jObject.put("Value",s);
                }catch (JSONException e) 
                {
                    e.printStackTrace();
		} 
            webview.loadUrl("javascript:setJson("jObject")");
            }
        });
    

What we did here is, i.e. what happened when “send” button is pressed is converting this data to JSON and receive it by the function written in JavaScript. Now we have to ignite it. We should call this function setJson() wherever we want in our HTML page:

        <p id="datatransfer" onclick="setJson()">Sent string:</p>	
    

Let’s visualize what we have done so far. In the first image, the word “hello” is entered to the EditText, and in the second image, when the user clicks on the text “Sent string”, it’s value changes by appending the string entered to “Sent string: hello”:

send

receive

Posted in Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload the CAPTCHA.