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 {  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 {  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 {  public void onClick(View clickedButton) {  doSomething(...);  }  } }

XML-Based Approach: Template Java  public class SomeClass extends Activity {  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.xmlres/layout/main.xml …

Hybrid Approach: Template  Java  public class SomeClass extends Activity {  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 {  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 {  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 {  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  Define controls  – การอ้างถึงข้อมูล String (จาก strings.xml)  – การจัดการเหตุการณ์ที่เกิดขึ้นบนหน้าจอ (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  –

Project Layout

Code (res/layout/main.xml)   <LinearLayout  xmlns: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"   <Button   android:layout_width="match_parent"  android:layout_height="wrap_content"  android:onClick="showToast"/> 

Code (res/values/strings.xml)   Say Hello Application   Press the button below to receive  a friendly greeting from Android.   Show Greeting  Hello from Android! 

Code (Java)  public class SayHelloXml extends Activity {  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)   <LinearLayout  xmlns: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"   <Button    android:layout_width="match_parent"  android:layout_height="wrap_content"/> 

Code (res/values/strings.xml)   Say Hello Application   Press the button below to receive  a friendly greeting from Android.   Show Greeting  Hello from Android! 

Code (Java)  public class SayHelloHybrid extends Activity {  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 {  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 เช่นเดียวกับการ Debug Java program  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";  public void onCreate(Bundle savedInstanceState) {  Log.i(TAG,"On Create");  super.onCreate(savedInstanceState);  setContentView(R.layout.main);  }  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: กลับไปประมวลผลบรรทัดก่อนหน้า