This lecture. The BrowserIntent Example (cont d)

Transcription

1 This lecture 5COSC005W MOBILE APPLICATION DEVELOPMENT Lecture 10: Working with the Web Browser Dr Dimitris C. Dracopoulos Android provides a full-featured web browser based on the Chromium open source project. How to open an external web browser using an Android intent How to embed a browser into an application How JavaScript in an embedded WebView and Java code in your Android program can talk to each other Browsing by Intent Dimitris C. Dracopoulos 1/21 The BrowserIntent Example (cont d) Dimitris C. Dracopoulos 2/21 <? xml version =" 1.0 " encoding ="utf -8"?> xmlns:android =" http: // schemas. android. com / apk / res / android " android: orientation =" horizontal " android: layout_ height =" fill_ parent " > < EditText android:id ="@+id/ url_field " android:layout_width ="0 dip " android: layout_ weight =" 1.0 " android: lines =" 1" android: inputtype =" texturi " android: imeoptions =" actiongo " / > The strings.xml file: < resources > < string name =" app_name ">BrowserIntent </ string > < string name =" action_settings ">Settings </ string > < string name =" go_button ">Go </ string > </ resources > < Button android:id ="@+id/ go_button " android: layout_ width =" wrap_ content " android:text / go_button " /> Dimitris C. Dracopoulos 3/21 Dimitris C. Dracopoulos 4/21

2 The BrowserIntent Example (cont d) The BrowserIntent Example (cont d) The main activity: package org. example. browserintent ; import... public class MainActivity extends Activity { private EditText urltext ; private Button gobutton public void oncreate ( Bundle savedinstancestate ) { super. oncreate ( savedinstancestate ); setcontentview ( R. layout. activity_ main ); // Get a handle to all user interface elements urltext = ( EditText ) findviewbyid ( R. id. url_field ); gobutton = ( Button ) findviewbyid ( R. id. go_ button ); // Setup event handlers gobutton. setonclicklistener ( new OnClickListener () { public void onclick ( View view ) { ); urltext. setoneditoractionlistener ( new OnEditorActionListener () { public boolean oneditoraction ( TextView v, int actionid, KeyEvent event ) { if ( actionid == EditorInfo. IME_ ACTION_ GO ) { InputMethodManager imm = ( InputMethodManager ) getsystemservice ( INPUT_ METHOD_ SERVICE ); imm. hidesoftinputfromwindow ( v. getwindowtoken (), 0); return true ; return false ; ); /* * Open a browser on the URL specified in the text box */ private void openbrowser () { Uri uri = Uri. parse ( urltext. gettext (). tostring ()); Intent intent = new Intent ( Intent. ACTION_VIEW, uri ); startactivity ( intent ); Dimitris C. Dracopoulos 5/21 Dimitris C. Dracopoulos 6/21 The WebView Example xmlns:android =" http: // schemas. android. com / apk / res / android " android: orientation =" vertical " android: layout_ height =" fill_ parent " > android: orientation =" horizontal " > < EditText android:id ="@+id/ url_field " android:layout_width ="0 dip " android: layout_ weight =" 1.0 " android: lines =" 1" android: inputtype =" texturi " android: imeoptions =" actiongo " / > < Button android:id ="@+id/ go_button " android: layout_ width =" wrap_ content " android:text / go_button " /> The WebView Example (cont ed) < WebView android:id ="@+id/ web_view " android:layout_height ="0 dip " android:layout_weight =" 1.0 " /> Dimitris C. Dracopoulos 7/21 Dimitris C. Dracopoulos 8/21

3 The BrowserView Example (cont d) The main activity: package org. example. browserview ; import... public class MainActivity extends Activity { private EditText urltext ; private Button gobutton ; private WebView webview ; public void oncreate ( Bundle savedinstancestate ) { //... super. oncreate ( savedinstancestate ); setcontentview ( R. layout. activity_ main ); // Get a handle to all user interface elements urltext = ( EditText ) findviewbyid ( R. id. url_field ); gobutton = ( Button ) findviewbyid ( R. id. go_ button ); webview = ( WebView ) findviewbyid ( R. id. web_view ); The BrowserView Example (cont d) /* When a URL is loaded in a WebView, by default if a WebViewClient is not provided, the WebView will ask the Activity Manager to choose if the default web browser opens the URL ( method shouldoverrideurlloading () of WebViewClient returns true ) or if the WebView itself loads the URL ( method returns false ). The default implementation of WebViewClient returns false so the method does not need to be overridden in a subclass */ webview. setwebviewclient ( new WebViewClient ()); gobutton. setonclicklistener ( new OnClickListener () { public void onclick ( View view ) { ); /* * Open a browser on the URL specified in the text box */ private void openbrowser () { webview. getsettings (). setjavascriptenabled ( true ); webview. loadurl ( urltext. gettext (). tostring ()); The BrowserView Example (cont d) Dimitris C. Dracopoulos 9/21 The WebView Example Dimitris C. Dracopoulos 10/21 urltext. setoneditoractionlistener ( new OnEditorActionListener () { public boolean oneditoraction ( TextView v, int actionid, KeyEvent event ) { if ( actionid == EditorInfo. IME_ ACTION_ GO ) { InputMethodManager imm = ( InputMethodManager ) getsystemservice ( INPUT_ METHOD_ SERVICE ); imm. hidesoftinputfromwindow ( v. getwindowtoken (), 0); return true ; return false ; ); The strings.xml file: < resources > < string name =" app_name ">BrowserView </ string > < string name =" action_settings ">Settings </ string > < string name =" go_button ">Go </ string > </ resources > The manifest file should be modified with the right permissions: <uses - permission android: name =" android. permission. INTERNET " / > Dimitris C. Dracopoulos 11/21 Dimitris C. Dracopoulos 12/21

4 The WebView class The LocalBrowser Example Many useful methods such as: addjavascriptinterface(): Allows a Java object to be accessed from JavaScript setwebchromeclient(): Registers callbacks for events that need to be done outside the WebView rectangle, such as updating the title or progress bar or opening a JavaScript dialog box loadurl(): Loads a web page from the given URL. Should be used to call Javascript if it is passed an argument of the form javascript:code-to-execute xmlns:android =" http: // schemas. android. com / apk / res / android " android: orientation =" vertical " android: layout_ height =" fill_ parent " > < WebView android:id ="@+id/ web_view " android: layout_ height =" fill_ parent " android:layout_weight =" 1.0 " /> android: orientation =" vertical " android: layout_ height =" fill_ parent " android: layout_ weight =" 1.0 " android:padding ="5sp"> The LocalBrowser Example (cont ed) Dimitris C. Dracopoulos 13/21 < TextView android:textsize ="24 sp" android:text / textview " /> < Button android:id ="@+id/ button " android: text / call_ javascript_ from_ android " android: layout_ width =" wrap_ content " android:textsize ="18 sp" /> < TextView android:id ="@+id/ text_view " android:textsize ="18 sp" /> Dimitris C. Dracopoulos 15/21 The LocalBrowser Example (cont ed) The index.html file inside the assets directory: Dimitris C. Dracopoulos 14/21 <html > <head > < script language =" JavaScript " > function calljs ( arg ) { document. getelementbyid ( replaceme ). innerhtml = arg ; </ script > </ head > <body > <h2 > WebView </h2 > <p> <a href ="#" onclick =" window. alert ( Alert from JavaScript )"> Display JavaScript alert </ a > </p> <p> <a href ="#" onclick =" window. android. callandroid ( Hello from Browser )"> Call Android from JavaScript </ a > </p> <p id=" replaceme "> </p> </ body > </ html > Dimitris C. Dracopoulos 16/21

5 The LocalBrowser Example (cont d) The main activity: package org. example. localbrowser ; import... public class MainActivity extends Activity { private static final String TAG = " LocalBrowser "; private final Handler handler = new Handler (); private WebView webview ; private TextView textview ; private Button button ; /* * Object exposed to JavaScript */ private class AndroidBridge JavascriptInterface // Required in Android 4.2+ public void callandroid ( final String arg ) { // must be final handler. post ( new Runnable () { public void run () { Log.d(TAG, " callandroid (" + arg + ")"); textview. settext ( arg ); ); The LocalBrowser Example (cont d) Dimitris C. Dracopoulos 17/21 The LocalBrowser Example (cont d) public void oncreate ( Bundle savedinstancestate ) { super. oncreate ( savedinstancestate ); setcontentview ( R. layout. activity_ main ); // Find the Android controls on the screen webview = ( WebView ) findviewbyid ( R. id. web_view ); textview = ( TextView ) findviewbyid ( R. id. text_ view ); button = ( Button ) findviewbyid ( R. id. button ); // Turn on JavaScript in the embedded browser webview. getsettings (). setjavascriptenabled ( true ); // Expose a Java object to JavaScript in the browser webview. addjavascriptinterface ( new AndroidBridge (), " android "); The LocalBrowser Example (cont d) Dimitris C. Dracopoulos 18/21 ; // Set up a function to be called when JavaScript tries // to open an alert window webview. setwebchromeclient ( new WebChromeClient () public boolean onjsalert ( final WebView view, final String url, final String message, JsResult result ) { Log.d(TAG, " onjsalert (" + view + ", " + url + ", " + message + ", " + result + ")"); Toast. maketext ( MainActivity. this, message, Toast. LENGTH_LONG ). show () ); result. confirm (); return true ; // I handled it // This function will be called when the user presses the // button on the Android side button. setonclicklistener ( new OnClickListener () { public void onclick ( View view ) { Log.d(TAG, " onclick (" + view + ")"); webview. loadurl ( " javascript : calljs ( Hello from Android )"); ); // Load the web page from a local asset webview. loadurl (" file :/// android_asset / index. html "); Dimitris C. Dracopoulos 19/21 Dimitris C. Dracopoulos 20/21

6 The LocalBrowser Example (cont ed) The strings.xml file: < resources > < string name =" app_name ">LocalBrowser </ string > < string name =" action_settings ">Settings </ string > < string name =" textview ">TextView </ string > < string name =" call_ javascript_ from_ android " > Call JavaScript from Android </ string > </ resources > Dimitris C. Dracopoulos 21/21