Download PPT2 - WordPress.com

IT411 Mobile Programming
Topics in This Section
วิธก
ี ารสร ้าง Android projects

• โครงสร ้าง program

• การสร ้าง layout ด ้วย Java-based

• การสร ้าง layout ด ้วย XML-based

• การสร ้าง layout ด ้วย Eclipse ADT visual layout editor

• การสร ้าง layout แบบ Hybrid layout

• Project structure summary
General Structure
(Common to All Approaches)








package com.companyname.projectname;
import android.app.Activity;
import android.os.Bundle;
import android.widget.SomeLayoutOrView;
public class SomeName extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
SomeLayoutOrView view = createOrGetView();

...
setContentView(R.layout.main);
}





...
}
Three Main Approaches








• Java-based
– เป็ นการสร ้าง layout ด ้วยภาษา Java - เหมือน Swing programming.
• XML-based
้
– ใชไฟล์
XML ในการระบุ Strings และ layout window
• Hybrid
้
–ใชไฟล์
XML file ในการระบุ Strings และ layout ใชค้ าสงั่ Java ในการ
ควบคุมเหตุการณ์ทเี่ กิดขึน
้ บนหน ้าจอ
• ตัวอย่างการทางาน
– เมือ
่ กดปุ่ ม Button เมือ
่ กดปุ่ ม “Show Greeting” ระบบจะแสดงข ้อความ
Hello from Android ผ่านทางหน ้าจอ
Java-Based Approach: Template




















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());
window.addView(b);
...
setContentView(window);
}
private class SomeHandler implements OnClickListener {
@Override
public void onClick(View clickedButton) {
doSomething(...);
}
}}
XML-Based Approach: Template
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);
}}
XML
res/values/strings.xml
res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="some_name">…</string>
…
</resources>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout …>
<TextView … />
<Button … android:onClick="handlerMethod" />
</LinearLayout>
Hybrid Approach: Template

• 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

– สร ้างหน ้าจอ กาหนดค่า ID

– สามารถกาหนด android:onClick ลงใน file xml เพือ
่ ตรวจสอบเหตุการณ์การเลือกวัตถุบนหน ้าจอ















SAMPLE: Java-Based Layout


Approach
้
– ใชจาวา
ระบุข ้อความ layout และควบคุมเหตุการณ์ตา่ ง ๆ ทีเ่ กิดขึน
้ กับ
อุปกรณ์

• Advantages

– คาสงั่ คล ้ายกับ Swing และ AWT ของจาวา

– เหมาะกับ layouts ทีต
่ ้องเปลีย
่ นรูปแบบการทางานไม่ตายตัว dynamic

• Disadvantages

– แก ้ไขยาก

– ไม่ทางานในลักษณะ I18N

• เป็ นทีย
่ อมรับใน App Store เนือ
่ งจากไม่มข
ี ้อกาหนดการทางานในสว่ นนี้
Code (Main Method)



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);




}
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();
}
}
SAMPLE: XML-Based Layout











• Approach
– ใช ้ XML ระบุข ้อความ layout และควบคุมเหตุการณ์ตา่ ง ๆ ทีเ่ กิดขึน
้ กับ
อุปกรณ์
• ระบุ layout และการควบคุมใน res/layout/main.xml
• ระบุ Strings ใน res/values/strings.xml
• Advantages
– แก ้ไขง่าย
– สามารถใช ้ layout editor ของ Eclipse ในการสร ้าง
– Standard/recommended
(along with hybrid)
• Disadvantages
– ไม่สามารถจัดการ dynamic layouts
More Details













res/layout/main.xml
– การระบค่าใน xml เริม
่ จากการกาหนด layout
• <LinearLayout …>Define controls</LinearLayout>
– การอ ้างถึงข ้อมูล String (จาก strings.xml) ใช ้ @string/string_name
– การจัดการเหตุการณ์ทเี่ กิดขึน
้ บนหน ้าจอ (event handler) ใช ้ android:onClick
• res/values/strings.xml
– พืน
้ ทีใ่ นการระบุข ้อความ
• Java code
– ใชอ้ ้าง layout - R.layout.main
– ใชอ้ ้าง strings - getString(R.string.string_name)
– ใชอ้ ้าง controls - findViewById(R.id.some_id)
• More info
– http://developer.android.com/guide/topics/ui/
Project Layout
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"
android:layout_height="match_parent">
<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>
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>
Code (Java)














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();
}
}
Eclipse ADT Visual Layout Editor

• Invoking

– เป็ นการสร ้าง main.xml โดยการลากวาง

• Features

– สามารถควบคุมวัตถุให ้วางตามนาตัง้ แนวนอนได ้ง่าย layout attributes
ี รรบนหน ้าจอ
– สามารถเพิม
่ เติมสส

ั เจน
– เห็นภาพทีไ่ ด ้ชด

• Warning

– อย่างไรก็ตามการฝึ กหัดเบือ
้ งต ้นควรรู ้เรือ
่ งของการใช ้ XML เป็ นสาคัญ

Eclipse Visual Layout Editor
Hybrid Layout






• Approach
–ใช ้ XML ระบุข ้อความ และ layout
– ใช ้ Java ควบคุมเหตุการณ์ตา่ ง ๆ ทีเ่ กิดขึน
้ กับอุปกรณ์
• Advantages
– ใช ้ XML ตามความเหมาะสม
– ทาให ้โปรแกรมเมอร์สามารถมองเห็นวิธก
ี ารจัดการกับเหตุการณ์ตา่ ง ๆ ได ้
ง่ายขึน
้

• Disadvantages

– ไม่สามารถจัดการ dynamic layouts
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"
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"/>
</LinearLayout>
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>
Code (Java)




















public class SayHelloHybrid extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
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();
}
}}
Seeing Standard Output in DDMS














Idea
– DDMS (Dalvik Debug Monitor Service)
•จาลองเมือ
่ มีการโทรมายังมือถือ
• กาหนดพิกด
ั GPS
• แสดงข ้อผิดพลาดทีเ่ กิดจากโปรแกรม
• เพิม
่ รูปภาพในการทดสอบการทางาน
• Simple usage now
– Start DDMS
• Window Open Perspective
Other DDMS
• ครัง้ ต่อมาจะปรากฏ “DDMS” ทีต
่ าแหน่ง
ด ้านบนขวาของ Eclipse
• เลือก“Java”
– See print statements
DDMS Output (HelloAndroid)

Code

– เพิม
่ คาสงั่ System.out.println

ลงใน main onCreate method

• จะปรากฏผลลัพธ์ใน LogCat
Output of System.out.println
Entered so it is easier to find specific output
Among the many informational messages
that emulator prints
Debug an application in android



1.) Logcat
่ log informational
ใชจั้ ดการแสดงเหตุการณ์ในหลายลักษณะเชน
หรือ error messages จากการทีร่ ันโปรแกรม
2.) Eclipse Debugger
่ เดียวกับการ Debug Java program
การใช ้ Debug เชน
3.) Android Debug Bridge (adb)
การใช ้ command-line debugging และแสดงผลผ่าน Android
phone หรือ emulator.
Logcat

เปิ ด Logcat : Window > Show view > Other, Android > Logcat.

ระบบแสดงหน ้าจอ Logcat
Logcat















การกาหนดชนิดของ Log
V - stands -hvd (lowest priority)
D - stands for Debug
I - stand for Info
W - stands for Warning
E - stands for Error
การเขียนคาสงั่ เพือ
่ จัดการ Log
public class MyActivity extends Activity {
private static final String TAG = "MyActivity";
@Override
public void onCreate(Bundle savedInstanceState) {
Log.i(TAG,"On Create");
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
@Override
protected void onDestroy() {
super.onDestroy();
Log.i(TAG,"On Destroy");
}}
Logcat

การค ้นหาข ้อความทีป
่ รากฏใน Log : กรอกข ้อความทีต
่ ้องการค ้นหา

Log จะแสดง Tab ตามทีต
่ ้องการค ้นหา
Eclipse Debugger

Double-click เพือ
่ เลือกตาแหน่ง breakpoint หรือ click ขวาเลือก Toggle
Breakpoint:
Eclipse Debugger

ตาแหน่งโปรเจคเลือก debug as ->android application หรือเลือกปุ่ ม Debug ตรง
tool bar:
Eclipse Debugger



Step Into (
) or F5 key: เข ้าไปประมวลผลในเมธอด
Step Over ( ) or F6 key: เข ้าไปประมวลผลแถวถัดไป
Step Return ( ) orF7 key: กลับไปประมวลผลบรรทัดก่อนหน ้า