1. Molecular Biomedical Informatics Web Programming 1

2. App Programming 2 Web Programming

3. 3 Again, we have only two hours Web Programming

4. Basic idea There is a browser component, WebView –you could imagine that every new platform will have such a component When users open our app, we show them a full- screen browser and load our homepage immediately –remember to hide the address bar The remaining things are HTML, CSS, JavaScript and, if needed, CGI Web Programming 4

5. Today we will show you A Web App Generator, wagwag A demo to introduce the development environment, Eclipse Basic app (windows) programming –WYSIWYG form design, event driven… Basic Android app programming –Activity (a page in an app), especially its life cycle –Intent (information from an Activity to another) Techniques needed for our basic idea –WebView –bind JS code to Android code Web Programming 5

6. Demo 6 Web Programming

7. 7 WYSIWYG form design Web Programming

8. 8 Event driven

9. Android life cycle LifeCycle (Multi-Task) Android Web Programming 9

10. 10 This is not new

12. Any Questions? Web Programming 12 about the life cycle

13. What actions Web Programming 13 cause onPause()?

14. 14 More detailed one

15. Intent AndroidIntent Intent Intent Activity Android Intent Intent Activity Activity Intent intent = new Intent(); intent.setClass(foo.this, bar.class); // from foo to bar // retrieve and pack variables Bundle bundle = new Bundle(); bundle.putString("FOO_VAR1", foo_var1.getText().toString()); bundle.putString("FOO_VAR2", foo_var2.getText().toString()); intent.putExtras(bundle); startActivity(intent); // start another activity Web Programming 15

16. WebView android WebView ( ) android WebView ( ) WebView Webkit HTML, CSS JavaScript UI WebView PHP Android WebView URL app WebView | Android Developers WebView | Android Developers Building Web Apps in WebView | Android Developers Building Web Apps in WebView | Android Developers Web Programming 16

17. WebView code snippet wv = (WebView) findViewById(R.id.wv); wv.getSettings().setJavaScriptEnabled(true); wv.setScrollBarStyle(0); wv.setWebChromeClient(new WebChromeClient(){ public boolean onJsAlert(…) { return super.onJsAlert(…); } public void onProgressChanged(…){ if ( 100 == progress ) { … } super.onProgressChanged(…); } }); Web Programming 17 Get the view object.

18. WebView code snippet wv = (WebView) findViewById(R.id.wv); wv.getSettings().setJavaScriptEnabled(true); wv.setScrollBarStyle(0); wv.setWebChromeClient(new WebChromeClient(){ public boolean onJsAlert(…) { return super.onJsAlert(…); } public void onProgressChanged(…){ if ( 100 == progress ) { … } super.onProgressChanged(…); } }); Web Programming 18 Enable JavaScript and hide the scroll bar.

19. WebView code snippet wv = (WebView) findViewById(R.id.wv); wv.getSettings().setJavaScriptEnabled(true); wv.setScrollBarStyle(0); wv.setWebChromeClient(new WebChromeClient(){ public boolean onJsAlert(…) { return super.onJsAlert(…); } public void onProgressChanged(…){ if ( 100 == progress ) { … } super.onProgressChanged(…); } }); Web Programming 19 WebChromeClient handles dialogs, progress…

20. Any Questions? Web Programming 20 about the code snippet

21. What/why Web Programming 21 R.id.wv super call super.xx() return

22. Layout Arrange widgets/controls/components FrameLayout, LinearLayout, RelativeLayout, AbsoluteLayout and TableLayout Layout classes are also widgets Android Layout Android Layout [ ] Hello Android Layout [ ] Hello Android Layout User Interface | Android Developers Web Programming 22

23. 23 It was specified in the res/layout/xxx.xml Web Programming

24. Activity-WebView communication Building Web Apps in WebView Activity can change the URL of WebView to pass data The difficult part is how to retrieve data from WebView –call addJavascriptInterface() and pass it a class instance to bind an interface name that your JS can call to access the class Once the communication between Activity and WebView is connected, you are actually developing an web app. Web Programming 24 App (Activity) A full-screen WebView Web server CGI programs JavaHTML, CSS and JavaScript Perl, PHP or anything you like

25. Communication code snippet Java call JavaScript –function java_call_js() { … } –wv.loadUrl("javascript:java_call_js()"); JavaScript call Java –wv.getSettings().setJavaScriptEnabled(true); public class WebAppInterface { public void js_call_java() { … } } wv.addJavascriptInterface( new WebAppInterface(), "android"); –window.android.js_call_java(); Web Programming 25 In JavaScript, declare a function.

26. Communication code snippet Java call JavaScript –function java_call_js() { … } –wv.loadUrl("javascript:java_call_js()"); JavaScript call Java –wv.getSettings().setJavaScriptEnabled(true); public class WebAppInterface { public void js_call_java() { … } } wv.addJavascriptInterface( new WebAppInterface(), "android"); –window.android.js_call_java(); Web Programming 26 In Java, change the URL to execute any JS code. This is a common behavior for all browsers. So actually you dont need to design new JS functions intentionally.

27. Communication code snippet Java call JavaScript –function java_call_js() { … } –wv.loadUrl("javascript:java_call_js()"); JavaScript call Java –wv.getSettings().setJavaScriptEnabled(true); public class WebAppInterface { public void js_call_java() { … } } wv.addJavascriptInterface( new WebAppInterface(), "android"); –window.android.js_call_java(); Web Programming 27 In Java, always remember to enable JS.

28. Communication code snippet Java call JavaScript –function java_call_js() { … } –wv.loadUrl("javascript:java_call_js()"); JavaScript call Java –wv.getSettings().setJavaScriptEnabled(true); public class WebAppInterface { public void js_call_java() { … } } wv.addJavascriptInterface( new WebAppInterface(), "android"); –window.android.js_call_java(); Web Programming 28 In Java, bind a new interface with addJavaScriptInterface().

29. Communication code snippet Java call JavaScript –function java_call_js() { … } –wv.loadUrl("javascript:java_call_js()"); JavaScript call Java –wv.getSettings().setJavaScriptEnabled(true); public class WebAppInterface { public void js_call_java() { … } } wv.addJavascriptInterface( new WebAppInterface(), "android"); –window.android.js_call_java(); Web Programming 29 In JavaScript, the bound interface is actually an object whose member variables/functions are accessible to JS. The object name corresponds to the second parameter of addJavascriptInterface().

30. Reminders of the environment https://developer.android.com/sdk/index.html –download the SDK (including Eclipse, ADT plugin, Android SDK…), which needs no installation http://www.oracle.com/technetwork/java/javase/archive-139210.html –download and install JDK (version 6 is suggested by Google) Setup Android SDK Manager (API version, Google API…) Setup Android Virtual Device Manager (resolution, SD Card…) –you can use real phones This is usually the most painful stage (try and error) when learning a new platform. It can be largely eased if you have a good mentor, or at least a partner to discuss. Thats what this course tries to provide. Web Programming 30

31. Step-by-step of the demo Create an Android Application Project with a Blank Activity or Fullscreen Activity Add a WebView (in Composite) by editing res/layout/activity_main.xml –change its id (e.g. wv) make it full-screen (via property table or.xml) Enable required permissions (e.g. internet permission) –AndroidManifest.xml Add Uses Permission android.permission.INTERNET Add a new event handler, onCreate(), by editing src/xxx/xxx.java –xxx/xxx is your main activity, which depends on the settings when creating the application –requestWindowFeature(Window.FEATURE_NO_TITLE); // hide the title bar WebView wv= (WebView) findViewById(R.id.wv); // get the WebView wv.getSettings().setJavaScriptEnabled(true); // enable JavaScript wv.loadUrl("http://www.google.com"); // load a URL wv.loadUrl("javascript:foo()"); // execute JavaScript If you want to load a HTML file offline, store it (e.g. index.html) in assets/ –wv.loadUrl("file:///android_asset/index.html"); Run your application –you will get bin/xxx.apk, put it to a public place to distribute your applicatoin Web Programming 31

32. Todays assignment Web Programming 32

33. Create an app Two options, you may create a very simple app. Another option is to make a mobile version (small screen version) for your site. So that mobile users feel good when browsing your site. Reference –Android DevelopersAndroid Developers –How To Build A Mobile WebsiteHow To Build A Mobile Website –mobile web - Google mobile web - Google – Your web site (http://merry.ee.ncku.edu.tw/~xxx/cur/, ex12) will be checked not before 23:59 1/7 (Tue). You may send a report (such as some important modifications) to me in case I did not notice your features. Or, even better, just explain your modifications in the homepage.http://merry.ee.ncku.edu.tw/~xxx/cur/me Web Programming 33

34. Appendix 34 Web Programming

35. Thread [Android] -Handler Thread [Android] -Handler Thread Android 5 ( Application not Responsed, ANR) onCreate() 10 ANR onCreate() thread ( ) Main thread for UI, worker threads for long-time work and use handers to find other threads Thread | Android Developers android thread Handler android thread Handler Web Programming 35