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

2. 2 Admin. r Homework 2 questions

3. 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. 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. 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. 6 Recap: IOS r Apple’s adaptation for mobile devices r E.g., Cocoa => Cocoa Touch m App KIT => UI Kit http://developer.apple.com/library/ios/documentation/Miscellaneous/Conceptual/iPho neOSTechOverview/iPhoneOSTechOverview.pdf

7. 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. 8 Discussion r What are some major differences between desktop GUI app design and mobile (phone/tablet) GUI app design?

9. 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. 10 Mobile GUI App r Screen real-estate is limited => Focus on one thing at a time

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

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

13. 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

14. 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

15. 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

16. 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. 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

18. 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. 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

20. 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

21. Example: IOS 10/ 4/1 2

22. 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. 23 Outline r Admin and recap r Mobile/wireless development framework m GNURadio m TinyOS m J2ME m IOS m Android http://developer.android.com/index.html

24. 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

25. Android Architecture 25

26. 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 http://developer.android.com/tools/workflow/index.htmlhttp://developer.android.com/tools/workflow/index.html

27. 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

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

29. 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

30. 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

31. Android Project Resources 31

32. Activity: Example // MainActivity.java public class MainActivity extends Activity { @Override 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 }

33. 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, … http://developer.android.com/guide/tutorials/views/index.htm

34. Programmatic Usage of Views // MainActivity.java public class MainActivity extends Activity { @Override 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); }

35. Define View by XML

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

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

38. Hello Example r See HelloStart 38

39. 39 Android Activity Life Cycle

40. Lifecycle Example r See ActivityifeCycle 40

41. 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) {….}}

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

43. Example: TipCalc Handler: 43 @Override 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); }