Well, the answer is, WebView can help to create wonderful Mobile UI without the pain of Android's Layouts. Sometime simple is not that simple! Before even I know about WebView, to me Android's XML based UI option was the simplest in the world. But Android can go beyond that....It provides the amazing WebView which lets you to develop UI in World's most simple language i.e. HTML/JavaScript. So, simple can be that simple..what do you think :-)
As I'll move on and start describing more about WebView, probably few questions already started hovering....How do I call my Android Activity or Java classes from my WebView ? or How do I call a JavaScript method from my Android Activity ? These are valid questions and answer is, both of them are possible with WebView and I'll explain both of them. So, its cool right!!
WebView is the same programming construct which runs behind Android's browser. So "ideally" you can run everything on WebView which you can on Android browser i.e. Flash, HTML. JavaScript, JQuery, Mobile JQuery etc. It helps in-terms of reducing the development effort while replicating UI of Web platform to Mobile.
Let's start with coding. WebView is a sub-class of View so you can set an instance of it on the screen by calling setContentView() of your Activity class. I'll first create and initialize an WebView instance-
Now set the HTML/Flash Web resource to WebView (local stored in asset folder or remote resource hosted on Server)-
There will be a loading delay depending upon whether it is a Local or Server resource, moreover there will be rendering delay as well. To know when page loading is over, we can set callbacks-
While WebView process the page, you can show helpful progress dialog to users. shouldOverrideUrlLoading() method makes sure all HREF link clicks gets resolved by WebView instead of launching Android Browser.
Now, you can set the mWebView on the screen and that's it!!
Lets do a bit more interesting stuff. I'll put a button on my HTML page which will Call a JavaScript method and that method indirectly Call a Java Method. Java method will show a progress dialog and then call another JavaScript method to update text of some HTML DIV element. Please find the attached sample code, AndroWebView.zip.
To make a Java Class's methods accessible to JavaScript code, we need to register an instance of the class with a constant name which we'll refer as JavaScript object-
To call methods of this Java class from JavaScript, you first need to check whether it supports "native_java" object and if it supports, you can call its methods (getDataFromJava() is defined in JSImp.java),
Here one thing you need to keep in mind while calling Activity/View instance from JavaScript; JavaScript/WebView runs in a different thread, so any Activity/View specific calls should be performed using Handler running on UI Thread.
Now, lets check how to call a JavaScript method from Java. It is simple, but you need to just make sure, you call a JavaScript method only when page loading is done by WebView.
There are few limitations like, you can only exchange primitive data type values from JavaScript-to-Java and vice verse. So, to avoid this limitation, you can convert complex object structure to JSON string and pass them as String argument between JS-Java.
With the latest JavaScript frameworks like JQuery Mobile you can create fancy Mobile UI using just HTML (or HTML5) and JavaScript. This reduces significantly the development effort and the complexity of UI layouts.
So, next time when you start to design Android UI, you can give a thought to create that in HTML/JavaScript and with WebView....:-) with this I'm signing off and hope it helps....
As I'll move on and start describing more about WebView, probably few questions already started hovering....How do I call my Android Activity or Java classes from my WebView ? or How do I call a JavaScript method from my Android Activity ? These are valid questions and answer is, both of them are possible with WebView and I'll explain both of them. So, its cool right!!
WebView is the same programming construct which runs behind Android's browser. So "ideally" you can run everything on WebView which you can on Android browser i.e. Flash, HTML. JavaScript, JQuery, Mobile JQuery etc. It helps in-terms of reducing the development effort while replicating UI of Web platform to Mobile.
Let's start with coding. WebView is a sub-class of View so you can set an instance of it on the screen by calling setContentView() of your Activity class. I'll first create and initialize an WebView instance-
Now set the HTML/Flash Web resource to WebView (local stored in asset folder or remote resource hosted on Server)-
There will be a loading delay depending upon whether it is a Local or Server resource, moreover there will be rendering delay as well. To know when page loading is over, we can set callbacks-
While WebView process the page, you can show helpful progress dialog to users. shouldOverrideUrlLoading() method makes sure all HREF link clicks gets resolved by WebView instead of launching Android Browser.
Now, you can set the mWebView on the screen and that's it!!
Lets do a bit more interesting stuff. I'll put a button on my HTML page which will Call a JavaScript method and that method indirectly Call a Java Method. Java method will show a progress dialog and then call another JavaScript method to update text of some HTML DIV element. Please find the attached sample code, AndroWebView.zip.
To make a Java Class's methods accessible to JavaScript code, we need to register an instance of the class with a constant name which we'll refer as JavaScript object-
To call methods of this Java class from JavaScript, you first need to check whether it supports "native_java" object and if it supports, you can call its methods (getDataFromJava() is defined in JSImp.java),
Here one thing you need to keep in mind while calling Activity/View instance from JavaScript; JavaScript/WebView runs in a different thread, so any Activity/View specific calls should be performed using Handler running on UI Thread.
Now, lets check how to call a JavaScript method from Java. It is simple, but you need to just make sure, you call a JavaScript method only when page loading is done by WebView.
There are few limitations like, you can only exchange primitive data type values from JavaScript-to-Java and vice verse. So, to avoid this limitation, you can convert complex object structure to JSON string and pass them as String argument between JS-Java.
With the latest JavaScript frameworks like JQuery Mobile you can create fancy Mobile UI using just HTML (or HTML5) and JavaScript. This reduces significantly the development effort and the complexity of UI layouts.
So, next time when you start to design Android UI, you can give a thought to create that in HTML/JavaScript and with WebView....:-) with this I'm signing off and hope it helps....
