HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
0 likes823 views
This document discusses dialogs, tabs, and lists in Android mobile app development. It begins with a short introduction to design patterns and how API designers use patterns like method chaining and builder. It then covers creating custom dialog boxes in Android and how to construct them using callbacks. Tabbed layouts are explained using tab widgets and frame layouts. Lists are enhanced by adding images to rows using custom row adapters. Throughout, it emphasizes patterns like method chaining used in the Android SDK.
![R. Vasa, 20121
Fluent Interfaces & C-Q
Principle
private void makeFluentOrder(Customer customer)
{
customer.newOrder()
.with(6, "TAL")
.with(5, "HPK").skippable()
.with(3, "LGV")
.priorityRush();
}
Example from:
http://martinfowler.com/bliki/FluentInterface.html
with() methods [commands]
update and return the order
object
with() methods [commands]
update and return the order
object
public Order with(int i, String string)public Order with(int i, String string)](https://image.slidesharecdn.com/hit3328-chapter0701-dialogstabslists-130427170856-phpapp02/85/HIT3328-Chapter0701-Dialogs-Tabs-and-Lists-15-320.jpg)
![R. Vasa, 20125
Custom Row Adapter
class RowIconAdapter extends ArrayAdapter<String>
{
public RowIconAdapter()
{super(LatLongActivity.this, R.layout.listrow, R.id.row_label, cityNames);}
public View getView(int pos, View cView, ViewGroup parent)
{
View row = super.getView(pos, cView, parent); // DEFAULT ROW
ImageView icon = (ImageView) row.findViewById(R.id.row_icon);
String city = cityNames[pos];
if (city.startsWith("Melb"))
icon.setImageResource(R.drawable.melbourne);
else if (city.startsWith("Syd"))
icon.setImageResource(R.drawable.sydney);
else
icon.setImageResource(R.drawable.location);
return row;
}}](https://image.slidesharecdn.com/hit3328-chapter0701-dialogstabslists-130427170856-phpapp02/85/HIT3328-Chapter0701-Dialogs-Tabs-and-Lists-58-320.jpg)
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
- 1. HIT3328 / HIT8328 Software Development for Mobile Devices Dr. Rajesh Vasa, 2011 1 Twitter: @rvasa Blog: http://rvasa.blogspot.com Lecture 07 Dialogs, Tabs and Lists
- 2. R. Vasa, 20122 Lecture Overview •A short Detour into Design Patterns •Dialogs •Tabbed Layouts •Enhancing Lists
- 3. R. Vasa, 20123 Design Patterns •A general reusable solution to a commonly occurring problem in software design •Typically cover, •Algorithm strategy •Computational design •Execution •Implementation strategy •Structural design
- 4. R. Vasa, 20124 API designers use these patterns •API designers use a number of these patterns •If you can recognise the patterns used -- it will help you, •learn the API faster & use it better •understand the underlying problem that motivated designers to choose the pattern •Improve your own code by adapting the pattern (assuming the pattern used by API designer is good)
- 5. R. Vasa, 20125 API Design - Android Example •Android API designers built their SDK around the Method Chaining and Builder pattern in many instances •What are they? Why have they used it?
- 6. R. Vasa, 20126 Quick Concept Clarification •Before we go into the pattern in depth •We need to know the following: •Mutable Vs Immutable objects •Command-Query Separation Principle •Fluent Interfaces
- 7. R. Vasa, 20127 Mutable vs Immutable Objects •In Object oriented languages -- some objects are designed to be immutable •That is, once created -- they are constants •In Java -- Strings are immutable •Constant (immutable) offer better memory allocation strategies •However, if we change these objects too often -- then we pay a high price
- 8. R. Vasa, 20128 Immutable Vs Mutable Objects •In Java, if we perform a large number of string modifications •It is better to use StringBuffer •StringBuffer is Mutable (can be changed) •During design (over years) we discovered that mutable objects should have certain design properties •But -- our thinking was boxed!!!!
- 9. R. Vasa, 20129 Command - Query Separation Principle •Good Object Oriented design should ensure that a method is either a command or a query •Simply put, •getName() -- Query -- Should not change state •setName() -- Command -- Can change state •Methods that perform both are considered poor practice This principle boxed our thinking (to some extentThis principle boxed our thinking (to some extent)
- 10. R. Vasa, 20121 Command - Query Separation Principle •Consequences of this principle, •“set” Methods should not return (i.e. void) •This principle has influenced quite a large pool of API code (Java, .NET and others) •Side-effect, •We end up writing a large number of set methods •Often one per line
- 11. R. Vasa, 20121 Command-Query Principle At Work private void makeNormalOrder(Customer customer) { Order o1 = new Order(); customer.addOrder(o1); OrderLine line1 = new OrderLine(6, Product.find("TAL")); o1.addLine(line1); OrderLine line2 = new OrderLine(5, Product.find("HPK")); o1.addLine(line2); OrderLine line3 = new OrderLine(3, Product.find("LGV")); o1.addLine(line3); line2.setSkippable(true); o1.setRush(true); } Commands and Queries are clearly separatedCommands and Queries are clearly separated Example from: http://martinfowler.com/bliki/FluentInterface.html
- 12. R. Vasa, 20121 Command-Query Principle At Work private void makeNormalOrder(Customer customer) { Order o1 = new Order(); customer.addOrder(o1); OrderLine line1 = new OrderLine(6, Product.find("TAL")); o1.addLine(line1); OrderLine line2 = new OrderLine(5, Product.find("HPK")); o1.addLine(line2); OrderLine line3 = new OrderLine(3, Product.find("LGV")); o1.addLine(line3); line2.setSkippable(true); o1.setRush(true); } Example from: http://martinfowler.com/bliki/FluentInterface.html Code is needlessly messy, long and convolutedCode is needlessly messy, long and convoluted
- 13. R. Vasa, 20121 Fluent Interface •The concept is that we should write code that is better to read •That is, it communicates the intent much more clearly
- 14. R. Vasa, 20121 Fluent Interfaces Example private void makeFluentOrder(Customer customer) { customer.newOrder() .with(6, "TAL") .with(5, "HPK").skippable() .with(3, "LGV") .priorityRush(); } Example from: http://martinfowler.com/bliki/FluentInterface.html Easier to read -- but is C-Q still followed?Easier to read -- but is C-Q still followed? Commands change state and return -- but intent of the principle is not really violated Commands change state and return -- but intent of the principle is not really violated
- 15. R. Vasa, 20121 Fluent Interfaces & C-Q Principle private void makeFluentOrder(Customer customer) { customer.newOrder() .with(6, "TAL") .with(5, "HPK").skippable() .with(3, "LGV") .priorityRush(); } Example from: http://martinfowler.com/bliki/FluentInterface.html with() methods [commands] update and return the order object with() methods [commands] update and return the order object public Order with(int i, String string)public Order with(int i, String string)
- 16. R. Vasa, 20121 Method Chaining Pattern private void makeFluentOrder(Customer customer) { customer.newOrder() .with(6, "TAL") .with(5, "HPK").skippable() .with(3, "LGV") .priorityRush(); } Method Chaining Pattern - Object is mutated and returned back Method Chaining Pattern - Object is mutated and returned back
- 17. R. Vasa, 20121 Back to Android API Design •Android SDK designers are influenced by these ideas around fluent interfaces and method chaining •They combine it with the Builder Pattern to help construct layouts and views •This pattern is highlighted in the examples that follow ....
- 18. R. Vasa, 20121 Lecture Roadmap - Where are we? •A short Detour into Design Patterns •Dialogs •Tabbed Layouts •Enhancing Lists
- 19. R. Vasa, 20121 Dialogs • How long have I been alive? Date Dialog Alert Dialog
- 20. R. Vasa, 20122 Dialogs are flexible Date Dialog (SDK Provided) Custom Alert Dialog Title and Icon
- 21. R. Vasa, 20122 Dialogs are flexible Date Dialog (SDK Provided) Custom Alert Dialog Title and Icon Message
- 22. R. Vasa, 20122 Dialogs are flexible Date Dialog (SDK Provided) Custom Alert Dialog Title and Icon Message Control Buttons
- 23. R. Vasa, 20122 Dialogs are useful for error messages Custom Alert Dialog Ideal for simple error messages
- 24. R. Vasa, 20122 Date Picker Dialog private MutableDateTime mdt = new MutableDateTime(1990,1,1,10,10,0,0); Mutable Date Time from Joda Time library (see sample code) We can set a default date value for the dialog
- 25. R. Vasa, 20122 Short Problem - Usability Question •In this context, what should be the default date shown? 20 years ago Current Should it be something else? -- Is it important?
- 26. R. Vasa, 20122 Constructing Custom Alter Dialogs This code uses a built-in icon, but can be any appropriate drawable This code uses a built-in icon, but can be any appropriate drawable See http://androiddrawableexplorer.appspot.com/ for a full list of built-in drawable resources and their names
- 27. R. Vasa, 20122 Constructing Custom Alter Dialogs We can set buttons (positive/negative/neutral) We can set buttons (positive/negative/neutral)
- 28. R. Vasa, 20122 Constructing Custom Alter Dialogs Button Click implementatio n Button Click implementatio n
- 29. R. Vasa, 20122 Deconstructing the Patterns in Use Dialog Builder - Inner ClassDialog Builder - Inner Class Method Chaining PatternMethod Chaining Pattern
- 30. R. Vasa, 20123 Showing a Dialog public void onBackPressed() { showDialog(EXIT_DIALOG); } This is a method provided by the Activity class This is a method provided by the Activity class We have to provide these constants for the call-back We have to provide these constants for the call-back
- 31. R. Vasa, 20123 Dialogs are Constructed via Call-Backs public void onBackPressed() { showDialog(EXIT_DIALOG); } Triggers the call back This is displayed to the user This is displayed to the user
- 32. R. Vasa, 20123 Why go through so much trouble?public void onBackPressed() { showDialog(EXIT_DIALOG); } Because dialogs needs a parent Activity for life cycle management Because dialogs needs a parent Activity for life cycle management Offers separation of concerns Offers separation of concerns
- 33. R. Vasa, 20123 Lecture Roadmap - Where are we? •A short Detour into Design Patterns •Dialogs •Tabbed Layouts •Enhancing Lists
- 34. R. Vasa, 20123 Tabbed Layouts
- 35. R. Vasa, 20123 Tabbed Layouts - Concepts Tab Host (container)
- 36. R. Vasa, 20123 Tabbed Layouts - Concepts Tab Widget Tab Host (container)
- 37. R. Vasa, 20123 Tabbed Layouts - Concepts Tab Host (container) Tab Widget Frame Layout is used to switch the visible content for a tab
- 38. R. Vasa, 20123 Layout of a Tabbed App. bHost contains the TabWidget and the FrameLayo
- 39. R. Vasa, 20123 Layout of a Tabbed App. Two views in the frame layout to switch around Two views in the frame layout to switch around
- 40. R. Vasa, 20124 Wiring up the Activity Method chaining usedMethod chaining used
- 41. R. Vasa, 20124 Wiring up the Activity TabSpec populates the tab widget TabSpec populates the tab widget
- 42. R. Vasa, 20124 Tabs need multiple icon resources Selected Icon Unselected Icon We have to provide both icons to improve look & feelWe have to provide both icons to improve look & feel
- 43. R. Vasa, 20124 Working with Multiple Icons State information is provided as a drawable resourceState information is provided as a drawable resource Note: XML file is placed in the drawable folder
- 44. R. Vasa, 20124 Using Icon State Information Icon selection is managed by SDK (via convention) Icon selection is managed by SDK (via convention)
- 45. R. Vasa, 20124 Tabs can load different activities •If a tab needs to start a new activity, •We need to start it with Intents
- 46. R. Vasa, 20124 Tabs can load different activities Intent is reused in this example -- because this method copies the value internally Intent is reused in this example -- because this method copies the value internally Method Chaining used hereMethod Chaining used here
- 47. R. Vasa, 20124 Lecture Roadmap - Where are we? •A short Detour into Design Patterns •Dialogs •Tabbed Layouts •Enhancing Lists
- 48. R. Vasa, 20124 Enhancing Lists Latitude / Longitude Example Drop down showing matching options Drop down showing matching options
- 49. R. Vasa, 20124 Recall: Lists get data via an Adapter ListView Data Source Adapter
- 50. R. Vasa, 20125 We can tie an adapter to Edit Text View Data Adapter set for AutoCompleteTextView
- 51. R. Vasa, 20125 Listening to Selection cityView.addTextChangedListener(this); public class LatLongActivity extends Activity implements TextWatcher
- 52. R. Vasa, 20125 Listening to Selection cityView.addTextChangedListener(this); public class LatLongActivity extends Activity implements TextWatcher
- 53. R. Vasa, 20125 Lecture Roadmap - Where are we? •A short Detour into Design Patterns •Dialogs •Tabbed Layouts •Enhancing Lists (with images)
- 54. R. Vasa, 20125 Lists with Images Latitude / Longitude Example Melbourne & Sydney have special images. Rest use same icon Melbourne & Sydney have special images. Rest use same icon
- 55. R. Vasa, 20125 Custom List Row We can specify a custom layout for rows in a list We can specify a custom layout for rows in a list
- 56. R. Vasa, 20125 Custom List Row Layout provides the default icon to show for each row item Layout provides the default icon to show for each row item
- 57. R. Vasa, 20125 We provide a custom row adapter •The standard adapter will display using a pre-defined (SDK provided) layout •We have to override this behaviour with our own “row” rendering functionality // use custom row adapter setListAdapter(new RowIconAdapter()); public class LatLongActivity extends ListActivity Note: See Sample Code for details
- 58. R. Vasa, 20125 Custom Row Adapter class RowIconAdapter extends ArrayAdapter<String> { public RowIconAdapter() {super(LatLongActivity.this, R.layout.listrow, R.id.row_label, cityNames);} public View getView(int pos, View cView, ViewGroup parent) { View row = super.getView(pos, cView, parent); // DEFAULT ROW ImageView icon = (ImageView) row.findViewById(R.id.row_icon); String city = cityNames[pos]; if (city.startsWith("Melb")) icon.setImageResource(R.drawable.melbourne); else if (city.startsWith("Syd")) icon.setImageResource(R.drawable.sydney); else icon.setImageResource(R.drawable.location); return row; }}
- 59. R. Vasa, 20125 A Few List View Related Issues As we scroll down, we get more cities
- 60. R. Vasa, 20126 A Few List View Related Issues View objects on Rows not shown are destroyed as we scroll up/down View objects on Rows not shown are destroyed as we scroll up/down Only 7 rows (views) are kept in RAM
- 61. R. Vasa, 20126 A Few List View Related Issues View objects on Rows not shown are destroyed as we scroll up/down View objects on Rows not shown are destroyed as we scroll up/down Design Tip: Make sure that rows are constructed as quickly as possible Design Tip: Make sure that rows are constructed as quickly as possible
- 62. R. Vasa, 20126 Lecture Roadmap - Where are we? •A short Detour into Design Patterns •Dialogs •Tabbed Layouts •Enhancing Lists