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