جلسه دهم آموزش iOS : انتقال داده بین View Controllerها

این دومین مقاله ای است که ما در مورد Storyboard ها صحبت می کنیم. در آموزش جلسه قبل ، Storyboard ها را معرفی کردیم و گفتیم که یک ویژگی کاربرپسند در Xcode، جهت طراحی رابط کاربری می باشد. اگر از ابتدا تا انتهای آموزش را دنبال کرده باشید، شما باید توانسته باشید، یک اپ ساده دستور پخت را با استفاده از navigation interface ساخته باشید. اما چیزی که در جلسه قبل به آن نپرداختیم، نحوه انتقال داده بین sceneها (یعنی view controllerها) با استفاده از segue بود.

ابتدا، بیایید نگاه سریعی به آن چه که در جلسه قبل انجام داده ایم، بیاندازیم. پیش از این، ما یاد گرفتیم که از Storyboard ها برای ساخت چند چیز استفاده کنیم:

• جاسازی یک View controller در navigation controller.
• ساخت یک table view و وارد کردن فهرستی از دستور پخت ها در آن.
• سوئیچ کردن از یک view controller به view controller دیگر، با استفاده از Segue.

خروجی نهایی که به دست آوردیم این بود که: وقتی اپ بارگذاری می شود، لیستی از دستور پخت ها را نشان می دهد. با ضربه زدن بر روی هر دستور پخت، کاربر به صفحه بعد هدایت می شود، که در آن صفحه، جزئیات مربوط به دستور پخت نشان داده می شود.

در جلسه قبل، جزئیات مربوط به view صفحه جزئیات دستور پخت را پیاده سازی نکردیم و فقط یک برچسب استاتیک در این صفحه نمایش دادیم. در ادامه، قصد داریم روی این پروژه کار کرده و آن را ویرایش نماییم.

تخصیص View Controller Class

در جلسه قبل، ما به سادگی یک view controller در Storyboard editor ساختیم که جزئیات دستور پخت را نشان می دهد. view controller به طور پیش فرض، در کلاس UIViewController  قرار می گیرد.

مشکل اپی که ما در جلسه قبل ساختیم، چیست؟

برچسب در صفحه view باید مطابق با نام دستور پختی که انتخاب می شود، تغییر یابد. بدیهی است، باید یک متغیری در UIViewController تعریف شود که نام دستور پخت را ذخیره نماید.

واقعیت این است که کلاس UIViewController ، فقط می تواند مدل مدیریت fundamental view را فراهم نماید. این مدل، شبیه به blank view (صفحه خالی) است. هیچ متغیری برای ذخیره کردن نام دستور پخت، وجود ندارد. بنابراین، به جای استفاده مستقیم از UIViewController ، ما آن را توسعه داده و کلاس خودمان (به عنوان زیرکلاس UIViewController) را می سازیم.

در بخش Project Navigator ، روی پوشه “RecipeBook” کلیک راست کرده و گزینه “New File …” را انتخاب می کنیم.

از بخش Cocoa Touch، گزینه “Objective-C Class” را به عنوان تمپلت کلاس، انتخاب می کنیم.

نام کلاس را “RecipeDetailViewController” قرار می دهیم، که به عنوان یک زیر کلاس از “UIViewController” محسوب می شود. باید مطمئن شویم که گزینه “With XIB for user interface” به حالت uncheck باشد. با استفاده کردن از Storyboard ، برای طراحی رابط کاربری، ما دیگر نیازی به ایجاد فایل جداگانه interface builder نداریم. روی کلید “Next” کلیک کرده و فایل را در پوشه پروژه، ذخیره می نماییم.

سپس ، ما باید کلاس RecipeDetailViewController را به view controller اختصاص دهیم. به Storyboards editor برمی گردیم و detail view controller را انتخاب می کنیم. در بخش identity inspector ، کلاس را به “RecipeDetailViewController” تغییر می دهیم.

افزودن متغیرها به Custom Class

تا اینجا، ما فقط کلاس custom view controller خود را از طریق توسعه دادن کلاس UIViewController ایجاد کرده ایم. با این حال، custom class ما با کلاس والد خود، تفاوتی نخواهد داشت، تا زمانی که متغیرها و متدهای خود را به آن اضافه کنیم.

دو موردی که ما باید در آنها تغییرات ایجاد کنیم، عبارتند از:

• تخصیص یک متغیر (recipeName) برای انتقال دادن داده ها - وقتی کاربر یک دستور پخت از Recipe view، انتخاب می کند، باید راهی برای ارسال نام دستور پخت به detail view وجود داشته باشد.
• تخصیص یک متغیر (recipeLabel) برای برچسب متن - در حال حاضر، برچسب استاتیک است. نام برچسب باید با تغییر نام دستور پخت، به روز رسانی شود.

خوب! پس بیایید دو متغیر (recipeLabel و recipeName) را اضافه کنیم. فایل “RecipeDetailViewController.h” را انتخاب کرده و  دو مشخصه زیر را به interface اضافه می نماییم.

@interface RecipeDetailViewController : UIViewController
 
@property (nonatomic, strong) IBOutlet UILabel *recipeLabel;
@property (nonatomic, strong) NSString *recipeName;
 
@end

به فایل “RecipeDetailViewController.m” رفته و synthesis را به متغیرها اضافه می کنیم. اطمینان یابید که کد را زیر قسمت “@implementation RecipeDetailViewController” قرار می دهید:

@implementation RecipeDetailViewController
 
@synthesize recipeLabel;
@synthesize recipeName;

اگر فراموش کرده اید که interface و implementation چه هستند، لطفاً به آموزش جلسه اول، دوره آموزش  iOS مراجعه نمایید.

ایجاد ارتباط بین متغیر و عنصر UI

در ادامه، ما باید متغیر “recipeLabel” را با برچسب لینک دهیم. در صفحه Storyboards editor، کلید command را فشار داده و نگه می داریم، سپس، روی آیکون “Recipe Detail View Controller” کلیک نموده و آن را به داخل شیء Label، درگ می کنیم. کلیدها را رها می کنیم. صفحه pop-up متغیرها را برای انتخاب، نشان می دهد. متغیر “recipeLabel” را انتخاب می کنیم.

اکنون، لینک بین متغیر و عنصر Label UI برقرار شده است. هر تغییری که در متغیر اعمال شود، به صورت بصری، منعکس خواهد شد. اما یک کار، هنوز باقی مانده است. ما می خواهیم برچسبی داشته باشیم که نام دستور پخت را نشان دهد. بنابراین، در تایع viewDidLoad، کد زیر را اضافه می کنیم، که متن برچسب را مطابق با نام دستور پخت، قرار می دهد.

- (void)viewDidLoad
{
    [super viewDidLoad];
 // Set the Label text with the selected recipe
    recipeLabel.text = recipeName;
}

در ادامه، سعی می کنیم اپ خود را کامپایل و اجرا نماییم. ای وای !  detail view ، بعد از انتخاب هر کدام از دستور پخت ها ، خالی است. این چیزی هست که انتظار داشتیم. ما هنوز هیچ کدی را برای انتقال نام دستور پخت ، ننوشته ایم. هنوز متغیر “recipeName”، خالی هست، که این موضوع، سبب خالی بودن متن برچسب می شود.

انتقال داده با استفاده از Segue

در اینجا ، به بخش اصلی این آموزش می رسیم، این که چگونه داده ها را بین view controller ها با استفاده از Segue، انتقال دهیم. Segue نقل و انتقال بین view controller ها را مدیریت می نماید. اشیاء Segue یا همان (segue objects) برای انجام نقل و انتقال از یک view controller به view controller دیگر استفاده می شوند. هنگامی که یک Segue شروع به کار می کند، قبل از این که انتقال داده اتفاق افتد، storyboard runtime متد prepareForSegue:sender: method مربوط به view controller جاری (در مثال ما، view controller جاری، RecipeBookViewController می باشد) را ارسال می کند. با اجرای این متد، می توانیم داده موردنیاز را به view controller ارسال کنیم تا نمایش داده شود.

با این حال، بهترین روش این است که به هر Segue درStoryboard های خود، یک شناسه یکتا، اختصاص دهیم. این شناسه، رشته ای است که اپ ما، از آن برای تمیز دادن یک Segue از Segue دیگر، استفاده می کند. اگر یک اپ بسیار پیچیده تر باشد، احتمالاً بیش از یک Segue در view controllerها وجود خواهد داشت.

برای اختصاص دادن شناسه ، segue را انتخاب کرده و آن را در بخش identity inspector تنظیم می نماییم. نام segue را “showRecipeDetail” قرار می دهیم.

در ادامه، ما متد prepareForSegue:sender:method در “Recipe Book View Controller” را اجرا خواهیم کرد، که source view controller مربوط به segue ، می باشد. فایل “RecipeBookViewController.m” را انتخاب کرده و کد زیر را به آن اضافه می کنیم:

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([segue.identifier isEqualToString:@"showRecipeDetail"]) {
        NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
        RecipeDetailViewController *destViewController = segue.destinationViewController;
        destViewController.recipeName = [recipes objectAtIndex:indexPath.row];
    }
}

متد prepareForSegue زمانی که انتقال شروع می شود، فراخوانی خواهد شد. خط اول، برای تأیید شناسه segue مورد استفاده قرار می گیرد. در این مورد، شناسه “showRecipeDetail” می باشد. خط دوم کد، tableView:indexPathForSelectedRow، برای بازیابی ردیف انتخاب شده در جدول، استفاده می شود. هنگامی که یک ردیف انتخاب شده داشته باشیم، باید آن را به RecipeDetailViewController انتقال دهیم. یک شیء Segue، شامل view controller است که محتویات آن باید در انتهای عملیات segue، نشان داده شود. می توانیم همیشه از “segue.destinationViewController” برای بازیابی کنترلر مقصد، استفاده نماییم. در این مورد، کنترلر مقصد، RecipeDetailViewController می باشد. مابقی کد، به منظور انتقال نام دستور پخت به کنترلر مقصد، استفاده می باشد.

در حال حاضر، نمی توانیم اپ را اجرا کنیم. بعد از این که متد بالا را به داخل فایل RecipeBookViewController.m، کپی و paste نمودیم، چند خطا در برنامه مشاهده خواهیم کرد:

در تصویر بالا، سه خطا دیده می شود. اما، ما آنها را به دو خطا، خلاصه می کنیم.

• خصیصه “tableView” در RecipeDetailViewController پیدا نشده است.
• RecipeDetailViewController چیست؟ Xcode نمی داند که این چه چیزی است!

بیایید ابتدا، در مورد خطای دوم، صحبت کنیم. در RecipeBookViewController، هیچ تصوری از RecipeDetailViewController وجود ندارد. در زبان Objective-C، ما از دستور “#import”، برای وارد کردن (import) فایل header کلاس استفاده می کنیم. با وارد کردن فایل header مربوط به “RecipeDetailViewController”، کنترلر RecipeBookViewController، می تواند به خواص و متدهای detail view controller دسترسی یابد. برای رفع خطا، کد زیر را در شروع فایل، قرار می دهیم.

#import "RecipeDetailViewController.h"

با توجه به نوع خطای اول، باید بدانیم که چگونه آن را رفع نماییم. این اشکال، شبیه به عنصر برچسب UI که پیش تر در مورد آن بحث کردیم، می باشد. باید یک متغیر tableView متناظر وجود داشته باشد، که به عنصر UI متصل شود.

بنابراین، در فایل RecipeBookViewController.h، کد زیر را قبل از “@end”، اضافه می کنیم:

@property (nonatomic, strong) IBOutlet UITableView *tableView;

برای فایل RecipeBookViewController.m، دستور synthesis را اضافه می کنیم، تا به کامپایلر اعلام شود که متدهای دسترسی به متغیر tableView، را تولید نماید.

@implementation RecipeBookViewController {
    NSArray *recipes;
}
 
@synthesize tableView; // Add this line of code

در نهایت، به Storyboards، بازگشته و متغیر را با عنصر UI لینک می دهیم. در داخل “Recipe Book View Controller”، کلید command را نگه داشته و روی آیکون  view controller، کلیک کرده و آن را به داخل صفحه view، درگ می کنیم. کلیدها را رها کرده و “tableView” را انتخاب می کنیم.

اکنون، همه خطاها، باید رفع شده باشند. سعی می کنیم دوباره اپ را کامپایل و اجرا نماییم. این بار، اپ ما باید همان گونه که انتظار داریم، کار کند. یک دستور پخت را انتخاب می کنیم، detail view باید نام آیتم انتخاب شده را نشان دهد.

موضوع جلسه بعد چیست؟

آیا ساخت یک اپ از طریق navigation interface کار آسانی نیست؟

با استفاده از Storyboard، میزان کدنویسی به مقدار قابل توجهی کاهش یافته است. ار همه مهم تر، رابط Storyboard، سطح بالایی از دید اجمالی را نسبت به جریان داخلی اپ، برای برنامه نویس فراهم می نماید. امیدواریم این دوره آموزشی توانسته باشد، ایده خوبی در مورد کار با Storyboardها، به شما دهد و بتوانید از آنها، در ساخت اپ خود استفاده نمایید. اگرچه، اپی که ما ساختیم، ساده می باشد و فقط یک عنصر UI دارد، اما مفاهیم اساسی را به دقت شرح داده و می تواند مبنایی برای ساخت اپ های پیچیده تر، برای شما باشد.

در جلسه بعد، سلول استاتیک جدول را شرح داده و ساخت اپ بهتری را با tab controller ادامه خواهیم داد.