Molecular Biomedical Informatics Web Programming 1

1

Molecular Biomedical Informatics分子生醫資訊實驗室

Web Programming網際網路程式設計

Web Programming 網際網路程式設計

2

App Programming手機程式設計

Web Programming 網際網路程式設計

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 網際網路程式設計

5

Today we will show you A Web App Generator, wag 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 網際網路程式設計

6

Demo

Web Programming 網際網路程式設計

7http://www.techotopia.com/index.php/Designing_Forms_in_Visual_Studio

WYSIWYG form design

Web Programming 網際網路程式設計

8http://www.techotopia.com/index.php/Understanding_Visual_Basic_Events

Event driven

9

Android life cycle LifeCycle 手機的特性是能隨時離開正在使用的程式，切換到接電

話、接收簡訊模式，而且在回來時能看到一樣的內容 使用者已經習慣了多工 (Multi-Task) 的作業系統 同時執行多個程式需要更多記憶體，而手機裡的記憶體

是相當有限的。當同時執行的程式過多，或是關閉的程式沒有正確釋放記憶體，系統就會越來越慢。為了解決這個問題， Android 引入了一個新的機制：生命週期

Web Programming 網際網路程式設計

10http://en.wikipedia.org/wiki/Process_state

This is not new

http://vardhan-justlikethat.blogspot.com/2012/03/developer-view-ios-view-controller.html

12

Any Questions?

Web Programming 網際網路程式設計

about the life cycle

13

What actions

Web Programming 網際網路程式設計

cause onPause()?

14http://rupaknepali.com.np/activity-life-cycle-in-the-android-application-development/1474.php

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 variablesBundle 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 網際網路程式設計

16

WebView android开发中WebView的使用(附完整程序)

WebView 相當於一個迷你的瀏覽器，採用 Webkit 核心，因此完美支援 HTML, CSS 以及 JavaScript 等。有時可以把 UI 甚至數據處理都交给 WebView ，配合 PHP 等伺服器端程式，這樣 Android 開發就變成了網頁開發

上面網址中提供一個 WebView 的簡單例子，如果把所有功能都交给伺服器端處理，你只要寫好網頁，把 URL 填上，再編譯，就是一个新 app 。

WebView | Android Developers Building Web Apps in WebView | Android Developers

Web Programming 網際網路程式設計

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 網際網路程式設計

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 網際網路程式設計

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 網際網路程式設計

WebChromeClient handles dialogs, progress…

20

Any Questions?

Web Programming 網際網路程式設計

about the code snippet

21

What/why

Web Programming 網際網路程式設計

R.id.wvsupercall super.xx()return

22

Layout Arrange widgets/controls/components FrameLayout, LinearLayout, RelativeLayout,

AbsoluteLayout and TableLayout Layout classes are also widgets

Android的Layout整理 [新手完全手冊] Hello Android Layout

User Interface | Android DevelopersWeb Programming 網際網路程式設計

23http://www.holisticware.com/HolisticWare/Know-How/development/integrated-development-environments-ides/eclipse.aspx

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 網際網路程式設計

App (Activity)

A full-screen WebView

Web server

CGI programs

Java HTML, 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 網際網路程式設計

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 網際網路程式設計

In Java, change the URL to execute any JS code. This is a common behavior for all browsers. So actually you don’t 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 網際網路程式設計

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 網際網路程式設計

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 網際網路程式設計

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. That’s what this course tries to provide.Web Programming 網際網路程式設計

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 barWebView wv= (WebView) findViewById(R.id.wv); // get the WebViewwv.getSettings().setJavaScriptEnabled(true); // enable JavaScriptwv.loadUrl("http://www.google.com"); // load a URLwv.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 網際網路程式設計

32

Today’s assignment今天的任務

Web Programming 網際網路程式設計

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 Developers

– How To Build A Mobile Website

– 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.

Web Programming 網際網路程式設計

34

Appendix附錄

Web Programming 網際網路程式設計

35

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的朋友：HandlerWeb Programming 網際網路程式設計