一步一步，开始上手Mac 开发（二）

在这一篇中，我们使用一个开源控件EDStarRating对Bug进行rate的设置，你可以从这里下载Demo Resources，解压后拖入工程。

2.1 创建新的分组：Views, Helpers,Art，并将文件组织如下：

添加分组和文件

开始创建ScaryBugs详情展示部分，这就开始动手吧^_^

在iOS中，如果想展示下一个界面，一般需要创建两个不同的view，在用户操作table view的某一行时，切换不同的view来进行显示。

在OSX中，有一点不同，因为没有像iphone那样屏幕尺寸的限制，所以，只需要把view弄的再大一些我们可以在同一个view中添加更多的的内容。

2.2 选中MasterViewController.xib 选中view，然后把它拖动的更宽更高，不必在意具体的尺寸细节，要能够放下新的控件就可以。

拖拽后的view

2.3 添加新控件：我们需要显示的详情内容有bugs的名字（name），图片（image），和评分（rating），额外的，我们还需要添加两个Label来说明一下每个区域的含义，界面的最终样子大概如下图

对于名字 （name） 我们使用NSTextField 控件，它具有显示和编辑的功能

对应图片（image）我们使用控件NSImageView

对应评分（rating）我们使用导入的开源控件EDStarRating 控件，为此我们需要从控件库中拖拽一个叫做“Custom View”的控件，后面再设置它

添加控件后的view

2.4 设置EDStarRating控件，并修改label的文字

上一步里的Custom View是NSView类型，我们需要把它指定为EDStarRating

然后我们把第一个label名称改为Name，第二个labe的名称改为Rating

设置EDStarRating和label

编译运行程序，如果没有错误，界面大概是下面的样子

运行结果

Rating下面的控件不见了！别担心，它就在那里，只是我们还没有对它进行设置，接下来我们给控件来绑定到控制器的属性。

记得import EDStarRating.h头文件

设置IBOutlet 属性

当用户点击table view的任意一行时，我们要获取用户选中的Bug数据，并展示详情视图信息，这里我们要处理三个环节：

第一，我们要知道table view 的哪一行被点选了。当table view被选中某行的时候，它会告知它的delegate，通过tableViewSelectionDidChange方法告知被选中的行（row），我们需要在这个方法处理。

第二，我们要获取选中行相关的数据

第三，根据数据，显示详情视图信息

2.5 MasterViewController.m中的代码实现

MasterViewController.m中的代码实现

在Mac OSX10.10 之前，初始化view的代码需要写在控制器的loadView方法中，现在编译运行，随意点选table view 中的某一行，我们就可以看到实际效果了

运行效果

由于image view 默认没有缩放图片，导致图片看起来比较小，我们可以在xib中选中image view 设置它的“Scaling”属性，达到想要的效果

调整image view 的Scaling

再次运行，查看效果

设置image view 后的运行效果

现在你可以点击某一行，右边将会显示出对应的界面效果，你也可以更改名称里的文字和评分，但它们都不会有什么效果，下面我们来实现添加和删除的功能

首先我们要添加两个按钮（Gradient Button），一个增加新行，设置image为 NSAddTemplate，另一个删除选中行,设置image 为NSRemoveTemplate ，效果如下：

拖拽两个按钮并设置

2.6 在MasterViewController.m中分别为两个按钮添加操作方法（为按钮添加方法的步骤与iOS相同，选中按钮控件，按住control键拖拽到对应文件类中）addBug 和deleteBug，代码如下：

按钮添加操作方法

点击运行，如果没有错误的话，我们就可以通过+按钮来添加一个新行，-按钮来删除选中的行。现在我们已经实现在table view 中添加或者删除数据来，那么接下来，我们来实现编辑现有的数据功能，同样，我们要为NSTextField添加事件监听方法（与iOS的UITextField一样）

NSTextField 添加事件响应方法

再次运行程序，没有错误的话，我们可以在右侧详情视图的text field中修改左侧table view 选中行的名称了。接下来我们实现修改评分功能，这个非常容易，只要实现EDStarRating控件的一个代理方法就够啦。看下图：

EDStarRatingProtocol 方法实现

运行程序，现在我们可以进行评分修改功能了，在右侧详情视图的操作都会保存到数据模型中，并且会影响到左侧table view 数据展示。

好了，现在我们只剩下最后一件事情了：允许用户更换图片！ 那么我们先在image view下添加一个按钮来让用户点击，当用户点选按钮时，我们要给用户提供一个图片选择的窗口。

添加Push Button

2.7 为新添加的按钮增加事件处理：（与之前的+按钮操作相同）代码如下：

Change picture 按钮事件处理

在按钮响应的方法里，我们使用了一个新的控件类：IKPictureTaker，这个控件可以让你从电脑中选取图片或者从摄像头拍照，当用完成图片选择时，IKPictuerTaker会调用代理回调方法通知控制器，关于IKPictureTaker更详细的使用方法，有兴趣的可以到这个链接学习IKPictureTaker

为了能够让IKPictureTaker正常使用，需要导入#import 并且要手动添加Quartz.framework到工程项目中

添加Quartz.framework

经过上面的设置，现在运行程序，如果没有出错，你就可以得到一个可以进行图片替换啦

关于本篇的代码，可以从github上下载demo code

到这里大家已经算初步入门了，这仅仅是个开始，后面还有一篇关于应用的细化小知识，抽空翻译整理后再补上...