Download SMDS 2010

SMDS 2010
Mobile Architectures,
Android
Francesco Zanitti - [email protected]
Lesson structure
●
Introduction (this one), 30”
–
www.itu.dk/people/frza/teaching/SMDS2010/do
wnload/slides_1.pdf
●
Android dev. Environment setup, 20”
●
Break, 10”
●
Android live coding! , 50”
●
Recap, 10”
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
2
What you will learn today
●
Mobile VS Distributed systems
●
Mobile platforms
●
Enter: Android
●
Android overview
●
Android key concepts
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
3
Get ready!
●
For those who have not yet configured the
android environment, please start downloading
the required stuff during this presentation..
●
http://developer.android.com/sdk/index.html
●
http://www.eclipse.org/downloads/
–
●
Pick the “Java Developers” distribution
http://developer.android.com/sdk/eclipseadt.html
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
4
Mobile VS Distributed systems
●
Network failure is not an exception
●
Nodes (devices) join and leave at any time
●
●
Network topology is unknown at
design/deployment time
Limited resources
–
CPU, memory, network capabilities...
●
Constantly changing QoS
●
In general, volatile environment
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
5
Mobile VS Distributed systems
(cont.)
Static distributed network example
http://www.agilemodeling.com/artifacts/networkDiagram.htm
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
6
Mobile VS Distributed systems
(cont.)
Mobile-Distributed network example: bluetooth scatternet
http://commons.wikimedia.org/wiki/File:Bluetooth_network_topology.png
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
7
Mobile platforms
●
J2Me (http://java.sun.com/javame/)
●
Android (http://www.android.com)
●
IPhone OS (http://www.apple.com/iphone/)
●
Symbian (http://www.symbian.org/)
●
Maemo (http://maemo.org/)
●
WebOS (http://www.palm.com/us/)
●
Windows CE (
http://www.microsoft.com/windowsembedded/en-us/products/windowsce/default.mspx )
●
●
Windows Mobile (
http://www.microsoft.com/Windowsmobile/en-us/default.mspx)
...loads of them...
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
8
Enter: Android
●
Supported by Big G and Open Handset Alliance
●
Linux based
–
●
Open source
–
●
Beware: is NOT a linux distribution
Almost: Google applications are closed source
Applications coded in java 5
–
–
03/16/10
Dalvik VM
Each application runs in a different VM instance
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
9
Android overview
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
10
Android Key concepts
●
XML-based configurations
–
–
Most important: AndroidManifest.xml
Declarative approach for:
●
●
●
●
Layouts
Resources
Values
Activity
–
03/16/10
Java class for managing a single screen
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
11
Android Key concepts (cont.)
●
Services
–
●
Run in background, no (direct) interaction with
the user
Broadcast Receiver
–
–
Receive events from system activities/services
How can your app be notified of, e.g., SMSs?
●
03/16/10
Hint: with a broadcast receiver
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
12
Android Key concepts (cont.)
●
Content Providers
–
–
●
Table-based data model
The only way to share bits btw. Applications
Intent
–
–
–
03/16/10
Last but not least
Messages to activate activities, services and
broadcast receivers
“Hi system, I'd like to ...”
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
13
Questions?
●
http://developer.android.com/
●
http://groups.google.com/group/android-developers
●
http://www.youtube.com/results?search_query=android+tutorial
●
http://www.slideshare.net/search/slideshow?q=android+tutorial
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
14
Environment setup and break
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
15
Code session
●
FlickR search
–
–
–
–
03/16/10
For the sake of simplicity only the first 20 photos
Network requests in background
Table for visualizing the thumbnails
Click on thumbnail open the browser to the flickr
photo page
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
16
Creating the project
●
Fire up Eclipse (with the Android plugin)
●
File -> New -> Other -> Android Project
●
Platform: 2.1 (we want the edge technology!)
●
Project name: SmdsFlickrViewer
●
Package: dk.itu.smds.android
●
Main activity name: SearchActivity
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
17
FlickR library
●
●
FlickrJ library (http://flickrj.sourceforge.net/)
Go fetch it (
http://sourceforge.net/projects/flickrj/files/)
●
Create a lib directory in the project
●
Copy the flickrapi-1.2.jar to the lib directory
●
Refresh the project, add the dependency
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
18
FlickR viewer interface
●
Search activity and thumbnail show activity
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
19
Search Activity layout
●
The eclipse plugin created the main.xml layout
●
Remove the text, add an EditText and a Button
●
EditText properties:
–
–
●
Text: (empty string)
Id: @+id/SearchEditText
Button properties:
–
Id: @+id/SearchOkButton
Text: Search on FlickR
–
On click: doStartSearch
–
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
20
Search Activity layout (cont.)
●
●
Some explanations:
@id+/... : create an identifier that the developer
can later use by means of the R class
–
●
Thanks to the eclipse plugin the R class is
automatically generated and maintained
onClick: declare the name of a method (in the
Activity) to be called when an click event occurs
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
21
Search Activity layout (cont.)
●
●
Some explanations:
@id+/... : create an identifier that the developer
can later use by means of the R class
–
●
Thanks to the eclipse plugin, the R class is
automatically generated and maintained
onClick: declare the name of a method (in the
Activity) to be called when an click event occurs
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
22
Search Activity layout (cont.)
●
To both the elements:
–
Width: fill_parent
●
–
Height: wrap_content
●
03/16/10
Take all the space to fill the parent container
Just take the space necessary for the enclosed
content to be visible
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
23
Search Activity layout (cont.)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="@+id/SearchEditText">
</EditText>
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="@+id/SearchOkButton"
android:onClick="doStartSearch"
android:text="Search on FlickR"></Button>
</LinearLayout>
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
24
Thumbnails activity layout
●
Expand the res directory, right click on layout,
new -> other -> Android XML file
●
File: view_thumbs.xml
●
Type: layout
●
Root XML element: ScrollView
●
Add a TableLayout, id ThumbsTableLayout
–
03/16/10
Set width and height to fill_parent
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
25
Thumbnails activity layout (cont.)
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/an
droid"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="@+id/ThumbsTableLayout"></TableLayout>
</ScrollView>
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
26
The SearchActivity class
●
Created by the Eclipse Android plugin
–
●
Default onCreate method links the activity with
the R.layout.main layout
Remember the SearchOkButton.onClick
–
–
–
public void doStartSearch( View view )
If SearchEditText.text != null then start the
thumbnails activity
Find the SearchEditText view
●
03/16/10
View Activity.findViewById( int id )
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
27
The SearchActivity class (cont.)
●
To start the thumbnail activity, we need this
activity!
–
●
Create a new class, ViewThumbnailsActivity,
that extends Activity
If SearchEditText.text != null then
–
–
03/16/10
Create an Intent for the current context (the
current activity) and the
ViewThumbnailsActivity class
Hardcoded class, useful if the activity is not that
generic
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
28
The SearchActivity class (cont.)
–
Pass the SearchEditText string to the intent:
●
●
Intent.putExtra( String name, String value )
Always useful to define constants
–
–
–
Send the intent to the system:
●
03/16/10
public static final String EXTRA_...
Easy to find, no typos...
Activity.startActivity( Intent intent )
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
29
The SearchActivity class (cont.)
public void doStartSearch( View view ) {
// get the EditSearch view
EditText searchEditText = (EditText)findViewById( R.id.SearchEditText );
// get the string inputted by the user
String q = searchEditText.getText().toString();
if(q==null || q.length()==0) {
//uops..empty string
return;
}
// create an intent to start the ViewThumbnailsActivity
Intent startThumbnailsActIntent = new Intent(this, ViewThumbnailsActivity.class);
// put in the intent the search string too
startThumbnailsActIntent.putExtra(EXTRA_SEARCHTEXT, q);
// fire the intent
startActivity(startThumbnailsActIntent);
}
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
30
ViewThumbnailsActivity class
●
Need some support classes
–
PhotoInfo
●
–
SearchAsyncTask
●
●
03/16/10
Container for a Photo object (comes with the
FlickR library) and a Bitmap object (the actual
thumbnail)
Handle all the network requests in background
Handling network requests in the UI thread
means blocking the UI, which is not nice for the
user
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
31
ViewThumbnailsActivity class
(cont.)
●
AsyncTask<Params,Update,Result>
–
–
–
●
An array of Params will be passed to start the
background process
Update will be published during the computation
Result will be returned when the computation
finishes.
SearchAsyncTask extends
AsyncTask<SearchParameters,PhotoInfo,List<
PhotoInfo>>
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
32
ViewThumbnailsActivity class
(cont.)
●
SearchAsyncTask extends
AsyncTask<SearchParameters,PhotoInfo,List<
PhotoInfo>>
–
–
●
SearchParameters: comes with the FlickR
library
Call a method on the activity every time it
finishes to download a thumbnail (with a
PhotoInfo object)
PS: the flickr API keys will be disabled in few
weeks
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
33
ViewThumbnailsActivity class
(cont.)
●
Some FlickrA API keys
–
24468596eb57bb533167e1846584ea6c
939af98944246f920ee2efedfc3bc234
–
0ef9193d5dd75b14471a2211e15e1992
–
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
34
ViewThumbnailsActivity class
(cont.)
●
SearchAsyncTask
–
onPreExecute
●
●
–
onProgressUpdate
●
●
–
Create a method addPhoto in the activity
Call that method
onPostExecute
●
03/16/10
Show progress dialog
Dismiss it when the search is finished
Is result is null, notify the user of some error
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
35
ViewThumbnailsActivity class
(cont.)
●
Override onCreate:
–
Must call super.onCreate
Content view: R.layout.view_thumbs
–
Store a reference to ThumbsTableLayout
–
●
–
Remember: the intent contains the search string
●
–
03/16/10
We'll use it later
Activity.getIntent(), Intent.getStringExtra(String id)
Create and configure a SearchParameters
object, and start a new SearchAsyncTask
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
36
ViewThumbnailsActivity class
(cont.)
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature( Window.FEATURE_NO_TITLE );
setContentView( R.layout.view_thumbs );
table = (TableLayout)findViewById( R.id.ThumbsTableLayout );
setupSizes();
// get
Intent
// and
String
the intent that started the activity
startIntent = getIntent();
then the string the user inputted
searchText = startIntent.getStringExtra( SearchActivity. EXTRA_SEARCHTEXT );
// configure the search object
SearchParameters searchParameters = new SearchParameters();
searchParameters.setText(searchText);
}
03/16/10
// start the SearchAsyncTask
new SearchAsyncTask().execute(searchParameters);
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
37
ViewThumbnailsActivity class
(cont.)
●
The setupSizes method
–
–
Different devices, different screen sizes
How many photos per row
●
●
–
CurrentColumn = -1
●
–
Column index
CurrentRow = null
●
03/16/10
DisplayMetrics.widthPixels / thumbWidth
ThumbWidth == 200 pixels
TableRow object
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
38
ViewThumbnailsActivity class
(cont.)
●
The onCreateDialog method
–
–
Remember we want a progress dialog when
searching the flickr website
If the id is our DIALOG_INFINITE_PROGRESS
constant
●
–
03/16/10
ProgressDialog.show factory method
Otherwise fall back on super.onCreateDialog
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
39
ViewThumbnailActivity class
(cont.)
●
The addPhoto method
–
●
Remember? Called by the
SearchAsyncTask.onProgressUpdate
Add a new row if currentColumn is <0 or equals
to photosPerRow
–
–
03/16/10
currentRow = new TableRow(this)
Add it to the table object
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
40
ViewThumbnailsActivity class
(cont.)
●
The ImageButton
–
●
Show a clickable image
ImageButton.setOnClickListener
–
–
Open the browser to the flickr photo page
Intent.ACTION_VIEW
●
●
Pass to it the Uri, the system knows what to do
Add the ImageButton to the currentRow
–
03/16/10
fix the size 200x200
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
41
The AndroidManifest.xml
●
●
●
●
The Android plugin created a basic file
Our SearchActivity will receive the LAUNCH
intent
We need to add the second activity,
ViewThumbnailsActivity
We need INTERNET permission
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
42
Run!
●
●
Right click on the project in the Package
Explorer
Run as -> Android Application
03/16/10
Francesco Zanitti, Mobile Architectures and Android - SMDS 2010
43