Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > บทความจากสมาชิก > Beginner Guide iOS5 Development : การสร้างแอพพลิเคชันด้วย Master Detail Application ง่ายสุดๆ



 
Clound SSD Virtual Server

Beginner Guide iOS5 Development : การสร้างแอพพลิเคชันด้วย Master Detail Application ง่ายสุดๆ

Beginner Guide iOS5 Development : การสร้างแอพพลิเคชันด้วย Master Detail Application ง่ายสุดๆ หลังจากที่ได้ศึกษาการพัฒนาแอพพลิเคชันด้วย Single View Application มาหลายบทจนถึงการพัฒนาแอพพลิเคชันที่ดึงข้อมูลไปแสดงผลบน UITableView มาแล้ว รอบนี้จะพาไปรู้จักวิธีลัดวิธีหนึ่งสำหรับการพัฒนาแอพพลิเคชันอย่างง่ายที่ไม่มีข้อมูลซับซ้อนอะไร ตัวอย่างเช่นพวก SMEs หรือ แอพพลิเคชันที่เป็นของบริษัท หรือองค์กรเอาไว้อ่านข้อมูลอย่างเดียวไม่ได้มีการดึงข้อมูลมาจากฐานข้อมูล หรือเก็บตัวแปลซับซ้อนมากมาย เป็นการพัฒนาแอพพลิเคชันที่เหมือนกับการวาง Static Website ธรรมดาที่สามารถทำได้เสร็จสรรพภายใน 5 นาที (สำหรับคนที่มีเนื้อหาครบถ้วน และมีไม่มากนะครับ)

พัฒนาแอพพลิเคชันด้วย Master-Detail Application
เริ่มต้นเปิด Xcode IDE ขึ้นมาแล้วทำการ New Project แล้วเลือกรูปแบบของแอพพลิเคชันเป็น Master-Detail Application

 เลือก Master Detail Application

ทำการ New Project ขึ้นมาแต่เลือก Master-Detail Application นะครับ

สังเกตว่าหน้า Xcode ของเราจะสร้างเท็มเพลตของแอพพลิเคชันขึ้นมาให้อัตโนมัติ ทั้ง Story Board และ ไฟล์ Master-Detail และ เนื้อหาในตัวอย่างแรกของเราเราจะยังไม่ใช้ Core Data ให้ทำการเอาเครื่องหมายในช่องเลือกของ Core Data ออกครับ

เลือกตามนี้

เอาเครื่องหมาย ถูก ที่ช่อง Use Core Data ออกไปก่อน

สิ่งที่ Master-Detail Application สร้างขึ้นมานั้นจะประกอบไปด้วยไฟล์ MasterViewController ทั้งนามสกุล .h และ .m ซึ่งจะทำการควบคุมหน้าในส่วนของ UITableView ที่สร้างขึ้นมาให้โดยอัตโนมัติ และมีไฟล์ DetailViewController ทั้งนามสกุล .h และ .m ปรากฏขึ้นให้เช่นกันเป็นไฟล์ตัวอย่าง ซึ่งมันก็คือสิ่งที่เราเรียนรู้มาจากบทเรียน UITableView ตั้งแต่แรกนั่นแหละครับ เพียงแค่เราไม่ต้องไปเสียเวลาพัฒนามันใหม่ แต่ถ้าได้เรียนรู้หลักการสร้าง และการทำงานของมันเชิงลึกล่ะก็มันก็คุ้มครับ

File ที่เรามี

ไฟล์ที่ Master-Detail Application สร้างมาให้

หน้า MainStoryBoard

หน้า MainStoryBoard ที่ Master-Detail Application สร้างให้พร้อมเชื่อม Segue ให้เรียบร้อย

ถ้าลอง "Run” ตัวแอพพลิเคชันดูจะพบว่ามันทำงานได้สมบูรณ์ เลยล่ะครับ แต่ขาดแค่ Content ของแอพพลิเคชันเท่านั้นเอง และย้อนกลับไปอย่างที่ผมได้บอกไว้ว่า การใช้งาน Master-Detail Application แบบง่ายๆ เบื้องต้นนั้น เหมาะกับคนที่ไม่ถนัดการเขียนโปรแกรมที่ซับซ้อน ถนัดการโยง และเชื่อมเนื้อหา เหมือนทำเว็บไซต์ Static Website เท่านั้น ดังนั้น รอบนี้เลยจะเป็นการอัดเนื้อหาเข้าไปที่เว็บไซต์แทนครับ

ไปที่ MainStoryBoard ครับ แล้วไปคลิกที่หน้า Master หรือหน้าตรงกลางของแอพพลิเคชันของเรา เลือกไปที่ Cell หรือ UITableViewCell สัก Cell หนึ่ง แล้วกดปุ่ม “option” ที่แป้นคีย์บอร์ดของเรา ค้างไว้แล้วลากเจ้า Cell ดังกล่าวลงมาข้างล่างมันจะทำการ Clone Cell หรือ UITableViewCell ของเราให้ทันทีครับ ตัวอย่างผมทำการ Clone Cell ของผม 4 แถวครับ

ทำการ Clone แถว

กด “option” แล้วลาก Cell ลงมาในตัวอย่างผม Clone มันมา 4 แถวครับ

ถ้าลองทำการ "Run” จะพบว่า Cell ที่จะทำงานเปลี่ยนหน้าได้นั้นคือ Cell แรกที่เราทำการ Clone เพียง Cell เดียวเท่านั้น ดังนั้นต้องการทำการ เชื่อมตัว Cell ของเราไปยัง หน้า DetailView ทุก Cell เพื่อสร้าง Segue ขึ้นครับจึงจะทำงานได้

สร้าง Segue ทุก แถวไปหน้า Detail

เชื่อม Segue แบบ "Push” ทุกๆ Cell

ผลลัพธ์สุดท้ายต้องเป็นแบบนี้

ผลลัพธ์สุดท้ายต้องเป็นแบบนี้

ระหว่างนี้ เราสามารถปรับแต่ง Cell ของเราได้ ที่แถบด้านขวาส่วนของ Attribute Inspector ซึ่งเราจะสามารถตกแต่งหรือปรับขนาดของ Cell ไปจนถึงใส่รูปภาพของ Item บน Cell ได้ (กรณีที่เตรียมรูปภาพไว้แล้ว)

Attribute Inspector

ตกแต่ง Cell ได้ท่ี่ Attribute Inspector

หากว่าพอใจกับการตกแต่ง Cell ของเราแล้ว ก็มาเริ่มต้นเพิ่มคำสั่งเพื่อให้แอพพลิเคชันของเราทำงานได้อย่างสมบูรณ์กันหน่อย ให้ไปที่หน้า DetailViewController บน MainStoryBoard แล้วลาก TextView ไปวางไว้บนหน้า DetailViewController

ลาก TextView ลงไปวางไว้

ลาก TextView ลงไปวางไว้

เปิดไฟล์ DetailViewController.h ขึ้นมาทำการเพิ่มคำสั่ง สำหรับกำหนด Outlet ของตัว TextView และ ตัวแปร Integer สำหรับส่งค่าข้อมูลของตำแหน่ง Cell โดยคำสั่งที่ใส่ลงไปนั้นคือ

DetailViewController.h
#import <UIKit/UIKit.h>

@interface DetailViewController : UIViewController
@property NSInteger bid;
@property (strong, nonatomic) id detailItem;

@property (strong, nonatomic) IBOutlet UILabel *detailDescriptionLabel;
@property (strong, nonatomic) IBOutlet UITextView *textView;

@end


เสร็จแล้วให้ทำการ Synthesize ค่าตัวแปรจาก Header ที่หน้า DetailViewController.m ตามนี้

DetailViewController.m
#import "DetailViewController.h"
@interface DetailViewController ()
- (void)configureView;
@end

@implementation DetailViewController

@synthesize detailItem = _detailItem;
@synthesize detailDescriptionLabel = _detailDescriptionLabel;

@synthesize bid;
@synthesize textView = _textView;

#pragma mark - Managing the detail item  


ในไฟล์ DetailViewController.m นั้นให้ค้นหาฟังก์ชัน configureView

[headDetailViewController.m[/head]
- (void)configureView
{
    // Update the user interface for the detail item.

    if (self.detailItem) {
        self.detailDescriptionLabel.text = [self.detailItem description];
    }
}


ทำการแก้ไข คำสั่งภายในฟังก์ชัน configureView ใหม่โดยกำหนดให้ detailDescriptionLabel นั้นอ่านค่าตัวแปร bid ซึ่งเป็นตำแหน่งของ Cell แต่ละตัวโดย Cell แรกจะต้องมีค่า bid เป็น "0” ไล่ลำดับลงไปถึง Cell ที่ 4 ที่จะมีค่าตัวแปร bid เป็น "3” แก้ไขฟังก์ชัน detailDescriptionLabel ใหม่ให้เป็น

DetailViewController.m
- (void)configureView
{
     self.detailDescriptionLabel.text = [NSString stringWithFormat:@"Detail: %d",bid];
}


ต่อจากนั้นให้กลับไปยังไฟล์ MasterViewController.m ให้เพิ่ม Header File ขึ้นมาหนึ่งตัวคือ DetailViewController.h บนส่วนบนสุดของคำสั่ง

MasterViewController.m
#import "MasterViewController.h"
#import "DetailViewController.h"

@implementation MasterViewController


สร้างคำสั่งสำหรับ ทำงานร่วมกับตัว Segue ของเราเข้าไปที่ใต้ฟังก์ชัน viewDidLoad โดยทำการตั้งชื่อ Segue ค่า "MySegue” สำหรับส่งค่า ตัวแปรระหว่างหน้า MasterViewController ไปยังหน้า DetailViewController

MasterViewController.m
#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if([[segue identifier] isEqualToString:@"MySegue"]){
        
        DetailViewController *vc =[segue destinationViewController];
        NSIndexPath *indexPath =[self.tableView indexPathForSelectedRow];
        NSInteger tagIndex = [indexPath row];
        [vc setBid:tagIndex];
        
    }
}


กลับไปที่หน้า MainStoryBoard แล้วทำการ Identified ตัว Segue ทุกตัวให้มีชื่อว่า "MySegue” เหมือนในคำสั่ง

กำหนด Identifier ของตัว Segue ทุกตัว

กำหนด Identifier ของตัว Segue ทุกตัว

ถ้าลอง "Run” ตัวแอพพลิเคชันของเราอีกครั้งจะพบว่า ค่าตัวแปลที่ DetailView หน้า Detail แสดงนั้นจะเป็นค่าตัวเลขเรียบร้อย

ถ้ากดที่ Cell แถวที่ 2 จะได้ค่า Detail เป็น 1 (ตัวอย่าง)

ถ้ากดที่ Cell แถวที่ 2 จะได้ค่า Detail เป็น 1 (ตัวอย่าง)

ไม่ยากเลยใช่ไหมครับ วิธีการสร้างแอพฯแบบง่ายๆ ส่วนตัว หรือ SMEs ที่เป็นแอพฯ ให้ข้อมูลอย่างเดียวก็จะสร้างเสร็จใน 15 นาทีเลย

ดาวน์โหลด Source Code ได้ที่ http://code.google.com/p/daydev/
หรือไปทักทายกันได้ที่ http://www.facebook.com/daydevthailand


Reference : http://www.daydev.com





   
Share
Bookmark.   

  By : Daydev
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2012-10-05
  Download : No files
Sponsored Links
ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
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
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่