hit3328 - chapter0701 - dialogs, tabs and lists

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);}


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(); }


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




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



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



Custom Alert Dialog

Title and Icon

Message

R. Vasa, 201222



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


We can set buttons (positive/negative/neutral)

We can set buttons (positive/negative/neutral)

R. Vasa, 201228


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(){


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(){


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


•Dialogs

•Tabbed Layouts

•Enhancing Lists

R. Vasa, 201234

Tabbed Layouts

R. Vasa, 201235

Tabbed Layouts - Concepts

Tab Host (container)

R. Vasa, 201236


Tab Widget

Tab Host (container)

R. Vasa, 201237


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


•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


•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


•Dialogs

•Tabbed Layouts

•Enhancing Lists

hit3328 - chapter0701 - dialogs, tabs and lists

Technology