如何在OS X 10.7上開發一個簡單的應用教程（二）
原創譯文，歡迎轉載,分享 .請註明出處：http://blog.csdn.net/yuan_will/article/details/46912665
本教程由iOS
Tutorial Team成員釋出，他是一位Mac和iOS開發者，的創始人。
本教程是"如何建立一個簡單的Mac應用程式"系列中的第二部分。
在本系列的第一部分
(http://www.raywenderlich.com/17811/how-to-make-a-simple-mac-app-on-os-x-10-7-tutorial-part-13)
中，您建立了一個Mac的應用程式，它能顯示出"可怕的蟲子"列表。
在第二篇文章中，您將學習如何新增詳細資訊部分,顯示有關蟲子的完整資訊：它的名字，恐怖評級，以及較大的蟲子(更可怕！）的畫面。
（
你還將學會如何改變蟲子的資訊,包括恐怖的級別,甚至是改變它們的圖片!
那我們現在開始吧!
先來下載一些需要的東西:
為了完成本教程，你會需要一些圖片和一些程式碼檔案。所以下載這些額外的專案資源並解壓。(http://cdn3.raywenderlich.com/downloads/MacApp2ExtraStuff.zip)
//-----------------------------------------------------------------------------------------------------------------------
注:為了完成從"不可怕"到"非常嚇人"的評級,你將會使用一個叫做"EDStarRating"的開原始碼,它已經包含在剛才下載的包中.
在本教程中,我們不會解釋他是如何工作的,但是我們將教會如何在您的專案中使用自定義檢視. 在這個包裡面還包含了NSImage類目,你可以用它利用大圖生成縮圖,用來做評級.
有關EDStarRating的更多資訊，你可以檢查去這裡找(https://github.com/erndev/EDStarRating)。
//-------------------------------------------------------------------------------------
現在,新增這些檔案在你的專案中(和之前在第一部分的一樣,我們要新建資料夾來裝這些檔案)
-
在Xcode裡面新建"View"資料夾,將 EDStarRating.h/EDStarRating.m 拖到裡面,確保“Copy items into destination group’s folder
(if needed)”這個選項是選中的,還有“Add to Targets”這裡面的“ScaryBugsMac”選項是選中的.這兩部非常重要.
- 重複剛才的動作,將NSImage+Extras.h/NSImage+Extras.m 拖拽到新的組名為“Helpers”的資料夾裡面,這是一些待會兒可以幫助我們調整影象的程式碼,再次,確保我們勾選了(Copy Items check,還有 Add To Targets check).這兩個選項.
- 還是重複剛才的動作,將那三張圖片新增到“Art”資料夾中,這些圖片我們將用來評級,~_~ (同樣,不要忘了檢查那兩個選項,重要的事情說三遍...)
This
is how your Project should look like after adding those files:
當新增完所有的檔案後,你的介面應該是這個樣子的:
建立細節部分:
恩,現在是時候往 "恐怖蟲子詳細資訊介面" 裡面新增一些控制元件了.
在iOS裡,一個典型 主/從 型的應用程式,做法是建立兩個view,然後當列表中的某一行被點選,介面改變到不同的view.去顯示需要的資訊.
而在OSX開發中，該模式是不同的。沒有iPhone螢幕大小的限制，因此可以在同一視圖裡面新增詳細資訊。你只需要調整它的大小就好了。這種方法類似於iPad的主/從應用程式的模式。
OK,動起來吧,, 開啟MasterViewController.xib.選擇介面,然後增加他的長款,你並不需要擔心它的大小,拉大到可以適應新的控制元件就好,
就像這樣:
下一步就是新增需要的控制元件,我們要顯示的資訊有:蟲子的名字,恐怖等級,還有圖片.
顯示蟲子名稱,需要用到 NSTextField,它可以顯示還可以編輯,,評級的話,你需要用到EDStarRating.顯示圖片呢,NSImageView就可以了.
然後呢,你需要新增兩個有名字的label,讓使用者知道這幾個控制元件是幹嘛的就可以了,
要做到這些,只需要保持列表和之前一樣,然後在螢幕右下角的控制面板中找到相應的控制元件拖到檢視中即可.
拖一個Text Field (寫名字) 兩個Lables(標題) 一個圖片控制器 (名叫:"Image well") 都在控制面板中.
這個EDStarRating師哥自定義控制器,所以它不在控制元件板中,.要使用它的花,你需要在控制面板中找到一個叫"Custom View"的東西, 拖到主介面中,然後你就可以配置它以便顯示評級.
現在,咱們來排列這些控制元件,將他們放置在右邊空白的地方,垂直,從上到下,就像這樣:
第一個label 用來顯示名字的標題, 下面方式Text Field 再下面,放第二個label(評級控制元件的標題) 這個label下面,放的是自定義view (這個將成為我們的評級控制元件) 最後呢,在自定義介面下面放上imageView;儘量讓它們左對齊,完成以後,你的介面看起來應該是這個樣子:
最後一步是,我們將這些控制元件設定成auto-resize 以便適應父檢視,這樣做,我們就可以看到,這些控制元件會跟著主介面調整大小.
要做到這一點，選擇主檢視（通過點選它或在“自定義檢視”中的物件面板的左邊）。現在，在左邊的公用事業板上，選擇“Size Inspector”標籤。
這是第五個標籤，一個帶有標尺圖示。目前，設定autosizing屬性如下：
讓我們來配置 EDStarRating 控制元件。在前一步，你增加了自定義檢視。這是一個基本的NSView。現在，你需要告訴Interface Builder，你想要的檢視類是EDStarRating而不是NSView。
該怎麼做呢？相當容易。點選自定義檢視來選擇它。在公用程式面板中，通過單擊“第三”選項卡，切換到標識。
在該選項卡，更改類名以EDStarRating。
注意，您還可以通過雙擊它來更改標籤的文字，並直接更改標籤上的文字。
重複這一步,將第二個標籤其標題改變為“Rating”
好吧，現在是執行應用程式的時候了。如果一切順利，應用程式應該可以執行，你應該看到類似的視窗：
//----------------------------------------------------------------------------------------------------------------------------------------------------------------
提示: 如果 有一部分控制元件沒有顯示全,你可以開啟 MainMenu.xib 然後調整視窗的尺寸
//----------------------------------------------------------------------------------------------------------------------------------------------------------------
.
你現在可以看到所有的控制元件，但是等級控制器不見了。不要擔心。它一直在那裡,但因為還沒有配置,所以它沒有顯示任何東西.目前所有的控制元件,可以顯示我們需要的詳細資訊。現在，您需要新增檢視控制器的出口(outlets)，這樣稍後就可以編寫程式碼控制它們了。
來做到這一點，開啟MasterViewController.xib，來到助理編輯（第二個按鈕在頂部的工具欄中的“Editor”部分），並確保它的設定Automatic\MasterViewController.m.
請選擇“table View”（請記住，您可能需要單擊兩次或只是選擇左側的控制面板中的tableView選項）。當你確定選中了table View而不是scrollview選項後，將tableview拖線到MasterViewController.m 中的 @interface MasterViewController ()下面.
這時會出現一個彈出一個NSTableView的屬性的框 填寫名字為bugstableview，確保儲存設定為weak 並單擊“Connect”。
現在，你需要重複這些步驟為 圖片,自定義檢視,還有NSTextField 拖線（但不為標籤拖線。我們不會改變任何label裡的東西)。
你僅需要做相同的事情,選擇text field 然後拖線到MasterViewController.m 改名為bugTitleView
重複,相同的事情,將image View拖線,改名為bugImageView..還有最後一個,那個評級檢視,新增名字為:bugRating
After
creating those properties, your MasterViewController.m file
should look like this:
新增完這些屬性之後,你的MasterViewController.m 裡面應該是這樣的:
@interface MasterViewController ()
@property (weak) IBOutlet NSTableView *bugsTableView;
@property (weak) IBOutlet NSTextField *bugTitleView;
@property (weak) IBOutlet NSImageView *bugImageView;
@property (weak) IBOutlet EDStarRating *bugRating;
@end這時你應該會看到一個警告"it can’t find the definition of EDStarRating " 因為你還沒有import標頭檔案,將這句放到最上面
#import "EDStarRating.h"展示細節:
現在是時候在這些新新增的控制元件中顯示一些資訊了。當用戶單擊我們的表格檢視的任何一行時，您需要獲得所選的蟲子資訊，並將這些資訊顯示在詳細資訊組中,也就是右邊的這些控制元件中。
這包括三個步驟。首先，你需要知道哪一行是被選中的。table view是通過其代理方法‘tableViewSelectionDidChange’這個知道的。因此，您需要在我們的檢視控制器中實現該方法以接收該通知。
之後，你需要從我們的蟲子陣列中取出選中的那組資料。第三步是在細節部分顯示該蟲子的資訊。
到時候要新增程式碼了,選擇MasterViewController.m 然後新增下面的程式碼,在numberOfRowsInTableView 這個方法下面:
-(ScaryBugDoc*)selectedBugDoc
{
NSInteger selectedRow = [self.bugsTableView selectedRow];
if( selectedRow >=0 && self.bugs.count > selectedRow )
{
ScaryBugDoc *selectedBug = [self.bugs objectAtIndex:selectedRow];
return selectedBug;
}
return nil;
}
-(void)setDetailInfo:(ScaryBugDoc*)doc
{
NSString *title = @"";
NSImage *image = nil;
float rating=0.0;
if( doc != nil )
{
title = doc.data.title;
image = doc.fullImage;
rating = doc.data.rating;
}
[self.bugTitleView setStringValue:title];
[self.bugImageView setImage:image];
[self.bugRating setRating:rating];
}
- (void)tableViewSelectionDidChange:(NSNotification *)aNotification
{
ScaryBugDoc *selectedDoc = [self selectedBugDoc];
// Update info
[self setDetailInfo:selectedDoc];
}讓我們更詳細地看一下這個方法吧：
- (void)tableViewSelectionDidChange:(NSNotification *)aNotification
{
ScaryBugDoc *selectedDoc = [self selectedBugDoc];
// Update info
[self setDetailInfo:selectedDoc];
}
為了顯示詳細檢視，您需要執行2個動作：首先，獲取選定的蟲子的資訊。然後，你需要在細節部分顯示這些資訊。為了看起來更有條理，這裡分成了兩個方法：
讓我們看看
selectedBugDoc中的程式碼吧:
-(ScaryBugDoc*)selectedBugDoc
{
NSInteger selectedRow = [self.bugsTableView selectedRow];
if( selectedRow >=0 && self.bugs.count > selectedRow )
{
ScaryBugDoc *selectedBug = [self.bugs objectAtIndex:selectedRow];
return selectedBug;
}
return nil;
}
你要做的第一件事是得到TableView的屬性中“selectedrow”。有了這個，你就得到了選定的行的索引。
setDetailInfo中的程式碼：
-(void)setDetailInfo:(ScaryBugDoc*)doc
{
NSString *title = @"";
NSImage *image = nil;
float rating=0.0;
if( doc != nil )
{
title = doc.data.title;
image = doc.fullImage;
rating = doc.data.rating;
}
[self.bugTitleView setStringValue:title];
[self.bugImageView setImage:image];
[self.bugRating setRating:rating];
}這個方法很簡單。它只是從scarybugdoc裡面獲取影象,名字和評級，然後設定相應的控制元件。
為了改變這種蟲子的標題，你呼叫bugtitleview的setstringvalue方法。為了改變圖片，呼叫bugimageview控制元件的setImage：方法
然後改變評級,呼叫bugRating中的setrating：方法。
在第一次執行在螢幕上之前,你需要做的最後一步是配置Rating控制元件。
如果你熟悉iOS，你就會知道檢視控制器的生命週期。檢視控制器中的viewwillload / viewDidLoad 方法經常用來配置子檢視。
在OSX，NSViewController是不實現這些方法的。當檢視控制器建立檢視時,需要重寫loadView方法。
所以您將重寫此方法並新增您可能需要的任何初始配置。注意要在本方法開始時呼叫[ super loadView]，否則檢視將不被建立！
將下面的程式碼新增在-（scarybugdoc *）selectedbugdoc下面。
-(void)loadView
{
[super loadView];
self.bugRating.starImage = [NSImage imageNamed:@"star.png"];
self.bugRating.starHighlightedImage = [NSImage imageNamed:@"shockedface2_full.png"];
self.bugRating.starImage = [NSImage imageNamed:@"shockedface2_empty.png"];
self.bugRating.maxRating = 5.0;
self.bugRating.delegate = (id<EDStarRatingProtocol>) self;
self.bugRating.horizontalMargin = 12;
self.bugRating.editable=YES;
self.bugRating.displayMode=EDStarRatingDisplayFull;
self.bugRating.rating= 0.0;
}此外，如果你點選任何一行，選擇的蟲子資訊和影象將出現在細節部分！
真棒，現在它開始看起來像一個真正的應用程式！"'__'"
然而，有一個小問題。這圖片太小了，所以不夠嚇人！這是因為影象檢視沒有被設定為預設的縮放影象。
讓我們來解決這個。選擇masterviewcontroller.xib。現在選擇影象檢視，並在公用程式面板中使用屬性檢查程式（第四個標籤）。在該選項卡中，將“Scaling”屬性更改為“Proportionally Up and Down”。
再次編譯和執行該應用程式。
現在的蟲子圖片可以縮放了,看起來更好–更可怕！哦，除了那個lady bug。
在這一點上，您可以選擇一個錯誤的列表，並看到它的細節。您還可以更改文字和在細節部分的等級。但當你做出改變，蟲子模型和列表都沒有變化！
但是，如果我們希望能夠新增新的蟲子或刪除現有的蟲子呢? 好的,在下一節中，你將新增這些編輯功能到應用程式中！
新增和刪除蟲子:
現在是實現編輯功能的時候了。首先，您將學習如何在列表中新增新的行和刪除選定的錯誤。
首先你需要新增2個按鈕。一個新增新的一行，另一個刪除選定行。
在“控制面板”中找到“Gradient Button”按鈕，將這些按鈕拖到表格檢視的下方。
選擇一個按鈕，並開啟屬性檢查程式（實用程式面板中的第四個標籤）。這將是“新增行”按鈕。對於這些按鈕，我們不打算設定一個標題。我們將會使用系統圖片。
在屬性檢查中，查詢Title屬性，並刪除所有文字。它應該是空的，所以我們的按鈕沒有顯示任何文字。現在，在Image屬性中，選擇“+”標誌的影象。
之後，重複相同的過程操作另一個按鈕。刪除它的標題，並設定影象屬性”NSRemoveTemplate”，這是一個“-”符號影象。
切換按鈕來使用影象，你可能要調整它們的大小，因為它們有點小。
現在你有2個按鈕，但他們不能做任何事情，因為你沒有連線到檢視控制器。
你需要為每個按鈕建立一個動作。這是你當你建立的控制元件的屬性相同的方式差不多，就像在iOS開發中一樣。
再次，調出助理編輯（“編輯”部分在頂部的工具欄二按鈕），並確保它的設定在Automatic\MasterViewController.m
選擇“新增”按鈕，從按鈕到MasterViewController.m控制器拖線.拖在@end.之前
這是會出現一個彈出框讓你對那個按鈕建立一個新的動作。名字的作用addBug，單擊Connect。
之後，會有一個新的方法"addbug："在我們建立的視圖裡面。每次單擊“新增蟲子”按鈕時，系統都會呼叫該方法。
"刪除按鈕"重複這個過程，方法名叫做"deletebug"。
是要在這些方法中新增程式碼來實現新增和刪除蟲子的時候了。讓我們開始用程式碼來新增一個新的蟲子。在addbug方法新增以下程式碼：
// 1. Create a new ScaryBugDoc object with a default name
ScaryBugDoc *newDoc = [[ScaryBugDoc alloc] initWithTitle:@"New Bug" rating:0.0 thumbImage:nil fullImage:nil];
// 2. Add the new bug object to our model (insert into the array)
[self.bugs addObject:newDoc];
NSInteger newRowIndex = self.bugs.count-1;
// 3. Insert new row in the table view
[self.bugsTableView insertRowsAtIndexes:[NSIndexSet indexSetWithIndex:newRowIndex] withAnimation:NSTableViewAnimationEffectGap];
// 4. Select the new bug and scroll to make sure it's visible
[self.bugsTableView selectRowIndexes:[NSIndexSet indexSetWithIndex:newRowIndex] byExtendingSelection:NO];
[self.bugsTableView scrollRowToVisible:newRowIndex];讓我們看看到此,我們做了些什麼。
第一，你建立一個新的scarybugdoc物件。之後，您將它新增到您的蟲子陣列。最後一步是在tableview中插入一個新的行。之後，系統會自動呼叫的方法viewfortablecolumn：行和單元格將蟲子資訊更新。
最後2行只是選中新建立的行，然後將表檢視滾動到該行，以使新建立的行是可見的。
現在，刪除按鈕，貼上以下程式碼內的deleteBug方法：
// 1. Get selected doc
ScaryBugDoc *selectedDoc = [self selectedBugDoc];
if (selectedDoc )
{
// 2. Remove the bug from the model
[self.bugs removeObject:selectedDoc];
// 3. Remove the selected row from the table view.
[self.bugsTableView removeRowsAtIndexes:[NSIndexSet indexSetWithIndex:self.bugsTableView.selectedRow] withAnimation:NSTableViewAnimationSlideRight];
// Clear detail info
[self setDetailInfo:nil];
}在該方法中你第一次打呼叫 selectedDoc: 你以前寫過的獲得當前選擇的蟲子–啊，這就是可重用程式碼的好處！
如果你能找到一個選擇的蟲子（也許是沒有選擇），你將通過呼叫array的方法:removeobject從陣列中移除bug：。
該方法將定位我們的bug doc物件的陣列，並將刪除該物件。然後，你刪除TableView中對應的行。
在最後一行中，你只需更新一個沒有值的資訊。這實際上會清除所有選定的蟲子的資訊。
然後就是編譯和執行！如果一切順利，現在當你點選新增蟲子按鈕，就會增加一個新的行。
您還可以通過選擇一個行來刪除一個蟲子，然後單擊“刪除”按鈕。
編輯蟲子資訊:
現在呢，您已經可以從我們的名單中新增和刪除可怕的蟲子了。現在是編輯現有的蟲子的時候了。
你可以對一個蟲子做出三個改變：改變它的名字，改變它的等級，改變它的形象。首先，讓我們看看你如何改變這個名字。當您選擇一個蟲子時，它的名稱是顯示在text filed中的。
現在，你可以改變它，但這些變化並沒有被儲存在模型中，所以這些變化是不可改變的。因此,在使用者每次更改選定的蟲子名稱時，都需要更新該模型。
為了實現這一目的，首先，你需要知道，當前文字是否已改變。每次使用者更改某個字元時，我們並不希望收到通知，只有當用戶已完成編輯時,再收到通知。
當用戶鍵入和按下回車時，或當他從text field改變到其他控制時,text filed 會發送一個action，同樣的,當被點選時，按鈕同樣會發出一個動作。
因此，實現它的方法是相同的。選擇MasterViewController.xib,，把助理編輯（“編輯”部分在頂部的工具欄二按鈕），並確保它的設定自動masterviewcontroller。M.
選擇text field，並拖動到MasterViewController。在addbug方法上面：
彈出框讓你對text filed建立一個新的動作,名字叫做bugTitleDidEndEdit：