Hybrid App Development: Using WebView to Load Pages

Hybrid App is the abbreviation of hybrid mode application, which has the advantages of both Native App and Web App, with low development cost and cross-platform characteristics of Web technology. Currently, all the middleware-based mobile development frameworks we know of adopt the Hybrid development model, such as PhoneGap , Titanium, Sencha from abroad, and AppCan, Rexsee, etc. from China. The Hybrid App development model is being recognized by more and more companies and developers, and I believe it will become the mainstream mobile application development model in the future.

The principle of Hybrid App fusion Web App is to embed a WebView component, in which you can load pages, which is equivalent to an embedded browser. The code is as follows:

 import android.app.Activity;
 import android.os.Bundle;
 import android.webkit.WebSettings;
 import android.webkit.WebView; 
  
 public   class AActivity extends Activity{ 
      
 @Override  
 public   void onCreate(Bundle savedInstanceState) {
 super .onCreate(savedInstanceState);
 // Create a WebView  
        WebView webView= new WebView( this );
 // Switch to the content view  
        setContentView(webView);
 // Get WebView configuration  
        WebSettings ws = webView.getSettings();
 // Enable JavaScript  
        ws.setJavaScriptEnabled( true );
 // Load a page in the assets directory  
        webView.loadUrl( "file:///android_asset/www/BoBox/index.html" );
 }
 }

Another way to introduce it is to add the WebView component in the layout file. The code is as follows:

 <? xml   version = "1.0"   encoding = "utf-8" ?>   
 < LinearLayout   xmlns:android = "http://schemas.android.com/apk/res/android"   
 android:orientation = "vertical"   
 android:layout_width = "fill_parent"   
 android:layout_height = "fill_parent" >    
       
 < WebView    
 android:layout_width = "fill_parent"   
 android:layout_height = "wrap_content"   
 android:id = "@+id/webview"   
 />    
           
 </LinearLayout>​​

 import android.app.Activity;
 import android.os.Bundle;
 import android.webkit.WebSettings;
 import android.webkit.WebView; 
  
 public   class BActivity extends Activity{ 
  
 @Override  
 public   void onCreate(Bundle savedInstanceState) {
 super .onCreate(savedInstanceState);
        setContentView(R.layout.webview);
 // Find WebView  
        WebView webView = (WebView) findViewById(R.id.webview);
 // Get WebView configuration  
        WebSettings ws = webView.getSettings();
 // Enable JavaScript  
        ws.setJavaScriptEnabled( true );
 // Load a page in the assets directory  
        webView.loadUrl( "file:///android_asset/www/index.html" );
 }
 }

WebView also has a very important method - addJavascriptInterface, which can be used to implement mutual calls between Java programs and JavaScript programs. The code is as follows:

 webView.addJavascriptInterface( new Object(){
 public   void clickOnAndroid(){
        mHandler.post( new Runnable(){
 public   void run(){
                webView.loadUrl( "javascript:wave()" );
 }
 });
 }
 }, "demo" );

The page code is as follows:

 < script >  
 function wave() {
        document.getElementById("id") .innerHTML = "Hello World!" ;
 }
 </ script >  
 </ head >  
 < body >  
 < div >  
 <​   href = "#"   id = "demo"   onclick = "window.demo.clickOnAndroid()" > Click Me </ a >  
 </ div >  
 </ body >  
 </ html >  

In this way, when you click the Click Me button on the page, the clickOnAndroid function in the Java code will be called, and the clickOnAndroid function will call the wave method in the page. It should be noted that this interface will cause WebView to crash when running in the Android 2.3 version of the emulator, and it has not been fixed yet. This is a very simple example of demonstrating the mutual calls between Java and JavaScript. In actual applications, the clickOnAndroid function called by the page can call device functions such as camera, address book, notification reminder, etc.