HIT3328 - Chapter03 - Simple Interactive Apps

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

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

1

Lecture 03Simple Interactive

Apps

R. Vasa, 2012

Lecture Overview

• Recap

• UI Construction - Separation of Concerns

• Temperature Convertor Demo

• Managing Orientation Change

• Working with Resources (Programatically)

• Working with Alternate Layouts

2

R. Vasa, 20113

When building mobile apps...

• Assume phone will ring

• Save state regularly (in fact, be paranoid)

• Assume O/S allocates resources reluctantly

• Assume erratic network connectivity

• Assume slow read/write speed to Flash card

• Use RAM carefully, minimise sensor use

• Inform user if any operation takes over 3 sec.

• Keep core use case as short as possible

R. Vasa, 20124

Android Device User Interaction• Android has a three key buttons

Menu

HomeBack

R. Vasa, 20125

Android Platform

Image Source: http://www.tbray.org

JavaC/C++

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)

R. Vasa, 20127

Android App. is made of Activities

Activity

View Group

Views(Layout)

R. Vasa, 20128

Resources are bound to generated code

Generated Code

static final int australia=0x7f020000;

R. Vasa, 20129

User Interface (generally) Built in XMLActivity

View Group(Layout)

Activity Class (Java)

Layout Definition (main.xml)

R. Vasa, 201210

Provide Resources @Multiple Resolutions

High

Low

Medium

R. Vasa, 201211

Lecture Roadmap - Where are we?

• Recap






R. Vasa, 201212

UI Construction - Aspects to Consider

• Two aspects of an application with UI

PresentationPresentation FunctionalityFunctionality

R. Vasa, 201213

UI Construction => Design Choice

• Design Choice: Do we combine presentation and functionality (or) keep them separated?

Presentation + FunctionalityPresentation + Functionality


R. Vasa, 201214

Software Engineering Theory

• Software Engineering Theory advocates,

• loose coupling

• separation of concerns


R. Vasa, 201215

Separation of Concerns in Android

Presentation Presentation (Android)(Android)

Functionality Functionality (Android)(Android)

Layout Definition (main.xml)

Activity Class

Event Handling, I/O ...

R. Vasa, 201216

Separation of Concerns in iOS

Presentation (iOS)Presentation (iOS) Functionality (iOS)Functionality (iOS)

View View Controller

Data ModelStored in a XIB file

(Built Visually)

Code in Objective-C

Image Source: Apple Inc. Image Source: Apple Inc.

R. Vasa, 201217

XML is preferred presentation language

• Typical GUI is interactive, but mostly static

• Hence, we can code this descriptively

Mozilla (Firefox)

XUL

Microsoft

XAML

iOS

XIB

Over the last decade, XML has slowly become the preferred approach for describing UI in a range of platforms

R. Vasa, 201218

XML is a (surprisingly) good choice

• Why XML for presentation layer?

• Human readable (if needed)

• Machine readable (mature libraries available)

• Schema/Syntax can be checked

• Though bloated, XML can be compressed

• Mozilla add-ons are just ZIP files

• Apple XIB is compressed into NIB file

• Android layout is compressed (for deployment)

R. Vasa, 201219

Lets get our feet wet

R. Vasa, 201220


• Recap






R. Vasa, 201221

Demo 2 - Dealing with Buttons

• Temperature Conversion (C -> F)

R. Vasa, 201222

What is involved?

• Place some UI controls

• Write a conversion function (C -> F)

• When Button is clicked,

• Use (C->F) conversion function

• Pass it the Celsius value

• Display the returned Fahrenheit Value

R. Vasa, 201223

Views

TextView

EditText

Button

TextView

4 Views (UI components) using a Linear Layout

R. Vasa, 2012

Common attributes of views and viewgroups

Attribute Description

layout_width Specifies the width of the View or ViewGroup

layout_height Specifies the height of the View or ViewGroup

layout_marginTop Specifies extra space on the top side of the View or ViewGroup

layout_marginBottom Specifies extra space on the bottom side of the View or ViewGroup

layout_marginLeft Specifies extra space on the left side of the View or ViewGroup

layout_marginRight Specifies extra space on the right side of the View or ViewGroup

layout_gravity Specifies how child Views are positioned

layout_weightSpecifies how much of the extra space in the layout to be allocated to the View

layout_x Specifies the x-coordinate of the View or ViewGroup

layout_y Specifies the y-coordinate of the View or ViewGroup

24

** Note that some of these attributes are only applicable when a View is

in certain specific ViewGroup(s).

•For example, the layout_weight and layout_gravity attributes are only

applicable if a View is either in a LinearLayout or TableLayout.

R. Vasa, 201225

Linear Layout (View Group)

main.xml(Layout)

R. Vasa, 201226

View Identifiers

•We need a way to identify components that we created in the layout

• E.g. To read input data from the field

@+id TAG creates new identifiers

R. Vasa, 201227

Identifiers are like Variable Names

4 New Identifier

s

Similar to variable names

R. Vasa, 201228

Restricting Input Data Type

•Celsius temperature is a number

•Android allows us to easily restrict the input data type for any field

Restrict to signed decimal numbersDefault Value

R. Vasa, 201229

Conversion Function (C to F)

•EditText (Text Field) captures String values

• Conversion function works with strings

R. Vasa, 201230

Handling the Button Click...

• Two steps:

1. Register to handle the button click

2. Handle the button click

Step 1: Register to handle the click

R. Vasa, 201231

Handling the Button Click

Anonymous Inner Class to Handle Event

Step 2: Handle the button click

R. Vasa, 201232

Findings the Views

• Remember: Presentation is defined externally

• So, we need to find the UI components before we can do anything with them...

Get reference to the button Reference maps to ID in layout XML (generated

automatically by tools in SDK)

R. Vasa, 201233

Finding Views..

• findViewById() method is part of the Activity super class

R. Vasa, 201234

Short Problem 1 - Debug me

Above code is causing the error -- what is

causing it?Hint: Code order

R. Vasa, 201235

UI Interaction Handling Pattern

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

• E.g. button.setOnClickListener (or) onTouchL..

• Handler is an anonymous inner class

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

R. Vasa, 201236

Views and Listeners

• Android Views use a Call Back pattern

• Standard Listeners (supported by all views),

• OnClickListener

• OnLongClickListener

• OnFocusChangeListener

• OnKeyListener

• OnTouchListener

• OnCreateContextMenuListener

R. Vasa, 201237

Standard Listeners and Callbacks• OnClickListener ==> onClick

• OnLongClickListener ==> onLongClick

• OnKeyListener ==> onKey

• OnTouchListener ==> onTouch

• OnFocusChangeListener ==> onFocusChange

• OnCreateContextMenuListener ==> onCreateContextMenu

R. Vasa, 201238

Mimic the pattern (for now)

• When you are building app. initially, mimic the pattern

• A generic process to use (for now),

• Create new project in Eclipse IDE

• Adjust the layout to your needs (main.xml)

• Create listeners

• Call functions as needed from listeners

R. Vasa, 201239

A Tip for Clearer Code

• Move all UI setup out of onCreate and into a method called initializeUI

Keep onCreate method as small as possible

Why? Helps when you use Dependency Injection (more later)

R. Vasa, 201240

Demo C to F Convertor - Screens

R. Vasa, 201241


• Recap






R. Vasa, 201242

Orientation and Configuration Changes

• Smart phones provide us with options to view in either landscape (or) portrait mode

• The configuration of the phone can change,

• Battery charger plugged-in

• Slide-out keyboard is in use

• Portrait ==> Landscape mode (orientation)

• What are the issues when working in this context?

R. Vasa, 201243

Short Problem 2 - Zero Zero Zero?

• When the app. screen rotates from landscape to portrait -- it reverts to default. Why?

See Source code and see if you find any hint (provided with lecture notes)

Start State(Default is 1 C)

User Entered(45 C)

Orientation Changed(Convertor reverts to 1 C)

R. Vasa, 201244

Android Activity Life Cycle

onCreate is called when Activity Starts

R. Vasa, 201245

Android Activity Life Cycle

onCreate is called when Activity Starts

Activity is re-started

when orientatio

n changes

R. Vasa, 2012

Activity States

1. Active/Running state

•An activity is in the front and has focus in it. It is completely visible and active to the user.

2. Paused state

•Activity is partially visible to the user but not active and lost focus.

•This occurs when another Activity is on top of this one which does not cover the entire screen or having some transparency so that the underlying Activity is partially visible.

46

R. Vasa, 2012

Activity States

• A paused activity is completely alive and maintains its state but it can be killed by system under low memory when memory can be freed by no other ways.

3. Stopped state

• This is when the Activity is no longer visible in the screen. Another activity is on top of it and completely obscures its view. In this state also the activity is alive and preserves its state, but more likely to be killed by the system to free resources whenever necessary

47

R. Vasa, 2012

Activity States

4. Destroyed/Dead state

•An Activity is said to be dead or destroyed when it no longer exists in the memory. Either the Activity hasn’t been started yet or once it was started and killed by the system in Paused or Stopped state to free resources.

48

R. Vasa, 201249

Orientation Change Re-Initialises Activity

• Orientation Change is triggered when,

• User moves screen from portrait to landscape orientation (or vice-versa)

• User slides out keyboard (on some models)

• Plugging phone into the charger

• Orientation change causes,

• Current Activity to be destroyed first

• Activity is re-created and initialized again

R. Vasa, 201250

Activity Destroy + Recreate Issues

• Private instance variables will be lost

• The layout is re-initialised (including defaults)

This is a very subtle (tricky) issue

R. Vasa, 201251

Activity Destroy Preserves Some Data

• Android automatically preserves view state, but not the value (45 is preserved below)

• Layout re-initialisation however sets default


User Entered(45 C)


R. Vasa, 201252

Activity State is Partially Preserved


User Entered(45 C)


Default is set in value, but not the view state

R. Vasa, 201253

Preserving State - Its all in the life cycle

onSaveInstanceState() is called from this

state(State is Saved)

R. Vasa, 201254

Saving State (temporarily)

Save the state into a “bundle”

Bundle is a special data structure to store primitives

Called by Android Runtime when Activity is Paused

R. Vasa, 201255

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

R. Vasa, 201256

We can read from a Bundle too

BundleBundle

getString(key)

getDouble(key)

getInt(key)

getStringArray(key)

Retrieval is based on the key (like a Hash Table or a Hash Map)

Code Snippet:

state.getString("inputTemperature");

Code Snippet:

state.getString("inputTemperature");

R. Vasa, 201257

We Retrieve State On Creation

State retrieval done here

onSaveInstanceState() is called from this

state(Save Saved here)

R. Vasa, 201258

Retrieving Temporary State

onCreate -- Retrieve state

R. Vasa, 201259


• Recap






R. Vasa, 201260

Demo 2 - Display Image Resources

• We can set an image to be displayed in the XML layout (simple and easy)

• However, what if we want to control this programatically?

R. Vasa, 201261

Demo 2

• We want to build a “Light Bulb” app.

• Default -- Light Bulb is Off

• On Touch -- Turn the Light Bulb on/off

R. Vasa, 201262

Working with Resources

off.png

Layout XML File

R. Vasa, 201263

Working with Image Resources

off.png

Layout XML File

Via Java Code

on.png

R. Vasa, 201264

Working with Resources

• ‘getResources()’ gives us access to all resources [see API documentation]

• Strings

• Layout

• Movie

• Colour

• Drawable (images)

R. Vasa, 201265


• Recap






R. Vasa, 201266

Working with Alternate Layouts

• When orientation changes -- default behaviour is to use same layout

• Ideally, we should use different layouts

• The Android way,

• Create two different “layout xml files”

• Put one in layout (for portrait)

• Put the other in layout-land (for landscape)

R. Vasa, 201267

Portrait and Landscape Layouts

R. Vasa, 201268

Lecture Recap






Technology

HIT3328 - Chapter03 - Simple Interactive Apps