First, Introduction
Today, ANDROID+HTML5 development has become the most popular development model.
Android can be implemented by WebView and JS Interaction, in the program to invoke the JS code, only need to set the WebView control's support JS property to True
There are four scenarios in which Android (Java) interacts with JavaScript (HTML):
1) Android (Java) calls the HTML JS code
2) Android (Java) call HTML in JS code (with parameters)
3) JavaScript in HTML calls Android (Java) code
4) HTML in JavaScript call Android (Java) code (with parameters)
Ii. preparatory work
1. Add an Android project to add an HTML file named Test in assets
2. Add the following HTML code to test.html
<HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html;charset=gb2312"> <Scripttype= "Text/javascript">functionJavacalljs () {document.getElementById ("content"). InnerHTML+= "<br\>java called the JS function";}functionJavacalljswithargs (Arg) {document.getElementById ("content"). InnerHTML+= ("<br\>"+arg);} </Script></Head><Body>This is my HTML<BR/> <aOnClick= "window. Test.startfunction () ">Click Invoke Java Code</a><BR/> <aOnClick= "window. Test.startfunction (' Hello World ')>Click Invoke Java code and pass parameters</a> <BR/> <DivID= "Content">Content display</Div></Body></HTML>
View Code
3. Remove the crude oil control from the Main.axml file under the Layout folder and add the following controls
<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent"android:orientation= "vertical"> <WebViewAndroid:id= "@+id/webview"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent"Android:layout_weight= "9" /> <ScrollViewAndroid:id= "@+id/scrollview1"Android:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"> <TextViewAndroid:id= "@+id/msg"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent"Android:text= "text" /> </ScrollView> <ButtonAndroid:id= "@+id/button"Android:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"Android:layout_weight= "1"Android:text= "Java call js function" /></LinearLayout>
View Code
Third, the Code
1. Delete the original code in MainActivity.cs, replace the following code
[Activity (Label ="WebService", Mainlauncher =true, Icon ="@drawable/icon")] Public classMainactivity:activity, Button.ionclicklistener//the Click interface of the Inherit button { /// <summary> ///Defining Controls/// </summary> PublicWebView WebView; PublicTextView Msgtext; protected Override voidOnCreate (Bundle bundle) {Base. OnCreate (bundle); Setcontentview (Resource.Layout.Main); //Locate the controlWebView = findviewbyid<webview>(Resource.Id.webview); Msgtext= findviewbyid<textview>(RESOURCE.ID.MSG); //find the button and firm Click eventButton button = findviewbyid<button>(Resource.Id.button); button. Setonclicklistener ( This); WebView. Settings.javascriptenabled=true;//set webserver support JSWebView. Addjavascriptinterface ( This,"Test");//Add JS interfaceWebView. Loadurl ("file:///android_asset/Test.html");//load the address of the HTML//WebView. Loadurl (this. GetString (RESOURCE.STRING.URL));//If our HTML file is on the server side, you can fill the server-side address such as 127.0.0.1:91/test.html } Public voidOnClick (View v) {//no parameter callsWebView. Loadurl ("Javascript:javacalljs ()"); //passing parameter callsWebView. Loadurl ("Javascript:javacalljswithargs ("+"' Hello World '"+")"); } [Export ("startfunction")] Public voidstartfunction () {Runonuithread (NewRunnable (() ={Msgtext. Text= Msgtext. Text +"\njs called the Java function"; })); } /// <summary> ///when the user calls this method it passes over a parameter that we can get out and then display with the Android toast/// </summary> /// <param name= "str" ></param>[Export ("startfunction")] Public voidStartfunction (stringstr) {Toast.maketext ( This, str, toastlength.short). Show (); Runonuithread (NewRunnable (() ={Msgtext. Text= Msgtext. Text +"\njs called the JS function"+str; })); } }
View Code
2. Finally run on the virtual machine, when we click "Click Call Java Code" when we have a line of text in our program, when we click on the "Click Call Java code and pass parameters", the program in addition to add a line of text outside the hint. When we click on the Java Call JS function in our HTML page The mountain will show the parameters we passed. Okay, simple Android and HTML interaction is like this.
Xamarin.android Getting Started: Xamarin uses webserver and HTML interaction