Upload
yhal-htet-aung
View
286
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
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
• UI Construction - Separation of Concerns
• Temperature Convertor Demo
• Managing Orientation Change
• Working with Resources (Programatically)
• Working with Alternate Layouts
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
PresentationPresentation FunctionalityFunctionality
R. Vasa, 201214
Software Engineering Theory
• Software Engineering Theory advocates,
• loose coupling
• separation of concerns
PresentationPresentation FunctionalityFunctionality
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
Lecture Roadmap - Where are we?
• Recap
• UI Construction - Separation of Concerns
• Temperature Convertor Demo
• Managing Orientation Change
• Working with Resources (Programatically)
• Working with Alternate Layouts
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
Lecture Roadmap - Where are we?
• Recap
• UI Construction - Separation of Concerns
• Temperature Convertor Demo
• Managing Orientation Change
• Working with Resources (Programatically)
• Working with Alternate Layouts
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(Convertor reverts to 1 C)
R. Vasa, 201252
Activity State is Partially Preserved
Start State(Default is 1 C)
User Entered(45 C)
Orientation Changed(Convertor reverts to 1 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
Lecture Roadmap - Where are we?
• Recap
• UI Construction - Separation of Concerns
• Temperature Convertor Demo
• Managing Orientation Change
• Working with Resources (Programatically)
• Working with Alternate Layouts
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
Lecture Roadmap - Where are we?
• Recap
• UI Construction - Separation of Concerns
• Temperature Convertor Demo
• Managing Orientation Change
• Working with Resources (Programatically)
• Working with Alternate Layouts
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
• UI Construction - Separation of Concerns
• Temperature Convertor Demo
• Managing Orientation Change
• Working with Resources (Programatically)
• Working with Alternate Layouts