在这一篇中，我们使用一个开源控件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/Quartz.h> 并且要手动添加Quartz.framework到工程项目中
添加Quartz.framework
经过上面的设置，现在运行程序，如果没有出错，你就可以得到一个可以进行图片替换啦
关于本篇的代码，可以从github上下载demo code
到这里大家已经算初步入门了，这仅仅是个开始，后面还有一篇关于应用的细化小知识，抽空翻译整理后再补上...
网友评论