Upload
yhal-htet-aung
View
577
Download
3
Embed Size (px)
DESCRIPTION
Citation preview
HIT3328 / HIT8328 Software Development for Mobile DevicesDr. Rajesh Vasa, 2011
1
Twitter: @rvasa Blog: http://rvasa.blogspot.com
Lecture 07Dialogs, Tabs and
Lists
R. Vasa, 20122
Lecture Overview
•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists
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
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)
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?
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
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
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!!!!
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 extent)This principle boxed our thinking (to some extent)
R. Vasa, 201210
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
R. Vasa, 201211
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
R. Vasa, 201212
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
R. Vasa, 201213
Fluent Interface
•The concept is that we should write code that is better to read
•That is, it communicates the intent much more clearly
R. Vasa, 201214
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
R. Vasa, 201215
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)
R. Vasa, 201216
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
R. Vasa, 201217
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 ....
R. Vasa, 201218
Lecture Roadmap - Where are we?•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists
R. Vasa, 201219
Dialogs
• How long have I been alive?
Date Dialog Alert Dialog
R. Vasa, 201220
Dialogs are flexible
Date Dialog(SDK Provided)
Custom Alert Dialog
Title and Icon
R. Vasa, 201221
Dialogs are flexible
Date Dialog(SDK Provided)
Custom Alert Dialog
Title and Icon
Message
R. Vasa, 201222
Dialogs are flexible
Date Dialog(SDK Provided)
Custom Alert Dialog
Title and Icon
Message
Control Buttons
R. Vasa, 201223
Dialogs are useful for error messages
Custom Alert Dialog
Ideal for simple error messages
R. Vasa, 201224
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
R. Vasa, 201225
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?
R. Vasa, 201226
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
drawableSee
http://androiddrawableexplorer.appspot.com/ for a full list of built-in drawable resources
and their names
R. Vasa, 201227
Constructing Custom Alter Dialogs
We can set buttons (positive/negative/neutral)
We can set buttons (positive/negative/neutral)
R. Vasa, 201228
Constructing Custom Alter Dialogs
Button Click implementatio
n
Button Click implementatio
n
R. Vasa, 201229
Deconstructing the Patterns in Use
Dialog Builder - Inner ClassDialog Builder - Inner Class
Method Chaining PatternMethod Chaining Pattern
R. Vasa, 201230
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
R. Vasa, 201231
Dialogs are Constructed via Call-Backspublic void onBackPressed(){
showDialog(EXIT_DIALOG);}
Triggers the call
back
This is displayed to
the user
This is displayed to
the user
R. Vasa, 201232
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
R. Vasa, 201233
Lecture Roadmap - Where are we?•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists
R. Vasa, 201234
Tabbed Layouts
R. Vasa, 201235
Tabbed Layouts - Concepts
Tab Host (container)
R. Vasa, 201236
Tabbed Layouts - Concepts
Tab Widget
Tab Host (container)
R. Vasa, 201237
Tabbed Layouts - Concepts
Tab Host (container)Tab Widget
Frame Layout is used to switch the visible content
for a tab
R. Vasa, 201238
Layout of a Tabbed App.
TabHost contains the TabWidget and the FrameLayout
R. Vasa, 201239
Layout of a Tabbed App.
Two views in the frame layout to
switch around
Two views in the frame layout to
switch around
R. Vasa, 201240
Wiring up the Activity
Method chaining usedMethod chaining used
R. Vasa, 201241
Wiring up the Activity
TabSpec populates the tab
widget
TabSpec populates the tab
widget
R. Vasa, 201242
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
R. Vasa, 201243
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
R. Vasa, 201244
Using Icon State Information
Icon selection is managed by SDK (via convention)
Icon selection is managed by SDK (via convention)
R. Vasa, 201245
Tabs can load different activities• If a tab needs to start a new activity,
• We need to start it with Intents
R. Vasa, 201246
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
R. Vasa, 201247
Lecture Roadmap - Where are we?•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists
R. Vasa, 201248
Enhancing ListsLatitude / Longitude
Example
Drop down showing
matching options
Drop down showing
matching options
R. Vasa, 201249
Recall: Lists get data via an Adapter
ListView
Data Source
Adapter
R. Vasa, 201250
We can tie an adapter to Edit Text View
Data Adapter set for AutoCompleteTextView
R. Vasa, 201251
Listening to Selection
cityView.addTextChangedListener(this);
public class LatLongActivity extends Activity implements TextWatcher
R. Vasa, 201252
Listening to Selection
cityView.addTextChangedListener(this);
public class LatLongActivity extends Activity implements TextWatcher
R. Vasa, 201253
Lecture Roadmap - Where are we?•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists (with images)
R. Vasa, 201254
Lists with ImagesLatitude / Longitude
Example
Melbourne & Sydney have special images. Rest use
same icon
Melbourne & Sydney have special images. Rest use
same icon
R. Vasa, 201255
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
R. Vasa, 201256
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
R. Vasa, 201257
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 adaptersetListAdapter(new RowIconAdapter());
public class LatLongActivity extends ListActivity
Note: See Sample Code for details
R. Vasa, 201258
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 ROWImageView 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;
}}
R. Vasa, 201259
A Few List View Related IssuesAs we scroll down, we get more
cities
R. Vasa, 201260
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
R. Vasa, 201261
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
R. Vasa, 201262
Lecture Roadmap - Where are we?•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists