The following section describes how android and javascript call each other. In this way, the UI is much simpler to design, and the UI can also be designed to be cross-platform. Now there are a lot of front-end web app frameworks, such as sencha and jquery mobile. We believe that with the development of web apps in the future, we can also use html to design an interface that is as beautiful as a local application. Although these are good, there are still many drawbacks. For example, they are much slower than local framework calls. Because mobile phones are restricted devices, the processing and response are slow, we hope that there will be great development in the future. Haha!
Let's just talk about it. Let's write a WebViewDemo to implement mutual calls between android and javascript.
Let's take a look at the controls used in main. xml:
<? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: orientation = "vertical">
<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "@ string/hello"/>
<WebView
Android: id = "@ + id/webView"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
/>
<Button
Android: id = "@ + id/button"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "calling javascript"
/>
</LinearLayout>
After that, we provided our demo.html webpage
Www.2cto.com
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Insert title here </title>
<Script type = "text/javascript">
Function show (content ){
Document. getElementById ("countent"). innerHTML =
"This is my javascript call. This is:" + content;
}
</Script>
</Head>
<Body>
<Table align = "center">
<Tr> <td> name </td> <td> phone number </td> </tr>
<Tr> <td> James </td> <a href = "javascript: demo. startPhone (123) "> 123 </a> </td> </tr>
<Tr> <td> JOHN </td> <a href = "javascript: demo. startPhone (456) "> 456 </a> </td> </tr>
</Table>
<P id = "countent"> html raw data </p>
</Body>
</Html>
At last, we attached our core code:
Public class WebViewDemoActivity extends Activity {
/** Called when the activity is first created .*/
Private WebView webView;
Private Button button;
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
WebView = (WebView) this. findViewById (R. id. webView );
Button = (Button) this. findViewById (R. id. button );
WebSettings setting = webView. getSettings ();
// Set to support javascript
Setting. setJavaScriptEnabled (true );
// Added an interface method for calling html pages
WebView. addJavascriptInterface (new Object (){
// Here I define a dialing method
Public void startPhone (String num ){
Intent intent = new Intent ();
Intent. setAction (Intent. ACTION_CALL );
Intent. setData (Uri. parse ("tel:" + num ));
StartActivity (intent );
}
}, "Demo ");
// Load the page
WebView. loadUrl ("file: // android_asset/demo.html ");
Button. setOnClickListener (new OnClickListener (){
@ Override
Public void onClick (View v ){
// TODO Auto-generated method stub
WebView. loadUrl ("javascript: show ('data Uploaded By activity ')");
}
});
}
This project uses a call, so do not forget this Code:
<Uses-permission android: name = "android. permission. CALL_PHONE"/>
The code is relatively simple and annotated, so I will not explain it too much here. Run the project below:
Html interface is not beautified, so it looks a little ugly. I believe the artist will do better, haha! Next, click the javascript call button:
We have seen that the activity calls the javascript method and transmits parameters to display in the html interface. Next we will click the phone number next to James to see what the response is:
OK! We have used html to call the activity method and started the system's call number.
From the wangkuifeng0118 Column
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
