iPhone Programming : II – Event & Action

สำหรับวันนี้เราจะมาต่อกันด้วยเรื่องของ action และ event กัน ก็หลังจากที่ได้รู้เกี่ยวกับ iphone SDK ไปอย่างคร่าวๆแล้ว และก็ได้เข้าใจ Cocoa ในเบื้องต้นมาบ้างแล้ว วันนี้เราจะมาทำความเข้าใจเกี่ยวกับ Event ต่างๆของ iPhone ด้วยการเขียนโปรแกรมอย่างง่ายๆกันดู

อย่างที่บอกไปครับว่าหลังจากที่เราได้มั่วๆเขียน iPhone  กันไปตั้งแต่แรกๆ ดังในตัวอย่าง http://www.macfeteria.com/2008/09/iphone-programming-begin หลายคนอาจจะทำตามโดยที่ไม่รู้อะไรเลย เอาเป็นว่าวันนี้ผมจะอธิบายให้เข้าใจเบื้องต้นก่อนแล้วกัน โดยปกติแล้วการเขียนโปรแกรมด้วย Cocoa นั้น นอกจากเราจะเขียน Class และประกาศ member , variable , method ต่างๆแล้ว ยังมีส่วนสำคัญอยู่อีก สองอย่างคือ

IBOutlet

IBOutlet เป็นการประกาศให้ IB ( interface builder ) รับรู้ว่า ตัวแปรนี้ สามารถเชื่อมต่อเข้ากับ Object ใน nib , xib ได้  พูดอีกในทางหนึ่งได้ว่า IBOutlet จะเป็นตัวแทนของ Object ที่เราได้ออกแบบใน IB นั่นเอง

IBAction

เมื่อเราต้องการให้ Control ต่างๆใน interface builder สามารถตอบสนองต่อ action ได้ เราต้องประกาศ method ให้เป็น IBAction ยกตัวอย่างว่า ถ้าเราจะเขียนว่า กดปุ่มแล้วให้ไปเรียกใช้ method นี้ เราต้องประกาศใน method ให้เป็น IBAction โดยปกติแล้ว การประกาศ IBAction จะรับ parameter เป็น idโปรแกรมที่เราจะได้ทดลองเขียนกันวันนี้ไม่มีอะไรมากเลยครับ เป็นโปรแกมทดลองการใช้งาน IBOutlet และ IBAction โดยหน้าตาโปรแกรมเป็นดังรูป

interface

โปรแกรมที่เราจะทำ ก็คือ เมื่อเรากด ปุ่มมันก็จะเปลี่ยน ตัวหนังสือ บนปุ่มให้เป็นเหมือนข้อความใน text field เช่นว่า ถ้าเราพิมพ์ Hello World ถ้ากด Button A มันก็จะเปลี่ยนกลายเป็นคำว่า Hello World ตามไปด้วย ง่ายไม๊ครับ ? ก้ออย่างที่บอกไปว่า เราต้องการจำทำความเข้าใจ เกี่ยวกับ IBAction และ IBOutlet งั้นมาเริ่มเลย

ก่อนอื่นก็เปิด Project ใหม่ขึ้นมา ให้เป็นแบบ View-Base Application จะตั้งชื่อว่าอะไรก็ได้นะครับ อย่างตัวอย่างนี้ผมตั้งว่า ButtonDemo

buttondemo

หลังจากันนั้น เราก็จะออกแบบหน้าตา interface ของเรา โดยเปิดไฟล์ ButtonDemoViewController.xib ขึ้นมา ( ถ้าหากว่าตั้งชื่อ Project เป็นอย่างอื่น ก็จะเห็น .xib ชื่อประมาณว่า xxxxxxxController.xib แทน ) แล้วเราก็วาง Text Field แล้ว Round Rect Button

interfacedesign

หรือเราอาจจะอยาก ตกแต่ง Button ของเราให้มีสีสันก็ทำได้ โดยที่เราเปิด Inspector ขึ้นมาและ เลือกไปยัง Attributes แล้วเราก็เปลี่ยน สีของตัวหนังสือ ก็ได้นะครับ

interfacechangedesign

เมื่อเราได้ออกแบบหน้าตาโปรแกรมเป็นดังที่เราต้องการแล้ว ลำดับต่อไปก็คือ การเขียน Code ก็เริ่มด้วยการเขียน code เพิ่มเข้าไปยัง ButtonDemoViewController.h

ดูจาก Code ข้างบน เราได้ประกาศ IBOutlet ที่เป็น UITextField ขึ้นมา ก็เพื่อว่า เราต้องการที่จะ นำข้อความที่เราพิมพ์ ใน text Field มาแสดงยัง button ของเรา ฉนั้นแล้วเราก็ต้องประกาศ Outlet เพื่อให้ ButtonDemoViewController สามารถใช้งาน UITextFields ที่เราได้ออกแบบใน .xib ได้นั่นเอง

มาถึงตรงนี้ อาจจะสงสัยว่า แล้ว Button อีกทั้งสองอัน ไม่ต้องประกาศ outlet ด้วยหรือ ? คำตอบก็คือไม่ต้องครับ เพราะว่า เราไม่ต้องการใช้ค่าต่างๆของ button หรือปรับเปลี่ยนค่าของ button ต่างกับ text Field ที่เราต้องการ ค่าที่ได้จากการพิ่มพ์เข้ามา เราถึงต้องประกาศให้มี IBOutlet ที่เป็น UITextField สำหรับปุ่มของเรานั้นต้องการคือ เมื่อกดปุ่มแล้วจะให้ทำอะไร ดังนั้นจึงต้องประกาศ action ขึ้นมา นั่นก็คือ เราได้ประกาศ printTitle ขึ้นมาเป็น Action ของการกดปุ่มนี้

หลังจากนั้น เราก็กลับมายัง Interface Builder อีกครั้ง เพื่อทำการเชื่อมต่อ xib ของเราเข้ากับ action และ outlet ที่เราได้ประกาศไว้ โดยเรา

  • Click ขวา ที่ File’s Owner ของเรา
  • กดที่ ช่องกลมๆ แล้วลากไป ยัง text field

link_textbox

สิ่งที่เราได้ทำไป ก็คือ เราได้บอกว่า ให้ m_textBox ของเรา ได้เชื่อมเข้ากับ Text Field ที่เราได้ออกแบบไว้ พูดง่ายๆก็คือว่า เราได้ให้ m_textBox ของเรามีค่าเท่ากับ Text Field ที่เราได้ออกแบบไว้นั่นเอง

เมื่อเราได้เชื่อม text field แล้ว สิ่งต่อไปที่จะต้องทำ ก็คือ เราจะสั่งให้ปุ่ม เมื่อถูกกดแล้วไปทำ Action อะไร วิธีการก็ไม่ยากครับ

  • เลือกปุ่มแล้วกด Ctrl ค้าง
  • ลากมายัง File’s Owner แล้วปล่อย mouse
    action_link
  • หลังจากนั้นเราจะเห็น Panel (กล่องสีดำๆ) ขึ้นมา แล้วก็เลือกไปที่ printTitle
    event
  • ในส่วนของ Button อีกอันก็ทำแบบเดียวกัน
  • ถ้ากด Click ขวาที่ File’s Owner สังเกตตรง Receive Actions จะเห็นดังรูป แสดงว่าทำถูกแล้ว
    actionpanel

ต่อไป เราก็จะเขียน code ในส่วนของ action ที่เราได้ประกาศขึ้นมา โดยเปิด  ButtonDemoViewController.m ของเรา แล้วก็เพิ่ม code เข้าไปดังนี้

ดูจาก Code ของโปรแกรม อธิบายการทำงานคร่าวๆ ได้ว่า

  • เมื่อปุ่ม ถูกกด มันจะเรียก printTitle พร้อมกับส่ง parameter ที่เป็นบอกว่าใครเป็นคนกด ( sender )
  • หลังจากนั้นไปเรียกใช้ method ที่ชื่อว่า setTitle: forState:  โดยเราก็นำข้อความ จาก m_textBox และกำหนดให้อยู่ใน state ปกติ

ลอง Compile ดูครับ แล้วลองพิมพ์ข้อความ แล้วก็กด ปุ่มดูครับ จะเห็นว่า ปุ่มที่ถูกกด จะถูกเปลี่ยนข้อความบนปุ่ม

rundemo

Object State

ถ้าสังเกต ดูดีๆ เวลาที่เรากดปุ่ม B ค้างไว้ จะเห็นว่าข้อความจะเป็น “Button B” เมื่อปล่อยแล้วถึงจะเป็น “Hello World” ดังรูป

rundemo2

เพราะว่า จาก code ของเราจะเห็นว่าเราได้ setTile: forStete ให้เป็น UIControlStateNormal เมื่อขณะที่ปุ่มได้ถูกกด state ของปุ่มจะเปลี่ยนเป็น UIControlStateHighlighted ถ้าเราเปลี่ยน code จาก UIControlStateNormal ข้างบนให้เป็น UIControlStateHighlighted ก็จะเห็นผลลัพธ์ แบบนี้

state

More Event

อย่างที่เราได้ลองกันไป จะเห็นว่า Event สำหรับปุ่มนั้น ที่เราได้ทำไปคือ “ปุ่มได้ถูกกดลงไป” เท่านั้นเอง
จริงๆแล้ว UIButton นั้นสามารถรับ event ต่างๆได้มากมาย อาทิเช่นการ Drag เราสามารถกำหนด ให้ event ต่างๆ สามารถเรียกใช้ action ต่างกันก็ได้ ถ้าเราลองกด click ขวา ที่ปุ่มของเราก็จะเห็น Panel ดังรูป

touch-up-inside

จะเห็นว่ามี Events ต่างๆมากมาย และจะพบว่า Event ที่ได้เรียก printTitle: นั้นคือ Touch Up Inside คือแปลได้ว่า ” กดปุ่ม และ เมาส์ก็ยังอยู่ในบริเวณปุ่ม ” เราลองกด ปุ่ม Button B แล้วลองเลื่อน mouse ออกนอกปุ่มดูสิครับ จะเห็นว่า ข้อความไม่เปลี่ยน นั่นก็เพราะว่า Event ที่เกิดขึ้นไม่ใช่ Touch Up Inside แต่เป็น Touch Up Outside

เราสามารถทดลองการใช้งาน Event อื่นๆได้ เช่นเราเพิ่ม IBAction เข้าไป โดยให้ ชื่อว่า setHelloWorld และมี code แบบนี้

แล้วสิ่งที่เราจะทำก็คือ เราจะลองใช้ event ที่ชื่อว่า Touch Drag Exit

การใช้ Event อื่นๆก็ไม่ได้ยากครับ คือ เราก็ลาก mouse ที่จาก Event ที่เราต้องการไปยัง File’s Owner

linkevent

แล้วก็เลือก Action ที่เราต้องการ ดังรูป ( เราก็เลือก setHelloWorld)

newevent

แล้วเราก็ลอง Compile แล้วก็ลอง กด ไปที่ปุ่ม แล้วก็เลื่อน mouse ออกไป จนสุดๆ จะเห็นว่า ปุ่มของเราจะเปลี่ยนเป็น Hello Macfeteria ดังรูป

macfeteria

ก็เป็นอันจบ สำหรับ tutorial นี้ครับ คิดว่าน่าจะเข้าใจ เรื่องของ Action & Event รวมถึง Outlet นะครับ ครั้งหน้าเราจะได้ลองใช้งาน UI อื่นๆเพิ่มมากขึ้น

สงสัย แนะนำ คอมเม้น กันได้ครับ ถามใน Forum ก็ได้ครับ

4 thoughts on “iPhone Programming : II – Event & Action”

  1. ต้อง การรู้เรื่องนี้แบบ ละเอียด ช่วยทีได้ไหมคับ

    ทำตามทุกขั้นตอนแล้ว แต่ Run แล้วมันไม่ขึ้น อะคับ ตุ่มมันไม่เป็น คำที่พิม

  2. จะเช็ก emptry string ยังไงครับ รู้สึก != @” ” จะใช้ไม่ได้ครับ ผมลอง ทำ else ขึ้นมาดูมันก็ไม่เข้า else น่ะครับ…

Leave a Reply