ในมือถือ android หรือว่าพวก tablet นั้นความสามารถที่ต่างจากมือถือรุ่นเก่านั้น มีอยู่อย่างหนึ่งคือ หน้าจอแบบสัมผัสหรือที่เรียกว่า TouchScreen นั้นเอง แต่การ touch screen นั้นก็มีแบ่งออก 2 แบบคือ single touch screen กับ multi touch screen ซึ่งวันนี้ผมจะเอาตัวอย่างการใช้งานแบบ single touch screen มาให้ดูก่อน โดยครั้งนี้ผมจะใช้ api android 2.3.3 ซึ่งก็ลองอัพเวอร์ชั่นดูบ้างว่าโค้ดมีปัญหาอะไรรึเปล่าเพราะสังเกตว่ามือถือที่ออกมาหลังๆๆจะไล่ออก 2.3 กันซะส่วนใหญ่ยิ่งรุ่น top แพงๆๆก็ไป 4.0 ละ โดยผมได้สร้างโปรเจ็คที่ชื่อ THTouchScreen โดยใช้ api 2.3.3 มี min SDK Version 10 ครับโดยสร้างตามรูปเลยครับ

เมื่อสร้างเสร็จเราก็เริ่มลงโค้ดกันเลยครับโดยการใช้งาน Touch Screen นั้นต้องทำการ implement OnTouchListener ซึ่งต้องทำการ import android.view.View.OnTouchListener; เข้ามา โดยตัวอย่างนี้จะมีการสร้าง TextView ขึ้นมาตัวหนึ่งเพื่อแสดงผลการ Touch Screen ที่เกิดขึ้น โดยใช้ String Builder เป็นตัวเก็บข้อมูลก่อนไปกำหนดค่าให้ TextView โดย String Builder ก็เป็นคลาสตัวช่วยในการใช้งานของ String อันหนึ่ง

โค้ดทั้งหมดครับ

package com.thaicoding.THTouchScreen;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.TextView;

public class THTouchScreen extends Activity implements OnTouchListener {
	StringBuilder builder = new StringBuilder();
	TextView textView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        textView = new TextView(this);
        textView.setText("Touch and drag (one finger)");
        textView.setOnTouchListener(this);
        setContentView(textView);
    }

	@Override
	public boolean onTouch(View v, MotionEvent event) {
		builder.setLength(0);

		switch(event.getAction()){
		case MotionEvent.ACTION_DOWN:
			builder.append("down, ");
			break;
		case MotionEvent.ACTION_MOVE:
			builder.append("move, ");
			break;

		case MotionEvent.ACTION_CANCEL:
			builder.append("cancel, ");
			break;
		case MotionEvent.ACTION_UP:
			builder.append("up, ");
			break;
		}
		builder.append(event.getX());
		builder.append(",");
		builder.append(event.getY());
		String text = builder.toString();

		Log.d("THTouchTest", text);
		textView.setText(text);
		return true;
	}

}

เมื่อพิมพ์โค้ดเสร็จแล้วก็ลองรันดูครับแต่อย่าลืมถ้าคุณเลือก version ตามผมก็ต้องสร้าง emulation ตัวที่มี version ตรงกันนะครับ

ผลลัพธ์การรันจะเห็นว่าจะมีการแสดงสถานะและตำแหน่งของจุดที่เราไปสัมผัสโดยในตัวอย่างนี้เป็นแบบ Single Touch Screen ซึ่งจะตรวจจับแค่จุดเดียวเท่านั้น ในสถานนะของ Touch Screen นั้นก็ประกอบด้วย Down คือการที่เรากดลงไปบนหน้าจอ , Up คือ การที่เอานิ้วออกจากหน้าจอ, Move คือการที่เราเอานิ้วไปสัมผัสบนหน้าจอแล้วเคลื่อนที่ , Cancel จะเป็นการยกเลิกใช้หน้าจอสัมผัส ซึ่งจากโค้ดตัวอย่างจะเห็นว่าใน method OnTouchListenerนั้นจะใช้ event.getAction() เพื่อหาว่าสถานะปัจจุบันของหน้าจอสัมผัสนั้นคืออะไรแล้วทำการเก็บข้อมูลเพื่อไปกำหนดค่าให้ TextView แล้วแสดงผลต่อไปส่วนตำแหน่งของจุดที่เราสัมผัสนั้นก็จะเก็บเป็นตำแหน่ง x, y ซึ่งใช้คำสั่ง event.getX() และ event.getY() โดยที่ event นั้นจะเป็นตัวแปรของ MotionEvent ครับ

นี้ก็เป็นตัวอย่างการใช้งาน Single TouchScreen ครับซึ่งเป็นโค้ดอย่างง่ายลองไล่ดูโค้ดนะครับเพื่อความเขาใจมากขึ้น และเนื่องในวันนี้เป็นวันปีใหม่ 2555 ขอให้ทุกท่านจงประสบแต่ความสำเร็จและความสุขนะครับจาก thaicoding.net

Download SourceCode

การสร้าง ActiveList แล้วเรียกใช้งาน class อื่น

ในการพัฒนา android app นั้นเมื่อโปรแกรมมีการทำงานที่ซับซ้อนนั้น หลักการพื้นฐานของ oop ก็น่าจะเป็นการสร้าง class เพื่อที่จะสร้าง object ที่ทำงานต่างกันไป วันนี้หลังจากหายไปนานไม่ได้เขียนบทความเลย เอาตัวอย่างการสร้าง Active List เมื่อ เลือก list แล้วก็จะไปเรียกใช้งาน class ต่างๆที่มีอยู่ครับเราไปดูกันเลย

หลังจากที่สร้างโปรเจ็คเสร็จแล้วให้เราทำการแก้ไขไฟล์หลัก ActiveList.java ให้ทำการ extends มาจาก ListActivity

เพื่อที่เราจะทำการหน้าตาแบบ list ได้ โดยมีโค้ดดังนี้

package com.thaicoding.activelist;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ActiveList extends ListActivity {
    /** Called when the activity is first created. */
	String menu[] = {"Helloword", "Thaicoding"};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, menu));
    }
}

จากนั้นลองรันดูจะได้หน้าต่างแบบนี้

ซึ่งเมนูเราสร้างมาจาก String array ที่ชื่อว่า menu นั้นเองส่วนรูปแบบ style นั้นก็จะกำหนดโดย android.R.layout.simple_list_item_1 ซึ่งลองใช้แบบต่างๆดูได้ครับ ต่อมาเราจะมาสร้าง class ตามชื่อเมนูครับมีคลาสชื่อว่า? Helloword, Thaicoding

โดยทั้ง 2 คลาสไม่มีอะไรมาให้มัน extends มาจาก? Activity โดยไม่มีการทำงานอะไรมากเพิ่งแค่สร้าง TextView จากนั้นก็จะแสดงผลออกทางหน้าจอซึ่งต่างกันเฉพาะคำเท่านั้น

โค้ดทั้ง 2 คลาส

package com.thaicoding.activelist;

import android.app.Activity;
import android.widget.TextView;
import android.os.Bundle;

public class Thaicoding extends Activity {

	TextView textView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        textView = new TextView(this);
        textView.setText("Thaicoding.net");
        setContentView(textView);
    }
}

package com.thaicoding.activelist;

import android.app.Activity;
import android.widget.TextView;
import android.os.Bundle;

public class Helloword extends Activity {
	TextView textView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        textView = new TextView(this);
        textView.setText("HelloWord");
        setContentView(textView);
    }
}

เมื่อสร้างคลาสทั้ง 2 แล้วเราก็มากำหนด action ให้กับคลาสหลักให้ทำการเพิ่ม onListItemClick โดยมีโค้ดทั้งหมดดังนี้

package com.thaicoding.activelist;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ActiveList extends ListActivity {
    /** Called when the activity is first created. */
	String menu[] = {"Helloword", "Thaicoding"};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, menu));
    }

    @Override
    protected void onListItemClick(ListView list, View view, int position,long id)
    {
        super.onListItemClick(list, view, position, id);
        String testName = menu[position];
        try {
            Class clazz = Class
                    .forName("com.thaicoding.activelist." + testName);
            Log.d(testName, testName);
            Intent intent = new Intent(this, clazz);
            startActivity(intent);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
}

หลักจากที่เราเขียนโค้ดเสร็จแล้วก็กำหนดสิทธิการรันของ class ในไฟล์ AndroidManifest.xml โดยเพิ่ม tag ใหม่จะได้ดังนี้

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.thaicoding.activelist"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".ActiveList"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:label="Helloword Test"
		          android:name=".Helloword"
			      android:configChanges="keyboard|keyboardHidden|orientation" />
        <activity android:label="Thaicoding Test"
		          android:name=".Thaicoding"
			      android:configChanges="keyboard|keyboardHidden|orientation" />

    </application>
</manifest>

เมื่อเสร็จแล้วลองรันแล้วเลือกดูครับมันก็จะได้หน้าตาประมาณนี้ครับ

หลักการสำคัญให้สังเกต onListItemClick ให้ดีครับจะมีการใช้งาน

Class clazz = Class.forName(“com.thaicoding.activelist.” + testName);

ซึ่ง testName นั้นจะเป็นชื่อ class ที่อยู่ในตัวแปรเมนูนั้นเอง ซึ่งในการใช้งานแบบนี้เราต้องดูเรื่องของ package ของภาษาจาวาให้ดีนะครับ หวังว่าจากตัวอย่างนี้จะทำให้หลายคนเอาไปประยุกต์ใช้งานได้นะครับ

 

Download SourceCode

หลังจากที่ adobe ประกาศว่าจะยกเลิกการพัฒนา flash player บนมือถือเล่นเอาคนที่อยู่ในวงการ flash คิดหนักกันพอสมควรมามันจะเป็นอย่างไรกันต่อไป แต่อย่างไรผมก็จะเขียนบทความต่อไปละกัน ครั้งนี้จะเป็นการสร้างสี่เหลี่ยมโดยใช้ action script ครับเรามาเริ่มกันเลยดีกว่า ขั้นแรกเราก็สร้างไฟล์ fla ที่เป็น action script 3.0 ก่อนครับ

จากนั้นเมื่อเราสร้างไฟล์เสร็จแล้วให้ทำการคลิกที่ timeline แล้วก็คลิกขวาแบบในรูปเพื่อทำการเขียน action script

จากนั้นก็เขียนโค้ดตามนี้ครับ

import flash.display.MovieClip;

var mc:MovieClip = new MovieClip();

mc.graphics.beginFill(0xFF0000);

mc.graphics.drawRect(0,0,120,120);

mc.graphics.endFill();

addChild(mc);

เมื่อเขียนเสร็จก็ลองกด ctl+enter เพื่อทำการ test movie ดูครับจะเห็นว่ามีการสร้างสี่หลี่ยมสีแดงเกิดขึ้นครับ

การทำงานของโค้ดก็คือ เรามีการสร้าง movie clip ขึ้นมา 1 ตัวเพราะการสร้างสีเหลี่ยมนั้นต้องอาศัย movie clip เป็นตัวสร้างเพราะ movie clip นั้นมันจะเป็นตัว graphics ที่สามารถสร้างรูปร่างต่างๆ รวมไปถึงการแสดงภาพจากไฟล์ภาพด้วย เมื่อเราสร้าง movie clip ขึ้นมาแล้วจากนั้นเราก็เริ่มกำหนดสีให้มันด้วย method beginFill ซึ่งต้องใส่ค่าให้มัน โดยผมกำหนดสีเป็นสีแดงโดยการกำหนดสีนั้นต้องใส่เป็นเลขฐาน 16 ซึ่งเป็นค่าของสีครับจากนั้นเราก็สั่งให้มันทำการวาดสีเหลี่ยมโดยใช้ method drawRect เมื่อเราทำการวาดรูปต่างๆเสร็จแล้วเราก็ควรจบด้วย method endFill เพื่อเป็นการบอกว่าจบการวาดหรือกำหนดรูปร่างของ movie clip ครับ เมื่อเราทำการสร้างและกำหนดรูปร่างให้ movie clip แล้วเราก็ทำให้มันแสดงบนผลลัพธ์ของ stage โดยใช้คำสั่ง addChild() ครับ

Download SourceCode

ในการเขียน action script นั้นเป็นการกำหนดเหตุการณ์และควบคุมเหตุการณ์ที่เกิดขึ้นในโปรแกรม ดังนั้นสิ่งหนึ่งที่ขาดไม่ได้ก็น่าจะเป็น timer เพราะมันสามารถทำสร้างหรือคงบคุมการทำงานตามเวลาที่เรากำหนดได้ ซึ่งมีประโยชน์มาก

เรามาดูตัวอย่างการใช้ timer ใน action script กันเลย ขั้นแรกเราก็ทำการสร้างไฟล์ flash ตามรูปครับ

จากนั้นไปในส่วน timeline เพื่อเปิด หน้าต่างเขียน actionขึ้นมาจากนั้นก็เขียนโค้ดตามนี้ครับ

import flash.utils.Timer;

import flash.events.TimerEvent;

import flash.events.Event;

var timeLine:Timer = new Timer(500);

var mc:MovieClip = new MovieClip();

addChild(mc);

var linex:int = 10;

var liney:int = 10;

timeLine.addEventListener(TimerEvent.TIMER, drawLine);

timeLine.start();

function drawLine(e:Event)

{

trace("drawline");

mc.graphics.lineStyle(2, 0x990000, .75);

mc.graphics.moveTo(linex, liney);

linex = linex + 10;

liney = liney + 10;

mc.graphics.lineTo(linex,liney);

}

เมื่อกด ctrl + enter ก็ได้ผลลัพธ์ดังรูปโดยมันจะทำการวาดเส้นตรงตามค่า x, y เพิ่มขึ้นทุกๆ 500 ms ขั้นตอนในการทำงานของโค้ดเริ่มแรกเราต้องทำการ import package ที่เกี่ยวข้องกับ timer เข้ามาจากนั้นให้เราทำการสร้าง timer ขึ้นมา 1 ตัวโดยเรากำหนดเวลารอบโดยกำหนดไปใน constructor ตอนสร้าง object timer จากนั้นมีการสร้างตัวแปรแบบ movie clip ที่ชื่อว่า mc เพื่อทำการวาดรูปกราฟิกต่างๆ และมีการประกาศตัวแปรเพื่อเก็บตำแหน่ง x และ y จากนั้นเราก็ทำการ add movie clip mc ไปยัง stage โดยใช้คำสั่ง addChild จากนั้นเราก็ทำการใช้ event listener ให้กับ timer เพื่อให้ตัวแปร timeline จัดการเหตุการณ์ที่เกิดขึ้นโดยในการกำหนด addEventListener นั้นก็จะทำเมื่อ timer ครบทุกๆรอบนั้นคือครบทุกๆ 500 ms โดยจะให้ทำงานใน function drawLine โดยภายใน function นี้ก็จะมีการวาดเส้นตรงโดยให้ทำการ move ไปยังตำแหน่ง x และ y จากนั้นก็เพิ่มค่า x และ y แล้วทำการวาดเส้นตรงจากจุดที่มนอยู่ไปยังจุดใหม่ซึ่งเป็นจุดที่ค่า x และ y เพิ่มค่าไปแล้ว

Download Source

หลังจากที่ผมศึกษา actionscript มาสักพักก็เลยลองเขียนเกมส์ดูก็ปรากฎว่ามันสนุกดีเลย ว่าจะพัฒนาไปเรื่อยตามความรู้ที่มี นั้นก็คือถ้ามีความรู้เพิ่มขึ้นก็จะพัฒนาให้มันน่าเล่นมากกว่านี้และดีกว่านี้ครับ

นี้เป็นวีดีโอที่ผมอัดไว้ เสียดายมันไม่มีเสียงเพราะ encode เสียงเครื่องผมมีปัญหาเวลาอัดแล้วอัพขึ้น youtube เลยมีปัญหาเรื่องเสียงครับ

v1.0 นี้มีอะไรบ้าง

• หน้าตัวละครเปลี่ยนหน้าได้เวลาตีลูกบอล
• เสียงประกอบเวลาตีลูกบอลและเก็บดาว
• มีหน้า intro, game over และสามารถเล่นซ้ำได้
• มีการแสดงผลคะแนน

ส่วนรายละเอียดการเล่นก็คลิกที่เวลาตัวละครโดนลูกบอลเพื่อตีไปฝั่งตรงข้าม ถ้าลูกบอลเด่งไปยังเส้นหลังของคู่ต่อสู้เราก็จได้คะแนนใครได้ ห้าคะแนนก่อนชนะ ส่วนดาวนั้นจะเป็น item ทำให้ลูกที่เราตีไปไกลขึ้นซึ่งจะต้องเก็บให้มากๆๆ เพราะทุกครั้งที่เก็บได้ระยะทางการตีบอลจะเพิ่มขึ้นด้วย

ส่วนใครอยากลองเล่นดูก็เลยได้ที่ลิงค์นี้ ครับ เล่นเกมส์

เริ่มเขียน actionscript ด้วย adobe flash cs 5.5

วันนี้ผมเขียนบทความสำหรับผู้ที่เริ่มจะหัดเขียน actionscript หรือกำลังสนใจ ผมจะเขียนบทความที่เกี่ยวกับเขียน actionscript version 3.0 นะครับ โดยเราจำเป็นที่จะต้องหาโปรแกรม adobe flash cs 5.0 หรือ 5.5 ก็ได้ตามแต่ที่ท่านจะหามาลงในเครื่องได้นะครับ ขั้นแรกเราก็เปิดโปรแกรม flash มาจากนั้นเลือก new file แล้วมันจะมีหน้าต่างให้เลือกชนิดของไฟล์ที่เราจะสร้างโดย ผมเลือกเป็น ActionScript 3.0

เมื่อเราสร้างไฟล์เสร็จแล้วให้คลิกที่ tab timeline เพื่อจะไปยังหน้าต่าง script ซึ่งในการเขียน actionscript นั้นมันก็เขียนได้หลายรูปแบบ ทั้งเขียนบน stage เลย หรือจะแยกเป็นไฟล์คลาสหรือว่าจะเขียน script ใน movie clip ซึ่งในตัวอย่างนี้ผมจะเขียนบน stage ซึ่ง stage คืออะไรมันก็คือ stage ในการแสดงผลของ flash ซึ่งจะแบ่งเป็น flame ตามที่เราต้องการซึ่งมันคล้ายๆกับโปรแกรมตัดต่อหนัง ที่มันจะมีวิดีโอหลักที่เราต้องใส่ effect ในวินาทีต่างๆนั้นเอง stage ก็เหมือนกันที่เราใส่เหตุการณ์ต่างๆ เอาละเรามาเขียน action script ?โดยให้ที่ timeline แล้วคลิกขวาที่เฟรมเหมือนในรูปจากนั้นก็เขียนโค้ดครับ

import flash.text.TextField;

var textmessage:TextField = new TextField();

textmessage.text = "Thaicoding.net";

addChild(textmessage);

trace("Thaicoding.net");

เมื่อเราเขียนโค้ดเสร็จแล้วให้ลองรันโปรแกรมดูโดยกด ctr+enter ครับแล้วจะได้ผลลัพธ์ดังรูป

โดยโปรแกรมนี้มันได้ทำการสร้าง TextField ขึ้นมา จากนั้นกำหนดให้มันมีข้อความว่า Thaicoding.net จากนั้นเราก็ทำให้มันไปอยู่ใน stage โดยใช้คำสั่ง addChild() นั้นเองซึ่งใน action script นี้หากเราจะต้องการสร้างหรือใช้ control ตัวใดเราต้องทำการ import library ของ control ตัวนั้นเข้ามา แต่ส่วนมาโปรแกรม adobe flash มันจะทำการ import อัตโนมัติให้อยู่แล้วถ้าคุณไม่ไปปรับค่าอะไร ส่วนคำสั่ง trace นั้นมันใช้แสดงข้อความออกทางหน้าต่าง output ซึ่งมันมีประโยชน์ในการ debug โปรแกรมอย่างมากครับ

Download SourceCode

หลายคนที่ติดตามบล็อคของผม thaicoding.net คงสงสัยว่าทำไมผมไม่เขียนบทความใหม่เลย ผมไม่ได้หายไปไหนหรอกแค่ไปหัดวิชามาใหม่ครับ นั่งอ่านหนังสือแล้วก็หัดได้แบบงูๆปลามาอีก 1 วิชา มันก็คือ actionscript ของ adobe นั้นเอง ผมเขียนกับ adobe flash cs5. ครับแล้วต่อจากนี้บล็อคของผมจะมีเรื่องหาเพิ่มเข้ามาอีก 1 หมวดหมู่? แต่ว่าบ้างหมวดหมู่ยังมีเนื้อหาน้อยอยู่เลย อันนี้ก็ต้องขึ้นกับอารมณ์ผมครับว่าช่วงไหนอยากศึกษาอะไร เลยขออภัยมานะที่นี้ครับ และด้วยการเพิ่มหมวดหมู่ใหม่อย่ actionscript เลยเอาเกมส์แบบกากๆ ฝีมือผมมาโพสให้ดูครับ

game

ตัวเกมส์อาจจะมีบักอยู่เยอะครับเนื่องจากทำครั้งแรกในชีวิต ยิ่งถ้าหากเครื่องท่านมีโปรแกรมดาวโหลดที่ดักจับ mp3 แล้วมันจะยิ่ง errors เพราะมันเล่นไฟล์เสียงไม่ได้ครับ แต่ถ้าท่านไม่ได้ลง flash player เวอร์ชัน debug คงไม่มีปัญหาเท่าไรครับ

การเปลี่ยนฉากหรือ intent ใน android

หายไปนานกลับการเขียนบทความ จนเรียกว่าแทบจะไม่มีใครเข้าเว็บอยู่แล้วเพราะไม่มีอะไรใหม่ๆเลย ก็มันไม่ว่างจริงๆเลยไม่ได้เขียน การเขียนบทความที่เป็นแนว tutorial นั้นมันต้องใช้เวลาในการเขียนแต่ละบทความต้องศึกษาแล้วก็ทดลองก่อนว่ามันได้ตามนั้นหรือไม่ เอาละมาครั้งนี้ก็เขียนบทความ android กันต่อเหตุที่ผลเลือกเขียนบทความ android เพราะตอนนี้มันกำลังเป็นที่นิยม เลยขอเป็นพลังเล็กน้อยที่ทำให้เยาวชน มีแหล่งความรู้ในการพัฒนา software

บทความนี้จะเป็นการเปลี่ยนฉากในโปรแกรมหรือที่เรียกว่า intent ใน การเขียนโปรแกรม android นั้นเอง

ขั้นแรกก็สร้าง project ใหม่ขึ้นมา โดยผมจะตั้งชื่อว่า THCIntent ตามรูปครับ

เมื่อสร้าง project เสร็จแล้วให้ทำการสร้าง string และสร้าง button รวมไปถึงการสร้างหน้าที่จะสลับระหว่างหน้าหลักโดยให้ทำการสร้าง string ในไฟล์ string.xml โดยเพิ่มอีก 2 string คือ

    <string name="main_intent">Main Menu</string>
    <string name="swap_intent">Swap Menu</string>

เมื่อสร้าง string เสร็จแล้วให้ทำการเพิ่มปุ่มในไฟล์ xml ที่กำหนดหน้าหลักในไฟล์ 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="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/yellow"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
 <Button
   	android:id="@+id/mainbutton"
   	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   	android:text="@string/main_intent"
    />
</LinearLayout>

ต่อจากนั้นก็สร้างไฟล์ใหม่เพื่อหน้าที่จะสลับ โดยผมจะตั้งชื่อว่า swapintent.xml โดยจะอยู่ใน directory layout โดยถ้าให้ง่ายก็ก็อปโค้ดจาก main.xml ไปแล้วก็เปลี่ยนค่าของ button มาส่วน

 <Button
   	android:id="@+id/swapbutton"
   	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   	android:text="@string/swap_intent"
    />

แล้วก็ในส่วนของ background color ด้วยครับ

android:background=?@color/red?

เพื่อให้สังเกตการณ์เปลี่ยนฉากหรือ intent นั้นผมจะกำหนดสีให้แต่ละหน้าเพื่อที่จะได้เห็นผลชัดเจนโดยที่จะไปสร้างไฟล์เพื่อเก็บค่าสีใน value ไฟล์ชื่อว่า colors.xml โดยเพิ่มโค้ดดังนี้

<?xml version="1.0" encoding="UTF-8"?>
<resources>
	<color name="red">#FFFF0000</color>
	<color name="yellow">#EEEE00</color>
</resources>

ต่อมาก็เขียนโค้ดจาวาในไฟล์โค้ดหน้าหลักและหน้ารองโดยในหน้าหลักหรือว่า class หลักก็มีโค้ดต่อไปนี้

package org.thaicoding.thcintent;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.content.Intent;

public class THCIntent extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Button swapButton = (Button)findViewById(R.id.mainbutton);

        swapButton.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Intent intent = new Intent(THCIntent.this,SwapIntent.class);
				startActivity(intent);
			}
		});
    }
}

ส่วน class ที่ทำหน้าที่ในหน้ารองคือ SwapIntent.java มีโค้ดดังนี้

package org.thaicoding.thcintent;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class SwapIntent extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		 setContentView(R.layout.swapintent);

		 Button mainButton = (Button)findViewById(R.id.swapbutton);
		 mainButton.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				finish();
			}
		});
	 }
}

หลักจากเขียนโค้ดเสร็จแล้วเราก็มากำหนด Activity ที่อนุญาตให้ทำงานในไฟล์ AndroidManifest.xml โดยให้เพิ่ม activity ที่อนุญาตขึ้นมาอีก 1 อันคือ SwapIntent นั้นเองโดยมีการเพิ่มโค้ดแล้วจะได้ดังนี้

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="org.thaicoding.thcintent"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".THCIntent"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SwapIntent"
                  android:label="@string/app_name" />
    </application>
</manifest>

หลังจากเพิ่มโค้ดเสร็จหมดแล้วก็ลองรันโปรแกรมดูครับ

จะเห็นว่าเมื่อรันโปรแกรมเวลากดปุ่มมันจะสลับหน้าต่างกันซึ่ง จากในโค้ดหน้าต่างมันใช้คนละ class กันครับซึ่งทำให้เห็นว่าหากเรามีการให้ application เปลี่ยนหน้าต่างเมนูแล้วละก็ให้ class แต่ละอันรับผิดชอบการทำงานไปเลยทำให้ application เรามีความซับซ้อนมากขึ้นครับ สิ่งที่จะให้สังเกตก็คือ

Intent intent = new Intent(THCIntent.this,SwapIntent.class);

startActivity(intent);

คำสั่งนี้จะเป็นการเรียกใช้ intent มาใช้งานซึ่งจะมีการกำหนด intent จะมีการกำหนด component หรือ class ที่เป็นปลายทางขึ้น ซึ่งเมื่อเราใช้คำสั่ง startActivity(intent); จึงทำให้เราไปเรียกใช้งาน class SwapIntent นั้นเองโดยภายใน คลาส SwapIntent นั้นก็มีโค้ดคล้ายกับโค้ดหลักอยู่แล้วต่างกันที่ setContentView(R.layout.swapintent);

ซึ่งคำสั่ง Intent นั้นทำให้โปรแกรมไปทำงานใน class SwapIntent แทนแล้ว คลาส SwapIntent นี้ก็มีการเรียกให้เปลี่ยนหน้าเมนูอีกจึงเป็นเหตุเมื่อเราเปลี่ยน class ทำงานหน้าต่างก็เปลี่ยนไปนั้นเอง แล้วเมื่อ class SwapIntent นั้นมีการสร้างปุ่มซึ่งเมื่อคลิกมันจะใช้คำสั่ง finish ทำให้โปรแกรมกลับไปทำงานใน class เดิมที่เรียกมานั้นเอง

หากใครไม่เข้าวิธีการใส่ event ให้กับปุ่มหรืองงอะไรท่านสามารถไปดูได้ในหมวดหมู่ mobile programming ได้ครับ

Download Sourcecode

เขียนโปรแกรม 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 ดังนี้

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">

<EditText
android:id="@+id/url_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:lines="1"
android:inputType="textUri"
android:imeOptions="actionGo"/>
<Button
android:id="@+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/go_button" />
</LinearLayout>
<WebView
android:id="@+id/web_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0" />
</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, THCWebViewer!</string>
<string name="app_name">THCWebViewer</string>
<string name="go_button">Go</string>
</resources>

หลังจากที่เรากำหนดหน้าตาโปรแกรมเสร็จแล้วต่อไปก็คือโค้ดในส่วนของการทำงานซึ่งอยู่ในไฟล์? THCWebViewer.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);
}
}

เมื่อลองรันโปรแกรมแล้วเข้าเว็บดูก็จะได้ผลแบบในรูปครับแต่อย่าลืมเวลาเข้าเว็บให้พิมพ์ 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

ไม่ได้เขียนบทความนานร่วมเดือน ช่วงนี้ผมว่าจะหัดเขียน c++ ดูเลยทำให้ผมมาเขียนบทความนี้ c++ ถือว่าเป็นภาษาทางด้านการเขียนโปรแกรมที่ถือว่าทรงพลังอันหนึ่งเพราะมันได้รับประสิทธิภาพมาเต็มๆจากภาษาซี แต่ภาษาซีไม่มีแนวคิด oop แต่ในภาษา c++ นั้นมีซึ่งทำให้ c++ ถือเป็นภาษาหนึ่งที่สามารถพัฒนา application ได้มากมายและหลากหลาย และถ้าหากใครเขียน c++ ได้จนคล่องแล้วจะไปต่อยอดภาษาอื่นก็เป็นเรื่องง่ายไปเลย

เอาละเรามาเริ่มเขียนภาษา c++ บน visual studio 2010 กันเลยดีกว่าโดยโปรแกรมจะเป็นโปรแกรมแปลงค่าเงินง่ายๆจากเงินดอลล่าร์สหรัฐ ไปเป็น เงินไทยโดยคูณ 30 เพราะเอาตัวเลขง่ายๆละกัน ผมคิดว่าเป็นโปรแกรมที่ไม่ยากเกินไม่ง่ายเกินไม่อยากเริ่มเขียนที่ Hello world มันเริ่มเบื่อละ อันละครั้งแรกก็เปิดโปรแกรม visual studio 2010 ขึ้นมาเลือกเป็น visual c++ จากนั้นก็สร้างโปรเจ็คเป็น window console application

กด OK จากนั้นกด next แล้วเลือกเป็น empty project และก็ console application แบบในรูป

เมื่อสร้าง project เสร็จก็ให้ทำการคลิกขวาที่ folder Source Files แล้วเลือก Add — > New Item

แล้วเลือกสร้างไฟล์ .cpp ตั้งชื่อว่า main จากนั้นก็เขียนโค้ดดังนี้

#include
#include

int main()
{
int usd = 0;
std::cout << "Please enter USD \n"; 	std::cin >> usd;
std::cout << "Convert to thai bath: " << (usd * 30 ) << "\n";

system("PAUSE");
return 0;

}

จากผลลัพธ์จะเห็นว่าเมื่อใส่จำนวนเงินสหรัฐมันจะเอาไปคูณ 30 แล้วแสดงผล ในภาษา c++ นั้น จะมีการ #include <cstdio> มันก็คล้ายกับ stdio.h ในภาษาซีนั้นเอง ส่วน iostream นั้นก็ include เข้ามาเพื่อใช้คำสั่งเกี่ยวกับ input output ในส่วนของตัวโปรแกรมหลักนั้นก็ต้องมี function main แบบเดียวกับโปรแกรมในตระกูลภาษาซี จากนั้นมีการประกาศตัวแปร int ที่ชื่อว่า usd ส่วนคำสั่ง std::cout โดยใช้เครื่อง << เป็นการบอกทิศทางข้อมูลว่าให้แสดงผลออกทางหน้าจอ ส่วนถ้าจะรับค่าจาก keyboard ให้ใช้ std::cin >> usd; เพื่อเอาค่าที่ได้ไปเก็บในตัวแปร usd นั้นเองส่วนการแปลงเงินนั้นก็เอาไปคูณ 30? จะเห็นว่ามีการใช้เครื่องหมาย << ได้หลายๆครั้งเพื่อเป็นการส่งข้อมูลออกหน้าจอไปเป็นชุดนั้นเอง

ก็หวังว่าโปรแกรมนี้จะเป็นจุดเริ่มต้นของการเรียนรู้ภาษา c++ ของคนที่เข้ามาอ่านในบล็อกแห่งนี้