Android chapter10 webkit

10/4/2011 1 10 Android TheWebKit Browser VictorMatos ClevelandStateUniversity Notesarebasedon: AndroidDevelopers http://developer.android.com/index.html GoogleMapsJavascript APIV3Basics http://code.google.com/apis/maps/documentation/javascript/basics.html TheBusyCoder'sGuidetoAndroidDevelopment byMarkL.Murphy Copyright©2008‐2009CommonsWare,LLC. ISBN:978‐0‐9816780‐0‐9 10.Android–UI–TheWebKit Browser WebKit Browser • InAndroidyoucanembedthebuilt‐inWebbrowserasawidget inyourownactivities,fordisplayingHTMLmaterialorperform Internetbrowsin g . g • TheAndroidbrowserisbasedonWebKit,thesameenginethat powersApple'sSafariWeb browser. • AndroidusestheWebView widgettohostthebrowser’spages 22 • ApplicationsusingtheWebView com ponentmustrequest INTERNET permission. 10/4/2011 2 10.Android–UI–TheWebKit Browser WebKit Browser BrowsingPower ThebrowserwillaccesstheInternetthroughwhatevermeans are available to that specific device at the present time ( WiFi are  available  to  that  specific  device  at  the  present  time  ( WiFi , cellularnetwork,Bluetooth‐tetheredphone,etc.). TheWebKit renderingengineusedtodisplaywebpagesincludes methodsto 1. navi g ateforwardandbackwardthrou g hahistor y,  33 g g y, 2. zoominandout, 3. performtextsearches, 4. loaddata 5. stoploadingand 6. more. 10.Android–UI–TheWebKit Browser WebKit Browser Warning InorderforyourActivitytoaccesstheInternetandloadwebpages inaWebView,youmustaddtheINTERNET permissionstoyou r AndroidManifestfile: <uses-permission android:name="android.permission.INTERNET" /> Thi t b hild f th < if t > lt 44 Thi smus t  b eac hild o f  th e < man if es t > e l emen t . (seenextexample) 10/4/2011 3 10.Android–UI–TheWebKit Browser WebKit Browser Example:Asimplebrowsingexper ience Let’sgoe‐shopping <?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:id="@+id/webkit" android:la y out width = " f ill p arent " 55 y_ _p android:layout_height="fill_parent" /> </LinearLayout> package cis493 demoui; 10.Android–UI–TheWebKit Browser WebKit Browser Example:Asimplebrowsingexper ience Let’sgoe‐shopping package cis493 . demoui; import android.os.Bundle; import android.app.Activity; import android.webkit.WebView; public class AndDemoUI extends Activity { WebView browser; @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); browser=(WebView)findViewById(R.id.webkit); browser.loadUrl("http://eBay.com"); browser.getSettings().setJavaScriptEnabled(true); } } 66 Thisappis hard‐wir edto eBay 10/4/2011 4 <? xml version = " 10 " encoding = "utf - 8 " ?> 10.Android–UI–TheWebKit Browser WebKit Browser Example:Asimplebrowsingexper ience Let’sgoe‐shopping‐ Manifest <? xml version = 1 . 0 encoding = utf - 8 ?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="cis493.demoui" android:versionCode="1" android:versionName="1.0"> <uses-permission android:name="android.permission.INTERNET" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".AndDemoUI" android:label="@string/app_name"> <intent-filter> i i ii i / <act i on andro i d:name = " a ndro i d. i ntent.act i on.MAIN " / > <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> <uses-sdk android:minSdkVersion="3" /> </manifest> 77 10.Android–UI–TheWebKit Browser WebKit Browser Warning If you set the URL to a site whose pages depend on Javascript you If  you  set  the  URL  to  a  site  whose  pages  depend  on  Javascript you  mayseeanempty,whitescreen. Bydefault Javascript isturnedoff inWebView widgets. IfyouwanttoenableJavascript,call: 88 myWebView.setSettings().setJavaScriptEnabled(true); ontheWebView instance. Tobediscussedlaterinthischapter. 10/4/2011 5 10.Android–UI–TheWebKit Browser WebKit Browser Warning UnderSDK1.5aWebView hasabuilt‐in OptionMenu 99 UsingGo option UsingMoreoption 10.Android–UI–TheWebKit Browser WebKit Browser LoadingData.loadData(…) YoumaydirectlyprovidetheHTMLtobedisplayedbythebrowser ( such as a user manual for instance directions on a map or the actual app ( such  as  a  user  manual  for  instance , directions  on  a  map , or  the  actual  app  interfacecreatedasHTMLinsteadofusingthenativeAndroidUIframework ). package cis493.demoui; import android.os.Bundle; import android.app.Activity; import android.webkit.WebView; public class AndDemoUI extends Activity { WebView browser; @O id 1010 @O verr id e public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); browser=(WebView)findViewById(R.id.webkit); browser.loadData("<html><body>Hello, world!</body></html>", "text/html", "UTF-8"); } } Usesamelayoutandmanifest ofpreviousexample 10/4/2011 6 package cis493 demoui; 10.Android–UI–TheWebKit Browser WebKit Browser LoadingData.loadData(…) Youmayincludesimplestatic GoogleMaps package cis493 . demoui; import . . . public class AndDemoUI extends Activity { WebView browser; @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); browser=(WebView)findViewById(R.id.webkit); //codeyourhtlm in‐linepage(orstorepageinapp’s"assets"folder) StringaGoogleMap ="<img src=\"http://maps.googleapis.com/ma ps/api/" +"staticmap?center=41.5020952,‐81.6789717 &zoom=14&size=300x300&sensor=false\">"; StringmyHtmlPage ="<html><body>Hello,world!" +"<br>GreetingsfromClevelandStateUniversity" +aGoogleMap +"</body></html>"; browser.loadData(myHtmlPage,"text/html","UTF‐8"); } } 1111 10.Android–UI–TheWebKit Browser WebKit Browser BrowserCommands ThereisnonavigationtoolbarwiththeWebView widget(savingspace). YoucouldsupplytheUI–suchasaMenu– toexecutethefollowingoperations: • reload() torefresh thecurrently‐viewedWebpage • goBack() togobackonestepinthebrowserhistory,andcanGoBack()todetermineif thereisanyhistorytotraceback • goForward() togoforwardonestepinthebrowserhistory,andcanGoForward()to determineifthereisanyhistorytogoforwardto • goBack OrForward() togobackwardsorforwardsinthebrowserhistory,where negative/positive numbersrepresentacountofstepstogo • canGoBackOrForward () to see if the browser can go backwards or forwards the 1212 • canGoBackOrForward ()  to  see  if  the  browser  can  go  backwards  or  forw ards  the  statednumberofsteps(followingthesamepositive/negativeconventionas goBackOrForward()) • clearCache() toclearthebrowserresou rcecac heandclearHistory() toclearthe browsinghistory 10/4/2011 7 10.Android–UI–TheWebKit Browser WebKit Browser Usingourrunningexample: browser. g oBack (); g (); browser.goForward(); browser.goBackOrForward(-2); browser.goBackOrForward(+2); browser.canGoBack(); browser.canGoForward(); browser.canGoBackOrForward(-2); 1313 browser.canGoBackOrForward(+2); browser.clearCache(true); browser.clearHistory(); browser.stopLoading(); 10.Android–UI–TheWebKit Browser WebKit Browser CombiningHTML+JAV ASCRIPT+ANDROID publicvoidaddJavascriptInterface ( Objectobj,StringinterfaceName ) UsethisfunctiontobindanobjecttoJavaScriptsothatthemethods canbeaccessedfromJavaScript. IMPORTANT: UsingaddJavascriptInterface()allowsJavaScripttocontrolyourapplication. Thiscanbeaveryusefulfea tureoradangeroussecurityissue. Donotuse addJavascriptInterface()unlessalloftheHTMLinthisWebView waswrittenbyyou. 1414 WARNING: Thisfeaturewasignored/broken(?)inversion2.3.Asolutionis expectedfromAndroidDevelopmentTeamasofSept2011. Seepage: http://quitenoteworthy.blogspot.com/2010/12/handling‐android‐23‐webviews‐broken.html 10/4/2011 8 10.Android–UI–TheWebKit Browser WebKit Browser CombiningHTML+JAV ASCRIPT+ANDROID Ad t ff d b Ad idDl t Ad van t ageso ff ere d  b y A n d ro id  D eve l opmen t 1. Accesstonativeservicesonthedevice,includinglocationser vices 2. PlacementintheAndroidMarket 3. RapiddevelopmentusingtheAndroidSDKandEclipse. AdvantagesofferedbyGoogleMapsAPI 1. Applicationexis tsinaservernotinsideadevice. 2 id ii i h i f dld 1515 2 .Rap id vers i on i ng,remo v i ngt h erequ i rement f oryourusersto d own l oa d  andinstallconstantupdates. 3. MorefrequentfeatureadditionsandbugfixesfromGoogle. 4. Cross‐platformcompatibility:UsingtheMapsAPIallowsyoutocreatea singlemapthatrunsonmultipleplatforms. 5. Designedtoloadfast onAndroidandiPhonedevices. 10.Android–UI–TheWebKit Browser WebKit Browser CombiningHTML+JAVASCRIPT+ANDROID LearningStrategy • WebView2:PassingObjectsbetweenAndroidandJS (goal:createinterconnectivity) • WebView3:MappingafixedlocationusingGoogleMapsV3 (PureHTML+JS,justupdatetheserver‐noneedtoupgradeALLdevices carryingtheapplication,portability,homogeneousdesign) 1616 • WebView4:PassingareallocationobjecttoJS–drawamapcenteredat givenlocation(mappingcurrentlocation,combinestwoabove). 10/4/2011 9 10.Android–UI–TheWebKit Browser WebKit Browser HTML+JA VASCRIPT+ANDROID ExchangingobjectsbetweenAndroid&JS AndroidOS HTML 1717 locater object Youpassanobjectwhose methods youwanttoexposeto JavaScript (classvars notvisible) 10.Android–UI–TheWebKit Browser WebKit Browser Part1.WebView2: PassingObjectsbetweenAndroidandJS 1818 10/4/2011 10 10.Android–UI–TheWebKit Browser WebKit Browser Part1.WebView2: PassingObjectsbetweenAndroidandJS Puttingthepiecestogether: 1. PlaceaWebView inthemain.xmlfile 2. Placehtml p a g eintheassets folder <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res /android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> < WbVi pg 3. CreatetheJavaobject tosharewithJS 1919 < W e bVi ew android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </LinearLayout> Warning:testedonAndroid2.2 10.Android–UI–TheWebKit Browser WebKit Browser Part1.WebView2: PassingObjectsbetweenAndroidandJS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Android_Passing_HTML_JS</title> <head> <script language="javascript"> function whereami() { // html asks android to provide data using object's GET methods document. g etElementB y Id("lat").innerHTML = l ocater. g etLatitude ( ); gy g document.getElementById("lon").innerHTML=locater.getLongitude(); document.getElementById("myText").value = locater.getCommonData(); } function talkBack2Android() { // bridge object used to send local (html) data to android app locater.setCommonData("Greetings from html"); var spyHtml = "Spy data coming from HTML\n" + "\n" + document.getElementById("myText").value + "\n" + document.getElementById("lat").innerHTML + "\n" + document.getElementById("lon").innerHTML; locater.htmlPassing2Android(spyHtml); } </script> </head> <body> <p> You are at </p> <table border= " 1 " cellspacing = " 1 " cellpadding = " 1 " > 2020 <table border= 1 cellspacing =1 cellpadding =1> <tr> <td bgcolor="#FFFFCC"> Latitude </td> <td><span id="lat"> (unknown) </span></td> </tr> <tr> <td bgcolor="#FFFFCC"> Longitude </td> <td><span id="lon"> (unknown) </span></td> </tr> </table> <p><a onClick="whereami()"><u> Click to Get Location </u></a></p> <p> Enter some data here <input type="text" id="myText" /> <p> <input type="button" onclick= "talkBack2Android()" value="Talking to Android"> </body> </html> [...]... Map image shown on an Android device 26 13 10/4/2011 10. Android – UI – The WebKit Browser WebKit Browser Part2.  WebView3:... android: orientation="horizontal" android: layout_width="fill_parent" android: layout_height="fill_parent"> Warning: tested on Android 2.2 29 10. Android – UI – The WebKit Browser WebKit Browser Part3.  WebView4: Android & Google Map V3 App (real locations)        ... }//MyLocater } 22 11 10/4/2011 10. Android – UI – The WebKit Browser WebKit Browser Part2.  WebView3: Using Google Maps V3 Webpage “webview_map.html” showing a Google map centered around  Cleveland State University, Ohio (seen with IExplorer running in a Windows machine) 23 Link:  http://code.google.com/apis/maps/documentation/javascript/basics.html 10. Android – UI – The WebKit Browser WebKit Browser Part2.  WebView3:... eb e ); browser.getSettings().setJavaScriptEnabled(true); browser.loadUrl("file:// /android_ asset/webview_map.html"); } } 27 10. Android – UI – The WebKit Browser WebKit Browser Part3.  WebView4: Android & Google Map V3 App (real locations) This experience combines the two previous  examples: p • The goal is to use an Android object to pass  ‘real location’ data to an html webpage.  • The page contains a JavaScript fragment to ...     30 15 10/4/2011 10. Android – UI – The WebKit Browser WebKit Browser Part3.  WebView4: Android & Google Map V3 App (real locations) public class Main extends Activity implements LocationListener { private static final String MAP_URL = "http://gmapssamples.googlecode.com/svn/trunk/articles -android- webmap/simple -android- map.html"; private WebView browser; //Location... draw a map centered on the given  coordinates Latitude and longitude detected by the device Image taken from an Android phone Warning:  Make sure your target is: Google APIs (API Level 8) or higher 28 14 10/4/2011 10. Android – UI – The WebKit Browser WebKit Browser Part2.  WebView3: Porting to Android the Google Map V3 App Putting the pieces together: 1 Place a WebView in the main.xml file 2 Place html page in the assets... browser.loadUrl("file:// /android_ asset/my_local_page1.html"); } private Location fakeGetLocation() { // faking the obtaining of a location object (discussed later!) Location fake = new Location("fake"); fake.setLatitude(9.938038); fake.setLongitude(-84.054430); return fake; } 21 10. Android – UI – The WebKit Browser WebKit Browser Part1.  WebView2: Passing Objects between Android and JS // "MyLocater"