I touchs: Lala's Program Note 實作記錄: 7. 建立:新增與編輯 NoteBook 的介面

since: 2011/09/02
update: 2011/09/02

A. 新增 "新增與編輯" 的介面:
   1. 專案目錄 > New File >
   2. iOS > Cocoa Touch > UIViewController subclass > Next >
   3. Subclass 選擇: UIViewController, 並勾選(預設): With XIB for user interface > Next
   4. Save As: ManageNBViewController.m

----------------------------------------------------------------------------------------------------------------

B. 開啟 ManageNBViewController.h 修改如下:
#import <UIKit/UIKit.h>
#import <CoreData/CoreData.h>

@class NoteBookViewController; // 要當作 parenet Controller

@interface ManageNBViewController : UIViewController {
    IBOutlet UITextField *nameField; // NoteBook 的名稱
    IBOutlet UITextField *subNameField; // NoteBook 的副名稱
    NoteBookViewController *parenetController; // A poniter to parent controller
    NSManagedObject *noteBook; // represents the current note
}

@property (nonatomic, retain) IBOutlet UITextField *nameField;
@property (nonatomic, retain) IBOutlet UITextField *subNameField;
@property (nonatomic, retain) NoteBookViewController *parenetController;
@property (nonatomic, retain) NSManagedObject *noteBook;

- (id)initWithParentController:(NoteBookViewController *)aParentController noteBook:(NSManagedObject *)aNoteBook;

- (IBAction)save:(id)sender;
- (IBAction)cancel:(id)sender;

----------------------------------------------------------------------------------------------------------------

C. 開啟 ManageNBViewController.m 修改如下:
#import "ManageNBViewController.h"
#import "NoteBookViewController.h"

@synthesize nameField, subNameField, parenetController, noteBook;

- (id)initWithParentController:(NoteBookViewController *)aParentController noteBook:(NSManagedObject *)aNoteBook
{
    if ((self = [super init])) {
        self.parenetController = aParentController;
        self.noteBook = aNoteBook;
    }
    return self;
}

- (IBAction)save:(id)sender {
    if (parenetController != nil) {
        /* editing */
        if (noteBook != nil) {
            [noteBook setValue:nameField.text forKey:@"name"];
            [noteBook setValue:subNameField.text forKey:@"subName"];
            //now date
            [noteBook setValue:[NSDate date] forKey:@"dateUpdate"];

            // Save the context
            [parenetController saveContext];
        }
        /* creating a new noteBook */
        else {
            [parenetController insertNoteBookWithName:nameField.text subName:subNameField.text];
        }
    }
    [self dismissModalViewControllerAnimated:YES];
}

- (IBAction)cancel:(id)sender {
    [self dismissModalViewControllerAnimated:YES];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    if (noteBook != nil) {
        nameField.text = [noteBook valueForKey:@"name"];
        subNameField.text = [noteBook valueForKey:@"subName"];
    }
    else {
    }
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.nameField = nil;
    self.subNameField = nil;
}

- (void)dealloc {
    [parenetController release];
    [noteBook release];
    [super dealloc];
}

----------------------------------------------------------------------------------------------------------------

D. 建立實際的 UI:

   開啟 ManageNBViewController.xib 檔案, 修改如下:
   1. 拖拉一個 Navigation Bar 到 view 上, 對齊 view 最上方的中間,
       將 title 改為: NoteBook.

   2. 拖拉二個 Bar Button Item 到 Navigation Bar 上, 一個放在左邊, 一個放在右邊.
       (1). 分別更改它們的 label, 左邊為: Canel, 右邊為: Save
       (2). 並分別與 File's Owner 上的 cancel: 與 save: 作連結.

   3. 拖拉一個 Label 到 view 的左上方, Navigation Bar 的下面, 將其 text 改為: Name:

   4. 拖拉一個 TextField 到 Name: Label 的右方, 並與 File's Owner
      上的 nameField 作連結.

   5. 拖拉一個 Label 到 Name: Label 的下方, 將其 text 改為: SubName:

   6. 拖拉一個 TextField 到 SubName: Label 的右方, 並與 File's Owner
      上的 subNameField 作連結.

----------------------------------------------------------------------------------------------------------------

E. 開啟 NoteBookViewController.h 檔案, 新增二個 method 如下:
- (void)showManageNBView;
- (void)insertNoteBookWithName:(NSString *)name subName:(NSString *)subName;

----------------------------------------------------------------------------------------------------------------

F. 開啟 NoteBookViewController.m 檔案, 新增二個 method 如下:
#import "NoteBookViewController.h"
#import "ManageNBViewController.h"

- (void)showManageNBView {
    ManageNBViewController *manageNBViewController = [[ManageNBViewController alloc]initWithParentController:self noteBook:nil]; // so a new noteBook will be created

    [self presentModalViewController:manageNBViewController animated:YES];
    [manageNBViewController release];
}

- (void)insertNoteBookWithName:(NSString *)name subName:(NSString *)subName {
    NSManagedObjectContext *context = [fetchedResultsController managedObjectContext];

    NSEntityDescription *entity = [[fetchedResultsController fetchRequest] entity];

    NSManagedObject *newNoteBook = [NSEntityDescription insertNewObjectForEntityForName:[entity name] inManagedObjectContext:context];

    [newNoteBook setValue:name forKey:@"name"];
    [newNoteBook setValue:subName forKey:@"subName"];
    //Date
    [newNoteBook setValue:[NSDate date] forKey:@"dateCreated"];
    [newNoteBook setValue:[NSDate date] forKey:@"dateUpdate"];

    // Save the context
    [self saveContext];
}

----------------------------------------------------------------------------------------------------------------

G. 幫 NoteBook 介面增加 "新增" 與 "編輯" 的按鈕.
    開啟 NoteBookViewController.m 檔案, 修改如下:
- (void)viewDidLoad
{
    [super viewDidLoad];

    // 實際上是進入刪除的功能
    self.navigationItem.leftBarButtonItem = self.editButtonItem;

    UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(showManageNBView)];

    self.navigationItem.rightBarButtonItem = addButton;
    [addButton release];
}

----------------------------------------------------------------------------------------------------------------

H. 增加: 編輯 NoteBook 功能:
   開啟 NoteBookViewController.m 檔案, 修改如下:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSManagedObject *noteBook = [[self fetchedResultsController] objectAtIndexPath:indexPath];

    ManageNBViewController *manageNBViewController = [[ManageNBViewController alloc] initWithParentController:self noteBook:noteBook];

    [self presentModalViewController:manageNBViewController animated:YES];
    [manageNBViewController release];
}

----------------------------------------------------------------------------------------------------------------

I. UITextField 輸入結束後, 收起小鍵盤.

1. 開啟 ManageNBViewController.h 檔案, 新增 method 如下:
     - (IBAction)didEndEdit:(id)sender;

2. 開啟 ManageNBViewController.m 檔案, 新增 method 如下:
     - (IBAction)didEndEdit:(id)sender {
        // 放棄成為第一回應者（鍵盤消失）
        [sender resignFirstResponder];
    }

3. 開啟 ManageNBViewController.xib 檔案:
     將 File's Owner 裡的 didEndEdit: mehod 分別與 UI 的二個 Text Field 做連結.

----------------------------------------------------------------------------------------------------------------

J. 點擊 UITextField 輸入的背景收起小鍵盤.

1. 開啟 ManageNBViewController.h 檔案, 新增 method 如下:
     - (IBAction)hitBackground:(id)sender;

2. 開啟 ManageNBViewController.m 檔案, 新增 method 如下:
- (IBAction)hitBackground:(id)sender {
    //放棄成為第一回應者（鍵盤消失）
    [nameField resignFirstResponder];
    [subNameField resignFirstResponder];
}

3. 開啟 ManageNBViewController.xib 檔案:
     (1). 將 UIView 的 Class 設定成 UIControl,
            只有 UIControl Class 的控制項才可以觸發動作.
     (2). 將 File's Owner 裡的 hitBackground: mehod
            與剛剛的 UIControl 裡的 Touch Up Inside 作連結.

----------------------------------------------------------------------------------------------------------------

K. 結果圖:
   1. 瀏覽首頁: