Use jQuery Mobile to implement the Mobile news browser (Chapter 3) (1)

In the first two articles in this tutorial, I will introduce how to design a Mobile news browser using the jQuery Mobile framework, which implements a WEB-based news browser, in the last article of this tutorial, we will explain how to migrate the news browser of the implemented web version to the Android mobile phone. Note that, this article hopes that readers will have some basic Android knowledge.

Migrate to the Android app

In androidapplications, index.html will be used as an interface. We will compile an androidactivityclass to integrate index.html into android applications.

Modify index.html

First, modify NEWS_URI in index.html:

 
 

  
  
var NEWS_URI = 'http://rss.news.yahoo.com/rss/'; 
 
 

Because we have not used bridge.php here, and we have integrated index.html into the Android application, there is no cross-origin ajax access problem. Next we will make the following changes:

 
 

  
  
var EMPTY = ''; 
  
  
... 
  
  
function changeLocation(varURI){ 
  
  
  showProgress(); 
  
  
  $.get(EMPTY,function(data){ 
  
  
    window.location = varURI; 
  
  
  }); 
  
  
} 
 
 

The changeLocation () method will be called in android. webkit. WebViewClient. This method is mainly used to jump from the news classification page to the news details page.

1. First, showProgress () is used to display the waiting status of the Progress icon;

2. jQuery's get () method is actually a specific jQuery ajax () method. In the get method, we pass in an empty string and a callback event handle, set window. location is the address of the page for viewing specific news content. After the news content detail page is loaded, the wait icon is replaced to display the details of the news content page;

3. Because the browser progress bar exists in the web version, the changeLocation method is not necessarily required, but on mobile devices, there is a waiting icon that can give users a good user experience.

Compile Activity Class

Next, write the NewsActivity class. The Code is as follows:

 
 

  
  
package com.news; 
  
  
 
  
  
import android.app.Activity; 
  
  
import android.webkit.WebView; 
  
  
import android.os.Bundle; 
  
  
... 
  
  
public class NewsActivity extends Activity { 
  
  
    WebView mWebView; 
  
  
 
  
  
  public void onCreate(Bundle savedInstanceState) { 
  
  
    super.onCreate(savedInstanceState); 
  
  
    setContentView(R.layout.main); 
  
  
 
  
  
    mWebView = (WebView) findViewById(R.id.webview); 
  
  
    mWebView.setWebViewClient(new NewsClient()); 
  
  
    mWebView.getSettings().setJavaScriptEnabled(true); 
  
  
    mWebView.getSettings().setDomStorageEnabled(true); 
  
  
    mWebView.loadUrl("android_asset/www/index.html"); 
  
  
  } 
  
  
  ... 
  
  
} 
 
 

1. First, in the onCreate method, call the setContentView method to load the R. layout. main layout file in the res/layout folder;

2. Next, we use findViewById (R. id. webview) Get a WebView control instance and design a custom WebViewClient instance as a parameter for the WebView control. The custom WebViewClient is named NewsClient. We will introduce it later. Then we set the WebView container to support Javascript and Dom;

3. Finally, use loadUrl to load the previously created android_asset/www/index.html. On the news details page, when the user clicks the back button, the news category page is returned, in Android, we can capture the onKeyDown event Code as follows:

 
 

  
  
public class NewsActivity extends Activity { 
  
  
    WebView mWebView; 
  
  
  public boolean onKeyDown(int keyCode, KeyEvent event) { 
  
  
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { 
  
  
      mWebView.goBack(); 
  
  
      return true; 
  
  
    } 
  
  
    return super.onKeyDown(keyCode, event); 
  
  
  } 
  
  
  ... 
  
  
} 
 
 

Next, let's take a look at how to compile a custom WebViewClient. The Code is as follows:

 
 

  
  
public class NewsActivity extends Activity {  
  
  
    WebView mWebView;  
  
  
  private class NewsClient extends WebViewClient {  
  
  
  
  
  
    public boolean shouldOverrideUrlLoading(WebView view, String url) {  
  
  
      view.loadUrl("javascript:changeLocation('" + url + "')");  
  
  
      return true;  
  
  
    }  
  
  
  }  
  
  
...  
  
  
}  
 
 

First, we inherit the WebViewClient Android built-in browser class and overwrite the shouldOverrideUrlLoading method. In this method, we call the previously written changeLocation method, if we do not define our own WebViewClient, the detailed news content page will be displayed in a separate new browser, we want the news content page to be displayed on the same browser page.