Download Topic 6 - Personal Web Pages

ELET4133: Embedded Systems
Topic 6
Basic Program Structure
Originals of Slides and Source Code for Examples:
http://www.coreservlets.com/android-tutorial/
Special Thanks
• To Marty Hall
– Author of most of the information in these
slides
– Gave me permission to use and modify
– His company does customized training for many
technical topics
– All online for self-study
– http://courses.coreservlets.com
8/14/2013
2
Agenda
•
•
•
•
•
•
•
8/14/2013
Making and testing Android projects
Basic program structure
Java-based layout
XML-based layout
Eclipse ADT visual layout editor
Hybrid layout
Project structure summary
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
3
Starting a New App
• When starting a new App, Eclipse has
already built into the “structure” a
functional “Hello World” program
• To start a new App go
to the File Menu ->
New -> Project and a
new window will open
8/14/2013
1: http://courses.coreservlets.com
4
Starting a New App
• Select Android Project
and then [Next]
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
5
Starting a New App
• Select Android Project
and then [Next]
• This window will
appear – fill it in
Application Name: Name will show on the Title Bar
Follow whatever convention you have for the Package Name and Project Name, I name them the same
Keep the default selections for the others until you are more familiar
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
6
Starting a New App
• Keep the default selections for this window
also, click [Next]
8/14/2013
1: http://courses.coreservlets.com
7
Starting a New App
• Keep the default selections for this window
also, click [Next]
• Again, until necessary, keep the default
selections, click [Next]
8/14/2013
1: http://courses.coreservlets.com
8
Starting a New App
• Keep the default selections for this window
also, click [Next]
• Again, until necessary, keep the default
selections, click [Next]
• Choose Blank Activity
and Create Activity,
click [Next]
8/14/2013
1: http://courses.coreservlets.com
9
Starting a New App
• Keep the defaults unless you want to name
the Main_Activity something else, click
[Finish]
8/14/2013
1: http://courses.coreservlets.com
10
Starting a New App
• When you click [Finish] Eclipse creates a
working App that prints “Hello World” on
the screen
11
8/14/2013
1: http://courses.coreservlets.com
Starting a New App
• When you click [Finish] Eclipse creates a
working App that prints “Hello World” on
the screen
• And is runnable on a virtual
device or on a real phone,
connected through a USB
cable
8/14/2013
1: http://courses.coreservlets.com
12
Basic Program Structure
8/14/2013
13
Three Main Approaches
• There are three main approaches to creating
an Android App in Eclipse
1. Java-based
2. XML-based
3. Hybrid
• The one that seems most like MVC is the
XML-based
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
14
Three Main Approaches
• Java-based1
– Use java to define Strings, layout window, create GUI
controls, and assign event handlers.
– Like Swing programming
• XML-based1
– Use XML files to define Strings, layout window, create GUI
controls, and assign event handlers.
• The java method reads the layout from the XML file and passes it
to setContentView
• XML assigns event handlers, java implements event handlers
• Hybrid1
– Use an XML file to define Strings, layout windows, and create
GUI controls.
• Use java to assign event handlers
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
15
General Structure
• This general structure is common to all
approaches to developing apps
package com.companyName.projectName
import android.app.Activity;
import android.os.Bundle;
import android.widget.SomeLayoutOrView
There is no need to type the import statements manually.
Just use the classes in your code and then when Eclipse
marks the line as an error, click on the light bulb on the
left and Eclipse will tell your which packages to import, or
press [CONTROL]+[SHIFT]+O and Eclipse will create the
correct import statement for you. 1
public class someName extends Activity {
@Override
public void onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
SomeLayoutOrView view = createOrGetView ( );
……
setContentView (view);
}
….
}
8/14/2013
16
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
General Structure
• This general structure is common to all
approaches to developing apps
package com.companyName.projectName
import android.app.Activity;
import android.os.Bundle;
import android.widget.SomeLayoutOrView
Apps are frequently shut down by the device. This lets it
remember some info about the previous invocation. For now
just know that you should always call super.onCreate() as the
first line of your onCreate method. 1
public class someName extends Activity {
@Override
public void onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
SomeLayoutOrView view = createOrGetView ( );
……
setContentView (view);
}
….
}
8/14/2013
17
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
General Structure
• This general structure is common to all
approaches to developing apps
package com.companyName.projectName
import android.app.Activity;
import android.os.Bundle;
import android.widget.SomeLayoutOrView
Some Android conventions are used here and are required
for all students in this class:
1: No *s in the import statements (a * indicates you want to
import all the classes of a certain package )
2: Open brace “{“ on the same line as the declaration
statement
3: @Overide where appropriate: an annotation that you can
use to tell the compiler and your IDE that you intend the
method that has that annotation to be an override of a
super class method
public class someName extends Activity {
@Override
public void onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
SomeLayoutOrView view = createOrGetView ( );
……
setContentView (view);
}
….
}
8/14/2013
18
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
The Java Approach
• Almost everything is done in the java code
public class SomeName extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
String message = "...";
LinearLayout window = new LinearLayout(this);
window.setVariousAttributes(…);
Button b = new Button(this);
b.setText("Button Label");
b.setOnClickListener(new SomeHandler());
mainWindow.addView(b);
...
setContentView(window);
}
private class SomeHandler implements OnClickListener {
@Override
public void onClick(View clickedButton) {
doSomething(...);
}
}}
8/14/2013
19
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
The XML Approach
• The basic approach used in Eclipse so far
– Functionality in
java
– Layout in XML
src/com.mystuff/Main_Activity.java
public class SomeClass extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
public void handlerMethod(View clickedButton) {
String someName = getString(R.string.some_name);
doSomethingWith(someName);
res/layout/activity_main.xml
} }
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout …>
res/values/strings.xml
<TextView … />
<?xml version="1.0" encoding="utf-8"?>
<Button …
<resources>
android:onClick="handlerMethod" />
<string name="some_name">…</string>
</LinearLayout>
…
</resources>
8/14/2013
20
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
The Hybrid Approach
• The Functionality in java (classes and listeners)
– Layout only in
XML
– No assignment
of handlers in
XML
res/layout/activity_main.xml
src/com.mystuff/Main_Activity.java
public class SomeClass extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button b = (Button)findViewById(R.id.button_id);
b.setOnClickListener(new SomeHandler());
}
private class SomeHandler implements OnClickListener {
@Override
public void onClick(View clickedButton) {
doSomething(...);
}
}}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout …>
<TextView … />
<Button …
given IDs only in XML/>
</LinearLayout>
8/14/2013
21
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
The “Say Hello App” using
The Three Approaches
8/14/2013
22
Say Hello Application
• All three approaches will be used to write an
Android program:
– Has one button
• “Show Greeting”
– The Greeting: prints “Hello from Android”
• The three approaches will be simulated on
the Atrix 2 Virtual Device
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
23
Java Based Layout
8/14/2013
24
PROs and CONs
• Approach
– Use Java to define Strings, lay out window, create GUI
controls, and assign event handlers.
• Advantages
– Familiar to Java desktop developers. Like approach used for
Swing, SWT, and AWT.
– Good for layouts that are dynamic (i.e., that change based on
program logic).
• Disadvantages
– Harder to maintain (arguable, but general consensus)
– Works poorly with internationalization
– Not generally recommended except for dynamic layouts
• But still acceptable for App Store. Whatever works best for your
programmers and your app. No code police.
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
25
Java Code
• Java-code1
– Main Activity
Class
– Has the onCreate()
method
– Defines
•
•
•
•
8/14/2013
Buttons
Text windows
Layout
And assigns
listeners
public class SayHelloJava extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
String appName = "SayHello Application";
String windowText =
"Press the button below to receive " +
"a friendly greeting from Android.";
String buttonLabel = "Show Greeting";
LinearLayout mainWindow = new LinearLayout(this);
mainWindow.setOrientation(LinearLayout.VERTICAL);
setTitle(appName);
TextView label = new TextView(this);
label.setText(windowText);
mainWindow.addView(label);
Button greetingButton = new Button(this);
greetingButton.setText(buttonLabel);
greetingButton.setOnClickListener(new Toaster());
mainWindow.addView(greetingButton);
setContentView(mainWindow);
}
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
26
Java Code (Event Handler Method)
private class Toaster implements OnClickListener {
@Override
public void onClick(View clickedButton) {
String greetingText = "Hello from Android!";
Toast tempMessage =
Toast.makeText(SayHelloJava.this,
greetingText,
Toast.LENGTH_SHORT);
tempMessage.show();
}
}
• Handler (or Listener)
– Defines what the App should do when the
button is clicked
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
27
XML Code
<?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"
>
<!-- This file is not used in the SayHelloJava example -->
</LinearLayout>
• The activity_main.xml file
– Specifies the layout only
• In this case: Linear Layout
– Also coded in the onCreate Java method
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
28
The Emulator
• The SayHelloJava App running on an AVD
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
29
XML Based Layout
8/14/2013
30
PROs and CONs
• Approach1
– Use XML files to define Strings, lay out window, create GUI
controls, and assign event handlers.
• Define layout and controls in
res/layout/main.xml
• Define Strings in res/values/strings.xml
• Advantages1
– Easier to maintain
– Can use visual layout editor in Eclipse
– Standard/recommended approach
(along with hybrid)
• Disadvantages1
– Works poorly for dynamic layouts
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
31
More Information
• res/layout/main.xml1
– Define layout and controls with XML description
• <LinearLayout …> Define controls
</LinearLayout>
– Refer to strings (from strings.xml)
with @string/string_name
– Assign event handler with
android:onClick
• res/values/strings.xml1
– Define strings used in GUI or that
might change with I18N
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
32
More Information
• Java code
– Refer to layout with
R.layout.main
– Refers to strings with
getString(R.string.string_name)
– Refers to controls with
findViewById(R.id.some_id)
• More info
– http://developer.android.com/
guide/topics/ui/
declaring-layout.html
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
33
More Information
Refers to layout defined in res/layout/main.xml with
R.layout.main.
Refers to strings defined in res/values/strings.xml with
getString(R.string.string_name)
Defines screen layout and GUI controls. Optionally assigns event
handlers to controls.
Refers to strings defined in res/values/strings.xml with
@string/string_name
Conventional for main file to be called main.xml, but not required. If it
is foo.xml, then Java uses R.layout.foo. As we will see later, complex
apps have several layout files for different screens.
Defines strings that are either used in GUI controls or
that might change with internationalization.
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
34
Code (res/layout/main.xml)
These attributes (android:orientation,
etd.) are defined in JavaDoc API for
LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
These strings are defined in
android:layout_height="match_parent">
res/values/strings.xml
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/window_text"/>
<Button
android:text="@string/button_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="showToast"/>
</LinearLayout>
8/14/2013
This must be a public method in
main class, have a void return type,
and take a View as argument. No
interface needs to be implemented,
as it does with event handlers
referred to in Java code.
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
35
Code (res/values/strings.xml)
<?xml version="1.0" encoding="utf-8"?>
app_name is used for the title of the screen. When
you create the project, this name is used
automatically, but it can be overridden in
AndroidManifest.xml. All the rest are developerspecified names.
<resources>
<string name="app_name">Say Hello
Application</string>
<string name="window_text">
Press the button below to receive
a friendly greeting from Android.
</string>
<string name="button_label">Show Greeting</string>
<string name="greeting_text">Hello from
Android!</string>
</resources>
main.xml refers to this with @string/greeting_text
Java refers to this with getString(R.string.greeting_text)
Eclipse auto-completion will recognize the names when
editing other files that use them.
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
36
Java Code
public class SayHelloXml extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
public void showToast(View clickedButton) {
String greetingText = getString(R.string.greeting_text);
Toast tempMessage =
Toast.makeText(this, greetingText,
Toast.LENGTH_SHORT);
tempMessage.show();
}
}
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
37
The Emulator
• The SayHelloXML App running on an AVD
It looks exactly the
same as the Java
based project
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
38
Hybrid Layout
8/14/2013
39
PROs and CONs
• Approach
– Use XML files to define Strings, lay out window, and
create GUI controls.
– Use Java to assign event handlers.
• Advantages
– Mostly same as XML-based approach
– But, since event handler needs to be edited by Java
programmer anyhow, often makes more sense to
assign it programmatically as well.
• Disadvantages
– Works poorly for dynamic layouts
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
40
Code (res/layout/main.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
We define an id for the button, so
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/window_text"/>
<Button
android:id="@+id/greeting_button"
android:text="@string/button_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
that the button can be referred to in
Java code with
findViewById(R.id.greeting_button)
</LinearLayout>
8/14/2013
We do not assign an event handler
to the button, as we did in the
previous example.
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
41
Code (res/values/strings.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Say Hello Application</string>
<string name="window_text">
Press the button below to receive
a friendly greeting from Android.
</string>
<string name="button_label">Show Greeting</string>
<string name="greeting_text">Hello from Android!</string>
</resources>
No differences between XML based and the Hybrid
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
42
Java Code
You must call
setContentView before
public class SayHelloHybrid extends Activity {
calling findViewById. If you
@Override
call findViewById first, you
public void onCreate(Bundle savedInstanceState){
get null.
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button greetingButton =(Button)findViewById(R.id.greeting_button);
greetingButton.setOnClickListener(new Toaster());
}
private class Toaster implements OnClickListener {
@Override
public void onClick(View clickedButton) {
String greetingText = getString(R.string.greeting_text);
Toast tempMessage =
Toast.makeText(SayHelloHybrid.this,
greetingText,
Toast.LENGTH_SHORT);
tempMessage.show();
}
}}
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
43
The Emulator
• The SayHelloHybrid App running on an AVD
It also looks exactly
the same as the Java
based project and
the XML based
project
8/14/2013
1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf
44
Summary
• Looked at the basic program structure
– In general
– Java-based layout
– XML-based layout
– Hybrid layout
• It doesn’t really matter which structure you
use unless
– Specified by the company
– Dynamic GUIs (use Java only)
8/14/2013
1: http://courses.coreservlets.com
45