Transcript slide/投影片

Social Web Design
社群網站設計
Darby Chang
張天豪
Social Web Design 社群網站設計
1
App Programming
手機程式設計
Social Web Design 社群網站設計
2
Again, we have only two hours
Social Web Design 社群網站設計
3
http://www.pastposters.com/details.php?prodId=1030&category=&secondary=&keywords
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
Social Web Design 社群網站設計
5
Today we will show you

Basics of app (windows) programming
– WYSIWYG form design
– event driven

Basics of 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
– retrieve data from WebView (our web server) to Activity

A demo
– introduction to the development environment, Eclipse

The source code of the demo
Social Web Design 社群網站設計
6
WYSIWYG form design
Designing Forms in Visual Studio
Social Web Design 社群網站設計
7
Event driven
Understanding Visual Basic Events
Social Web Design 社群網站設計
8
Andorid life cycle





LifeCycle
編寫 Android 平台的基本應用程式，跟編寫桌面應用程式的難度，兩
者並沒什麼不同。手機的特性，就是應該能隨時在未完成目前動作的
時候，離開正在使用的功能，切換到接電話、接收簡訊模式。而且在
接完電話回來應用程式時，還希望能看到一樣的內容。
現在使用者使用智慧型手機，大多已習慣使用多工(Multi-Task)的作業
系統(如 Windows Mobile)，可以在用手機聽音樂的同時，也執行其他
多個程式。
同時執行多個程式有它的明顯好處，但是也有它的嚴重的缺點。每多
執行一個應用程式，就會多耗費一些系統記憶體。而手機裡的記憶體
是相當有限的。當同時執行的程式過多，或是關閉的程式沒有正確釋
放掉記憶體，執行系統時就會覺得越來越慢，甚至不穩定。
為了解決這個問題，Android 引入了一個新的機制：生命週期
Social Web Design 社群網站設計
9
This is not
complete new
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
Social Web Design 社群網站設計
12
What actions
cause onPause()?
Social Web Design 社群網站設計
13
More detailed one. You
may see the examples in
LifeCycle.
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();
// from foo activity to bar activity
intent.setClass(foo.this, bar.class);
// retrieve variables of current activity and pack them
Bundle bundle = new Bundle();
bundle.putString("FOO_VAR_1", foo_var_1.getText().toString());
bundle.putString("FOO_VAR_2", foo_var_2.getText().toString());
intent.putExtras(bundle);
startActivity(intent); // start another activity
Social Web Design 社群網站設計
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
Social Web Design 社群網站設計
16
WebView code snippet

wv = (WebView)findViewById(R.id.wv);
wv.getSettings().setJavaScriptEnabled(true); // enable JavaScript
wv.setScrollBarStyle(0); // hide scroll bar
wv.setWebViewClient(new WebViewClient(){
public boolean shouldOverrideUrlLoading(
final WebView view, final String url) {
loadurl(view,url); // load url
return true;
} // when a new url is about to be loaded
});
wv.setWebChromeClient(new WebChromeClient(){
public void onProgressChanged(WebView view,int progress){
if(progress==100){ … }
super.onProgressChanged(view, progress);
} // when progress changed
}); // WebChromeClient handles dialogs, title and progress
Social Web Design 社群網站設計
17
Any Questions?
about the code snippet
Social Web Design 社群網站設計
18
What is “R.id.wv”
wv = (WebView)findViewById(R.id.wv);
Social Web Design 社群網站設計
19
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
Social Web Design 社群網站設計
20
It was specified in the
res/layout/xxx.xml
Social Web Design 社群網站設計
21
http://www.holisticware.com/HolisticWare/Know-How/development/integrated-development-environments-ides/eclipse.aspx
Activity-WebView communication



Activity can change the URL of WebView to pass data
The difficult part is how to retrieve data from WebView
Android 解析 XML
– This is not the only way and we’re still working on it. Just keep
in mind that once the communication between Activity and
WebView is okay, you are actually developing an web app.

App
(Activity)
A full-screen
WebView
Java
Web
server
HTML, CSS
and JavaScript
Social Web Design 社群網站設計
CGI
programs
Perl, PHP or
anything you like
22
Demo
Social Web Design 社群網站設計
23
Reminders

Make sure all the required SDKs were installed
– Android 2.2.3 (API 10) or 2.1 (API 7)
– Google APIs, if you used the map widget

Set up a suitable virtual device and make sure you selected it
– SD Card, screen resolution, GPS support, Keyboard support

Check the run configuration
– Project, target (virtual device), Command Line Options
– some settings are in the AndroidManifest.xml

Make sure your server program is correct

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.
Social Web Design 社群網站設計
24
One more thing
Social Web Design 社群網站設計
25
Launch
發佈

Find the file at bin/xxx.apk, upload it to a web server
and share the url
– http://zoro.ee.ncku.edu.tw/swd2012/demo/10app/GPSprj.gpk

Of course you can launch to the market (Google Play),
which is beyond the scope of this slide

Once again, you will see the power of web technology
in launching. You can launch new version immediately
and cross-platform (web, Android and iOS).
Social Web Design 社群網站設計
26
Today’s assignment
今天的任務
Social Web Design 社群網站設計
27
Create an app


Two options, you may create a very simple app. Since we have
provided a source code, the most difficult part could install the
Eclipse and SDKs. 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/ex10/ and
http://merry.ee.ncku.edu.tw/~xxx/cur/) will be checked not before
23:59 6/4 (Mon). You may send a report (such as some important
modifications) to me in case I did not notice your features.
Social Web Design 社群網站設計
28
Appendix
附錄
Social Web Design 社群網站設計
29
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
Social Web Design 社群網站設計
30

XML
– Android 解析 XML
Social Web Design 社群網站設計
31