Transcript slide/投影片 - logo Molecular Biomedical Informatics分子生醫資訊

Molecular Biomedical Informatics
分 子 生 醫 資 訊 實 驗 室
Web Programming
網 際 網 路 程 式 設 計
Web Programming 網際網路程式設計
1
App Programming
手機程式設計
Web Programming 網際網路程式設計
2
Again, we have only two hours
Web Programming 網際網路程式設計
3
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 fullscreen 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
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 網際網路程式設計
5
Demo
Web Programming 網際網路程式設計
6
WYSIWYG form design
Web Programming 網際網路程式設計
7
http://www.techotopia.com/index.php/Designing_Forms_in_Visual_Studio
Event driven
8
http://www.techotopia.com/index.php/Understanding_Visual_Basic_Events
Android life cycle




LifeCycle
手機的特性是能隨時離開正在使用的程式，切換到
接電話、接收簡訊模式，而且在回來時能看到一樣
的內容
使用者已經習慣了多工(Multi-Task)的作業系統
同時執行多個程式需要更多記憶體，而手機裡的記
憶體是相當有限的。當同時執行的程式過多，或是
關閉的程式沒有正確釋放記憶體，系統就會越來越
慢。為了解決這個問題，Android 引入了一個新的
機制：生命週期
Web Programming 網際網路程式設計
9
This is not new
10
http://en.wikipedia.org/wiki/Process_state
http://vardhan-justlikethat.blogspot.com/2012/03/developer-view-ios-view-controller.html
Any Questions?
about the life cycle
Web Programming 網際網路程式設計
12
What actions
cause onPause()?
Web Programming 網際網路程式設計
13
More detailed one
14
http://rupaknepali.com.np/activity-life-cycle-in-the-android-application-development/1474.php
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
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 網際網路程式設計
16
WebView code snippet

Get the view object.
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
WebView code snippet

Enable JavaScript and hide the scroll bar.
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
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(…);
}
WebChromeClient handles dialogs, progress…
public void onProgressChanged(…){
if ( 100 == progress ) { … }
super.onProgressChanged(…);
}
});
Web Programming 網際網路程式設計
19
Any Questions?
about the code snippet
Web Programming 網際網路程式設計
20
What/why
R.id.wv
super
call super.xx()
return
Web Programming 網際網路程式設計
21
Layout

Arrange widgets/controls/components

FrameLayout, LinearLayout, RelativeLayout,
AbsoluteLayout and TableLayout

Layout classes are also widgets

Android的Layout整理

[新手完全手冊] Hello Android Layout

User Interface | Android Developers
Web Programming 網際網路程式設計
22
It was specified in the
res/layout/xxx.xml
Web Programming 網際網路程式設計
23
http://www.holisticware.com/HolisticWare/Know-How/development/integrated-development-environments-ides/eclipse.aspx
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.
App
(Activity)
A full-screen
WebView
Java
Web
server
HTML, CSS
and JavaScript
Web Programming 網際網路程式設計
CGI
programs
Perl, PHP or
anything you like
24
Communication code snippet

Java call JavaScript
In JavaScript, declare a function.
– 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
Communication code snippet

Java call JavaScript
– function java_call_js() { … }
– wv.loadUrl("javascript:java_call_js()");

JavaScript
In
Java, changecall
the Java
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.
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
Communication code snippet

Java call JavaScript
– function java_call_js() { … }
– wv.loadUrl("javascript:java_call_js()");

JavaScript call Java
In Java, always remember to enable JS.
– 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
Communication code snippet

Java call JavaScript
– function java_call_js() { … }
– wv.loadUrl("javascript:java_call_js()");

JavaScript call Java
In Java, bind a new interface with addJavaScriptInterface().
– 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
Communication code snippet

Java call JavaScript
– function java_call_js() { … }
– wv.loadUrl("javascript:java_call_js()");
In JavaScript, the bound interface is actually an object whose

variables/functions are accessible to JS. The object name
JavaScript member
call Java
corresponds to the second parameter of addJavascriptInterface().
– 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
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 網際網路程式設計
30
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
–

Enable required permissions (e.g. internet permission)
–

change its id (e.g. wv) make it full-screen (via property table or .xml)
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
Today’s assignment
今天的任務
Web Programming 網際網路程式設計
32
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 網際網路程式設計
33
Appendix
附錄
Web Programming 網際網路程式設計
34
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
Web Programming 網際網路程式設計
35