Android The WebKit Browser
Contents
1. Enter some data here lt script gt hola android lt head gt lt body gt Talking to Android lt p gt You are at lt p gt lt tabl border 1 cellspacing 1 cellpadding 1 gt KEE lt td bgcolor FFFFCC gt Latitude lt td gt lt td gt lt span id lat gt unknown lt span gt lt td gt lt her gt Eri lt td bgcolor FFFFCC gt Longitude lt td gt lt td gt lt span id lon gt unknown lt span gt lt td gt ur lt table gt lt p gt lt a onClick whereami gt lt u gt Click to Get Location lt u gt lt a gt lt p gt lt p gt Enter some data here lt input type text id myText gt lt p gt lt input type button onclick talkBack2Android value Talking to Android gt lt body gt lt html gt 10 Android UI The WebKit Browser WebKit Browser ax Bi Part1 WebView2 Passing Objects between Android and JS public class Main extends Activity private WebView browser MyLocater locater new Mylocater Location mostRecentLocation Override public void onCreate Bundle icicle super onCreate icicle setContentView R layout main get a location tix lat lon mostRecentLocation fakeGetLocation set up the webview to show location results browser WebView findViewById R id webview browser getSettings setJavaScriptEnabled true browser addJavascriptInterface locater loc2. lt uses permission android name android permission INTERNET gt lt uses permission andreid name_ android permisston ACCHSS COARSE LOCATTON f gt lt uses perm ssion andreid name_ androig permission ACCHSs FINE HOCATION 7 EMS 5 42pm zE Map image shown on an Android device Santa o Eduviges Magnolias Si aulina Miraflores TR a S PALS O 2 3 Dent 5 b oe Guadalupe gt 0 A Ava ea es A o gt Aven A Pda 4 2 ida gt O RE A TERN Iglesia de Nuestra amp Aven 9 v4 Fowertbpi WN Senora de Fatima Bi dag Ar DatosZiesmapa 201 Boogie 8Terminos de uso 10 Android UI The WebKit Browser WebKit Browser rar ie Part2 WebView3 Porting to Android the Google Map V3 App public class Main extends Activity WebView browser Override public void onCreate Bundle savedInstanceState super onCreate savedInstanceState setContentView R layout main connect browser to local html file showing map browser WebView findViewById R id webview browser getSettings setJavaScriptEnabled true browser loadUrl file android asset webview map html 25 10 Android UI The WebKit Browser WebKit Browser BD Fl 8 36 p m Z This experience combines the two previous ebView4 AfL Mage satene ibrdo T reiere examples Eeey Siveste e The goal is to use an Android object to pass rea
3. AME 12 50 am Find on page Menut f Categories Motors Stores Daily Deal Rena Page info nn Menu g Viewed Items Don Quijote Volume 1 Share page 1 a Downloads Bookmarks New window Menu d G RI Refresh Forward More Using Go option Using More option 9 10 Android UI The WebKit Browser WebKit Browser te Loading Data loadData You may directly provide the HTML to be displayed by the browser a user manual for instance or the actual app interface created as HTML instead of using the native Android Ul framework Ga G 11 54AM package cis493 demoui Andbemoul ld import android os Bundle ie 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 Use same layout and manifest of previous example browser loadData lt html gt lt body gt Hello world lt body gt lt html gt Wiese mnemik on g 10 AS WebKit Browser Browser Commands There is no navigation toolbar with the WebView widget saving space You could supply the Ul such as a Menu to execute the following operations e reload to refresh the currently viewed Web page e goBack to go back one step in the browser history and canGoBack t
4. 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 S WebKit Browser Combining HTML JAVASCRIPT ANDROID Learning Strategy e WebView2 Passing Objects between Android and JS goal create interconnectivity e 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 e WebView4 Passing a real location object to JS draw a map centered at given location mapping current location combines two above 10 Android UI The WebKit Browser RS WebKit Browser HTML JAVASCRIPT ANDROID Exchanging objects between Android amp JS ME 11 25 am WebView2 You are at Latitude 19 938038 Longitude 84 05443 Click to Get Location Enter some data here pura viva Spy data coming from HTML pura viva 9 938038 84 05443 n pass an object whose htmlPassing2And roid i you want to expose to JavaScript class vars not visible 15 10 Android UI The WebKit Browser i WebKit Browser Part1 WebView2 Passing Objects between Android and JS GoM 2 27 m DME zz WebView2 WebView2 WebView2 WebView2 You are at You are at You are at You are at Latitude un
5. ADMAP var map new google maps Map document getElementById map canvas myOptions lt script gt lt head gt lt body onload initialize gt lt div id map canvas style width 100 height 100 gt lt div gt lt body gt lt html gt 22 10 Android UI The WebKit Browser WebKit Browser Part2 WebView3 Porting to Android the Google Map V3 App Putting the pieces together S iS 10 3 WebvView GoogleMapV3 Fixed Location T rd EPEA 1 Place a WebView in the main xml file aD RE 2 Place html page in the assets folder 2 gen Generated Java Fies 3 Add permission requests to manifest pice aii eee 4 Connect to Java code assets P webview_map html lt 7 version l 07 eneoeding utr sun 7 er lt LinearLayout G drawable hdpi xmlns android http schemas android com apk res pre ble Kendrezel T Z aan oe androld orientation horizontal if m oae ame ea ao awiden Weil J joehelaicha EN android layout height fill parent gt A AndroidManifest xml lt WebView android id id webview default properties proguard cfg Amer oa OU warden Weil i pereme android layout height fill parent gt lt LinearLayout gt Warning tested on Android 2 2 23 10 Android UI The WebKit Browser WebKit Browser Part2 WebView3 Porting to Android the Google Map V3 App Add the following permission requests to the AndroidManifest xml file
6. 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 RS WebKit Browser e In Android you can embed the built in Web browser as a widget in your own activities for displaying HTML material or perform Internet browsing e The Android browser is based on WebKit the same engine that powers Apple s Safari Web browser e Android uses the WebView widget to host the browser s pages e Applications using the WebView component must request INTERNET permission AS WebKit Browser Browsing Power The browser will access the Internet through whatever means 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 navigate forward and backward through a history zoom in and out perform text searches load data stop loading and more SS i 10 Android UI The WebKit Browser ian WebKit Browser Warning In order for your Activity to access the Internet and load web pages in a WebView you
7. Zoom center myLating mapTypeld google maps MapTypeId ROADMAP var map new google maps Map document getElementById map_ canvas myOptions var marker new google maps Marker position myLatlng map map DF seine lt head gt lt body onload initialize gt lt div id map_canvas gt lt div gt lt body gt lt html gt 28 10 Android UI The WebKit Browser RS WebKit Browser Part3 WebView4 Android amp Google Map V3 App real locations public class Main extends Activity implements LocationListener private static final String MAP URL http gmaps samples googlecode com svn trunk articles android webmap simple android map html private WebView browser Location mostRecentLocation LocationManager locationManager MyLocater locater new Mylocater Override protected void onDestroy super onDestroy cut location service requests locationManager removeUpdates this private void getLocation loear LonManager LocacronManager Geloyscemservice Conecexe LOCATION San vice Criteria criteria new Criteria criteria se Accuracy Criteria ACCURACY PINE Use Gre you must be ants de CLLEctia Se lAcelbacy Chi ter La ACCURACY CONRSE P towers wird String provider locationManager getBestProvider criteria true In order to make sure the device is getting the location request updates wakeup after changes of 1 sec or 0 me
8. an co ep rege lt WebView B proguard cfg android id tid webview andreid Layour wide rii pereme android layout height fill parent gt lt LinearLayout gt lt uses permission android name android permission INTERNET gt lt uses permission android name android permission ACCHSS COARSE LOCATION gt uses permission android name android permission ACCESS PINE LOCATIONS 7 Warning tested on Android 2 2 27 10 Android UI The WebKit Browser S WebKit Browser Part3 WebView4 Android amp Google Map V3 App real locations lt DOCTYPE html gt lt html gt lt head gt lt meta name viewport content initial scale 1 0 user scalable no gt lt meta http equiv content type content text html charset UTF 8 gt lt title gt Google Maps JavaScript API v3 Example Marker Simple lt title gt Html page creates a map using real coordinates lt style type text css gt in th r html height 100 passed e locate body height 100 margin Opx padding Opx object map canvas height 100 lt style gt lt script type text javascript src http maps google com maps api js sensor false gt lt script gt lt script type text javascript gt HUM Cited Ones i Miera izena var myLating new google maps LatLng 41 5020952 81 6789717 var myLatling new google maps LatLng locater getLatitude locater getLongitude var myOptions
9. ater browser loadUrl file android asset my local pagel 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 10 Android UI The WebKit Browser WebKit Browser va iy Part1 WebView2 Passing Objects between Android and JS MyLocater is used to pass data back and forth between Android and JS code behind public class Mylocater private String commonData XYZ public double getLatitude if mostRecentLocation null return 0 else return mostRecentLocation getLatitude public double getLongitude if mostRecentLocation null return 0 else return mostRecentLocation getLongitude public void htmlPassing2Android String dataFromHtml Toast makerex GenApplicationcomtex I Nal commontata 1 show gt commonData dataFromHtml Toast makerext gerAppliestioncomteze 2 n commontata 1 show gt public String getCommonData return commonData public void setCommonData String actualData commonData actualData MyLocater 10 Android UI The WebKit Browser DD 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 mac
10. browser WebView findViewById R id webkit browser IoadUrl ntep eBay com browser getSettings setJavaScriptEnabled true 10 Android UI The WebKit Browser WebKit Browser te Example A simple browsing experience Let s go e shopping Manifest Fame version 1 0 eneoding urr 372 lt manifest xmlns android http schemas android com apk res android package cis493 demoui android versionCode 1 android versionName 1 0 gt lt application android icon drawable icon android label string app name gt lt activity android name AndDemoUI android label string app name gt lt intent filter gt lt action android name android intent action MAIN gt lt category android name android intent category LAUNCHER gt lt intent filter gt lt activi ty eppliestion uses sek andreiceminsdkVversiem 3 J gt lt man itese Z WebKit Browser Warning 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 myWebView setSettings setJavaScriptEnabled true on the WebView instance To be discussed later in this chapter 10 Android UI The WebKit Browser WebKit Browser te Warning Under SDK 1 5 a WebView has a built in Option Menu GEG 12 53 00 J www ebay com eBay New amp used elec
11. cring lart cring valter Location Ceiba Esl tuce I A Sceineg lon cring valcer Jdocation GeTbhomer h TECG e Toast makeTer gGesippliescerontontrerr T O SO O locater setNewLocation location Override public void onProviderDisabled String provider needed by Interface Not used Override public void onProviderEnabled String provider needed by Interface Not used Override public void onStatusChanged String provider int status Bundle extras needed by Interface Not used 10 Android UI The WebKit Browser WebKit Browser te Part3 WebView4 Android amp Google Map V3 App real locations TE DAM Ld AA RR An object of type MyLocater will be used to pass data back and forth between the Android app and the JS code behind the html page DEN LIS AIDED TISAI ID LAE EAA MDD A Meh Doll Ld bd eld Meld Teh Peg public class Mylocater private Location mostRecentLocation public void setNewLocation Location newCoordinates mostRecentLocation newCoordinates public double getLatitude if mostRecentLocation null return 0 else return mostRecentLocation getLatitude public double getLongitude if mostRecentLocation null return 0 else return mostRecentLocation getLongitude MyLocater elass 32 it Browser RS WebKit Browser Questions
12. hine gt C Temp0 webview_map html Windows Internet Explorer ko ea e C Temp0 webview_map html File Edit View Favorites Tools Help Favorites C Temp0 webview_map html w e EN i Donald Gray Great Lakes 2 Garden Science Center ger Cleveland za F 4 Waard Park S Clevet and A Browns Stadum sevenn v Ir WY 702 N Ea N 2 t j prospect A Sc 12 Old Stone x N 5 4 Church L Cleveland f CEPE San 4 43 K N A D L D ME u Central Ave gt D Settiens Landing Park D Z 4 anal Rd StVincent Charity Hospital 2 N w Link http code google com apis maps documentation javascript basics html 10 Android UI The WebKit Browser WebKit Browser te Part2 WebView3 Passing Objects between Android and JS lt DOCTYPE html gt This is the web page aa webview_map html lt head gt lt meta name viewport content initial scale 1 0 user scalable no gt lt style type text css gt html height 100 body height 100 margin Opx padding Opx map_canvas height 100 lt style gt lt script type text javascript src http maps google com maps api js sensor false gt lt script gt lt script type text javascript gt function initialize var latlng new google maps LatLng 41 5020952 81 6789717 var myOptions zoom 15 center latlng mapTypeId google maps MapTypeId RO
13. known Latitude 9 938038 Latitude 9 938038 Latitude 9 938038 Longitude unknown Longitude 84 05443 Longitude 84 05443 Longitude 84 05443 Click to Get Location Click to Get Location Click to Get Location Click to Get Location Enter some data here Enter some data here Enter some data here Enter some data here Talking to Android Talking to Android Talking to Android Talking to Android 1 Greetings from html Latitude 9 938038 Longitude 84 05443 Click to Get Location Enter some data here hola android Spy data coming from HTML hola android 9 938038 84 05443 16 10 Android UI The WebKit Browser RS WebKit Browser Part1 WebView2 Passing Objects between Android and JS Weg 10 2 WebView PassingObject JS Putting the pieces together 3 58 src 1 Place a WebView in the main xml file 8 ucr webkit3 2 Place html page in the assets folder Main java gs gen Generated Java Fies 3 Create the Java object to share with JS mi Android 2 2 gt assets my_local_pagei htmi amp res amp drawable hdpi 6 drawable Idpi amp drawable mdpi amp layout x main xml amp values a AndroidManifest xml default properties proguard cfg lt 4xMleyersion iO encoding Wern o 2 lt LinearLayout xmlns android http schemas a
14. l location data to an html webpage me Refugio Nacional Barra del Colorado i 351 K Parque Necichei Parque Nacional Braulio Carrillo Tortuguero San Ram n Carrizal e The page contains a JavaScript fragment to mo nn er draw a map centered on the given an Jose O bCu rridabat A Y Pr c maa coordinates Parque ay Ni San Isidro de A a a EI General 243 9 939254250000001 84 05184975 Latitude and longitude detected by the device Image taken from the Android phone Warning Make sure your target is Google APIs API Level 8 or higher 26 10 Android UI The WebKit Browser WebKit Browser a Part2 WebView3 Porting to Android the Google Map V3 App EB 10 4 WebView GoogleMapV3 CurrentLocation Putting the pieces together e sc 1 Place a WebView in the main xml file 3 ucr googlemapsapi f Main java 2 Place html page in the assets folder 28 gen Generated Java Files a mA Google APIs Android 2 2 3 Add permission requests to manifest 2 assets uud 4 Connect to Java code 3 8 res 5 i m Ws ii is drawable hdpi lt exml vers on 1 0 eneod ng uer 812 gt amp drawable Idpi lt LinearLayout oS eee xmlns android http schemas android com apk res ee Vaneo ai X main xml i 6 values androeid orientation hor zontal c AndroidManifest xml android layout width fill parent B default properties 7 and ecned laycueehe T
15. must add the INTERNET permissions to your Android Manifest file lt uses permission android name android permission INTERNET gt This must be a child of the lt manifest gt element see next example 10 Android UI The WebKit Browser WebKit Browser te example A simple browsing experience _ Let S go e shopping www ebay com eBay New amp used e el Y Welcome Sign in or register Pi version A OuuNeme Osmo Ube tonics Categories Motors Stores Daily Deal lt LinearLayout xmlns android http schemas android com apk res android Save 50 or more on hot books and mov android orientation vertical amdsoid layouewideh ei li paren Buy It Now in Tech android layout height fill parent Apple Garmin Portable iPod touch GPS DVD Players lt WebView android id tid webkit androsd layone wideh sii paren andrord layout heighe r lyparen i gt lt LinearLayout gt More great deals no bidding needed 10 Android UI The WebKit Browser WebKit Browser te Example A simple browsing experience 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 This app is super onCreate icicle hard wired to setContentView R layout main eBay
16. ndroid com apk res Janarord andreid orrentarion Hori zonczal a ndrond leyvoneswide aul jeeneeine and ecned laycueehe Tan co ep rege lt WebView android id id webview andreid Layour wicith sii pereme android layout height fill parent gt lt LinearLayout gt Warning tested on Android 2 2 17 10 Android UI The WebKit Browser u WebKit Browser Part1 WebView2 Passing Objects between Android and JS lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN gt lt html gt lt head gt lt title gt Android Passing HTML JS lt title gt lt head gt lt script language javascript gt function whereami html asks android to provide data using object s GET methods document getElementById lat innerHTML locater getLatitude 2M Ee 2 27 pm document getElementById lon innerHTML locater getLongitude WebView2 document getElementById myText value locater getCommonData You are at function talkBack2Android bridge object used to send local html data to android app gt 9 938038 locater setCommonData Greetings from html Latitude 19 938038 var spyHtml Spy data coming from HTML n Longitude 84 05443 n document getElementById myText value n document getElementById lat innerHTML Click to Get Location n document getElementById lon innerHTML Du locater htmlPassing2Android spyHtml
17. o determine if there is any history to trace back e goForward to go forward one step in the browser history and canGoForward to determine if there is any history to go forward to e goBackOrForward to go backwards or forwards in the browser history where negative positive numbers represent a count of steps to go e canGoBackOrForward to see if the browser can go backwards or forwards the stated number of steps following the same positive negative convention as goBackOrForward e clearCache to clear the browser resource cache and clearHistory to clear the browsing history S WebKit Browser Using our running example browser browser browser browser browser browser browser browser browser browser browser goBack goForward goBackOrForward 2 goBackOrForward 2 canGoBack canGoForward canGoBackOrForward 2 canGoBackOrForward 2 clearCache true clearHistory stopLoading 12 AS WebKit Browser Combining HTML JAVASCRIPT ANDROID Advantages offered by Android Development 1 Access to native services on the device including location services 2 Placement in the Android Market 3 Rapid development using the Android SDK and Eclipse Advantages offered by Google Maps API 1 Application exists in a server not inside a device 2 Rapid versioning removing the requirement for your users to download and install constant updates 3 More frequent feature
18. ter locationManager requestLocationUpdates provider 1 0 this locater setNewLocation locationManager getLastKnownLocation provider Ln A 10 Android UI The WebKit Browser WebKit Browser te Part3 WebView4 Android amp Google Map V3 App real locations Override public void onCreate Bundle savedInstanceState super onCreate savedInstanceState setContentView R layout main getLocation setupbrowser this setRequestedOrientation ActivityInfo SCREEN ORIENTATION PORTRAIT Sets up the browser object and loads the URL of the page private void setupbrowser final String centerURL javascript centerAt ap ILO ENESic oer latitude let a7 ILOCENESIe GSEILOInGSLEUICIS se 4 5 set up the browser to show location results browser WebView findViewById R id webview browser getSettings setJavaScriptEnabled true browser addJavascriptInterface locater locater browser VeadUrill fle android essee webyr1ew ma e 30 10 Android UI The WebKit Browser WebKit Browser at 7 Part3 WebView4 Android amp Google Map V3 App real locations Wait for the page to load then send the location information browser setWebViewClient new WebViewClient Override public void onPageFinished WebView view String url browser loadUrl centerURL ae Override public void onLocationChanged Location location S
Download Pdf Manuals
Related Search