Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > Mobile > [iOS/iPhone] Tutorials - สอนเขียน iPhone App ฟรี เขียน iPad App เรียน iPhone เขียนโปรแกรม iPhone > Objective-C และ Outlet (IBOutlet) Action(IBAction) แบบง่าย ๆ ผ่าน Xcode (iPhone,iPad)

Objective-C และ Outlet (IBOutlet) Action(IBAction) แบบง่าย ๆ ผ่าน Xcode (iPhone,iPad)

Objective-C และ Outlet (IBOutlet) Action(IBAction) แบบง่าย ๆ ผ่าน Xcode (iPhone,iPad) จากบทความ 2 บทความก่อนหน้านี้เกี่ยวกับพื้นฐานการเขียน Coding บนภาษา Objective-C ซึ่งเราใช้การเชื่อม IBOutlet และ IBAction กับ Interface Builder (IB) ในหน้าจอ Design ผ่านการเขียน Code ลงใน ViewController.h,ViewController.m ผ่านการเขียน Code เพื่อประกาศ Object รวมทั้งการประกาศ Method เพื่อให้โปรแกรมทำงาน ซึ่งวิธีนั้นเราจะต้องใช้การเขียนเอง แต่ผมมีวิธีที่ง่ายกกว่านั้น ที่เราจะไม่ต้องมานั่งเขียน Code ประกาศ Object แล้วทำการลาก Object เพื่อเชื่อมกับ Interface จะช่วยให้การเขียนโปรแกรม iOS บน Xcode นั้นมีความสะดวกและง่ายขึ้นอย่างมาก

Objective-C IBOutlet and IBAction (Event and Action) iPhone iPad

รู้จัก IBOutlet และ IBAction กับ Interface Builder (iOS , iPhone , iPad)

https://www.thaicreate.com/mobile/objective-c-iboutlet-ibaction-ios-iphone-ipad.html

การสร้าง IBOutlet และ IBAction เพื่อเชื่อมต่อกับ Object และ Event ของ Object นั้น สามารถทำผ่านโปรแกรม Xcode โดยในกรณีที่เป็น IBAction โปรแกรม Xcode จะสร้าง Event ไปยังไฟล์ที่เป็น ViewController.m ด้วยในทันที

ถ้ายังไม่มีพื้นฐานการเขียน Objective-C กับ IBOutlet แนะนำให้อ่าน 2 บทความนี้ก่อน

Go to : โครงสร้างของ Xcode IDE และ ไฟล์ที่ได้จากการ Create Project บน Xcode (iOS, iPhone, iPad)
Go to : การเขียน Coding ด้วยภาษา Objective-C กับการแสดงผลง่าย ๆ บน iOS (iPhone,iPad)
Go to : Objective-C กับการสร้าง Event และ Action (IBAction) โต้ตอบ บน iOS (iPhone,iPad)

เริ่มต้นด้วยการสร้าง Project บน Xcode ในตอนนี้ยังเห็นว่ายังเป็นหน้าจอว่างเปล่า

Objective-C Outlet Action iPhone iPad

หน้าจอว่างเปล่าของ Interface Builder (IB)

Objective-C Outlet Action iPhone iPad

ลาก Object ต่าง ๆ มาไว้ที่ Interface Builder ประกอบด้วย Label , Text Field , Round Rect Button จัดรูปแบบตำแหน่งตามต้องการ

วิธีการสร้าง IBOutlet และ IBAction เปิดหน้าจอ Xcode ให้อยู่ในรูปแบบ Layout ดังรูป ด้วยการคลิกที่ Editor ดูภาพประกอบ

Objective-C Outlet Action iPhone iPad

ให้อยู่ในมุมมองของ ViewController.xib และ ViewController.h ซึ่งตอนนี้เราจะทำการสร้าง IBOutlet และ IBAction ให้กับไฟล์ ViewController.h

จะสังเกตุว่าตอนนี้ในไฟล์ ViewController.h ยังไม่มีอะไร นอกจากที่เป็นค่า Default ที่โปรแกรมให้มา

Objective-C Outlet Action iPhone iPad

จัดการใส่ปีกกา เปิด และ ปิด {....} ดูภาพประกอบ

Objective-C Outlet Action iPhone iPad

ขั้นแรกจะสร้าง IBOutlet สำหรับ Text Field ให้กดคลิกที่ Text Field ที่อยู่ในหน้าจอ Design จากนั้นให้คลิกปุ่ม Control ค้างไว้ แล้วลาก Text Field ไปไว้ใน ViewController.h ในตำแหน่งที่อยู่ในปีกกาดังรูป

Objective-C Outlet Action iPhone iPad

ตั้งชื่อ IBOutlet ของ Text Field เป็น txtName

Objective-C Outlet Action iPhone iPad

ได้ IBOutlet ชนิด UITextField ชื่อว่า txtName ที่เชื่อมกับ Text Field ในหน้าจอ Interface Builder เรียบร้อย ง่าย ๆ

Objective-C Outlet Action iPhone iPad

ต่อไปจะเป็น Label ทำเหมือนกัน

Objective-C Outlet Action iPhone iPad

กำหนดชื่อเป็น lblResponse

Objective-C Outlet Action iPhone iPad

ได้ IBOutlet ชนิด UILabel ชื่อว่า lblResponse

Objective-C Outlet Action iPhone iPad

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

Objective-C Outlet Action iPhone iPad

เลือก Connection เป็นแบบ Action

Objective-C Outlet Action iPhone iPad

กำหนด Connection เป็นแบบ Action พร้อมกับกำหนดชื่อว่า Hello

Objective-C Outlet Action iPhone iPad

เราจะได้ Method ที่เป็น Event ชื่อว่า Hello เรียบร้อย พร้อม ๆ กับการเชื่อมการทำงานกับ Button ที่อยู่ในหน้าจอ Interface Builder (IB)

Objective-C Outlet Action iPhone iPad

เลื่อนเมาส์ไปข้างบนเพื่อจะเปลี่ยนมุมมองไปยังไฟล์ ViewController.m

Objective-C Outlet Action iPhone iPad

คลิกเลือก ViewController.m เพื่อจะไปเขียน Event ในไฟล์นี้

Objective-C Outlet Action iPhone iPad

จะเห็นว่าที่ไฟล์ ViewController.m มีการสร้าง IBAction ของ Button ที่ชื่อว่า Hello ให้เรียบร้อยแล้ว โดยที่เราไม่ต้องมานั่งพิมพ์เอง

Objective-C Outlet Action iPhone iPad

เพิ่มคำสั่งสำหรับแสดงผลง่าย ๆ ในคำสั่งนี้

- (IBAction)Hello:(id)sender {
    
    NSString *hello = @"สวัสดีครับคุณ ";
    NSString *name = txtName.text;
    NSString *message;
    message = [hello stringByAppendingString:name];
    
    lblResponse.text = message;
    
}

ทดสอบการทำงาน

Objective-C Outlet Action iPhone iPad

แสดงผลลัพธ์บน iOS Simulator ของ iPhone

Objective-C Outlet Action iPhone iPad

ทดสอบการทำงาน จะได้ผลลัพธ์เหมือนกับตัวอย่างก่อนหน้านี้ทุกประการ

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

ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท

ลองใช้ค้นหาข้อมูล


	By :	ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
	Score Rating :
	Create/Update Date :	2012-10-14 18:20:30 / 2017-03-25 23:04:31
	Download :

Sponsored Links / Related

โครงสร้างของ Xcode IDE และ ไฟล์ที่ได้จากการ Create Project บน Xcode (iOS, iPhone, iPad)
Rating :

การใช้งาน iOS Simulator เบื้องต้น ก่อนการเขียนโปรแกรม iOS สำหรับ iPhone และ iPad
Rating :

เพิ่ม Keyboard (Thai Keyboard) ภาษาไทยบน iOS Simulator สำหรับ iPhone และ iPad
Rating :

Objective-C กับการสร้าง Event และ Action (IBAction) โต้ตอบ บน iOS (iPhone,iPad)
Rating :

รู้จัก IBOutlet และ IBAction กับ Interface Builder (iOS , iPhone , iPad)
Rating :

iOS/iPhone Label(UILabel) , Text Field(UITextField) , Round Rect Button(UIButton) Example (iPhone,iPad)
Rating :

รู้จัก NSLog กับ Objective-C บน iOS (for iPhone and iPad Dev)
Rating :

iOS/iPhone viewDidLoad , didReceiveMemoryWarning , dealloc (Objective-C , iPhone)
Rating :

ฟรี!! อบรม iPhone, เขียน iPhone, เรียน iPhone, สอน iPhone App แหล่งความรู้แบบฟรี ๆ
Rating :

สุดยอดการใช้ Object Library เครื่องมือ สร้างออกแบหน้าจอ Interface Builder ในรูปแบบต่าง ๆ ของ iOS ทั้งหมด
Rating :

iOS/iPhone Text View (UITextView) Display Multiline Text Region (Objective-C, iPhone, iPad)
Rating :

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว