hit3328 - chapter04 - complex interactions

76
HIT3328 / HIT8328 Software Development for Mobile Devices Dr. Rajesh Vasa, 2011 Twitter: @rvasa Blog: http://rvasa.blogspot.com 1 Lecture 04 Complex Interactions

Upload: yhal-htet-aung

Post on 17-May-2015

93 views

Category:

Design


2 download

TRANSCRIPT

Page 1: HIT3328 - Chapter04 - Complex Interactions

HIT3328 / HIT8328 Software Development for Mobile DevicesDr. Rajesh Vasa, 2011

Twitter: @rvasa Blog: http://rvasa.blogspot.com

1

Lecture 04Complex

Interactions

Page 2: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 20112

Lecture Overview

•Recap (previous 2 weeks)

• Passing Data between Activities

• Data passing methods

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (using Global Variables)

•Application Manifest File

• Passing Data Demo (using Intents)

•Controlling Input Type

Page 3: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 20113

Android Device User Interaction

Menu

HomeBack

Page 4: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 20114

Android App. is made of Activities

Activity

View Group

Views(Layout)

Page 5: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 20115

User Interface (generally) Built in XMLActivity

View Group(Layout)

Activity Class (Java)

Layout Definition (main.xml)

PresentatioPresentationn

FunctionaliFunctionalityty

Page 6: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 20116

The Android Way - Convention not Config.

•Source code (src)

•Generated code (gen)

•Resources (res)

•Images (@drawable)

•Layout of app (layout)

•Constants/Strings (@strings)

Conventions to Follow

Page 7: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 20117

Portrait and Landscape Layouts

Conventions to Follow

Page 8: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 20118

Provide Resources @Multiple Resolutions

High

Low

Medium

Conventions to Follow

Page 9: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 20119

View Identifiers

@+id TAG creates new identifiers

Conventions to Follow

Page 10: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201110

UI Interaction Handling Pattern

•Component.setOn......Listener ( handler )

• E.g. button.setOnClickListener

•Handler is an anonymous inner class

• On...Listener handler = new On....Listener() {}

Page 11: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201111

Android Activity Life Cycle

onCreate is called when Activity Starts

Activity is re-started

when orientatio

n changes

Page 12: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201112

We Retrieve State On Creation

State retrieval done here

onSaveInstanceState() is called from this

state(Save Saved here)

Page 13: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201113

Bundle stores simple state information

BundleBundle

putString(key, value)

putDouble(key, value)

putInt(key, value)

putStringArray(key, value[])

It is a Key, Value store system(like a Hash Table or a Hash Map)

Code Snippet:

state.putString("inputTemperature", inputTemp);

Code Snippet:

state.putString("inputTemperature", inputTemp);

Page 14: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201114

Working with Resources

off.png

Layout XML File

Via Java Code

on.png

Page 15: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201115

Short Problem 1 - Passing Data

•Context: In Android -- Apps are made of Activities. So, each Screen is a “new” Activity

• We want to pass data between Activities.

• But, Activity construction is managed by the Dalvik runtime. That is, cannot pass data into constructor.

•What would you prefer to do?

• Store shared data in global variables available to ALL Activities.

• Move all data to a separate data layer.

• Send primitive data bundles between activities/screens.

Page 16: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201116

Lecture Overview

•Recap (previous 2 weeks)

•Passing Data between Activities

• Data passing methods

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (using Global Variables)

• Passing Data Demo (using Intents)

•Controlling Input Type

Page 17: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201117

Wiring up Activities -- Typical Use Case

Select

Back

Contact List Activity Contact Details

Page 18: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201118

Wiring up Activities -- Typical Use Case

Select

Contact List Activity Contact Details

We re-use this activity with

different data

Select

Page 19: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201119

Lecture Overview

•Recap (previous 2 weeks)

•Passing Data between Activities

• Data passing options

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (using Global Variables)

• Passing Data Demo (using Intents)

Page 20: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201120

Data Passing Option - Global Variables

•We can use Global Variables ... but,

• Widely accepted as a “risky” choice

• A few global variables are used in many large systems (e.g. Linux Kernel Source Code)

• Risk manageable in ‘small’ programs

• Good thread @ StackOverflow http://goo.gl/EouH3

•Constant values as globals is ok (e.g. R.java)

•Key Issue (to manage): How many objects are able to change the value of a global variable

Page 21: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201121

Data Passing Option - Data Layer•We can store all data in a DBMS and access

it via a “data layer”

• Good idea when dealing with large / complex blocks of data

• Overkill if we only need to store a few values

•The data store can be “in-memory”, “on-disk”, and/or “on remote server”

Page 22: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201122

Data Passing Option - Bundles

•We can put data into a bundle and pass this across using a “messaging framework”

• Simple (once you understand the messaging framework architecture)

• Persistence is not managed (like DBMS)

Page 23: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201123

Data Passing Option - iOS Only!!•You can pass data directly to methods in

another screen (UIViewController)

• UIViewController is approx. similar to Activity

•This option is not possible in Android -- this was a “design intent” (design side-effect?)

Page 24: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201124

Lecture Overview

•Recap (previous 2 weeks)

•Passing Data between Activities

• Data passing methods

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (using Global Variables)

• Passing Data Demo (using Intents)

•Controlling Input Type

Page 25: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201125

iOS Apps. are directly managed by O/S

UIAppDelegateUIAppDelegate

UIViewController-UIViewController-AA

UIViewController-UIViewController-BB

UIViewController-UIViewController-CC

UIAppDelegate has Life Cycle View Controllers are

managed by the App internally

Image Source: Apple Inc.

Life Cycle => Managed by Operating System

Page 26: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201126

Android Activities are Managed by O/S

Activity-AActivity-A

Activity-CActivity-C

Activity-BActivity-B

ApplicatiApplicationon Activities have

a parent application

Activity has Life Cycle Application is NOT managed directly by

the O/SLife Cycle => Managed by Operating System

Page 27: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201127

A Key Design Different (iOS Vs Android)

Activity-AActivity-A

Activity-CActivity-C

Activity-BActivity-B

UIAppDelegateUIAppDelegate

UIViewController-UIViewController-AA

UIViewController-UIViewController-BB

UIViewController-UIViewController-CC

ApplicatiApplicationon

UIAppDelegate has Life Cycle

Activities have a parent

application

Activity has Life Cycle Application is NOT managed directly by

the O/SLife Cycle => Managed by Operating System

View Controllers are managed by the App

internally

Page 28: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201128

Activity Life Cycle Design Choice....•Android developers decided to give Activity

a life cycle (rather than the application)

•This makes each Activity similar to a separate program

•Hence, data passing is restricted to:

• Global Variables (stored in Application object)

• Data bundles passed via async. messages

• Data stored externally in files or DBMS

Page 29: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201129

Short Problem 2 - Activity Design Choice

•Unlike iOS ViewControllers, Activities have been modelled to be (almost) like independent programs

• What is the likely rationale for such a choice?

• What would be the benefits?

Page 30: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201130

Only One Activity is Active/Running•Only one Activity can

be in the ‘foreground’

•When Activity-A calls Activity-B

• Activity-B will be visible to the user (foreground)

• Activity-A is paused (background)

Page 31: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201131

Activities are Stacked in Android•All created activities are placed on a Stack

•Activities ‘popped’ when ‘Back Button’ is pressed

Activity-AActivity-A

Foreground/Active

If only one activity is on the Activity

Stack then “back” button exits it

Page 32: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201132

Activities are Stacked in Android•All current activities are placed on a Stack

•Newly started activities come into foreground

Activity-AActivity-A

Activity-BActivity-B

Foreground/Active

startsBackground/

Paused

Back button will pop top most activity from

stack

Page 33: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201133

Activities are Stacked in Android•As additional activities are started, older

activities go into background

•All activities are placed on Activity Stack

Activity-AActivity-A

Activity-BActivity-B

Activity-CActivity-CForeground/Active

starts

starts

Background/Paused

Page 34: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201134

Short Problem 3 - Activity Stacking•Consider the following situation,

Activity-AActivity-A

Activity-BActivity-B

Activity-CActivity-C

starts

starts

Activity-AActivity-A

starts

Are these activities the same object?

Ponder the interaction design implications .....

Will Back Button Exit the App?

Page 35: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201135

Lets get our feet wet

Page 36: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201136

Lecture Overview

•Recap (previous 2 weeks)

•Passing Data between Activities

• Data passing methods

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (using Global Variables)

• Passing Data Demo (using Intents)

•Controlling Input Type

Page 37: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201137

Demo 1 - Life Cycle of an Android App.

•Walk-through of code provided along with lecture handout.

• We can see the states by adding a little bit of logging code to a few call-backs

Page 38: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201138

Life-Cycle Demo

onCreate, onStart, onResume etc. are from the

Activity class

Page 39: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201139

Life-Cycle Demo (Watching State)

Page 40: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201140

Lecture Overview

•Recap (previous 2 weeks)

•Passing Data between Activities

• Data passing methods

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (Global Variables)

•Application Manifest File

• Passing Data Demo (using Intents)

•Controlling Input Type

Page 41: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201141

Demo 2 - Passing Data

Page 42: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201142

Before data passing -- a quick recap•This app. makes use of nested layouts

•We can also make it look a bit nicer using weights

Page 43: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201143

Anatomy of the App. (Nested Layout)

Linear LayoutTextViewImageViewLinear Layout

Button (Fruit)Button (Vegetable)Button (Drink)

Page 44: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201144

A Weighty Problem

Spot the difference in layout

How achieved? android:layout_weight=”1”for all buttons in the layout

Page 45: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201145

Layout Weights are Handy

If all buttons are given the same weight, then they will

be of same size

Page 46: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201146

Demo 2 - Passing DataActivity - FoodMain Activity - FoodView

Data Passed:Name (“Fruit”)

Image (fruit.png)

Page 47: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201147

Passing Data with Globals

•All Activities have a parent Application object

•We can store data in this Application object

Activity-AActivity-A

Activity-CActivity-C

Activity-BActivity-B

ApplicatiApplicationon Activities have

a parent application

We need to extend the

Application class to do this

Page 48: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201148

What Creates/Manages Application?•Application is created and managed by the

Android runtime

•There is one Application object created by default

•We can extend the “Application Class” and make our own

•But, we need to tell the Runtime about this Application object via the Manifest XML file

Page 49: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201149

Lecture Overview

•Recap (previous 2 weeks)

•Passing Data between Activities

• Data passing methods

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (Global Variables)

•Application Manifest File

• Passing Data Demo (using Intents)

•Controlling Input Type

Page 50: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201150

Manifest contains Application Metadata• Android runtime creates the Application object

• Application metadata is provided in the Manifest XML

Manifest XML file is part of the project

Auto-generated by Eclipse IDE

Page 51: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201151

Manifest XML - What is it?

Manifest informs Runtime about the App.Manifest informs Runtime about the App.

Page 52: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201152

Manifest XML - Contents

Application Name

Page 53: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201153

Manifest XML - Contains Activity Names

Activity Name(s)

Page 54: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201154

Manifest XML - Refers to Icons

Launcher Icon

Page 55: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201155

Manifest XML - Refers to the App. Name

Application Label

Page 56: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201156

Passing Data with Globals

•All Activities have a parent Application object

•We can store data in this Application object

FoodApplicatiFoodApplicationon

ApplicatiApplicationon

We need to extend the

Application class to do this

extends

Page 57: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201157

Global Vars. can be in the Application

FoodApplicatiFoodApplicationon

ApplicatiApplicationon

extends

Page 58: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201158

Activities and Globals in Application•Activities can access data from the

Application object

We can also get to these variables from any Activity(declared in the Manifest XML file)

We can also get to these variables from any Activity(declared in the Manifest XML file)

Page 59: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201159

Lecture Overview

•Recap (previous 2 weeks)

•Passing Data between Activities

• Data passing methods

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (Global Variables)

• Passing Data Demo (using Intents)

•Controlling Input Type

Page 60: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201160

Demo 2 - Passing Data using IntentsActivity - FoodMain Activity - FoodView

Data Passed:Name (“Fruit”)

Image (fruit.png)

Page 61: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201161

Wiring up the Buttons (Another Way)

Buttons support onClick

in the layout XML

Buttons support onClick

in the layout XML

Page 62: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201162

Storing Data in a Bundle

Page 63: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201163

Sending an Async. Message

Android uses an asynchronous messaging model (known as Intents) to send messages

between Activities

Android uses an asynchronous messaging model (known as Intents) to send messages

between Activities

Page 64: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201164

Sending an Async. Message

Setup Message and Store Data in the Message

Setup Message and Store Data in the Message

Page 65: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201165

Sending an Async. Message

Class that is sending the Intent (message)Class that is sending the Intent (message)

Page 66: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201166

Sending an Async. Message

Class that will receive the Intent (message)

Class that will receive the Intent (message)

Class that is sending the Intent (message)Class that is sending the Intent (message)

Page 67: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201167

Sending an Async. Message

Send the Message to the Activity (Transmit)

Send the Message to the Activity (Transmit)

Page 68: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201168

Message Receiving

Retrieve data from the message

Retrieve data from the message

Page 69: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201169

Intent Messages are Asynchronous•The intent system is completely

asynchronous -- similar to e-mail

•That is,

• The receiver will get the message only if they request to see intents via getIntent() method

•All transmitted messages are placed on a ‘Service Queue’

Page 70: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201170

Complex Domain Models

•Where do you hold a complex domain model?(E.g. we have 4-5 classes in a domain model)

• We can hold a reference to the domain model objects in the Application

•This is fine if there are only a few objects

•Unlike Activity, Application is only terminated if device runs low on memory

• If the data size is larger -- then best to use the sqlite database

Page 71: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201171

Lecture Overview

•Recap (previous 2 weeks)

•Passing Data between Activities

• Data passing methods

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (Global Variables)

• Passing Data Demo (using Intents)

•Controlling Input Type

Page 72: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201172

Controlling Input Data Type

•A common task on forms is to restrict users to certain data types

• Email Address

• Decimal Numbers

• Positive Integers

• Alpha Numeric

•On mobile devices -- development platforms offer a simple way to control the keyboard type

Page 73: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201173

Controlling Input Type (Android)•Android has a large number of options

•You can merge them to create more complex input types

textUritextEmailAddresstextPasswordtextPersonNamenumbernumberSignednumberDecimalnumberPassword

textUritextEmailAddresstextPasswordtextPersonNamenumbernumberSignednumberDecimalnumberPassword

android:inputTypeandroid:inputType

Page 74: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201174

Input Type - Example

http://developer.android.com/reference/android/widget/TextView.html#attr_android:inputType

More info. at the following URL

Page 75: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201175

Lecture Recap

•Recap (previous 2 weeks)

•Passing Data between Activities

• Data passing methods

• Activity Design Choice

• Activity Life Cycle

• Passing Data Demo (Global Variables)

• Passing Data Demo (using Intents)

•Controlling Input Type

Page 76: HIT3328 - Chapter04 - Complex Interactions

R. Vasa, 201176

What’s next?

•Usability Principles - Mobile Form Design

•Using Dialogs

•Returning data back from an Activity

•Simple File I/O

•More complex layouts

•Exploring a few more widgets