เขียนโปรแกรม android : Web Viewer

หลังจากหายไปนานกลับบทความที่เกี่ยวการพัฒนาโปรแกรมใน android ผมก็กลับมาเขียนอีกครั้ง บ้างครั้งก็น้อยใจตัวเองที่ไม่มีปัญหาจะซื้อ smart phone ที่มีระบบปฏิบัติการ android กับเค้าซะทีจะได้ตั้งหน้าตั้งตาพัฒนา android application ?แล้วมันจำเป็นที่จะต้องมีมือถือ android ด้วยหรอ ? คำตอบก็คือคำว่าใช้ครับ เพราะลำพัง simulator ที่ติดมาใน eclipse นั้นไม่พอหรอกไหนจะลอง test โปรแกรมไหนจะ ทดสอบระบบ touch screen เพราะระบบ simulator นั้นไม่สามารถจะจำลองระบบสัมผัสได้นั้นเอง เอาเถอะไหนๆก็ไหนๆเขียนกันต่อไป บทความนี้จะเป็นเนื้อหาเกี่ยวกับ web viewer ซึ่งเป็นตัวที่ช่วยให้โปรแกรมเราเข้าเว็บได้ซึ่ง บ้างครั้งเราไม่ต้องการจะใช้ web browser ที่มากับมือถือก็สามารถใช้ web viewer ได้ซึ่งมันสามารถไปพัฒนาต่อเพื่อจะดึงค่าและกำหนดการแสดงผลของเว็บได้นะครับ

 

 

หลังจากได้สร้าง project แล้วสิ่งแรกที่ต้องทำการกำหนดคือหน้าตาของโปรแกรมซึ่งไปกำหนดในไฟล์ main.xml ซึ่งอยู่ใน res/layout/main.xml

ซึ่งกำหนด xml ดังนี้

[sourcecode language=”xml”]

[/sourcecode]

รูปร่างตาหน้าจะได้ประมาณนี้ครับ แต่ก็จะได้แบบนี้ต้องไปกำหนด string ใน strings.xml ซึ่งอยู่ใน res/value/strings.xml ซึ่งในหน้าตาโปรแกรมเราได้มีการใช้ string ที่เปรียบเสมือนค่าคงที่อยู่คือ ตรง button ที่มีการกำหนดข้อความปุ่มให้เป็น android:text=“@string/go_button” ซึ่งไฟล์ strings.xml มีการกำหนดดังนี้
[sourcecode language=”xml”]


Hello World, THCWebViewer!
THCWebViewer
Go

[/sourcecode]

หลังจากที่เรากำหนดหน้าตาโปรแกรมเสร็จแล้วต่อไปก็คือโค้ดในส่วนของการทำงานซึ่งอยู่ในไฟล์? THCWebViewer.java หรือไฟล์ชื่ออื่นหากตั้งชื่อโปรเจ็คชื่ออื่นครับ แต่ถ้าชื่ออื่นอย่าลืมเปลี่ยนชื่อคลาสด้วยนะครับ

[sourcecode language=”java”]
package org.thaicoding.webviewer;

import android.app.Activity;
import android.os.Bundle;
import android.content.Intent;
import android.net.Uri;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.widget.Button;
import android.widget.EditText;

public class THCWebViewer extends Activity {
/** Called when the activity is first created. */
private EditText urlText;
private Button goButton;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

urlText = (EditText) findViewById(R.id.url_field);
goButton = (Button)findViewById(R.id.go_button);

goButton.setOnClickListener(new OnClickListener(){
public void onClick(View view)
{
openBrowser();
}
});

urlText.setOnKeyListener(new OnKeyListener()
{
public boolean onKey(View view, int keyCode, KeyEvent event){
if(keyCode == KeyEvent.KEYCODE_ENTER){
openBrowser();
return true;
}
return false;
}
});

}

private void openBrowser()
{
Uri uri = Uri.parse(urlText.getText().toString());
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
}
}
[/sourcecode]

เมื่อลองรันโปรแกรมแล้วเข้าเว็บดูก็จะได้ผลแบบในรูปครับแต่อย่าลืมเวลาเข้าเว็บให้พิมพ์ http:// ด้วยนะครับเพราะตัวโปรแกรมยังไม่มีการตรวจสอบครับ ส่วนการทำงานของโปรแกรมนี้เริ่มแรกมาดูโครงสร้างตัวโปรแกรมก่อนประกอบด้วย

นี้เป็นการกำหนดหน้าตาในไฟล์ main.xml ครับซึ่งจะประกอบด้วย Edit Text, Button และ WebViewer การทำงานของโปรแกรมเริ่มจากประกาศตัวแปรสองตัวเพื่อเป็นควบคุม Edit Text กับ Button คือ

private EditText urlText;

private Button goButton;

ซึ่ง goButton มีการใส่การตรวจเหตุการณ์ในการคลิกที่ปุ่มคือ setOnClickListener ซึ่งเป็นการกำหนด action แบบ anonymous class ส่วน urlText ก็มีตรวจ events โดยใช้ setOnKeyListener? เมื่อมีการกดปุ่มซึ่งในโปรแกรมจะตรวจว่าเป็นปุ่ม enter หรือไม่ ซึ่งทั้งสองอันที่ตรวจจับเหตุการณ์นั้น เพื่อไปเรียกใช้งาน openBrowser(); ซึ่ง method นี้จะเป็นการร้องขอข้อมูลจาก url ที่ได้รับเข้ามา โดยใช้คลาส Uri? ของภาษาจาวานั้นเอง เมื่อได้รับข้อมูลแล้วก็ทำการแสดงผลผ่าน web viewer ซึ่งจะเห็นในบรรทัดที่มีคำสั่ง

Intent intent = new Intent(Intent.ACTION_VIEW, uri);

startActivity(intent);

บทความนี้ก็เป็นอันจบพบกันใหม่บทความหน้าครับ

 

Download Source