Tip & Trick : iPhone Simulator

หลายคนเขียนโปรแกรม iPhone กันบ้างแล้ว และก็ได้รู้จัก xcode กันมากขึ้น แต่ก็มีหลายๆครั้ง ที่มือใหม่ เริ่มเขียนโปรแกรมสำหรับ iPhone มีคำถามที่พบได้บ่อยมากๆ เกี่ยวกับ iPhone Simulator และในวันนี้ผมจะเขียนเกี่ยวกับ คำถามที่พบบ่อยๆ และวิธีแก้ปัญหา นะครับ เอาละ เริ่มกันเลยดีกว่า

เมื่อเขียนโปรแกรมไปแล้วจะลบโปรแกรมใน iPhone Simulator ได้อย่างไร ?

  1. เราสามารถทำได้อยู่สองวิธีครับ คือ ไปลบไฟล์ที่อยู่ใน ~/Library/Application Support/iPhone Simulator/User/Applications
  2. เปิด iPhone Simulator แล้วเลือก menu ไปที่ Reset Contents and Setting ( ดูรูปประกอบ )

reset

จะหมุนเครื่องให้เป็นแนวนอนทำอย่างไร ?

เลือกไปที่ menu แล้วก็เลือก Hardware >> Rotate Left หรือ Hardware >> Rotate Right

rotate

เปลี่ยน Firmware version ?

ก็ไม่ยากครับ ไปที่ menu เหมือนเดิม แล้วเลือก Hardware >> Version

จะลอง Multi-touch ใน Simulator ทำได้ไหม ?

ทำได้ครับ วิธีการก็คือ กด Option ค้างไว้แล้วก็ลาก mouse
ถ้าหากต้องการ slide นิ้วก็ทำได้ด้วยการกด Option + Shift ลองกดดูครับจะเห็นว่า มันจะมีจุดขึ้นเหมือนรูป

multitouch

จะเพิ่มรูปเข้าไปใน Simulator ทำอย่างไร ?

วิธีการก็คือเอาไฟล์ที่ต้องการไปไว้ที่ ~/Application Support/iPhone Simulator/User/Media/DCIM/100APPLE/ ถ้าเกิดไม่มี folder ที่ชื่อ DCIM และ 100APPLE ก็สร้างขึ้นมาครับ หลังจากนั้นก็ เอารูปที่ต้องการไปไว้ โดยแก้ไขชื่อให้เป็น IMG_XXXX.JPG ( XXXX คือเลขสี่ตัว) ยกตัวอย่างเช่น IMG_0001.JPG และก็ถ้าหากต้องให้มี thumbnail ( รูปเล็กขนาดย่อ) ด้วย ก็ให้ สร้างไฟล์ขนาด 75×75 pixel และก็เปลี่ยนชื่อ เป็น IMG_XXXX.THM เพียงเท่านี้ก็เสร็จเรียบร้อย

finder

จากตัวอย่างผมวางรูปลงไป ทั้ง .JPG และ THM แล้วเมื่อเปิดดู iPhone Simulator ก็จะเห็นแบบนี้ครับ

simulator

และก็ยังมีอีกวิธีครับ

นั่นก็คือ ลาก  File ที่ต้องการมายัง Safari แล้วหลังจากนั้นกด Click ไปที่รูปค้างไว้สักครู่ ก็จะเห็นหน้าต่างขึ้นมาแบบนี้ครับ

save_from_safari1

แล้วก็กด Save ก็เป็นอันเสร็จ ก็จะเห็นว่าแบบดังนี้

simulator

ก็สามารถทำได้ทั้ง PNG , PDF ก็ได้นะครับ ไม่จำเป็นว่าต้องเป็น JPG เสมอไป

iPhone Simulator มีข้อจำกัดอะไรบ้าง

  • ไม่สามารถใช้กล้องได้
  • ไม่สามารถใช้ Accelerometer ได้
  • ไม่สามารถหมุนเครื่องกลับหัว ได้
  • OpenGL อาจจะทำงานผิดๆ เขียนเกมส์ อาจจะทำงานได้เร็วใน Simulator แต่เครื่องจริงๆอาจจะไม่ใช่
  • CoreLocation ไม่สามารถใช้ได้

ถ้าใครมีข้อแนะนำหรือว่า Trick – Tip ต่างๆเกี่ยวกับ iPhone Simulator ก็เม้นกันมาได้ครับ

iPhone Programming III : More GUI

หลังจากที่ได้ลองเล่นกับ action และ event ต่างๆพอสมควร วันนี้เดี๋ยวมาลองการใช้งาน Control ตัวอื่นกันดูบ้าง สำหรับวันนี้ Control ที่เราจะได้ลองกันได้แก่

  • UIImageView
  • UITextField
  • UISwitch
  • UISlider
  • UIActionSheet
  • UIAlertView

หน้าตาโปรแกรมที่เราจะได้ลองทำก็ออกมาประมาณนี้

interface1

อธิบายกันก่อนว่าโปรแกรมเราทำอะไร

โปรแกรมที่เราจะทำก็คือ เราจะทดลองเล่นกับ UIImageView โดยเราสามารถ กด on/off เพื่อแสดงรูปหรือไม่แสดง และสามารถปรับค่า alpha (ค่าความโปร่งแสง) ของรูปจาก slider อีกทั้งเราจะได้ทดลองใช้ UIActionSheet และ UIAlertView

Let’s Go

ก่อนอื่นเราก็สร้างโปรเจคขึ้นมาครับ ให้ชื่อว่าอะไรก็ตามใจเลยครับ หลังจากนั้น เราก็ลาก Image View , Slider ,Switch , Label เข้ามาดังรูป

first_interface

จาก interface ที่เราได้ออกแบบไว้ จะเห็นว่า ผมได้นำ image view วางไว้ตำแหน่งเดียวกัน กับ Label ( Macfeteria ) เลย คือที่ทำอย่างนี้ก็เพื่อว่าอยากจะให้เห็นว่า เมื่อเราปรับค่า Alpha ของรูปแล้ว มันจะโปร่ง และถ้ารูปยิ่งโปร่งมากก็จะเห็นคำว่า Macfeteria มากขึ้น แล้วเราก็ลอง Compile/Run ดูครับ จะเห็นหน้าตาประมาณนี้

testimage

จะเห็นว่า UIImageView นั้นได้หายไป ก็เพราะว่าเรายังไม่ได้ใส่รูปให้มันนั่นเอง

ต่อไปเราจะเพิ่มรูปเข้าไปยัง โปรเจคของเราเพื่อนำมาใช้กับ image view วิธีการก็ไม่ยาก เราก็ Click ขวาไปที่ Resource แล้วก็เลือก Add > Existing Files … แล้วก็เลือกไฟล์รูปที่ต้องการ เมื่อเสร็จแล้วจะเห็นว่า ไฟล์ที่เราได้เลือกไป ได้เข้ามาอยู่ใน Resource เรียบร้อยแล้ว

addimage

กลับไปยัง Interface builder แล้วก็เลือกที่ UIImageView แล้วก็เปิด Inspector ขึ้นมา จะเห็นว่ามี Attribute ต่างๆให้ปรับ อธิบายทีละอย่างแล้วกัน

uiimageview

  • Image เป็นชื่อ file  ที่เราจะต้องการจะแสดงที่ imageview นี้
  • Mode การจัดการเกี่ยวกับภาพเป็นต้นว่า ปรับให้พอดีกับขนาด imageview , กำหนดให้ภาพอยู่ตรงกลางของ imageview เป็นต้น
  • Alpha ความโปร่งใส ถ้าไม่โปร่งเลยคือ 1.0 ถ้ายิ่งเลขน้อยก็จะยิ่งโปร่งใส
  • Tag เป็นค่าคงที่ของ object นี้ ( เดี๋ยวจะได้ใช้ในครั้งหน้า )
  • Drawing
    • Opaque บอกให้ uiimageview ไม่ต้องวาด object ที่อยู่ข้างหลัง ( ควรจะใช้ เพราะมันเพิ่มประสิทธิภาพ )
    • Hidden ก็แปลตรงเลยครับว่า จะให้มันซ่อน หรือแสดง
    • Clip Subviews จะทำการตัดขอบให้ไม่เกินขนาดของ view
  • Interaction
    • User Interaction Enabled ถ้าเปิด option นี้ก็จะทำให้ object  นี้สามารถตอบสนองต่อ event ต่างๆได้
    • Multiple Touch ก็เปิดให้ใช้งาน multiple touch ได้นั่นเอง

เมื่อเราได้ใส่รูปภาพเข้าไปแล้ว ถ้าลอง complie / run ก็จะเห็นรูปปรากฏยัง uiimageview ของเราเรียบร้อยแล้ว

Implement Controller Class

เมื่อเราได้ออกแบบหน้าตาของโปรแกรมเราเรียบร้อยไปแล้วส่วนหนึ่ง ต่อไปก็คือ การเขียน code นั่นเอง กลับไปที่ xcode และเริ่มเปิด controller class ของเรา หลังจากนั้นก็เขียน code ในส่วนของ interface ตามนี้ครับ

และส่วน implement ก็เป็นแบบนี้ครับ

aa

จาก code ข้างบน function ที่ชื่อ adjustAlpha เราจะไป link เข้ากับ slider เพื่อที่ว่า เมื่อเราเลื่อน slider ค่าของ alpha ก็จะเปลี่ยนไป และเราก็มี imageVisible ที่คอยเปิดปิด imageView ของเรา คิดว่าไม่น่ายากนะครับ

และหลังจากนั้น เราก็จะเชื่อม code ที่เราได้เขียนไปกับ interface ที่เราได้ออกแบบไว้

เราก็ลาก link เชื่อมกับ image view , slider , switch กับ m_imageView , m_slider , m_switch ตามลำดับ

link

หลังจากเสร็จแล้ว เราก็เชื่อม method ที่ชื่อว่า adjustAlpha เข้ากับ slider และ imageVisible เข้ากับ swich ให้เรียบร้อย  เมื่อเสร็จแล้ว click ขวาที่ File’s Owner ดูก็จะเห็นว่า object ต่างๆ ได้เชื่อมเข้าด้วยกันเรียบร้อยแล้ว

อย่าลืมปรับค่า max , min ของ slider ด้วยนะครับ เพราะ alpha ของ image มีแค่ 0 – 1.0 เราก็เปิด inspector ขึ้นมาแล้วก็ปรับ ค่า max ,min ให้เรียบร้อยดังรูป

slider

เมื่อเสร็จแล้วก็ Compile / Run ดูครับ แล้วลองเลื่อน slider ไปมาดูครับว่า ถ้าเราเลื่อนซ้ายรูปเราได้จางจนมองเห็นคำว่า macfeteria และเมื่อเลื่อนไปด้านขวารูปก็จะชัดขึ้นตามไปด้วยหรือเปล่า

programa

Action Sheet

จริงๆแล้ว action sheet ก็คล้ายๆกับ message box นะครับ คือจะเป็น message ขึ้นมาพร้อมกับ ปุ่มให้เราเลือกว่าจะ ok , cancel ประมาณนี้ และเราก็จะได้ลองใช้งานกัน สิ่งต่อไปที่เราจะทำเพิ่มเติมในโปรแกรมของเราก็คือ เราจะมี text field และ button อย่างละอัน โดยเมื่อกดไปที่ปุ่ม ก็จะมีหน้าต่าง action sheet ขึ้นมา ถ้ากด ok ก็จะมี alert ขึ้นมา บอกว่า Hello อะไรประมาณนี้

ก่อนอื่นเราก็ไปเพิ่ม button และ text field ให้กับ interface ของเราดังรูป

interface2

เมื่อเราได้วาง text field ลงไปยัง interface ของเราแล้วต่อไปเราจะมาทำความรู้จัก attribute ต่างๆของ text fields เพิ่มเติมกันอีกสักนิดว่ามีอะไรบ้าง

textfield

  • Text Field
    • PlaceHolder คือข้อความลางๆ ( สีเทาๆ ) เวลาที่ไม่มีอะไรอยู่ใน text field เลย
    • Clear When Editing Begins จะลบข้อความเก่า ทุกครั้งที่แก้ไข text field
    • Adjust To Fit ปรับขนาดตัวหนังสือให้พอดี แต่ไม่ตำ่ว่า ขนาดที่เรากำหนด
  • Text Input Traits
    • Capitalize เลือกว่าจะให้ตัวหนังสือเป็นตัวพิมพ์ใหญ่ หรือพิมพ์เล็ก โดยอาจจะแบ่งเป็นคำๆ หรือประโยค
    • Correction โปรแกรมจะตรวจความถูกต้องให้ด้วยว่า พิมพ์ถูกหรือไม่
    • Type แป้นพิมพ์เป็นแบบไหน ( ตัวหนังสือ , ตัวเลข , url ,เบอร์โทร )
    • Appearance ( Default , Alert ) ถ้าปรับเป็น alert แป้นพิมพ์จะโปร่งใสนิดๆ
    • Return Key ( Go , Done , etc ) ตรงนี้เราปรับ return key ให้ กับ keyboard อย่างตัวอย่างรูปข้างล่าง ผมปรับให้เป็น Yahoo!
      yahoo

ต่อไปก็คือเราจะเพิ่ม outlet เข้าไปยัง controller class ของเรา

และในส่วน implement endEdit ก็มีดังนี้

จาก code ข้างบน [sender resignFirtResponder] เราจะนำไป link เข้ากับ text field ของเราเพื่อที่ว่า เมื่อ user พิมพ์ข้อความเข้าไปยัง text field แล้ว เมื่อกด return ก็ให้เปลี่ยน first responder ไปยัง object อื่น เพราะถ้าหาก เราไม่ resign firstponder แล้วละก้อ แป้น keyboard ก็จะค้างอยู่แบบนั้น

เสร็จแล้วเราก็ link เข้ากับ event ที่ชื่อว่า Did End On Exit

endedit

และส่วน source code ของ saySomeThing ก็ได้ประมาณนี้

จาก code ข้างบนจะอธิบาย คร่าวๆก็คือ เราได้ประกาศ Action Sheet ขึ้นมาและกำหนดค่าต่างๆให้กับ sheet เป็นต้นว่า ข้อความต่างๆ และส่วนที่สำคัญมากคือ delegate:selft

*** ยังจำ delegate ได้ไหมครับ ? ****
สรุปง่ายๆว่า delegate:self เนี่ย เราได้กำหนดให้คลาสที่จะตอบสนองต่อ delegate method ของ action sheet นี้คือ คนที่สร้างตัวมันเอง ( ในกรณีนี้คือ GUIViewController ) และ delegate method ของ action sheet นี้ก็เช่นว่า  เมื่อกด ok ให้ไปทำอะไร เมื่อกด cancel ให้ไปทำอะไร

แล้วเราก็ link ให้เข้ากับ button ของเรา

saysome

เราลอง compile / run แล้วกด Say Something ! ดูครับ

action

กดแล้วก็ยังไม่เห็นว่ามีอะไรเกิดขึ้น ต่อไปเราจะ implement ส่วนของ delegate ของ action sheet กัน

Delegate

action sheet มี delegate method ต่างๆ ดังนี้

ผมเลือกใช้

ก็แล้วกันนะครับ และเราก็จะมา implement delegate ตัวนี้กัน โดย code มีดังนี้

จาก code ข้างบน ก็คือ ถ้าหาก user กดปุ่ม action sheet เป็นปุ่ม destructive ก็ให้ Alert ขึ้นมา บอกว่า “สวัสดีครับคุณ” พร้อมกับข้อความใน text field ที่ user ได้พิมพ์ลงไป
ลอง compile / run ดูครับ

เมื่อกด Say Something ! ก็จะเห็น action sheet ขึ้นมา ถ้าหากกด “เป็นสิครับ” ก็จะเห็น Alert ขึ้นมาบอกว่า “สวัสดีครับคุณ ปานวาด” ทำนองนี้ ดังเช่นรูปข้างล่าง

panvad

เป็นไง บ้างครับ สำหรับวันนี้ ได้ลองใช้งาน UI หลายตัวมากๆ มี คอมเม้น ตำชม แนะนำกันได้ครับ

Download Source

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 ก็ได้ครับ