HIT3328 - Chapter03 - Simple Interactive Apps

HIT3328 / HIT8328 Software Development for
Mobile Devices
Dr. Rajesh Vasa, 2012
Twitter: @rvasa
Blog: http://rvasa.blogspot.com
1
Lecture 03
Simple 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 XML
Activity
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
• UI Construction - Separation of
Concerns
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
PresentationPresentation
(Android)(Android)
FunctionalityFunctionality
(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 Model
Stored 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
we?
• 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_weight
Specifies 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
we?
• 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
Start State
(Default is 1 C)
User Entered
(45 C)
Orientation Changed
R. Vasa, 201252
Activity State is Partially
Preserved
Start State
(Default is 1 C)
User Entered
(45 C)
Orientation Changed
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(k
ey, 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
we?
• Recap
• Working with Resources
(Programatically)
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
we?
• 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

HIT3328 - Chapter03 - Simple Interactive Apps

Recommended

Recommended

More Related Content

Similar to HIT3328 - Chapter03 - Simple Interactive Apps

Similar to HIT3328 - Chapter03 - Simple Interactive Apps (20)

More from Yhal Htet Aung

More from Yhal Htet Aung (15)

Recently uploaded

Recently uploaded (20)

HIT3328 - Chapter03 - Simple Interactive Apps