Adding HTML5 to your Android applications. Martin Gunnarsson & Pär Sikö

Size: px

Start display at page:

Download "Adding HTML5 to your Android applications. Martin Gunnarsson & Pär Sikö"

Lynne Phelps
9 years ago
Views:

1 Adding HTML5 to your Android applications Martin Gunnarsson & Pär Sikö

2 Martin Gunnarsson Mobility expert, Axis Communications Øredev Program Committee member JavaOne Rock Star Beer

3 Pär Sikö I m the poor guy who has to live with all the stupid stuff that Martin does

4 Objective

5 Demo

6 What we need to learn Loading a web page Under the hood Communication Android Javascript Javascript Android Modifying web content Debugging Error handling

7 Loading a web page

9 Loading a web page public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); WebView webview = new WebView(this); webview.loadurl(" } setcontentview(webview);

11 WTF?

12 Enable internet connection <uses-permission android:name="android.permission.internet" />

14 Loading a web page public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); WebView webview = new WebView(this); webview.loadurl("file:///android_asset/page.html"); } setcontentview(webview);

15 Loading a web page public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); WebView webview = new WebView(this); String text = "<html><body><b>i wish I was surfing in Hawaii</b></body></html>"; webview.loaddata(text, "text/html", null); } setcontentview(webview);

16 Under the hood

17 The web view WebView

18 The web view WebView WebSettings

19 The web view WebViewClient WebView WebSettings

20 The web view WebViewClient WebChromeClient WebView WebSettings

21 WebView public void goback(); public String geturl(); WebView public String gettitle(); public void loadurl(string url); public void reload();...

22 WebSettings WebSettings settings = webview.getsettings(); // Disable plugins settings.setpluginstate(pluginstate.off); WebView WebSettings // Configure cache settings.setappcacheenabled(true); settings.setappcachemaxsize(1000 * 1000 * 1); // Handle zoom controls settings.setdefaultzoom(zoomdensity.far); settings.setbuiltinzoomcontrols(true); settings.setdisplayzoomcontrols(true);

23 WebViewClient WebViewClient WebView public void onloadresource(...) public void onreceivederror(...) public void onpagefinished(...) public boolean shouldoverrideurlloading(...)...

24 WebChromeClient WebChromeClient WebView public boolean onjsalert(...); public void onprogresschanged(...); public void getvisitedhistory(...);...

25 The web view WebViewClient WebChromeClient WebView WebSettings

26 Communication Android Javascript

28 Executing Javascript Android WebView webview = new WebView(this); webview.getsettings().setjavascriptenabled(true); webview.loadurl("javascript:somefunction()");

29 Executing Javascript HTML <h1 id="head">headline</h1> Android WebView webview = new WebView(this); webview.getsettings().setjavascriptenabled(true); webview.loadurl("javascript:document.getelementbyid('head').innerhtml='hello!';");

30 Flipping images Card Back Front

31 Flipping images

32 Flipping images <div id="card_1" class="card"> <img id="1_front" class="front" /> <img id="1_back" class="back" /> </div> HTML

33 Flipping images <div id="card_1" class="card"> <img id="1_front" class="front" /> <img id="1_back" class="back" /> </div>.card { -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; } HTML CSS.card > img { -webkit-backface-visibility: hidden; }.card > img.back { -webkit-transform: rotatex(180deg); }

34 Flipping images function changeimage(source, index, degrees) { var card = document.getelementbyid('card_' + index); var side = (degrees % 360 == 0)? '_front' : '_back'; var image = document.getelementbyid(index + side); Javascript } image.src = source; card.style.webkittransform = "rotatex(" + degrees + "deg)";

35 Flipping images function changeimage(source, index, degrees) { var card = document.getelementbyid('card_' + index); var side = (degrees % 360 == 0)? '_front' : '_back'; var image = document.getelementbyid(index + side); Javascript } image.src = source; card.style.webkittransform = "rotatex(" + degrees + "deg)"; Android webview.loadurl("javascript:changeimage(url, 2, 180)");

36 Communication Javascript Android

38 Javascript Android Android JavaScript

39 Javascript Android Android JavaScript

40 Javascript Android Android JavaScript

41 Javascript Android Android JavaScript

42 Javascript Android Android JavaScript

43 Javascript Android Android JavaScript

44 Javascript Android class Callback { Android } public void openimage(string url) { Intent showimage = new Intent(); showimage.setclass(context, ImageActivity.class); startactivity(showimage); }

45 Javascript Android class Callback { Android } public void openimage(string url) { Intent showimage = new Intent(); showimage.setclass(context, ImageActivity.class); startactivity(showimage); } webview.addjavascriptinterface(new Callback(), "android"); Android

46 Opening images function openimage(index) { var card = document.getelementbyid('card_' + index); android.openimage(card.currentimage.src); } Javascript

47 Opening images function openimage(index) { var card = document.getelementbyid('card_' + index); android.openimage(card.currentimage.src); } Javascript <div id="card_1" class="card" onclick="openimage(1)" > <img id="1_front" class="front" /> <img id="1_back" class="back" /> </div> HTML

48 Modifying web content

50 JSON

51 Modifying web content String line; StringBuilder builder = new StringBuilder(); BufferedReader reader = new BufferedReader(new InputStreamReader(url.openStream())); while ((line = reader.readline())!= null) { builder.append(line); } JSONObject jsobj = new JSONObject(builder.toString()); JSONObject item = jsobj.getjsonobject("entry");... Android

52 Modifying web content <html> <head>...</head> <body> HTML <h1 id="headline"></h1> <p id="snippet"></p> <a id="link" href="">read more</a> </body> </html>

53 Modifying web content String headline = item.getstring("title"); webview.loadurl("javascript: document.getelementbyid('headline').innerhtml = '" + title + "'"); Android

54 Debugging

55 Debugging Javascript

56 Debugging console.error('oh noes!'); Javascript

57 Debugging console.error('oh noes!'); Javascript :24:14.147: E/Web Console(23749): Oh noes! at file:///android_asset/file.html:5

58 Debugging console.error('oh noes!'); Javascript :24:14.147: E/Web Console(23749): Oh noes! at file:///android_asset/file.html:5 // WebChromeClient public boolean onconsolemessage(consolemessage message) { // Handle message }

59 Weinre

60 Weinre

61 Weinre

62 Demo

63 Error handling

64 Error handling

65 Error handling

66 Error handling

67 Error handling // WebViewClient public boolean shouldoverrideurlloading(webview view, String url) { // Check if URL is the one we expect } return true;

68 Error handling // WebViewClient public boolean shouldoverrideurlloading(webview view, String url) { // Check if URL is the one we expect } return public void onreceivederror(webview view, int code, String desc, String url) { webview.loadurl("file:///android_asset/error_page.html"); } Android

69 Threading issues UI thread Callback runonuithread

70 Threading issues Android runonuithread(new Runnable() public void run() { // Do stuff } });

71 To sum things up...

72 Q&A

73 Thank you!

Introduction to PhoneGap

Introduction to PhoneGap Web development for mobile platforms Master on Free Software / August 2012 Outline About PhoneGap 1 About PhoneGap 2 Development environment First PhoneGap application PhoneGap API overview Building PhoneGap