1 Mobile Software Development Framework: Android Activity, View/ViewGroup, External Resources, Listener 10/9/2012 Y. Richard Yang

2 Admin. r Homework 2 questions

3 Recap: TinyOS r Hardware components motivated design m Each component/module specifies –the interfaces it provides –the interfaces/modules it uses implements the functions in –the declared provided interfaces –event handlers in the declared used interfaces m Configuration specifies the linkage among components/modules r Execution model m Event driven (triggered) handlers, who may post tasks to a FIFO task queue monitored by a task thread

4 Recap: J2ME Framework r Java adaptation for mobile devices r A major focus of J2ME is device heterogeneity r Solution: versioning m Configurations m Profiles

5 Recap: J2ME MIDP Structure MIDP Lifecycle callbacks -startApp -pauseApp -destroyApp Current Displayable A set of commands Command listener d=Display.getDisplay(this) d.setCurrent(disp) disp.addCommand() disp.setCommandListener()

6 Recap: IOS r Apple’s adaptation for mobile devices r E.g., Cocoa => Cocoa Touch m App KIT => UI Kit neOSTechOverview/iPhoneOSTechOverview.pdf

7 Recap: IOS Model View Controller (MVC) Structure Model View Controller Model View Outlet Target Action did will Delegate count Data at Data source Notification and KVO

8 Discussion r What are some major differences between desktop GUI app design and mobile (phone/tablet) GUI app design?

9 Some Key Features of Mobile UI APp r Limited screen real estate m one thing at a time r Limited resources: more dynamic system management on app life cycle m give app chances to adapt, better mem management r More heterogeneous display devices m decoupling between display and logic

10 Mobile GUI App r Screen real-estate is limited => Focus on one thing at a time

11 Mobile GUI App r Screen real-estate is limited => Focus on one thing at a time

Mobile GUI App Workflow App App lifecycle callbacks/custom -start -pause -…

Mobile GUI App Workflow: Do One Thing App App lifecycle callbacks/custom -start -pause -… Display Composite Displa y Composite Displa y Display Composite Displa y

Mobile GUI App Workflow: Display Content Based on Underlining Data App App lifecycle callbacks/custom -start -pause -… Display Composite Displa y Composite Displa y Display Composite Displa y Data/ Model

Mobile GUI App Workflow: Handle Events App App lifecycle callbacks/custom -start -pause -… Display Composite Displa y Composite Displa y Display Composite Displa y Data/ Model Event Handle r

Mobile GUI App Workflow: Switch to Another GUI App App lifecycle callbacks/custom -start -pause -… Display Composite Displa y Composite Displa y Display Composite Displa y Data/ Model Event Handle r Display Composite Display Composite Display

17 Discussion r Key design points for mobile GUI app m Specify app life cycle customization m Specify display m Specify event scheduling How to link event, display, handler, data

Typical Design: App App App lifecycle callbacks/custom -start -pause -… Display Composite Displa y Composite Displa y Display Composite Displa y Data/ Model Event Handle r Framework reacts to app events and invokes app lifecycle event handlers

19 How to Provide App LifeCycle Handlers? r App class implements it m Inheritance r App class does not implement it m Delegate m Command listener

Typical Design: UI App App lifecycle callbacks/custom -start -pause -… Display Composite Displa y Composite Displa y Display Composite Displa y Data/ Model Event Handle r System captures UI events; and puts them in a msg queue of the app. A UI thread processes the queue

Example: IOS 10/ 4/1 2

22 How to Provide Display Component Event Handlers? r Display Component class implements it m Inheritance m Typically a bad idea r Display Component class does not implement it m Makes Display reusable Delegate Command listener

23 Outline r Admin and recap r Mobile/wireless development framework m GNURadio m TinyOS m J2ME m IOS m Android

Android r A mobile OS based on Linux m Customized Linux kernel 2.6 and 3.x (Android 4.0 onwards) E.g., default no X Windows, not full set of GNU libs m Apply OS concepts for mobile contexts e.g., each app is considered one Linux user m New key components, e.g., Binder for IPC Power management wakelock r Application development framework based on Java m Dalvik Virtual Machine 24

Android Architecture 25

Android Tools r Android SDK Manager (android) r Android emulator r Android debug bridge (adb) can connect to an Android device and start a shell on the device r See

Mapping to Android App App lifecycle callbacks/custom -start -pause -… Display Composite Displa y Composite Displa y Display Composite Displa y Data/ Model Event Handle r -How to specify the customized callbacks: extend Activity class -How to link the callbacks defined in view to listener/controller: View.set…Listener() Allows external XML resource files to specify views

Application Framework (Android): Key Concepts r Activity r View/ViewGroup (Layout) r External resources 28

Activity r A single, focused thing that the user can do. r Creating a window to place UI views m Full-screen windows, floating windows, embedded inside of another activity r Typically organized as a Stack m Top Activity is visible m Other activities are stopped m Back button to traverse the Activity Stack m Long Home shows the content of the Stack

Activity: Manifest File r To facility launching and managing Activities, each activity is announced in a manifest file Manifest the activity Instead of a hardcode string in code, defines in res/strings

Android Project Resources 31

Activity: Example // MainActivity.java public class MainActivity extends Activity public void onCreate(Bundle savedInstanceState) { // savedInstanceState holds any data that may have been saved // for the activity before it got killed by the system (e.g. // to save memory) the last time super.onCreate(savedInstanceState); setContentView(… ); // set a View }

View r A view component is a building block for user interface components. r Two types of views m Leaf: TextView, EditText, Button, Form, TimePicker… ListView m Composite (ViewGroup): LinearLayout, Relativelayout, …

Programmatic Usage of Views // MainActivity.java public class MainActivity extends Activity public void onCreate(Bundle savedInstanceState) { // savedInstanceState holds any data that may have been saved // for the activity before it got killed by the system (e.g. // to save memory) the last time super.onCreate(savedInstanceState); TextView tv new TextView(this); tv.setText("Hello!“); setContentView(tv); }

Define View by XML

Access View Defined by public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); } … TextView myTextView = (TextView)findViewById(R.id.myTextView); <LinearLayout xmlns:android=” /apk/res/android” android:orientation=”vertical” android:layout_width=”fill_parent” android:layout_height=”fill_parent”> <TextView android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:text=”Hello World, HelloWorld” /> main.xml

External Resources r Compiled to numbers and included in R.java file 37

Hello Example r See HelloStart 38

39 Android Activity Life Cycle

Lifecycle Example r See ActivityifeCycle 40

Linking Views and Handlers/Controllers r onKeyDown. onKeyUp r onTrackBallEvent r onTouchEvent myEditText.setOnKeyListener(new OnKeyListener() { public boolean onKey(View v, int keyCode, KeyEvent event) { if (event.getAction() == KeyEvent.ACTION_DOWN) if (keyCode == KeyEvent.KEYCODE_DPAD_CENTER) { … return true; } return false; }}); } registerButton.setOnClickListener(new View.OnClickListener() { public void onClick(View arg0) {….}}

Example: TipCalc Set listener: 42 public class TipCalcActivity extends Activity implements OnClickListener { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tip_calc); Button calc = (Button)findViewById(R.id.calculate); calc.setOnClickListener(this); } … }

Example: TipCalc Handler: public void onClick(View arg0) { EditText amountText = (EditText)findViewById(R.id.amount_value); // get input double amt=Double.parseDouble(amountText.getText().toString()); // compute output double tipD = amount * 0.15; // set UI String tipT = String.format("%.2f", tipD); TextView tipText = (TextView)findViewById(R.id.tip_value); tipText.setText(tipT); }