by Tuan Tuong Dang @ Multinc with guidance from Huy Zing BarCamp Saigon 1 November 15, 2008

echo-o “ simple real-time feedback” From: To:

“ simple real-time feedback”

From:

To:

echo-o architecture Web Application Multiple clients: Web browser Adobe AIR iPhone mobile Android mobile

Web Application

Multiple clients:

Web browser

Adobe AIR

iPhone mobile

Android mobile

Android Mobile

This presentation Structure of an Android application Building blocks of an Android application User Interface of the echo-o application

Structure of an Android application

Building blocks of an Android application

User Interface of the echo-o application

HelloWorld.java public class HelloWorld extends Activity { public void onCreate(Bundle instanceState) { super.onCreate(instanceState); TextView tv = new TextView(this); tv.setText("Hello World!!!"); this.setContentView(tv); } }

public class HelloWorld extends Activity {

public void onCreate(Bundle instanceState) {

super.onCreate(instanceState);

TextView tv = new TextView(this);

tv.setText("Hello World!!!");

this.setContentView(tv);

}

}

4 Android Building Blocks Activity Service BroadcastReceiver ContentProvider

Activity

Service

BroadcastReceiver

ContentProvider

Building Blocks for echo-o Activity – to show screens and respond to user Service – to create a re-usable sound object BroadcastReceiver ContentProvider

Activity – to show screens and respond to user

Service – to create a re-usable sound object

BroadcastReceiver

ContentProvider

Other APIs Intent Views Notifications

Intent

Views

Notifications

Other APIs for echo-o Intent – messages such as invoking a sound Views – display web pages Notifications – send vibrate notifications

Intent – messages such as invoking a sound

Views – display web pages

Notifications – send vibrate notifications

UI Screens Each screen has views

Each screen has views

View Layouts FrameLayout LinearLayout RelativeLayout TableLayout AbsoluteLayout

FrameLayout

LinearLayout

RelativeLayout

TableLayout

AbsoluteLayout

View Components Button TextView WebView – displays our web application EditText ListView CheckBox Radio

Button

TextView

WebView – displays our web application

EditText

ListView

CheckBox

Radio

WebView Problem: JavaScript is disabled by default. Solution: browser.getSettings().setJavaScriptEnabled( true );

Problem: JavaScript is disabled by default.

Solution:

browser.getSettings().setJavaScriptEnabled( true );

WebView Problem: Communication between Android app and web app: Solutions: Set up handler for JavaScript alerts/prompt/confirms: browser. setWebChromeClient (new WebChromeConfirm()); private class WebChromeConfirm extends WebChromeClient {…} Web app invokes method on native app: MainActivity.java AndroidManipulation am = new AndroidManipulation(this); browser. addJavascriptInterface (am, “am"); WebApp.js: am. doVibrate();

Problem: Communication between Android app and web app:

Solutions:

Set up handler for JavaScript alerts/prompt/confirms:

browser. setWebChromeClient (new WebChromeConfirm());

private class WebChromeConfirm extends WebChromeClient {…}

Web app invokes method on native app:

MainActivity.java

AndroidManipulation am = new AndroidManipulation(this);

browser. addJavascriptInterface (am, “am");

WebApp.js:

am. doVibrate();

WebView Problem: Zoom picker is disabled by default Solution: LinearLayout zoomLayout = (LinearLayout)findViewById(R.id. basic_map_zoom ); settingWebView(); View zc = browser. getZoomControls (); zoomLayout. addView (zc, new ViewGroup.LayoutParams(ViewGroup.LayoutParams. WRAP_CONTENT , ViewGroup.LayoutParams. WRAP_CONTENT ));

Problem: Zoom picker is disabled by default

Solution:

LinearLayout zoomLayout = (LinearLayout)findViewById(R.id. basic_map_zoom );

settingWebView();

View zc = browser. getZoomControls ();

zoomLayout. addView (zc, new ViewGroup.LayoutParams(ViewGroup.LayoutParams. WRAP_CONTENT , ViewGroup.LayoutParams. WRAP_CONTENT ));

WebView Problem: clicking links are sent to system web browser. Solution: clicking links stay in the WebView browser. setWebViewClient (new Callback()); private class Callback extends WebViewClient { public boolean shouldOverrideUrlLoading(WebView view, String url) { loadUrl(url); return(true); } }

Problem: clicking links are sent to system web browser.

Solution: clicking links stay in the WebView

browser. setWebViewClient (new Callback());

private class Callback extends WebViewClient {

public boolean shouldOverrideUrlLoading(WebView view, String url) {

loadUrl(url);

return(true);

}

}

WebView Problem: changing orientation resets emulator Solution: test on real mobile device on emulator: protected void onSaveInstanceState ( Bundle outState ) { super.onSaveInstanceState(outState); outState. putString ("address", txt.getText().toString()); } .... String address = savedInstanceState != null ? savedInstanceState. getString ("address") : "http://www.google.com.vn"; loadUrl(address);

Problem: changing orientation resets emulator

Solution:

test on real mobile device

on emulator:

protected void onSaveInstanceState ( Bundle outState ) {

super.onSaveInstanceState(outState);

outState. putString ("address", txt.getText().toString());

}

....

String address = savedInstanceState != null ? savedInstanceState. getString ("address") :

"http://www.google.com.vn";

loadUrl(address);

http://multinc.com/ http://code.google.com/android/