├── .vscode
    ├── temp.sql
    └── settings.json
├── LICENSE
├── README.md
├── Mac OS X Development Tutorial for Beginners Part 2 - OS X App Anatomy.md
├── How to Use NSTouchBar on macOS.md
├── macOS Development for Beginners - Part 1.md
├── Unit Testing on macOS - Part 1:2.md
└── Menus and Popovers in Menu Bar Apps for macOS.md


/.vscode/temp.sql:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // 将设置放入此文件中以覆盖默认值和用户设置。
2 | {
3 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Developer.Lx
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # macOS 开发教程翻译
  2 | ---
  3 | #### [原文地址](https://www.raywenderlich.com/category/macos) 翻译：[DeveloperLx](http://weibo.com/DeveloperLx)
  4 | 
  5 | <div id="content">
  6 |     <header class="entry-header">
  7 |         <!-- <h2 class="entry-title"> -->
  8 |         <h2 class="entry-title">
  9 |             macOS 开发教程
 10 |         </h2>
 11 |         <div class="content-wrapper taxonomy-description">
 12 |             <p>
 13 |                 想要学习怎么使用Swift为Mac开发App？
 14 |             </p>
 15 |             <p>
 16 |                 点击我们超过15个免费的macOS开发教程，它覆盖了几乎所有你入门你需要了解的事情！
 17 |             </p>
 18 |             <div class="note">
 19 |                 <em>
 20 |                     注意：
 21 |                 </em>
 22 |                 我们网站上的所有macOS教程，均使用苹果新的Swift编程语言编写。如果你对于Swift是个新手，请首先访问我们的
 23 |                 <a href="http://www.raywenderlich.com/swift-language-tutorials" sl-processed="1">
 24 |                     Swift语言教程
 25 |                 </a>
 26 |                 。
 27 |             </div>
 28 |         </div>
 29 |     </header>
 30 |     <div class="content-wrapper">
 31 |         <h2 style="clear:both; padding-top: 20px;">
 32 |             入门
 33 |         </h2>
 34 |         <img class="alignright size-full wp-image-110249 bordered" src="https://koenig-media.raywenderlich.com/uploads/2015/07/250x250.png"
 35 |         alt="250x250" width="250" height="250" />
 36 |         <p>
 37 |             入门最好的方式，是从我们的Mac OS X 初学者开发教程系列开始。
 38 |             <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Mac%20OS%20X%20Development%20Tutorial%20for%20Beginners%20Part%201%20-%20Intro%20to%20Xcode.md"
 39 |             sl-processed="1">
 40 |                 第一部分
 41 |             </a>
 42 |         </p>
 43 |         <p>
 44 |             这个系列将教给你OS X开发最基础的东西。你可以接下来了解更多关于OS X的
 45 |             <a href="https://www.raywenderlich.com/82046/introduction-to-os-x-tutorial-core-controls-and-swift-part-1" sl-processed="1">
 46 |                 核心控件
 47 |             </a>
 48 |             ，例如labels, combo boxes, 和buttons.
 49 |         </p>
 50 |         <ul>
 51 |             <li>
 52 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Cocoa%20Bindings%20on%20macOS.md" sl-processed="1">
 53 |                     绑定在macOS上的Cocoa
 54 |                 </a>
 55 |             </li>
 56 |             <li>
 57 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/macOS%20Controls%20Tutorial%20-%20Part%201:2.md" sl-processed="1">
 58 |                     macOS控件教程：1/2部分
 59 |                 </a>
 60 |             </li>
 61 |             <li>
 62 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/macOS%20Controls%20Tutorial%20-%20Part%202:2.md" sl-processed="1">
 63 |                     macOS控件教程：2/2部分
 64 |                 </a>
 65 |             </li>
 66 |             <li>
 67 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Mac%20OS%20X%20Development%20Tutorial%20for%20Beginners%20Part%201%20-%20Intro%20to%20Xcode.md" sl-processed="1">
 68 |                     Mac OS X 初学者开发教程 第一部分：Xcode介绍
 69 |                 </a>
 70 |             </li>
 71 |             <li>
 72 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Mac%20OS%20X%20Development%20Tutorial%20for%20Beginners%20Part%202%20-%20OS%20X%20App%20Anatomy.md" sl-processed="1">
 73 |                     Mac OS X 初学者开发教程 第二部分：OS X App剖析
 74 |                 </a>
 75 |             </li>
 76 |             <li>
 77 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Mac%20OS%20X%20Development%20Tutorial%20for%20Beginners%20Part%203%20-%20Your%20First%20OS%20X%20App.md" sl-processed="1">
 78 |                     Mac OS X 初学者开发教程 第三部分：你的第一个OS X App
 79 |                 </a>
 80 |             </li>
 81 |             <li>
 82 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/macOS%20Development%20for%20Beginners%20-%20Part%201.md" sl-processed="1">
 83 |                     macOS新手开发：第一部分
 84 |                 </a>
 85 |             </li>
 86 |             <li>
 87 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/macOS%20Development%20for%20Beginners%20-%20Part%202.md" sl-processed="1">
 88 |                     macOS新手开发：第二部分
 89 |                 </a>
 90 |             </li>
 91 |             <li>
 92 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/macOS%20Development%20for%20Beginners%20-%20Part%203.md" sl-processed="1">
 93 |                     macOS新手开发：第三部分
 94 |                 </a>
 95 |             </li>
 96 |             <li>
 97 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Command%20Line%20Programs%20on%20macOS%20Tutorial.md" sl-processed="1">
 98 |                     macOS教程：命令行程序
 99 |                 </a>
100 |             </li>
101 |             <li>
102 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Menus%20and%20Popovers%20in%20Menu%20Bar%20Apps%20for%20macOS.md" sl-processed="1">
103 |                     macOS教程：在Menu Bar App中的Menu和Popover
104 |                 </a>
105 |             </li>
106 |         </ul>
107 |         <h2 style="clear:both; padding-top: 20px;">
108 |             Windows, Views, 和View Controllers
109 |         </h2>
110 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/03/CocoaBindings-feature-250x250.png"
111 |         alt="CocoaBindings-feature" width="250" height="250" class="alignright size-thumbnail wp-image-129292 bordered"
112 |         />
113 |         <p>
114 |             一旦你通过了基础，你应该了解windows, views, 和view controllers在OS X中如何工作, 以及一些在你每天的开发中用到的关键的view controllers和views。
115 |         </p>
116 |         <ul>
117 |             <li>
118 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Collection%20Views%20in%20OS%20X%20Tutorial.md" sl-processed="1">
119 |                     OS X教程：Collection Views
120 |                 </a>
121 |             </li>
122 |             <li>
123 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/OS%20X%20Stack%20Views%20with%20NSStackView.md" sl-processed="1">
124 |                     OS X Stack Views：NSStackView
125 |                 </a>
126 |             </li>
127 |             <li>
128 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/NSOutlineView%20on%20macOS%20Tutorial.md" sl-processed="1">
129 |                     macOS教程：NSOutlineView
130 |                 </a>
131 |             </li>
132 |             <li>
133 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Advanced%20Collection%20Views%20in%20OS%20X%20Tutorial.md" sl-processed="1">
134 |                     OS X教程：高级Collection Views
135 |                 </a>
136 |             </li>
137 |             <li>
138 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Drag%20and%20Drop%20Tutorial%20for%20macOS.md" sl-processed="1">
139 |                     macOS Drag和Drop的教程
140 |                 </a>
141 |             </li>
142 |             <li>
143 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/macOS%20NSTableView%20Tutorial.md" sl-processed="1">
144 |                     macOS NSTableView教程
145 |                 </a>
146 |             </li>
147 |             <li>
148 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/NSCollectionView%20Tutorial.md" sl-processed="1">
149 |                     NSCollectionView教程
150 |                 </a>
151 |             </li>
152 |             <li>
153 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/OS%20X%20View%20Controllers%20Tutorial.md" sl-processed="1">
154 |                     OS X View Controllers教程
155 |                 </a>
156 |             </li>
157 |             <li>
158 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Windows%20and%20Window%20Controllers%20in%20OS%20X%20Tutorial.md" sl-processed="1">
159 |                     OS X教程：Windows和Window Controllers
160 |                 </a>
161 |             </li>
162 |         </ul>
163 |         <h2 style="clear:both; padding-top: 20px;">
164 |             其它OS X的开发教程
165 |         </h2>
166 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/03/NSTask-for-mac-feature-250x250.png"
167 |         alt="See a practical example of using NSTask!" width="250" height="250"
168 |         class="size-thumbnail wp-image-129761 bordered alignright" />
169 |         <p>
170 |             稍等，还有！在这部分，你将了解到怎么制作运行在命令行的专业的app（执行其它命令行程序的app），甚至是主要都在菜单栏中的app。
171 |         </p>
172 |         <ul>
173 |             <li>
174 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/NSTask%20Tutorial%20for%20OS%20X.md" sl-processed="1">
175 |                     OS X NSTask教程
176 |                 </a>
177 |             </li>
178 |             <li>
179 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Core%20Graphics%20on%20macOS%20Tutorial.md" sl-processed="1">
180 |                     macOS教程：Core Graphics
181 |                 </a>
182 |             </li>
183 |             <li>
184 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Scanner%20Tutorial%20for%20macOS.md" sl-processed="1">
185 |                     macOS的Scanner教程
186 |                 </a>
187 |             </li>
188 |             <li>
189 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Making%20A%20Mac%20App%20Scriptable%20Tutorial.md" sl-processed="1">
190 |                     让Mac App可脚本化的教程
191 |                 </a>
192 |             </li>
193 |             <li>
194 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Unit%20Testing%20on%20macOS%20-%20Part%201:2.md" sl-processed="1">
195 |                     单元测试：1/2部分
196 |                 </a>
197 |             </li>
198 |             <li>
199 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Unit%20Testing%20on%20macOS%20-%20Part%202:2.md" sl-processed="1">
200 |                     单元测试：2/2部分
201 |                 </a>
202 |             </li>
203 |             <li>
204 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/How%20to%20Use%20NSTouchBar%20on%20macOS.md" sl-processed="1">
205 |                     在macOS中怎样使用NSTouchBar
206 |                 </a>
207 |             </li>
208 |             <li>
209 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/FileManager%20Class%20Tutorial%20for%20macOS%20Getting%20Started%20with%20the%20File%20System.md" sl-processed="1">
210 |                     macOS FileManager类教程：文件系统入门
211 |                 </a>
212 |             </li>
213 |             <li>
214 |                 <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Porting%20Your%20iOS%20App%20to%20macOS.md" sl-processed="1">
215 |                     把你的iOS app接入到macOS上去
216 |                 </a>
217 |             </li>
218 |         </ul>
219 |     </div>
220 | </div>
221 | 


--------------------------------------------------------------------------------
/Mac OS X Development Tutorial for Beginners Part 2 - OS X App Anatomy.md:
--------------------------------------------------------------------------------
  1 | # macOS X 初学者开发教程 第二部分 OS X App剖析
  2 | 
  3 | #### [原文地址](https://www.raywenderlich.com/110267/mac-os-x-development-tutorial-beginners-part-2-os-x-app-anatomy) 翻译：[DeveloperLx](http://weibo.com/DeveloperLx)
  4 | 
  5 | <div class="content-wrapper">
  6 |     <p>
  7 |         <img class="alignright size-full wp-image-110249 bordered" src="https://koenig-media.raywenderlich.com/uploads/2015/07/250x250.png"
  8 |         alt="250x250" width="250" height="250" srcset="https://koenig-media.raywenderlich.com/uploads/2015/07/250x250.png 250w, https://koenig-media.raywenderlich.com/uploads/2015/07/250x250-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2015/07/250x250-64x64.png 64w, https://koenig-media.raywenderlich.com/uploads/2015/07/250x250-96x96.png 96w, https://koenig-media.raywenderlich.com/uploads/2015/07/250x250-128x128.png 128w"
  9 |         sizes="(max-width: 250px) 100vw, 250px">
 10 |     </p>
 11 |     <p>
 12 |         欢迎回到我们三个部分的Mac OS X新手开发教程系列！
 13 |     </p>
 14 |     <ol>
 15 |         <li>
 16 |             在
 17 |             <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Mac%20OS%20X%20Development%20Tutorial%20for%20Beginners%20Part%201%20-%20Intro%20to%20Xcode.md"
 18 |             sl-processed="1">
 19 |                 第一部分
 20 |                 part 1
 21 |             </a>
 22 |             你学到了怎样获取你需要的用来OS X开发的工具。接下来，使用了一个你下载的app作为例子，你进行了一次OS X的游览，发现了怎么执行app，编辑代码，设计UI和调试它。
 23 |         </li>
 24 |         <li>
 25 |             在第二部分，你将从Xcode退回一步来了解一下构成OS X app的组件。从一个app怎么启动，到UI怎么构建，直到处理用户的交互
 26 |         </li>
 27 |         <li>
 28 |             在<a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Mac%20OS%20X%20Development%20Tutorial%20for%20Beginners%20Part%203%20-%20Your%20First%20OS%20X%20App.md"
 29 |             sl-processed="1">最后一部分</a>， 你将亲自动手（get your hands dirty）- 构建你史无前例的第一个OS X app。从一无所有开始，你将很快地拥有一个简单的app，并运行在你的mac上！
 30 |         </li>
 31 |     </ol>
 32 |     <p>
 33 |         这篇文章是定位于那些完成了这个系列
 34 |         <a href="http://www.raywenderlich.com/110170/mac-os-x-development-tutorial-for-beginners-part-1-intro-to-xcode"
 35 |         sl-processed="1">
 36 |             part one
 37 |             第一部分
 38 |         </a>
 39 |         ，或拥有使用Xcode经验的人。它假设你没有或很少关于OS X app的知识，并且如果你早已熟悉OS X app的架构，你可以略过这里直到
 40 |         <a href="http://www.raywenderlich.com/110269/mac-os-x-development-tutorial-for-beginners-part-3-your-first-os-x-app"
 41 |         sl-processed="1">
 42 |             最后一部分
 43 |         </a>
 44 |         之前。
 45 |     </p>
 46 |     <p>
 47 |         到这篇文章最后的时候，你将有一个对于OS X app不同的部分怎么配合到一起的很好的掌控，尽管不必理解他们中的每一个都是怎么工作的。
 48 |     </p>
 49 |     <div class="note">
 50 |         <p>
 51 |             <em>
 52 |                 注意：
 53 |             </em>
 54 |             系列的这一部分，仅仅是你需要知道的OS X app怎么工作的背景信息；不涉及到写代码。
 55 |         </p>
 56 |         <p>
 57 |             休息一下，放松，然后学习 - 你将在下一个，也是这个系列的最后一部分，回到编码并制作你的第一个OS X app！
 58 |         </p>
 59 |     </div>
 60 |     <h2>
 61 |         OS X App怎么启动？
 62 |     </h2>
 63 |     <p>
 64 |     	你的OS X app旅程已开始 - 着眼于一个app实际上上是怎么
 65 |         <i>
 66 |             启动
 67 |         </i>
 68 |         的。
 69 |     </p>
 70 |     <p>
 71 |     	当考虑到OS X app启动进程时，你需要考虑到三个组件：
 72 |     </p>
 73 |     <ul>
 74 |         <li>
 75 |             <em>
 76 |                 App Delegate
 77 |             </em>
 78 |             ：代码的入口。App Delegate提供了关连于app生命循环的方法，并与操作系统进行交互。这是你的第一次执行代码的机会，并提供了你来自OS X的通知，例如Handoff请求，命令行参数和推送通知。
 79 |         </li>
 80 |         <li>
 81 |             <em>
 82 |                 Storyboard
 83 |             </em>
 84 |             ：Storyboards有一个指定的“入口点”，他让系统在app启动时构建UI。entrypoint看起来像一个在场景（scene）左手边的箭头：
 85 |             <br>
 86 |             <img class="aligncenter size-full wp-image-111915" src="https://koenig-media.raywenderlich.com/uploads/2015/08/storyboard_entry.png"
 87 |             alt="storyboard_entry" width="264" height="164">
 88 |             <br>
 89 |             这表示storyboard中的这个场景将构成你的app的初始UI。
 90 |         </li>
 91 |         <li>
 92 |             <em>
 93 |                 Info.plist
 94 |             </em>
 95 |             ：在你的app中，你可以有多个storyboard，OS X怎么知道该使用哪一个作为初始的UI？这个信息（和大量其它有用的东西）保存在
 96 |             <em>
 97 |                 Info.plist
 98 |             </em>
 99 |             文件中。你可以在下面看到关联的入口：
100 |             <img class="aligncenter size-medium wp-image-111908" src="https://koenig-media.raywenderlich.com/uploads/2015/08/info_plist-480x245.png"
101 |             alt="info_plist" width="480" height="245" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/info_plist-480x245.png 480w, https://koenig-media.raywenderlich.com/uploads/2015/08/info_plist-700x357.png 700w, https://koenig-media.raywenderlich.com/uploads/2015/08/info_plist.png 1238w"
102 |             sizes="(max-width: 480px) 100vw, 480px">
103 |             <p>
104 |             	这个文件包含了大量有用的配置选项，其中很多被暴露在Xcode的target配置的界面中。下面的图片展示了相同的storyboard设置位于更对用户友好的位置上：
105 |             </p>
106 |             <p>
107 |                 <img class="aligncenter wp-image-111912 size-large" src="https://koenig-media.raywenderlich.com/uploads/2015/08/project_config-700x436.png"
108 |                 alt="project_config" width="700" height="436" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/project_config-700x436.png 700w, https://koenig-media.raywenderlich.com/uploads/2015/08/project_config-480x299.png 480w, https://koenig-media.raywenderlich.com/uploads/2015/08/project_config.png 1448w"
109 |                 sizes="(max-width: 700px) 100vw, 700px">
110 |             </p>
111 |         </li>
112 |     </ul>
113 |     <p>
114 |     	启动一个app比这要
115 |         <i>
116 |         	稍
117 |         </i>
118 |         复杂些。但这三个地方解释了，你可以在什么地方交互和配置你的app的启动。现在你建立起了你的app，并运行起来，是时候来看一个重要的方面了 - 它的用户交互。
119 |     </p>
120 |     <h2>
121 |     	用户界面
122 |     </h2>
123 |     <p>
124 |     	你早已认识到UI可以由storyboard提供这个事实，但这实际上意味着什么？在这个部分你将cover到不同的UI组件 - 他们代表什么及它们怎么配合在一起。
125 |     </p>
126 |     <p>
127 |         <img class="aligncenter size-large wp-image-111919" src="https://koenig-media.raywenderlich.com/uploads/2015/08/app_components-632x500.png"
128 |         alt="app_components" width="632" height="500" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/app_components-632x500.png 632w, https://koenig-media.raywenderlich.com/uploads/2015/08/app_components-405x320.png 405w, https://koenig-media.raywenderlich.com/uploads/2015/08/app_components.png 1442w"
129 |         sizes="(max-width: 632px) 100vw, 632px">
130 |     </p>
131 |     <h3>
132 |         Window
133 |     </h3>
134 |     <p>
135 |     	你的app的UI将被一个或多个window对象包含。这些表现了你的app，负责提供UI的屏幕上的区域。操作系统会执行一个window管理器来处理移动和缩放这些window，在用户做出改变时更新你的app。
136 |     </p>
137 |     <p>
138 |     	除了可视化你的app之外，window对象也处理传递通过用户和鼠标键盘交互到你的app中而触发的事件。
139 |     </p>
140 |     <p>
141 |     	尽管你可以直接和window对象交互，但通常它们是被window controller控制的 - 尤其当结合storyboard使用的时候。
142 |     </p>
143 |     <p>
144 |     	window controller负责加载它自己的window，让你能够hook贯穿于window生命周期的不同的事件。
145 |     </p>
146 |     <p>
147 |     	一个storyboard会包含至少一个window controller，就像下面这样：
148 |     </p>
149 |     <p>
150 |         <img class="aligncenter wp-image-111918 size-medium" src="https://koenig-media.raywenderlich.com/uploads/2015/08/window_controller-475x320.png"
151 |         alt="window_controller" width="475" height="320" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/window_controller-475x320.png 475w, https://koenig-media.raywenderlich.com/uploads/2015/08/window_controller-700x471.png 700w, https://koenig-media.raywenderlich.com/uploads/2015/08/window_controller.png 1078w"
152 |         sizes="(max-width: 475px) 100vw, 475px">
153 |     </p>
154 |     <p>
155 |     	<code>
156 |             NSWindowController
157 |         </code>
158 |     	这个类代表了Window controller，因此当你需要配置不同的window时，你通常就需要创建不同的子类来管理它们各自的行为。
159 |     </p>
160 |     <h3>
161 |         Views
162 |     </h3>
163 |     <p>
164 |         window指定了你的app在屏幕上负责绘制的区域，但不是要绘制的东西。这就是view的主要职责之一 - 为你提供在屏幕上绘制的功能。
165 |     </p>
166 |     <p>
167 |         View是矩形的，由
168 |         <code>
169 |             NSView
170 |         </code>
171 |         来表示。View存在在层级中 - 也就是说，任何view都可以包含0个或多个subview - 让你能够用更简单，可重用的view组件来构成复杂的布局。
172 |     </p>
173 |     <h3>
174 |         View Controllers
175 |     </h3>
176 |     <p>
177 |         就如同window在storyboard中是被一个window controller来管理的，view是被window controller类来管理的。这就使用模型层通过直接操作property，或通过Cocoa绑定来连接了view的层级。
178 |     </p>
179 |     <p>
180 |         在一个典型的应用中，view controller是一个可重用的组件，当对一个特定的类型提供了模型的对象，就会更新所有构成它的view，来表现相关的模型对象的值。
181 |     </p>
182 |     <p>
183 |         例如，在之前的教程中，你“闲逛”（poke around）了
184 |         <em>
185 |             HubEvent
186 |         </em>
187 |         这个app。
188 |     </p>
189 |     <p>
190 |         <img class="aligncenter wp-image-111920 size-medium" src="https://koenig-media.raywenderlich.com/uploads/2015/08/view_controllers-480x311.png"
191 |         alt="view_controllers" width="480" height="311" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/view_controllers-480x311.png 480w, https://koenig-media.raywenderlich.com/uploads/2015/08/view_controllers-700x453.png 700w, https://koenig-media.raywenderlich.com/uploads/2015/08/view_controllers.png 1232w"
192 |         sizes="(max-width: 480px) 100vw, 480px">
193 |     </p>
194 |     <p>
195 |         在上面的截图中，你可以看到它是由两个主要的view controller构成的 - 一个管理在顶部的table view，另一个管理详细的text view。当你的table view中选择一行，它设置了模型对象在较低细节的view controller，然后更新text view去展示了正确的JSON。
196 |     </p>
197 |     <p>
198 |         View controller是由
199 |         <code>
200 |             NSViewController
201 |         </code>
202 |         来表现的，它提供了全范围的生命周期的事件 - 允许你在不同的时刻执行定制的动作。例如你可以在当view将要出现在屏幕上时，用这个方法
203 |         <code>
204 |             viewWillAppear()
205 |         </code>
206 |         来启动动画，或在view的层次已正确地装载时，使用填数据充相关的view在这个方法中
207 |         <code>
208 |             viewDidLoad()
209 |         </code>
210 |         。
211 |     </p>
212 |     <p>
213 |         你的app有可能是由一系列
214 |         <code>
215 |             NSViewController
216 |         </code>
217 |         定制的子类来构成的，每一个都负责window中不同的部分。它们是一个app中非常重要的一方面 - 形成允许你展示基础的（underlying）数据给用户的连接。
218 |     </p>
219 |     <h3>
220 |         View组件
221 |     </h3>
222 |     <p>
223 |         你已知道了view是用来被绘制到屏幕上的 - 但它实际上是怎么实现的？在最低层你可以创建一个
224 |         <code>
225 |             NSView
226 |         </code>
227 |         定制的子类并重写
228 |         <code>
229 |             drawRect()
230 |         </code>
231 |         方法来手动地绘制你的view的内容。
232 |     </p>
233 |     <p>
234 |         这是极其强大的 - 允许你创建完全定制的view，如果你不得不绘制一些文本到屏幕上去，将会非常费劲！
235 |     </p>
236 |     <p>
237 |         幸运的是，你不必这么做。AppKit包含一系列常用的
238 |         <code>
239 |             NSView
240 |         </code>
241 |         的子类，可以用来在屏幕上展示内容。
242 |     </p>
243 |     <p>
244 |         一些最有用的例子是：
245 |     </p>
246 |     <ul>
247 |         <li>
248 |             <em>
249 |                 Label
250 |             </em>
251 |             ：展示静态的文本。配置字体和外观
252 |             <br>
253 |             <img class="aligncenter wp-image-111909 size-full" src="https://koenig-media.raywenderlich.com/uploads/2015/08/label.png"
254 |             alt="" width="430" height="120">
255 |         </li>
256 |         <li>
257 |             <em>
258 |                 Text Field
259 |             </em>
260 |             ：用户可编辑的文本控制器。用来从用户那里手机字符串。
261 |             <br>
262 |             <img class="aligncenter size-full wp-image-111917" src="https://koenig-media.raywenderlich.com/uploads/2015/08/text_field.png"
263 |             alt="text_field" width="474" height="110">
264 |         </li>
265 |         <li>
266 |             <em>
267 |                 Image View
268 |             </em>
269 |             ：绘制一副图像 - 由
270 |             <code>
271 |                 NSImage
272 |             </code>
273 |             对象提供。
274 |             <br>
275 |             <img class="aligncenter size-full wp-image-111907" src="https://koenig-media.raywenderlich.com/uploads/2015/08/image_view.png"
276 |             alt="image_view" width="468" height="108">
277 |         </li>
278 |         <li>
279 |             <em>
280 |                 Push Button
281 |             </em>
282 |             ：是众多按钮类型中的一种 - 相应用户点击事件的那个。
283 |             <br>
284 |             <img class="aligncenter size-full wp-image-111913" src="https://koenig-media.raywenderlich.com/uploads/2015/08/push_button.png"
285 |             alt="push_button" width="470" height="88">
286 |         </li>
287 |         <li>
288 |             <em>
289 |                 Table View
290 |             </em>
291 |             ：一个用来展示不止
292 |             <i>
293 |                 一
294 |             </i>
295 |             个数据对象，而是展示它们的集合的例子，它是view的很多子类中的一个。
296 |             <br>
297 |             <img class="aligncenter size-full wp-image-111916" src="https://koenig-media.raywenderlich.com/uploads/2015/08/table_view.png"
298 |             alt="table_view" width="490" height="112" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/table_view.png 490w, https://koenig-media.raywenderlich.com/uploads/2015/08/table_view-480x110.png 480w"
299 |             sizes="(max-width: 490px) 100vw, 490px">
300 |         </li>
301 |     </ul>
302 |     <p>
303 |         这些只是几个不同的对你可用的view的子类，你可以用来构建你的app的用户界面。在Interface Builder，你可以在对象库中发现所有的子类：
304 |     </p>
305 |     <p>
306 |         <img class="aligncenter size-large wp-image-111911" src="https://koenig-media.raywenderlich.com/uploads/2015/08/object_library-383x500.png"
307 |         alt="object_library" width="383" height="500" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/object_library-383x500.png 383w, https://koenig-media.raywenderlich.com/uploads/2015/08/object_library-245x320.png 245w, https://koenig-media.raywenderlich.com/uploads/2015/08/object_library.png 522w"
308 |         sizes="(max-width: 383px) 100vw, 383px">
309 |     </p>
310 |     <p>
311 |         raywenderlich.com OS X教程团队也将在未来几个月中，打造一个快速的对于不同UI组建的参考指南 - 所以请确保回来查阅。
312 |     </p>
313 |     <h3>
314 |         Viewing collections
315 |     </h3>
316 |     <p>
317 |         你经常想要你的app的UI同时展示多个模型对象 - 例如一个即将到来的约会的列表，或一个相册中照片的集合。
318 |     </p>
319 |     <p>
320 |         OS X提供两个不同的view用来展示模型对象的集合 - 以table view的形式和collection view的形式。
321 |     </p>
322 |     <p>
323 |         如同它的名字，table view用来展示扁平的数据，使用行来表示个体的数据模型，列来表示那些对象的属性。
324 |     </p>
325 |     <p>
326 |         <img class="aligncenter size-medium wp-image-111922" src="https://koenig-media.raywenderlich.com/uploads/2015/08/table_view_sample-480x145.png"
327 |         alt="table_view_sample" width="480" height="145" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/table_view_sample-480x145.png 480w, https://koenig-media.raywenderlich.com/uploads/2015/08/table_view_sample-700x212.png 700w, https://koenig-media.raywenderlich.com/uploads/2015/08/table_view_sample.png 1220w"
328 |         sizes="(max-width: 480px) 100vw, 480px">
329 |     </p>
330 |     <p>
331 |         Table view由可以在被滚入和滚出屏幕时，可以被回收利用的cell构成。数据可以通过数据源协议或使用Cocoa Bindings来提供。
332 |     </p>
333 |     <p>
334 |         Table支持排序，编辑和定制cell，给你一个强有力的view来展示数据。
335 |     </p>
336 |     <p>
337 |         更通用的collection view也是由cell的集合构成的，但这次，每个cell代表全部的模型对象。这些cell的布局是完全可定制的。
338 |     </p>
339 |     <p>
340 |         <img class="aligncenter size-medium wp-image-111902" src="https://koenig-media.raywenderlich.com/uploads/2015/08/collection_view-475x320.png"
341 |         alt="collection_view" width="475" height="320" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/collection_view-475x320.png 475w, https://koenig-media.raywenderlich.com/uploads/2015/08/collection_view-700x472.png 700w, https://koenig-media.raywenderlich.com/uploads/2015/08/collection_view.png 1314w"
342 |         sizes="(max-width: 475px) 100vw, 475px">
343 |         <img class="aligncenter wp-image-111903 size-medium" src="https://koenig-media.raywenderlich.com/uploads/2015/08/collection_view_circle-480x308.png"
344 |         alt="collection_view_circle" width="480" height="308" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/collection_view_circle-480x308.png 480w, https://koenig-media.raywenderlich.com/uploads/2015/08/collection_view_circle-700x449.png 700w, https://koenig-media.raywenderlich.com/uploads/2015/08/collection_view_circle.png 1234w"
345 |         sizes="(max-width: 480px) 100vw, 480px">
346 |     </p>
347 |     <p>
348 |         类似table view，collection view可以通过数据源或Cocoa Bindings来提供。它的cell也是可以回收利用的 - 当它们从view中消失的时候，以此减少内存的占用。
349 |     </p>
350 |     <p>
351 |         Collection view内置了cell选择的支持，带动画的重新排序，以及将cell分组到部分中。
352 |     </p>
353 |     <h3>
354 |         处理用户交互
355 |     </h3>
356 |     <p>
357 |         对于任何OS X，一个关键的部分就是通过鼠标、触控板、键盘和任何其它大量的输入设备来进行用户交互。为了帮助设计用户的输入到你的app，OS X提供了一个统一的事件派发模型，构建于一个响应者链的概念下。
358 |     </p>
359 |     <p>
360 |         生成自键盘的事件称作
361 |         <em>
362 |             Key Events
363 |         </em>
364 |         ，这些会跟随一个相当复杂的路径到达你的app。一些键的点击甚至不会将事件传递给你的app - 它们被拦截在操作系统的层级上（例如：电源按钮，屏幕亮度，音量）。
365 |     </p>
366 |     <p>
367 |         键的事件可以表示一个单独的键，或一个键的组合 - 当事件到达你的app时，它们会首先被检查是不是一个对应于菜单项的快捷键。
368 |     </p>
369 |     <p>
370 |         如果不是的话，它们就会被检查是不是用来引导你的app的用户交互的 - 例如：在输入框之间切换。如果这个不是这种情况，window会在传递键事件前，确定出哪个view当前是活跃的（所谓的第一响应者）。这些可以被打断作为每个视图的命令，或作为字符来插入。
371 |     </p>
372 |     <p>
373 |         键盘输入确实相当复杂，因为它可以影响到很多层的系统和app架构，但OS X走了一大段路来帮助这个处理。在很多情形下，你会发现它表现的就像你期望的一样的“开箱即用”（out of the box）。
374 |     </p>
375 |     <p>
376 |         类鼠标事件（mouse-like event）传递到你的应用中，在传递它们到你定制的子类，使你能够恰当地操作它们之前，确立它们执行在哪个window和相应view上。响应者类（view继承自的）包含你可以重写的，在点击或移动鼠标时会调用的方法。
377 |     </p>
378 |     <p>
379 |         触控板相对于传统的鼠标，提供了很多额外的手势，因此gesture recognizer的概念是从iOS借来的。这些可以用来将一系列的多指触控解释为一个语义上的动作，例如移动和旋转。
380 |     </p>
381 |     <p>
382 |         Gesture recognizer对类鼠标事件提供了更高水平的解释，它们被关联到view，并拦截所有关联到那个view的类鼠标事件。
383 |     </p>
384 |     <p>
385 |         在OS X中，事件处理架构相当地复杂，但默认走了一大段路来处理很多共同的情形。相应者链的力量使其在最高水平的可能上，让操纵事件变得容易。
386 |     </p>
387 |     <h3>
388 |         Menus
389 |     </h3>
390 |     <p>
391 |         Menus是关联到你的app的不同动作的集合。Menus可以出现在不同的地方，包括：
392 |     </p>
393 |     <ul>
394 |         <li>
395 |             <em>
396 |                 Menu Bar
397 |             </em>
398 |             这是沿着屏幕顶部的“条”
399 |             <br>
400 |             <img class="aligncenter size-medium wp-image-111910" src="https://koenig-media.raywenderlich.com/uploads/2015/08/menu_bar-480x283.png"
401 |             alt="menu_bar" width="480" height="283" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/menu_bar-480x283.png 480w, https://koenig-media.raywenderlich.com/uploads/2015/08/menu_bar-700x412.png 700w, https://koenig-media.raywenderlich.com/uploads/2015/08/menu_bar.png 842w"
402 |             sizes="(max-width: 480px) 100vw, 480px">
403 |         </li>
404 |         <li>
405 |             <em>
406 |                 Context Menus（交互菜单）
407 |             </em>
408 |             出现在用户右击时
409 |             <br>
410 |             <img class="aligncenter size-medium wp-image-111904" src="https://koenig-media.raywenderlich.com/uploads/2015/08/context_menu-480x291.png"
411 |             alt="context_menu" width="480" height="291" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/context_menu-480x291.png 480w, https://koenig-media.raywenderlich.com/uploads/2015/08/context_menu.png 578w"
412 |             sizes="(max-width: 480px) 100vw, 480px">
413 |         </li>
414 |         <li>
415 |             <em>
416 |                 Dock Menu
417 |             </em>
418 |             当用户长按dock的图标时
419 |             <br>
420 |             <img class="aligncenter size-medium wp-image-111905" src="https://koenig-media.raywenderlich.com/uploads/2015/08/dock_menu-270x320.png"
421 |             alt="dock_menu" width="270" height="320" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/dock_menu-270x320.png 270w, https://koenig-media.raywenderlich.com/uploads/2015/08/dock_menu-422x500.png 422w, https://koenig-media.raywenderlich.com/uploads/2015/08/dock_menu.png 466w"
422 |             sizes="(max-width: 270px) 100vw, 270px">
423 |         </li>
424 |     </ul>
425 |     <p>
426 |         所有的menus可以在Interface Builder中被配置，允许你配置它们的外观，它们出现的层级，和每一项关联的动作。
427 |     </p>
428 |     <p>
429 |         <img class="aligncenter size-medium wp-image-111906" src="https://koenig-media.raywenderlich.com/uploads/2015/08/ib_menu-480x127.png"
430 |         alt="ib_menu" width="480" height="127" srcset="https://koenig-media.raywenderlich.com/uploads/2015/08/ib_menu-480x127.png 480w, https://koenig-media.raywenderlich.com/uploads/2015/08/ib_menu-700x185.png 700w, https://koenig-media.raywenderlich.com/uploads/2015/08/ib_menu.png 884w"
431 |         sizes="(max-width: 480px) 100vw, 480px">
432 |     </p>
433 |     <h2>
434 |         数据层
435 |     </h2>
436 |     <p>
437 |         用户界面是你OS X app的一个巨大的部分，但它大概不是你app的
438 |         <i>
439 |             全部
440 |         </i>
441 |         。大多app提供一个用户界面，来让用户可以和背后的数据模型交互。
442 |     </p>
443 |     <p>
444 |         数据模型高度依赖于你的app存在的域（domain） - 并没有魔术的办法来build一个数据层。事实上，通常的情形是，你会使用Swift中可用的，面向对象语言的特性来创建一套模拟你app的域（domain）的对象。
445 |     </p>
446 |     <p>
447 |         让数据层和用户界面分类是极其重要的，让你的软件更易维护和不易出错。OS X通过Cocoa Bindings支持这种架构 - 一种接通模型对象到UI，并确保它们自动保持互相同步的技术。
448 |     </p>
449 |     <p>
450 |         你可以穿件一个完全隔离的动态framework来包含你的数据层 - 完全和UI隔离。这可以让相同的数据层在多个app中被使用 - 甚至再OS X和iOS app之间，增强可测试性。
451 |     </p>
452 |     <p>
453 |         尽管你可以创建你自己的数据层，苹果提供了一个名叫Core Data的框架。这是一个综合框架，用来创建对象图（object graph）来完成你全部数据层的模型。它支持持久化到磁盘，数据校验，撤销等。
454 |     </p>
455 |     <p>
456 |         Core Data很好地支持了Cocoa Bindings，意味着整合你的模型编辑UI和Core Data后端真的容易，这使得build你大部分的app相当得快。
457 |     </p>
458 |     <h2>
459 |         其它有用的Cocoa功能
460 |     </h2>
461 |     <p>
462 |     	这篇文章给了你一些可以被用到每个OS Xapp的Cocoa概念的非常简短的概述。这仅仅触碰到了这个非常丰富的平台的表面。
463 |     </p>
464 |     <p>
465 |     	一些Cocoa的其它突出的部分，在build强大的OS X app时也是非常有用的：
466 |     </p>
467 |     <ul>
468 |         <li>
469 |             <em>
470 |                 Networking
471 |             </em>
472 |             ：除了访问最底层的网络功能，OS X提供了一个更高层的API来处理HTTP请求。networking构建在一个异步的session上 - 无缝地将上传和下载处理成一个任务的列表。
473 |         </li>
474 |         <li>
475 |             <em>
476 |                 Location
477 |             </em>
478 |             ：你可能主要在移动设备上关联到基于位置的服务，但你有完全的访问权限，来通过Core Location访问很多关于位置的强大的功能，并使用MapKit处理地图。
479 |         </li>
480 |         <li>
481 |             <em>
482 |                 WebKit
483 |             </em>
484 |             ：Safari是顶级的web浏览器之一，你可以通过WebKit来整合强有力的渲染引擎（rendering engine）到你自己的app中。它也包含了与内容交互的能力，并可以从一系列的来源中渲染HTML的内容。
485 |         </li>
486 |     </ul>
487 |     <h2>
488 |         从这儿去向哪里？
489 |     </h2>
490 |     <div class="inline-video-ad" id="sub-banner-inline">
491 |         <div class="inline-video-ad-wrapper">
492 |             <a href="https://videos.raywenderlich.com/courses" sl-processed="1">
493 |                 <div class="col-wrapper">
494 |                     <div class="col">
495 |                         <img src="https://cdn3.raywenderlich.com/wp-content/themes/raywenderlich/images/global/video-yeti@2x.png"
496 |                         alt="yeti holding videos">
497 |                     </div>
498 |                     <div class="col large-col">
499 |                         <span>
500 |                             想要学习得更快？通过我们的
501 |                             <span>
502 |                                 视频课程
503 |                             </span>
504 |                             来节约时间吧
505 |                         </span>
506 |                     </div>
507 |                 </div>
508 |             </a>
509 |         </div>
510 |     </div>
511 |     <p>
512 |         这篇文章给了你OS X的app怎么配合在一起的概述，但它没有给你你改怎么实际地使用这些来启动创建app的好主意。不要担心 - 这恰是这个引导性系列中
513 |         <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Mac%20OS%20X%20Development%20Tutorial%20for%20Beginners%20Part%203%20-%20Your%20First%20OS%20X%20App.md"
514 |         sl-processed="1">
515 |             下一篇文章
516 |         </a>
517 |         的目标。
518 |     </p>
519 |     <p>
520 |         如果你想学习更多关于build OS X app理论方面的内容，苹果提供了一个好的Cocoa app的引导作为文档引导的一部分。它在实际build app上并不是特别有用，但是你如果全部读过它，你将对Cocoa拥有可怕的知识！
521 |     </p>
522 | </div>
523 | 


--------------------------------------------------------------------------------
/How to Use NSTouchBar on macOS.md:
--------------------------------------------------------------------------------
  1 | # 在macOS中怎样使用NSTouchBar
  2 | 
  3 | #### [原文地址](https://www.raywenderlich.com/147118/use-nstouchbar-macos) 翻译：[DeveloperLx](http://weibo.com/DeveloperLx)
  4 | 
  5 | <div class="content-wrapper">
  6 |     <p>
  7 |         <img class="wp-image-147148 size-full alignright" src="https://koenig-media.raywenderlich.com/uploads/2016/10/NSTouchBar-feature-500x500.png"
  8 |         alt="" width="250" height="250" srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/NSTouchBar-feature.png 500w, https://koenig-media.raywenderlich.com/uploads/2016/10/NSTouchBar-feature-250x250.png 250w, https://koenig-media.raywenderlich.com/uploads/2016/10/NSTouchBar-feature-320x320.png 320w, https://koenig-media.raywenderlich.com/uploads/2016/10/NSTouchBar-feature-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2016/10/NSTouchBar-feature-50x50.png 50w, https://koenig-media.raywenderlich.com/uploads/2016/10/NSTouchBar-feature-64x64.png 64w, https://koenig-media.raywenderlich.com/uploads/2016/10/NSTouchBar-feature-96x96.png 96w, https://koenig-media.raywenderlich.com/uploads/2016/10/NSTouchBar-feature-128x128.png 128w"
  9 |         sizes="(max-width: 250px) 100vw, 250px">
 10 |     </p>
 11 |     <p>
 12 |         After years of waiting and rumors, Apple finally released a set of new
 13 |         MacBook Pros. One of the new exciting things announced was the inclusion
 14 |         of a touch screen. Well… sort of.
 15 |     </p>
 16 |     <p>
 17 |         The new Touch Bar replaces the traditional function keys found on all
 18 |         MacBooks in the past for a dynamic, multi-touch screen. And the best part
 19 |         is it’s fully open to developers, so you can use it to offer new ways to
 20 |         interact with your macOS applications.
 21 |     </p>
 22 |     <p>
 23 |         If you’re a macOS developer, you’ll want to take full advantage of this
 24 |         new technology right away. In this tutorial, I’ll show you how you can
 25 |         use the new
 26 |         <code>
 27 |             NSTouchBar
 28 |         </code>
 29 |         API to easily create a dynamic touch bar for your macOS app.
 30 |     </p>
 31 |     <div class="note">
 32 |         <p>
 33 |             <em>
 34 |                 Note:
 35 |             </em>
 36 |             This tutorial requires Xcode version 8.1 or later. You will also need
 37 |             to ensure that you have macOS 10.12.1, build 16B2657 installed on your
 38 |             computer first. If you do not have this version, you will not be able to
 39 |             show the Touch Bar Simulator. To check, go to
 40 |             <em>
 41 |                  &gt; About This Mac
 42 |             </em>
 43 |             , and click where you see 10.12.1. This will then show your build number.
 44 |         </p>
 45 |         <p>
 46 |             <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/About-Mac.png"
 47 |             alt="About Mac" width="588" height="140" class="alignnone size-full wp-image-147122"
 48 |             srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/About-Mac.png 588w, https://koenig-media.raywenderlich.com/uploads/2016/10/About-Mac-480x114.png 480w"
 49 |             sizes="(max-width: 588px) 100vw, 588px">
 50 |         </p>
 51 |         <p>
 52 |             If you do not see 16B2657, you can download the update from
 53 |             <a href="https://support.apple.com/kb/dl1897" target="_blank" sl-processed="1">
 54 |                 Apple
 55 |             </a>
 56 |             .
 57 |         </p>
 58 |     </div>
 59 |     <h2>
 60 |         What is the Touch Bar?
 61 |     </h2>
 62 |     <p>
 63 |         As mentioned, the Touch Bar is a small touch screen that allows users
 64 |         to interact with apps (and their computer) in a whole new way.
 65 |     </p>
 66 |     <p>
 67 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/Screen-Shot-2016-10-31-at-12.44.31-PM-650x106.png"
 68 |         alt="Screen Shot 2016-10-31 at 12.44.31 PM" width="650" height="106" class="alignnone size-large wp-image-147140"
 69 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/Screen-Shot-2016-10-31-at-12.44.31-PM-650x106.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/10/Screen-Shot-2016-10-31-at-12.44.31-PM-480x78.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/10/Screen-Shot-2016-10-31-at-12.44.31-PM.png 1132w"
 70 |         sizes="(max-width: 650px) 100vw, 650px">
 71 |     </p>
 72 |     <p>
 73 |         There are three default sections on the Touch Bar:
 74 |     </p>
 75 |     <ul>
 76 |         <li>
 77 |             <em>
 78 |                 System Button
 79 |             </em>
 80 |             : Depending on context, this will show a system level button, like Esc.
 81 |         </li>
 82 |         <li>
 83 |             <em>
 84 |                 App Region
 85 |             </em>
 86 |             : The default area provided for your app to show items.
 87 |         </li>
 88 |         <li>
 89 |             <em>
 90 |                 Control Strip
 91 |             </em>
 92 |             : This is a replacement of your familiar keys that you’d use to control
 93 |             screen brightness, volume, or music playback.
 94 |         </li>
 95 |     </ul>
 96 |     <p>
 97 |         As with every new technology from Apple, there are a set of Human Interface
 98 |         Guidelines that you should follow when working with the Touch Bar. You
 99 |         should familiarize yourself with them
100 |         <a href="https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/AbouttheTouchBar.html"
101 |         sl-processed="1">
102 |             here
103 |         </a>
104 |         , as they are very important to maintaining a consistent pattern to your
105 |         users.
106 |     </p>
107 |     <p>
108 |         Very briefly, here are a few sections of the guide that really stand out:
109 |     </p>
110 |     <ul>
111 |         <li>
112 |             <em>
113 |                 Don’t expose functionality just in the Touch Bar
114 |             </em>
115 |             : This isn’t the place to keep things secret from users that haven’t upgraded
116 |             their hardware yet. If you’re going to put it in the Touch Bar, make sure
117 |             you can perform the action somewhere else in your app. Apple says that
118 |             the Touch Bar can even be disabled, so don’t count on your users to always
119 |             see it.
120 |         </li>
121 |         <li>
122 |             <em>
123 |                 The Touch Pad is an extension of the Keyboard and Trackpad, not a display
124 |             </em>
125 |             : Yes, it’s a screen, but it’s not a secondary display. Don’t distract
126 |             the user with scrolling content or alerts.
127 |         </li>
128 |         <li>
129 |             <em>
130 |                 Respond Immediately
131 |             </em>
132 |             : When users tap a key on the keyboard, they expect immediate results.
133 |             Similarly, when someone taps a virtual button on the touch bar, they also
134 |             expect immediate results.
135 |         </li>
136 |     </ul>
137 |     <h2>
138 |         How Do I Support the Touch Bar?
139 |     </h2>
140 |     <p>
141 |         To add support for the TouchBar in your apps, you use some new classes
142 |         provided by Apple:
143 |         <code>
144 |             NSTouchBar
145 |         </code>
146 |         and
147 |         <code>
148 |             NSTouchBarItem
149 |         </code>
150 |         (and its subclasses).
151 |     </p>
152 |     <p>
153 |         Some of the
154 |         <code>
155 |             NSTouchBarItem
156 |         </code>
157 |         subclasses include features like:
158 |     </p>
159 |     <ul>
160 |         <li>
161 |             <em>
162 |                 Slider
163 |             </em>
164 |             : Adjusts a value
165 |         </li>
166 |         <li>
167 |             <em>
168 |                 Popover
169 |             </em>
170 |             : Hide more functionality behind another item.
171 |         </li>
172 |         <li>
173 |             <em>
174 |                 Color Picker
175 |             </em>
176 |             : Pretty much says it all (a color picker if you didn’t catch it ;] ).
177 |         </li>
178 |         <li>
179 |             <em>
180 |                 Custom
181 |             </em>
182 |             : This is probably going to be your go-to item for a lot of things. It
183 |             allows you to add simple labels, buttons, and all sorts of other controls.
184 |         </li>
185 |     </ul>
186 |     <p>
187 |         You can customize your items quite a bit. From text size and color, to
188 |         images, you can offer your users a modern approach to the keyboard that
189 |         hasn’t been available before. Just remember the guidelines, and you should
190 |         be good to go.
191 |     </p>
192 |     <h2>
193 |         Getting Started
194 |     </h2>
195 |     <p>
196 |         You’re probably ready to get started! To follow along, download this sample
197 |         project
198 |         <a href="https://koenig-media.raywenderlich.com/uploads/2016/10/TouchBar-Starter-2.zip"
199 |         sl-processed="1">
200 |             here
201 |         </a>
202 |         .
203 |     </p>
204 |     <p>
205 |         The application is a very simple Travel Log, that only does what is needed
206 |         for the purposes of our tutorial. With the project open, go to
207 |         <em>
208 |             Window &gt; Show Touch Bar
209 |         </em>
210 |         . You’ll now see the Touch Bar Simulator on your screen.
211 |     </p>
212 |     <p>
213 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/Initial-Bar-650x36.png"
214 |         alt="Initial Bar" width="650" height="36" class="alignnone size-large wp-image-147125"
215 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/Initial-Bar-650x36.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/10/Initial-Bar-480x27.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/10/Initial-Bar.png 1096w"
216 |         sizes="(max-width: 650px) 100vw, 650px">
217 |     </p>
218 |     <p>
219 |         Build and run the app, you’ll notice the Touch Bar is empty, aside from
220 |         the System Button and Control Strip.
221 |     </p>
222 |     <p>
223 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/Starter-App.png"
224 |         alt="Starter App" width="593" height="317" class="alignnone size-full wp-image-147128"
225 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/Starter-App.png 593w, https://koenig-media.raywenderlich.com/uploads/2016/10/Starter-App-480x257.png 480w"
226 |         sizes="(max-width: 593px) 100vw, 593px">
227 |     </p>
228 |     <p>
229 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/First-Bar-1-650x36.png"
230 |         alt="First Bar" width="650" height="36" class="alignnone size-large wp-image-147127"
231 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/First-Bar-1-650x36.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/10/First-Bar-1-480x26.png 480w"
232 |         sizes="(max-width: 650px) 100vw, 650px">
233 |     </p>
234 |     <p>
235 |         Before you can add anything to the Touch Bar, you’ll need to tell the
236 |         system your application can customize the Touch Bar. Open
237 |         <em>
238 |             AppDelegate.swift
239 |         </em>
240 |         , and paste the following into
241 |         <code>
242 |             applicationDidFinishLaunching(\_:)
243 |         </code>
244 |         :
245 |     </p>
246 |     <div class="wp_codebox">
247 |         <table>
248 |             <tbody>
249 |                 <tr id="p1471181">
250 |                     <td class="code" id="p147118code1">
251 |                         <pre class="swift" style="font-family:monospace;">
252 |                             func applicationDidFinishLaunching(_ aNotification: Notification) { if
253 |                             #available(OSX 10.12.1, *) { NSApplication.shared().isAutomaticCustomizeTouchBarMenuItemEnabled
254 |                             = true } }
255 |                         </pre>
256 |                     </td>
257 |                 </tr>
258 |             </tbody>
259 |         </table>
260 |     </div>
261 |     <p>
262 |         This takes care of all the necessary validations and activation of your
263 |         Touch Bar menu items for you. At the time of this writing the current version
264 |         of Xcode does not have macOS 10.12.1 available as a deployment target,
265 |         so you will need to place
266 |         <code>
267 |             #available(OS X 10.12.1, *)
268 |         </code>
269 |         around code or extensions dealing with the Touch Bar. Luckily, Xcode will
270 |         give you a friendly error if you forget ;]
271 |     </p>
272 |     <p>
273 |         Open
274 |         <em>
275 |             WindowController.swift
276 |         </em>
277 |         , and look at
278 |         <code>
279 |             makeTouchBar()
280 |         </code>
281 |         . This method is checking if
282 |         <code>
283 |             ViewController
284 |         </code>
285 |         has a Touch Bar that can be returned. If so, it will send that Touch Bar
286 |         to the
287 |         <em>
288 |             Window
289 |         </em>
290 |         , and be presented to the user. Right now, there is no Touch Bar being
291 |         created, so nothing is shown.
292 |     </p>
293 |     <p>
294 |         Before you can go making your own touch bars, and touch bar items, you
295 |         need to be aware that instances of these classes all require unique identifiers.
296 |         Open
297 |         <em>
298 |             TouchBarIdentifiers.swift
299 |         </em>
300 |         to see how these have been created for this project. There are extensions
301 |         for both
302 |         <code>
303 |             NSTouchBarCustomizationIdentifier
304 |         </code>
305 |         , and
306 |         <code>
307 |             NSTouchBarItemIdentifier
308 |         </code>
309 |         .
310 |     </p>
311 |     <p>
312 |         Go to
313 |         <em>
314 |             ViewController.swift
315 |         </em>
316 |         , and add the following at the end of the file, where the
317 |         <em>
318 |             TouchBar Delegate
319 |         </em>
320 |         is marked:
321 |     </p>
322 |     <div class="wp_codebox">
323 |         <table>
324 |             <tbody>
325 |                 <tr id="p1471182">
326 |                     <td class="code" id="p147118code2">
327 |                         <pre class="swift" style="font-family:monospace;">
328 |                             @available(OSX 10.12.1, *) extension ViewController: NSTouchBarDelegate
329 |                             { override func makeTouchBar() -&gt; NSTouchBar? { // 1 let touchBar =
330 |                             NSTouchBar() touchBar.delegate = self // 2 touchBar.customizationIdentifier
331 |                             = .travelBar // 3 touchBar.defaultItemIdentifiers = [.infoLabelItem] //
332 |                             4 touchBar.customizationAllowedItemIdentifiers = [.infoLabelItem] return
333 |                             touchBar } }
334 |                         </pre>
335 |                     </td>
336 |                 </tr>
337 |             </tbody>
338 |         </table>
339 |     </div>
340 |     <p>
341 |         Here, you override
342 |         <code>
343 |             makeTouchBar()
344 |         </code>
345 |         , which is required for your view or window to create a touch bar. You
346 |         also did the following:
347 |     </p>
348 |     <ol>
349 |         <li>
350 |             Create a new
351 |             <code>
352 |                 TouchBar
353 |             </code>
354 |             and set the delegate.
355 |         </li>
356 |         <li>
357 |             Set the customizationIdentifier. Remember, every
358 |             <code>
359 |                 TouchBar
360 |             </code>
361 |             and
362 |             <code>
363 |                 TouchBarItem
364 |             </code>
365 |             need to have unique identifiers.
366 |         </li>
367 |         <li>
368 |             Set the Touch Bar’s default item identifiers. This tells the Touch Bar
369 |             what items it will contain.
370 |         </li>
371 |         <li>
372 |             Here, you set what order the items should be presented to the user.
373 |         </li>
374 |     </ol>
375 |     <p>
376 |         You’re still not quite ready to see anything in your Touch Bar yet. You’ll
377 |         need to tell the Touch Bar what the
378 |         <code>
379 |             .infoLabelItem
380 |         </code>
381 |         should look like. In the same extension, add the following:
382 |     </p>
383 |     <div class="wp_codebox">
384 |         <table>
385 |             <tbody>
386 |                 <tr id="p1471183">
387 |                     <td class="code" id="p147118code3">
388 |                         <pre class="swift" style="font-family:monospace;">
389 |                             func touchBar(_ touchBar: NSTouchBar, makeItemForIdentifier identifier:
390 |                             NSTouchBarItemIdentifier) -&gt; NSTouchBarItem? { switch identifier { case
391 |                             NSTouchBarItemIdentifier.infoLabelItem: let customViewItem = NSCustomTouchBarItem(identifier:
392 |                             identifier) customViewItem.view = NSTextField(labelWithString: "\u{1F30E}
393 |                             \u{1F4D3}") return customViewItem default: return nil } }
394 |                         </pre>
395 |                     </td>
396 |                 </tr>
397 |             </tbody>
398 |         </table>
399 |     </div>
400 |     <p>
401 |         By implementing
402 |         <code>
403 |             touchBar(\_:makeItemForIdentifier:)
404 |         </code>
405 |         , you can customize your touch bar items anyway you’d like. Here, you’ve
406 |         created a simple
407 |         <code>
408 |             NSCustomTouchBarItem
409 |         </code>
410 |         , and set its
411 |         <code>
412 |             view
413 |         </code>
414 |         to an
415 |         <code>
416 |             NSTextField
417 |         </code>
418 |         . Build and run your application, and you’ll now see the Touch Bar has
419 |         a new item.
420 |     </p>
421 |     <p>
422 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/First-Item--650x35.png"
423 |         alt="TouchBar FirstItem" width="650" height="35" class="alignnone size-large wp-image-147158">
424 |     </p>
425 |     <p>
426 |         Yay! You got a… label. That’s not super helpful, though. It’s time to
427 |         add some controls.
428 |     </p>
429 |     <p>
430 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/touchbar_ragecomic-650x480.png"
431 |         alt="touchbar_ragecomic" width="650" height="480" class="alignnone size-large wp-image-147142"
432 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/touchbar_ragecomic-650x480.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/10/touchbar_ragecomic-433x320.png 433w, https://koenig-media.raywenderlich.com/uploads/2016/10/touchbar_ragecomic.png 651w"
433 |         sizes="(max-width: 650px) 100vw, 650px">
434 |     </p>
435 |     <h2>
436 |         Text Fields and Scrubbers
437 |     </h2>
438 |     <p>
439 |         In
440 |         <code>
441 |             makeTouchBar()
442 |         </code>
443 |         , change the
444 |         <code>
445 |             defaultItemIdentifiers
446 |         </code>
447 |         to the following:
448 |     </p>
449 |     <div class="wp_codebox">
450 |         <table>
451 |             <tbody>
452 |                 <tr id="p1471184">
453 |                     <td class="code" id="p147118code4">
454 |                         <pre class="swift" style="font-family:monospace;">
455 |                             touchBar.defaultItemIdentifiers = [.infoLabelItem, .flexibleSpace, .ratingLabel,
456 |                             .ratingScrubber]
457 |                         </pre>
458 |                     </td>
459 |                 </tr>
460 |             </tbody>
461 |         </table>
462 |     </div>
463 |     <p>
464 |         This will allow the Touch Bar to show three new items: a label and a scrubber.
465 |         You’ve also added a
466 |         <code>
467 |             .flexibleSpace
468 |         </code>
469 |         . This is a dynamically sized space put in the Touch Bar to keeps things
470 |         grouped together nicely. You can also take advantage of
471 |         <code>
472 |             .fixedSpaceSmall
473 |         </code>
474 |         , and
475 |         <code>
476 |             .fixedSpaceLarge
477 |         </code>
478 |         for more static sized spacing.
479 |     </p>
480 |     <p>
481 |         You’ll still need to customize these items, just like the label you added.
482 |         Add the following
483 |         <code>
484 |             cases
485 |         </code>
486 |         to the
487 |         <code>
488 |             switch
489 |         </code>
490 |         in
491 |         <code>
492 |             touchBar(\_:makeItemForIdentifier:)
493 |         </code>
494 |         :
495 |     </p>
496 |     <div class="wp_codebox">
497 |         <table>
498 |             <tbody>
499 |                 <tr id="p1471185">
500 |                     <td class="code" id="p147118code5">
501 |                         <pre class="swift" style="font-family:monospace;">
502 |                             case NSTouchBarItemIdentifier.ratingLabel: // 1 let customViewItem = NSCustomTouchBarItem(identifier:
503 |                             identifier) customViewItem.view = NSTextField(labelWithString: "Rating")
504 |                             return customViewItem case NSTouchBarItemIdentifier.ratingScrubber: //
505 |                             2 let scrubberItem = NSCustomTouchBarItem(identifier: identifier) let scrubber
506 |                             = NSScrubber() scrubber.scrubberLayout = NSScrubberFlowLayout() scrubber.register(NSScrubberTextItemView.self,
507 |                             forItemIdentifier: "RatingScrubberItemIdentifier") scrubber.mode = .fixed
508 |                             scrubber.selectionBackgroundStyle = .roundedBackground scrubber.delegate
509 |                             = self scrubber.dataSource = self scrubberItem.view = scrubber scrubber.bind("selectedIndex",
510 |                             to: self, withKeyPath: #keyPath(rating), options: nil) return scrubberItem
511 |                         </pre>
512 |                     </td>
513 |                 </tr>
514 |             </tbody>
515 |         </table>
516 |     </div>
517 |     <p>
518 |         Step by step:
519 |     </p>
520 |     <ol>
521 |         <li>
522 |             A new item was created to show a label for ratings.
523 |         </li>
524 |         <li>
525 |             Here, a custom item is created to hold an
526 |             <code>
527 |                 NSScrubber
528 |             </code>
529 |             . This is a new control introduced for the Touch Bar. They behave similar
530 |             to a slider, but can be customized specifically for working in the bar.
531 |             Since scrubbers require a delegate to handle events, all you need to do
532 |             here is set the
533 |             <code>
534 |                 delegate
535 |             </code>
536 |             , which
537 |             <em>
538 |                 ViewController
539 |             </em>
540 |             already has implemented for you.
541 |         </li>
542 |     </ol>
543 |     <p>
544 |         Build and run, and you’ll now see two new items in your Touch Bar. Notice
545 |         that when you select an item from the scrubber, it will adjust the value
546 |         in the app’s window.
547 |     </p>
548 |     <p>
549 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/Rating-Items-650x35.png"
550 |         alt="Rating Items" width="650" height="35" class="alignnone size-large wp-image-147132"
551 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/Rating-Items-650x35.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/10/Rating-Items-480x26.png 480w"
552 |         sizes="(max-width: 650px) 100vw, 650px">
553 |     </p>
554 |     <h2>
555 |         Segmented Controls
556 |     </h2>
557 |     <p>
558 |         Next, you’re going to add a segmented control to the application. Since
559 |         this doesn’t work using the delegate pattern, you’ll get a chance to see
560 |         how to set up a
561 |         <em>
562 |             Target-Action
563 |         </em>
564 |         within the Touch Bar. Back in
565 |         <code>
566 |             makeTouchBar()
567 |         </code>
568 |         , you’ll need to add the last three items to
569 |         <code>
570 |             defaultItemIdentifiers
571 |         </code>
572 |         :
573 |     </p>
574 |     <div class="wp_codebox">
575 |         <table>
576 |             <tbody>
577 |                 <tr id="p1471186">
578 |                     <td class="code" id="p147118code6">
579 |                         <pre class="swift" style="font-family:monospace;">
580 |                             touchBar.defaultItemIdentifiers = [.infoLabelItem, .flexibleSpace, .ratingLabel,
581 |                             .ratingScrubber, .flexibleSpace, .visitedLabelItem, .visitedItem, .visitSegmentedItem]
582 |                         </pre>
583 |                     </td>
584 |                 </tr>
585 |             </tbody>
586 |         </table>
587 |     </div>
588 |     <p>
589 |         And add the last three
590 |         <code>
591 |             cases
592 |         </code>
593 |         to
594 |         <code>
595 |             touchBar(\_:makeItemForIdentifier:)
596 |         </code>
597 |         :
598 |     </p>
599 |     <div class="wp_codebox">
600 |         <table>
601 |             <tbody>
602 |                 <tr id="p1471187">
603 |                     <td class="code" id="p147118code7">
604 |                         <pre class="swift" style="font-family:monospace;">
605 |                             case NSTouchBarItemIdentifier.visitedLabelItem: // 1 let customViewItem
606 |                             = NSCustomTouchBarItem(identifier: identifier) customViewItem.view = NSTextField(labelWithString:
607 |                             "Times Visited") return customViewItem case NSTouchBarItemIdentifier.visitedItem:
608 |                             // 2 let customViewItem = NSCustomTouchBarItem(identifier: identifier)
609 |                             customViewItem.view = NSTextField(labelWithString: "--") customViewItem.view.bind("value",
610 |                             to: self, withKeyPath: #keyPath(visited), options: nil) return customViewItem
611 |                             case NSTouchBarItemIdentifier.visitSegmentedItem: // 3 let customActionItem
612 |                             = NSCustomTouchBarItem(identifier: identifier) let segmentedControl = NSSegmentedControl(images:
613 |                             [NSImage(named: NSImageNameRemoveTemplate)!, NSImage(named: NSImageNameAddTemplate)!],
614 |                             trackingMode: .momentary, target: self, action: #selector(changevisitedAmount(\_:)))
615 |                             segmentedControl.setWidth(40, forSegment: 0) segmentedControl.setWidth(40,
616 |                             forSegment: 1) customActionItem.view = segmentedControl return customActionItem
617 |                         </pre>
618 |                     </td>
619 |                 </tr>
620 |             </tbody>
621 |         </table>
622 |     </div>
623 |     <p>
624 |         For each step:
625 |     </p>
626 |     <ol>
627 |         <li>
628 |             This creates a simple label, just like in previous steps.
629 |         </li>
630 |         <li>
631 |             Here, you create another label, but you
632 |             <em>
633 |                 bind
634 |             </em>
635 |             the value of the text to a property. Just like the scrubber, binding values
636 |             to make updating Touch Bar items very easy.
637 |         </li>
638 |         <li>
639 |             Finally, you create a segmented control to be displayed in a touch bar
640 |             item. You can see that setting up a target and action is just the same
641 |             as it always is.
642 |         </li>
643 |     </ol>
644 |     <p>
645 |         Build and run, and you’ll see that you can interact with not only the
646 |         scrubber, but the segmented control as well. Not only that, values changed
647 |         in the Touch Bar are reflected in the window, and vice-versa.
648 |     </p>
649 |     <p>
650 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/Final-Touch-Bar-650x279.png"
651 |         alt="Final Touch Bar" width="650" height="279" class="alignnone size-large wp-image-147136"
652 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/Final-Touch-Bar-650x279.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/10/Final-Touch-Bar-480x206.png 480w"
653 |         sizes="(max-width: 650px) 100vw, 650px">
654 |     </p>
655 |     <h2>
656 |         Colored Buttons
657 |     </h2>
658 |     <p>
659 |         Finally, it would be nice to give the user a chance to save using the
660 |         Touch Bar. Since this button has a different outcome from the others, you’ll
661 |         take advantage of the new
662 |         <code>
663 |             bezelColor
664 |         </code>
665 |         property of
666 |         <code>
667 |             NSButton
668 |         </code>
669 |         to give it some color.
670 |     </p>
671 |     <p>
672 |         To do this, open
673 |         <em>
674 |             TouchBarIdentifiers.swift
675 |         </em>
676 |         , and in the
677 |         <code>
678 |             NSTouchBarItemIdentifier
679 |         </code>
680 |         extension, add the following to the end:
681 |     </p>
682 |     <div class="wp_codebox">
683 |         <table>
684 |             <tbody>
685 |                 <tr id="p1471188">
686 |                     <td class="code" id="p147118code8">
687 |                         <pre class="swift" style="font-family:monospace;">
688 |                             static let saveItem = NSTouchBarItemIdentifier("com.razeware.SaveItem")
689 |                         </pre>
690 |                     </td>
691 |                 </tr>
692 |             </tbody>
693 |         </table>
694 |     </div>
695 |     <p>
696 |         This creates a new identifier from scratch, which will allow you to add
697 |         a new button to the Touch Bar.
698 |     </p>
699 |     <p>
700 |         Go back to
701 |         <em>
702 |             ViewController.swift
703 |         </em>
704 |         , and add a new
705 |         <code>
706 |             .flexSpace
707 |         </code>
708 |         and
709 |         <code>
710 |             .saveItem
711 |         </code>
712 |         to the touch bar’s
713 |         <code>
714 |             defaultItemIdentifiers
715 |         </code>
716 |         :
717 |     </p>
718 |     <div class="wp_codebox">
719 |         <table>
720 |             <tbody>
721 |                 <tr id="p1471189">
722 |                     <td class="code" id="p147118code9">
723 |                         <pre class="swift" style="font-family:monospace;">
724 |                             touchBar.defaultItemIdentifiers = [.infoLabelItem, .flexibleSpace, .ratingLabel,
725 |                             .ratingScrubber, .flexibleSpace, .visitedLabelItem, .visitedItem, .visitSegmentedItem,
726 |                             .flexibleSpace, .saveItem]
727 |                         </pre>
728 |                     </td>
729 |                 </tr>
730 |             </tbody>
731 |         </table>
732 |     </div>
733 |     <p>
734 |         You’re almost done – all you have left is to handle configuring the new
735 |         item. In
736 |         <code>
737 |             touchBar(\_:makeItemForIdentifier:)
738 |         </code>
739 |         , add a final
740 |         <code>
741 |             case
742 |         </code>
743 |         before
744 |         <code>
745 |             default
746 |         </code>
747 |         :
748 |     </p>
749 |     <div class="wp_codebox">
750 |         <table>
751 |             <tbody>
752 |                 <tr id="p14711810">
753 |                     <td class="code" id="p147118code10">
754 |                         <pre class="swift" style="font-family:monospace;">
755 |                             case NSTouchBarItemIdentifier.saveItem: let saveItem = NSCustomTouchBarItem(identifier:
756 |                             identifier) let button = NSButton(title: "Save", target: self, action:
757 |                             #selector(save(\_:))) button.bezelColor = NSColor(red:0.35, green:0.61,
758 |                             blue:0.35, alpha:1.00) saveItem.view = button return saveItem
759 |                         </pre>
760 |                     </td>
761 |                 </tr>
762 |             </tbody>
763 |         </table>
764 |     </div>
765 |     <p>
766 |         Everything here should look pretty familiar to this point. All that is
767 |         new is setting the
768 |         <code>
769 |             bezelColor
770 |         </code>
771 |         to a familiar green :].
772 |     </p>
773 |     <p>
774 |         Build and run, and you’ll see that you have a nice green button, and it
775 |         has the same behavior as the
776 |         <em>
777 |             Save
778 |         </em>
779 |         button in the window.
780 |     </p>
781 |     <p>
782 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/10/Screen-Shot-2016-10-31-at-5.33.58-PM-2-650x260.png"
783 |         alt="Screen Shot 2016-10-31 at 5.33.58 PM (2)" width="650" height="260"
784 |         class="alignnone size-large wp-image-147175" srcset="https://koenig-media.raywenderlich.com/uploads/2016/10/Screen-Shot-2016-10-31-at-5.33.58-PM-2-650x260.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/10/Screen-Shot-2016-10-31-at-5.33.58-PM-2-480x192.png 480w"
785 |         sizes="(max-width: 650px) 100vw, 650px">
786 |     </p>
787 |     <h2>
788 |         Where To Go From Here?
789 |     </h2>
790 |     <div class="inline-video-ad" id="sub-banner-inline">
791 |         <div class="inline-video-ad-wrapper">
792 |             <a href="https://videos.raywenderlich.com/courses" sl-processed="1">
793 |                 <div class="col-wrapper">
794 |                     <div class="col">
795 |                         <img src="https://koenig-assets.raywenderlich.com/wp-content/themes/raywenderlich/images/global/video-yeti@2x.png"
796 |                         alt="yeti holding videos">
797 |                     </div>
798 |                     <div class="col large-col">
799 |                         <span>
800 |                             Want to learn even faster? Save time with our
801 |                             <span>
802 |                                 video courses
803 |                             </span>
804 |                         </span>
805 |                     </div>
806 |                 </div>
807 |             </a>
808 |         </div>
809 |     </div>
810 |     <p>
811 |         You can download the final sample project
812 |         <a href="https://koenig-media.raywenderlich.com/uploads/2016/10/TouchBar-Final-3.zip"
813 |         sl-processed="1">
814 |             here
815 |         </a>
816 |         .
817 |     </p>
818 |     <p>
819 |         That’s it for learning the basics of the Touch Bar. It should be pretty
820 |         clear Apple wanted to make this easy for you to get started to quickly
821 |         make these features available to your users.
822 |     </p>
823 |     <p>
824 |         In this tutorial, you learned the following:
825 |     </p>
826 |     <ol>
827 |         <li>
828 |             How to setup your app to show a Touch Bar
829 |         </li>
830 |         <li>
831 |             How to present static labels in a Touch Bar
832 |         </li>
833 |         <li>
834 |             How to add dynamic labels in a Touch Bar using binding
835 |         </li>
836 |         <li>
837 |             How to add controls to a Touch Bar, and handle their events
838 |         </li>
839 |     </ol>
840 |     <p>
841 |         Don’t stop with these examples! There are plenty of exciting features
842 |         to be found within
843 |         <code>
844 |             NSTouchBar
845 |         </code>
846 |         and
847 |         <code>
848 |             NSTouchBarItem
849 |         </code>
850 |         . Try adding a popover to your Touch Bar, or see how easy it is to format
851 |         text in your app. You can also check out creating Touch Bars in Interface
852 |         Builder.
853 |     </p>
854 |     <p>
855 |         If you have any questions, comments, or want to just want to rave (or
856 |         complain) about the new MacBook Pro, please join the forum discussion below!
857 |     </p>
858 | </div>


--------------------------------------------------------------------------------
/macOS Development for Beginners - Part 1.md:
--------------------------------------------------------------------------------
   1 | # macOS新手开发：第一部分
   2 | 
   3 | #### [原文地址](https://www.raywenderlich.com/151741/macos-development-beginners-part-1) 翻译：[DeveloperLx](http://weibo.com/DeveloperLx)
   4 | 
   5 | <div class="content-wrapper">
   6 |     <p>
   7 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature.png">
   8 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature-250x250.png"
   9 |             alt="macOSBeginner-feature" width="250" height="250" class="alignright size-thumbnail wp-image-154235"
  10 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature-250x250.png 250w, https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature-320x320.png 320w, https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature.png 500w, https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature-50x50.png 50w, https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature-64x64.png 64w, https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature-96x96.png 96w, https://koenig-media.raywenderlich.com/uploads/2017/01/macOSBeginner-feature-128x128.png 128w"
  11 |             sizes="(max-width: 250px) 100vw, 250px">
  12 |         </a>
  13 |     </p>
  14 |     <p>
  15 |         Do you want to learn how to develop your own apps for macOS?
  16 |     </p>
  17 |     <p>
  18 |         Good news! Apple makes developing for macOS incredibly easy, and in this
  19 |         tutorial series you’ll learn how. You’ll learn how to create your first
  20 |         app for macOS — even if you’re a complete beginner.
  21 |     </p>
  22 |     <ul>
  23 |         <li>
  24 |             In this first part you’ll first learn about how to obtain the tools you
  25 |             need to develop for macOS. Then, while creating a simple “Hello, World!”
  26 |             app, you’ll take a tour of Xcode, discovering how to run an app, edit code,
  27 |             design the UI and debug your code.
  28 |         </li>
  29 |         <li>
  30 |             In Parts 2 &amp; 3 of this series, you’ll create a more complex Egg Timer
  31 |             app and learn about the components that make up a macOS app, from how an
  32 |             app starts, to constructing the UI, all the way to handling user interaction.
  33 |         </li>
  34 |     </ul>
  35 |     <p>
  36 |         So what are you waiting for? The world of desktop apps awaits!
  37 |     </p>
  38 |     <div class="note">
  39 |         <p>
  40 |             <em>
  41 |                 Note:
  42 |             </em>
  43 |             Here’s some guidance of where to begin with this series:
  44 |         </p>
  45 |         <ul>
  46 |             <li>
  47 |                 If you are new to Swift, this series assumes some Swift knowledge, so
  48 |                 first check out our
  49 |                 <a href="https://www.raywenderlich.com/category/swift">
  50 |                     Swift tutorials
  51 |                 </a>
  52 |                 to get a great introduction.
  53 |             </li>
  54 |             <li>
  55 |                 If you already have iOS experience, this first part of the series will
  56 |                 be a review. Take a quick look through the topics to make sure and then
  57 |                 skip straight ahead to the next part of the series.
  58 |             </li>
  59 |             <li>
  60 |                 Otherwise, keep reading. This series is for complete beginners – no experience
  61 |                 of developing for iOS or macOS is required!
  62 |             </li>
  63 |         </ul>
  64 |     </div>
  65 |     <h2>
  66 |         Getting Started
  67 |     </h2>
  68 |     <p>
  69 |         To become a macOS developer, you will need two things:
  70 |     </p>
  71 |     <ol>
  72 |         <li>
  73 |             A Mac running macOS Sierra: The macOS operating system only runs on Apple
  74 |             computers, so you need a Mac both to develop and run macOS apps.
  75 |         </li>
  76 |         <li>
  77 |             Xcode: This is the IDE used to create macOS apps. You’ll learn how to
  78 |             install this later in this section.
  79 |         </li>
  80 |     </ol>
  81 |     <p>
  82 |         Once you’ve built your app, if you want to upload it to the App Store
  83 |         for distribution, you’ll also need to pay for an Apple developer account.
  84 |         But this is not a requirement until you are ready to send your app out
  85 |         to the world, and even then, only if you want to distribute through the
  86 |         Mac App Store. If you already have a developer account for distributing
  87 |         iOS apps, then you are all set – Apple has merged the developer accounts
  88 |         so that you only need a single account to distribute apps for any Apple
  89 |         devices.
  90 |     </p>
  91 |     <p>
  92 |         Unlike some other platforms, developing for macOS requires the installation
  93 |         of just one tool: Xcode. Xcode is an IDE (Integrated Development Environment)
  94 |         that includes everything you need to develop macOS, iOS, watchOS and tvOS
  95 |         apps.
  96 |     </p>
  97 |     <p>
  98 |         If you don’t have Xcode already, click on the Apple icon in the upper
  99 |         left of your menu and select
 100 |         <em>
 101 |             App Store…
 102 |         </em>
 103 |         to open the Mac App Store. You will need an App Store account to download
 104 |         Xcode even though Xcode is free.
 105 |     </p>
 106 |     <p>
 107 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/AppStore.png"
 108 |         alt="AppStore" width="300" height="298" class="alignleft size-full wp-image-152485"
 109 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/AppStore.png 300w, https://koenig-media.raywenderlich.com/uploads/2017/01/AppStore-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2017/01/AppStore-50x50.png 50w, https://koenig-media.raywenderlich.com/uploads/2017/01/AppStore-64x64.png 64w, https://koenig-media.raywenderlich.com/uploads/2017/01/AppStore-96x96.png 96w, https://koenig-media.raywenderlich.com/uploads/2017/01/AppStore-128x128.png 128w"
 110 |         sizes="(max-width: 300px) 100vw, 300px">
 111 |     </p>
 112 |     <p>
 113 |         Search for Xcode and click the
 114 |         <em>
 115 |             Install
 116 |         </em>
 117 |         button to start the download. Once it has downloaded and installed (which
 118 |         may take a while – it is quite large) open it from your
 119 |         <em>
 120 |             Applications
 121 |         </em>
 122 |         folder. The first time you run Xcode, and after every major update, it
 123 |         will ask you for permission to install additional components. Enter your
 124 |         password and allow Xcode to install these components.
 125 |     </p>
 126 |     <p>
 127 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/GetXcode.png"
 128 |         alt="GetXcode" width="700" height="320" class="aligncenter size-full wp-image-152486"
 129 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/GetXcode.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/GetXcode-480x219.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/GetXcode-650x297.png 650w"
 130 |         sizes="(max-width: 700px) 100vw, 700px">
 131 |     </p>
 132 |     <h2>
 133 |         Hello World!
 134 |     </h2>
 135 |     <p>
 136 |         Following the long-standing tradition when learning a new programming
 137 |         language or platform, you are going to start by creating a Hello World!
 138 |         app for macOS.
 139 |     </p>
 140 |     <p>
 141 |         Open Xcode if it is not already running. You should see a Welcome to Xcode
 142 |         window – if you don’t see it, choose
 143 |         <em>
 144 |             Welcome to Xcode
 145 |         </em>
 146 |         from the
 147 |         <em>
 148 |             Window
 149 |         </em>
 150 |         menu.
 151 |     </p>
 152 |     <p>
 153 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Welcome.png"
 154 |         alt="Welcome" width="500" height="293" class="aligncenter size-full wp-image-152487"
 155 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Welcome.png 500w, https://koenig-media.raywenderlich.com/uploads/2017/01/Welcome-480x281.png 480w"
 156 |         sizes="(max-width: 500px) 100vw, 500px">
 157 |     </p>
 158 |     <p>
 159 |         Click
 160 |         <em>
 161 |             Create a new Xcode project
 162 |         </em>
 163 |         and when the next dialog appears, choose
 164 |         <em>
 165 |             macOS
 166 |         </em>
 167 |         from the tabs across the top. Select
 168 |         <em>
 169 |             Cocoa Application
 170 |         </em>
 171 |         from inside the
 172 |         <em>
 173 |             Application
 174 |         </em>
 175 |         section and click
 176 |         <em>
 177 |             Next
 178 |         </em>
 179 |         .
 180 |     </p>
 181 |     <p>
 182 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Template.png"
 183 |         alt="Template" width="700" height="496" class="aligncenter size-full wp-image-152488"
 184 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Template.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Template-452x320.png 452w, https://koenig-media.raywenderlich.com/uploads/2017/01/Template-650x461.png 650w"
 185 |         sizes="(max-width: 700px) 100vw, 700px">
 186 |     </p>
 187 |     <p>
 188 |         Give your new app a name –
 189 |         <em>
 190 |             HelloWorld
 191 |         </em>
 192 |         – make sure that the language is set to
 193 |         <em>
 194 |             Swift
 195 |         </em>
 196 |         and that
 197 |         <em>
 198 |             Use Storyboards
 199 |         </em>
 200 |         is checked. Uncheck all the other options.
 201 |     </p>
 202 |     <p>
 203 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Options.png"
 204 |         alt="Options" width="700" height="503" class="aligncenter size-full wp-image-152489"
 205 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Options.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Options-445x320.png 445w, https://koenig-media.raywenderlich.com/uploads/2017/01/Options-650x467.png 650w"
 206 |         sizes="(max-width: 700px) 100vw, 700px">
 207 |     </p>
 208 |     <p>
 209 |         Click
 210 |         <em>
 211 |             Next
 212 |         </em>
 213 |         and
 214 |         <em>
 215 |             Create
 216 |         </em>
 217 |         to save your new app project.
 218 |     </p>
 219 |     <h2>
 220 |         Running Your App
 221 |     </h2>
 222 |     <p>
 223 |         Xcode has created the basic template for your app with all the required
 224 |         files. At this stage, it is fun to run the app and see how much you get
 225 |         for free.
 226 |     </p>
 227 |     <p>
 228 |         Click the
 229 |         <em>
 230 |             Play
 231 |         </em>
 232 |         button in the toolbar to run the app or use the
 233 |         <em>
 234 |             Command-R
 235 |         </em>
 236 |         shortcut. Xcode will now compile all of the code into machine code, bundle
 237 |         up the resources required by the app and then execute it.
 238 |     </p>
 239 |     <p>
 240 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Run.png"
 241 |         alt="Run" width="675" height="72" class="aligncenter size-full wp-image-152490"
 242 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Run.png 675w, https://koenig-media.raywenderlich.com/uploads/2017/01/Run-480x51.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/Run-650x69.png 650w"
 243 |         sizes="(max-width: 675px) 100vw, 675px">
 244 |     </p>
 245 |     <div class="note">
 246 |         <p>
 247 |             <em>
 248 |                 Note:
 249 |             </em>
 250 |             The first time you ever build and run an app in Xcode, you might be asked
 251 |             whether you want to
 252 |             <em>
 253 |                 Enable Developer Mode on this Mac
 254 |             </em>
 255 |             . You’re safe to select
 256 |             <em>
 257 |                 Enable
 258 |             </em>
 259 |             , at which point you may have to enter your password. Developer mode allows
 260 |             Xcode to attach a debugger to running processes – which will be extremely
 261 |             useful when building your application!
 262 |         </p>
 263 |     </div>
 264 |     <p>
 265 |         You should now see a blank window but don’t be disappointed – have a look
 266 |         at what you can already do:
 267 |     </p>
 268 |     <ul>
 269 |         <li>
 270 |             The window is resizable, it can be minimized and made full screen.
 271 |         </li>
 272 |         <li>
 273 |             There is a complete set of menus, many of which already work without you
 274 |             doing anything.
 275 |         </li>
 276 |         <li>
 277 |             The Dock icon has the usual menus.
 278 |         </li>
 279 |     </ul>
 280 |     <p>
 281 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/FirstRun.png"
 282 |         alt="FirstRun" width="500" height="328" class="aligncenter size-full wp-image-152491"
 283 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/FirstRun.png 500w, https://koenig-media.raywenderlich.com/uploads/2017/01/FirstRun-480x315.png 480w"
 284 |         sizes="(max-width: 500px) 100vw, 500px">
 285 |     </p>
 286 |     <p>
 287 |         But now it’s time for you to make the display a bit more interesting,
 288 |         so quit the app and go back to Xcode.
 289 |     </p>
 290 |     <h2>
 291 |         The Xcode Interface
 292 |     </h2>
 293 |     <p>
 294 |         Xcode packs a lot of features into a small package, so not everything
 295 |         is visible at one time. To be an efficient Xcode user, you need to know
 296 |         where everything is —&nbsp;and how to get to it.
 297 |     </p>
 298 |     <p>
 299 |         When you open a new project in Xcode, you have a window with a toolbar
 300 |         and three main panels.
 301 |     </p>
 302 |     <p>
 303 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Xcode1.png"
 304 |         alt="Xcode1" width="700" height="395" class="aligncenter size-full wp-image-152492"
 305 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Xcode1.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Xcode1-480x271.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/Xcode1-650x367.png 650w, https://koenig-media.raywenderlich.com/uploads/2017/01/Xcode1-266x151.png 266w"
 306 |         sizes="(max-width: 700px) 100vw, 700px">
 307 |     </p>
 308 |     <p>
 309 |         The left panel is the
 310 |         <em>
 311 |             Navigator
 312 |         </em>
 313 |         panel and has 8 display options across the top. The one you will mostly
 314 |         use is the first one –
 315 |         <em>
 316 |             Project
 317 |         </em>
 318 |         – which lists all the files in your project and allows you to click on
 319 |         any one to edit it.
 320 |     </p>
 321 |     <p>
 322 |         The center panel is the
 323 |         <em>
 324 |             Editor
 325 |         </em>
 326 |         panel and will display whatever you have selected from the
 327 |         <em>
 328 |             Project Navigator
 329 |         </em>
 330 |         .
 331 |     </p>
 332 |     <p>
 333 |         The right panel is the
 334 |         <em>
 335 |             Utilities
 336 |         </em>
 337 |         panel and it will vary depending on what you are looking at in the
 338 |         <em>
 339 |             Editor
 340 |         </em>
 341 |         panel.
 342 |     </p>
 343 |     <h2>
 344 |         Adding the UI
 345 |     </h2>
 346 |     <p>
 347 |         You design the user interface using a Storyboard. Your app already has
 348 |         a storyboard, so go to the
 349 |         <em>
 350 |             Project Navigator
 351 |         </em>
 352 |         and click on
 353 |         <em>
 354 |             Main.storyboard
 355 |         </em>
 356 |         to show it in the Editor panel.
 357 |     </p>
 358 |     <p>
 359 |         Your display has just changed dramatically! In the Editor panel, you can
 360 |         now see the Document Outline and the visual editor for the UI.
 361 |     </p>
 362 |     <p>
 363 |         Have a look at the things you can see in the visual editor. There are
 364 |         three main areas, each of which also has a textual representation in the
 365 |         Document Outline:
 366 |     </p>
 367 |     <ul>
 368 |         <li>
 369 |             <em>
 370 |                 Application Scene
 371 |             </em>
 372 |             : The menu bar and items.
 373 |         </li>
 374 |         <li>
 375 |             <em>
 376 |                 Window Controller Scene
 377 |             </em>
 378 |             : Configures how the window will behave.
 379 |         </li>
 380 |         <li>
 381 |             <em>
 382 |                 View Controller Scene
 383 |             </em>
 384 |             : Where your UI elements will go.
 385 |         </li>
 386 |     </ul>
 387 |     <p>
 388 |         In the
 389 |         <em>
 390 |             Utilities
 391 |         </em>
 392 |         panel, you see a top section with 8 tabs and a bottom section with 4 tabs.
 393 |     </p>
 394 |     <p>
 395 |         The bottom section switches between various things you can insert into
 396 |         your project. Right now you want to insert UI elements, so select the
 397 |         <em>
 398 |             Object library
 399 |         </em>
 400 |         which is the third from the left.
 401 |     </p>
 402 |     <p>
 403 |         In the filter at the bottom, type “text” to reduce the number of choices,
 404 |         and drag a
 405 |         <em>
 406 |             Text Field
 407 |         </em>
 408 |         into your
 409 |         <em>
 410 |             View Controller Scene
 411 |         </em>
 412 |         .
 413 |     </p>
 414 |     <p>
 415 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Xcode2.png"
 416 |         alt="Xcode2" width="700" height="498" class="aligncenter size-full wp-image-152493"
 417 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Xcode2.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Xcode2-450x320.png 450w, https://koenig-media.raywenderlich.com/uploads/2017/01/Xcode2-650x462.png 650w"
 418 |         sizes="(max-width: 700px) 100vw, 700px">
 419 |     </p>
 420 |     <p>
 421 |         Now filter for “button” and drag a
 422 |         <em>
 423 |             Push Button
 424 |         </em>
 425 |         into the
 426 |         <em>
 427 |             View Controller Scene
 428 |         </em>
 429 |         . Finally, add a
 430 |         <em>
 431 |             Label
 432 |         </em>
 433 |         .
 434 |     </p>
 435 |     <p>
 436 |         Now, build and run the app using the
 437 |         <em>
 438 |             Play
 439 |         </em>
 440 |         button or
 441 |         <em>
 442 |             Command-R
 443 |         </em>
 444 |         . You will see these 3 UI elements. Try typing in the text field – it
 445 |         already supports all the standard editing shortcuts: copy, paste, cut,
 446 |         select all, undo, redo and so on. But the button does nothing, and the
 447 |         label just shows “Label”, so it is time to make things more interactive.
 448 |     </p>
 449 |     <p>
 450 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Run2.png"
 451 |         alt="Run2" width="500" height="304" class="aligncenter size-full wp-image-152494"
 452 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Run2.png 500w, https://koenig-media.raywenderlich.com/uploads/2017/01/Run2-480x292.png 480w"
 453 |         sizes="(max-width: 500px) 100vw, 500px">
 454 |     </p>
 455 |     <h2>
 456 |         Configuring the UI
 457 |     </h2>
 458 |     <p>
 459 |         Go back to
 460 |         <em>
 461 |             Main.storyboard
 462 |         </em>
 463 |         and click on the button to select it. In the
 464 |         <em>
 465 |             Utilities
 466 |         </em>
 467 |         panel on the right, make sure the
 468 |         <em>
 469 |             Attributes Inspector
 470 |         </em>
 471 |         is showing – the 4th button across the top.
 472 |     </p>
 473 |     <p>
 474 |         Change the title of the button to “Say Hello”. The button may not be wide
 475 |         enough to show all the text, so go to the
 476 |         <em>
 477 |             Editor
 478 |         </em>
 479 |         menu and select
 480 |         <em>
 481 |             Size to Fit Content
 482 |         </em>
 483 |         which should fix that. (If Size to Fit Content is disabled, click somewhere
 484 |         to de-select the button, then re-select it and try again.)
 485 |     </p>
 486 |     <p>
 487 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Button.png"
 488 |         alt="Button" width="700" height="251" class="aligncenter size-full wp-image-152495"
 489 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Button.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Button-480x172.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/Button-650x233.png 650w"
 490 |         sizes="(max-width: 700px) 100vw, 700px">
 491 |     </p>
 492 |     <p>
 493 |         Now click in the text field to select it. For this app, the user is going
 494 |         to type their name in here, and when they click the button, the app will
 495 |         show “Hello name-goes-here!” in the label. To help the users, add some
 496 |         placeholder text to the text field using the
 497 |         <em>
 498 |             Attributes Inspector
 499 |         </em>
 500 |         .
 501 |     </p>
 502 |     <p>
 503 |         Stretch the text field out a bit to allow for long names and position
 504 |         the button to the right of it. When dragging objects around in the
 505 |         <em>
 506 |             View Controller Scene
 507 |         </em>
 508 |         , blue lines will appear to help you align and position the objects based
 509 |         on Apple’s Human Interface Guidelines.
 510 |     </p>
 511 |     <p>
 512 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/TextField.png"
 513 |         alt="TextField" width="700" height="398" class="aligncenter size-full wp-image-152496"
 514 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/TextField.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/TextField-480x273.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/TextField-650x370.png 650w, https://koenig-media.raywenderlich.com/uploads/2017/01/TextField-266x151.png 266w"
 515 |         sizes="(max-width: 700px) 100vw, 700px">
 516 |     </p>
 517 |     <p>
 518 |         Position the label below the text field and button. Since the label is
 519 |         going to be important, make it use a larger font. Select the label and
 520 |         in the
 521 |         <em>
 522 |             Attributes Inspector
 523 |         </em>
 524 |         , change the font to
 525 |         <em>
 526 |             System Regular 30
 527 |         </em>
 528 |         .
 529 |     </p>
 530 |     <p>
 531 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/FontSize.png"
 532 |         alt="FontSize" width="700" height="225" class="aligncenter size-full wp-image-152497"
 533 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/FontSize.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/FontSize-480x154.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/FontSize-650x209.png 650w"
 534 |         sizes="(max-width: 700px) 100vw, 700px">
 535 |     </p>
 536 |     <p>
 537 |         How about making the text red to add even more excitement?
 538 |     </p>
 539 |     <p>
 540 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Color.png"
 541 |         alt="Color" width="700" height="461" class="aligncenter size-full wp-image-152498"
 542 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Color.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Color-480x316.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/Color-650x428.png 650w"
 543 |         sizes="(max-width: 700px) 100vw, 700px">
 544 |     </p>
 545 |     <p>
 546 |         You can’t tell how long a name a user might enter, so resize the field
 547 |         to fit the height of that font and to almost fill the width of the window.
 548 |     </p>
 549 |     <p>
 550 |         Build &amp; run the app to check that your UI changes have taken effect.
 551 |         Once you are happy with the look of the text in the label, delete the label’s
 552 |         <em>
 553 |             Title
 554 |         </em>
 555 |         so that the label starts off empty.
 556 |     </p>
 557 |     <p>
 558 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/RunWithUI.png"
 559 |         alt="RunWithUI" width="700" height="426" class="aligncenter size-full wp-image-152499"
 560 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/RunWithUI.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/RunWithUI-480x292.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/RunWithUI-650x396.png 650w"
 561 |         sizes="(max-width: 700px) 100vw, 700px">
 562 |     </p>
 563 |     <h2>
 564 |         Connecting the UI to the code
 565 |     </h2>
 566 |     <p>
 567 |         Your app still doesn’t do what you want, but in order for that to work,
 568 |         you need to start adding code and that code has to be able to communicate
 569 |         with the UI. To make those linkages, you are going to use Xcode’s
 570 |         <em>
 571 |             Assistant Editor
 572 |         </em>
 573 |         . With the
 574 |         <em>
 575 |             Main.storyboard
 576 |         </em>
 577 |         visible, option-click on
 578 |         <em>
 579 |             ViewController.swift
 580 |         </em>
 581 |         in the
 582 |         <em>
 583 |             Project Navigator
 584 |         </em>
 585 |         . This will create a second editor panel containing the ViewController
 586 |         code.
 587 |     </p>
 588 |     <p>
 589 |         Depending on the size of your monitor, things may be looking a bit cramped
 590 |         now, so use the rightmost button in the Toolbar to hide the Utilities.
 591 |         If you need even more space, hide the Navigator.
 592 |     </p>
 593 |     <p>
 594 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Assistant.png"
 595 |         alt="Assistant" width="700" height="330" class="aligncenter size-full wp-image-152500"
 596 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Assistant.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Assistant-480x226.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/Assistant-650x306.png 650w"
 597 |         sizes="(max-width: 700px) 100vw, 700px">
 598 |     </p>
 599 |     <p>
 600 |         Select the text field. Hold down the Control key and drag from the text
 601 |         field into the top of the
 602 |         <code>
 603 |             ViewController
 604 |         </code>
 605 |         class definition. Let go and enter
 606 |         <code>
 607 |             nameField
 608 |         </code>
 609 |         in the name box of the popup, then click
 610 |         <em>
 611 |             Connect
 612 |         </em>
 613 |         .
 614 |     </p>
 615 |     <p>
 616 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/AddOutlet.png"
 617 |         alt="AddOutlet" width="700" height="258" class="aligncenter size-full wp-image-152501"
 618 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/AddOutlet.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/AddOutlet-480x177.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/AddOutlet-650x240.png 650w"
 619 |         sizes="(max-width: 700px) 100vw, 700px">
 620 |     </p>
 621 |     <p>
 622 |         Do the same with the label, naming it
 623 |         <code>
 624 |             helloLabel
 625 |         </code>
 626 |         .
 627 |     </p>
 628 |     <p>
 629 |         Looking at the code that Xcode has generated, you see that these are both
 630 |         marked with
 631 |         <code>
 632 |             @IBOutlet
 633 |         </code>
 634 |         . This is short for Interface Builder Outlet and is how you tell the storyboard
 635 |         editor that these object names are available for linking to a visual object.
 636 |     </p>
 637 |     <p>
 638 |         For the button, the code does not need to have a name for it, but it does
 639 |         need to know when a user clicks the button. This calls for an
 640 |         <code>
 641 |             @IBAction
 642 |         </code>
 643 |         instead of an
 644 |         <code>
 645 |             @IBOutlet
 646 |         </code>
 647 |         .
 648 |     </p>
 649 |     <p>
 650 |         Select the button and Control-Drag into
 651 |         <em>
 652 |             ViewController.swift
 653 |         </em>
 654 |         as before. This time, change the
 655 |         <em>
 656 |             Connection
 657 |         </em>
 658 |         popup to
 659 |         <em>
 660 |             Action
 661 |         </em>
 662 |         and set the name to
 663 |         <code>
 664 |             sayButtonClicked
 665 |         </code>
 666 |         . This creates the function that will be called when the button is clicked.
 667 |     </p>
 668 |     <p>
 669 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/AddAction.png"
 670 |         alt="AddAction" width="700" height="265" class="aligncenter size-full wp-image-152502"
 671 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/AddAction.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/AddAction-480x182.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/AddAction-650x246.png 650w"
 672 |         sizes="(max-width: 700px) 100vw, 700px">
 673 |     </p>
 674 |     <p>
 675 |         Everything is now in place to edit the code. Close the
 676 |         <em>
 677 |             Assistant Editor
 678 |         </em>
 679 |         using the X in the top right corner and switch to
 680 |         <em>
 681 |             ViewController.swift
 682 |         </em>
 683 |         . If you had hidden the
 684 |         <em>
 685 |             Navigator
 686 |         </em>
 687 |         , click the toggle button in the top right, or press
 688 |         <em>
 689 |             Command-1
 690 |         </em>
 691 |         to jump directly to the
 692 |         <em>
 693 |             Project Navigator
 694 |         </em>
 695 |         .
 696 |     </p>
 697 |     <p>
 698 |         Enter the following code into
 699 |         <code>
 700 |             sayButtonClicked
 701 |         </code>
 702 |         .
 703 |     </p>
 704 |     <div class="wp_codebox">
 705 |         <table>
 706 |             <tbody>
 707 |                 <tr id="p1517411">
 708 |                     <td class="code" id="p151741code1">
 709 |                         <pre class="swift" style="font-family:monospace;">
 710 |                             var name = nameField.stringValue if name.isEmpty { name = "World" } let
 711 |                             greeting = "Hello \(name)!" helloLabel.stringValue = greeting
 712 |                         </pre>
 713 |                     </td>
 714 |                 </tr>
 715 |             </tbody>
 716 |         </table>
 717 |     </div>
 718 |     <p>
 719 |         The complete code in
 720 |         <em>
 721 |             ViewController.swift
 722 |         </em>
 723 |         now looks like this (after deleting the usual copyright notices at the
 724 |         top). The blobs beside the line numbers indicate a connection to the interface
 725 |         in the storyboard.
 726 |     </p>
 727 |     <p>
 728 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/ViewControllerSwift.png"
 729 |         alt="ViewControllerSwift" width="965" height="836" class="aligncenter size-full wp-image-152503"
 730 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/ViewControllerSwift.png 965w, https://koenig-media.raywenderlich.com/uploads/2017/01/ViewControllerSwift-369x320.png 369w, https://koenig-media.raywenderlich.com/uploads/2017/01/ViewControllerSwift-577x500.png 577w"
 731 |         sizes="(max-width: 965px) 100vw, 965px">
 732 |     </p>
 733 |     <p>
 734 |         Build and run the app.
 735 |     </p>
 736 |     <p>
 737 |         Click the
 738 |         <em>
 739 |             Say Hello
 740 |         </em>
 741 |         button without entering anything and you will see “Hello World!”. Now
 742 |         type in your name and click the button again to see your own personal greeting.
 743 |     </p>
 744 |     <p>
 745 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/HelloWorld.png"
 746 |         alt="HelloWorld" width="500" height="304" class="aligncenter size-full wp-image-152504"
 747 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/HelloWorld.png 500w, https://koenig-media.raywenderlich.com/uploads/2017/01/HelloWorld-480x292.png 480w"
 748 |         sizes="(max-width: 500px) 100vw, 500px">
 749 |     </p>
 750 |     <h2>
 751 |         Debugging
 752 |     </h2>
 753 |     <p>
 754 |         Sometimes, we programmers make mistakes – hard to believe I know, but
 755 |         trust me, it happens. And when it does, we need to be able to debug our
 756 |         code. Xcode allows us to stop the code at any point and step through line
 757 |         by line, checking the values of the variables at each point so that we
 758 |         can find the error.
 759 |     </p>
 760 |     <p>
 761 |         Go to
 762 |         <code>
 763 |             sayButtonClicked
 764 |         </code>
 765 |         in
 766 |         <em>
 767 |             ViewController.swift
 768 |         </em>
 769 |         and click on the line number beside the
 770 |         <code>
 771 |             var name =
 772 |         </code>
 773 |         line. A blue pointed rectangle will appear. This is an active breakpoint
 774 |         and when you click the button, the debugger will stop here. Click it again
 775 |         and it will turn pale blue. It is now an inactive breakpoint and will not
 776 |         stop the code and start the debugger. To remove the breakpoint completely,
 777 |         drag it out of the line numbers gutter.
 778 |     </p>
 779 |     <p>
 780 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Breakpoint.png"
 781 |         alt="Breakpoint" width="700" height="221" class="aligncenter size-full wp-image-152505"
 782 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Breakpoint.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Breakpoint-480x152.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/Breakpoint-650x205.png 650w"
 783 |         sizes="(max-width: 700px) 100vw, 700px">
 784 |     </p>
 785 |     <p>
 786 |         Add the breakpoint again and run the app. Click the
 787 |         <em>
 788 |             Say Hello
 789 |         </em>
 790 |         button. Xcode will come to the front with the breakpoint line of code
 791 |         highlighted. In the bottom of the
 792 |         <em>
 793 |             Editor
 794 |         </em>
 795 |         panel, there will now be two new sections:
 796 |         <em>
 797 |             Variables
 798 |         </em>
 799 |         and
 800 |         <em>
 801 |             Console
 802 |         </em>
 803 |         . The
 804 |         <em>
 805 |             Variables
 806 |         </em>
 807 |         section shows the variables used in this function as well as
 808 |         <code>
 809 |             self
 810 |         </code>
 811 |         – the View Controller, and
 812 |         <code>
 813 |             sender
 814 |         </code>
 815 |         – the button.
 816 |     </p>
 817 |     <p>
 818 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Stopped.png"
 819 |         alt="Stopped" width="700" height="384" class="aligncenter size-full wp-image-152506"
 820 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Stopped.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Stopped-480x263.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/Stopped-650x357.png 650w"
 821 |         sizes="(max-width: 700px) 100vw, 700px">
 822 |     </p>
 823 |     <p>
 824 |         Above the
 825 |         <em>
 826 |             Variables
 827 |         </em>
 828 |         display is a set of buttons for controlling the debugger. Mouse over each
 829 |         one and read the tooltop to see what it does. Click the
 830 |         <em>
 831 |             Step Over
 832 |         </em>
 833 |         button to move to the next line.
 834 |     </p>
 835 |     <p>
 836 |         In the
 837 |         <em>
 838 |             Variables
 839 |         </em>
 840 |         display, you can check that
 841 |         <code>
 842 |             name
 843 |         </code>
 844 |         is an empty string, so click
 845 |         <em>
 846 |             Step Over
 847 |         </em>
 848 |         twice more. The debugger will move into and through the
 849 |         <code>
 850 |             if
 851 |         </code>
 852 |         statement and set the
 853 |         <code>
 854 |             name
 855 |         </code>
 856 |         variable to “World”.
 857 |     </p>
 858 |     <p>
 859 |         Select the
 860 |         <code>
 861 |             name
 862 |         </code>
 863 |         variable in the
 864 |         <em>
 865 |             Variables
 866 |         </em>
 867 |         display and click the
 868 |         <em>
 869 |             Quick Look
 870 |         </em>
 871 |         button below to see the contents. Now click the
 872 |         <em>
 873 |             Print Description
 874 |         </em>
 875 |         button to see the information printed in the
 876 |         <em>
 877 |             Console
 878 |         </em>
 879 |         . If the “World” value had not been set correctly, you would have been
 880 |         able to see that here and work out how to fix your code.
 881 |     </p>
 882 |     <p>
 883 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/PrintVariable.png"
 884 |         alt="PrintVariable" width="700" height="384" class="aligncenter size-full wp-image-152507"
 885 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/PrintVariable.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/PrintVariable-480x263.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/PrintVariable-650x357.png 650w"
 886 |         sizes="(max-width: 700px) 100vw, 700px">
 887 |     </p>
 888 |     <p>
 889 |         When you have checked the contents of the name variable, click the
 890 |         <em>
 891 |             Continue program execution
 892 |         </em>
 893 |         button to stop debugging and let the program move on. Use the button in
 894 |         the top right to hide the Debug area.
 895 |     </p>
 896 |     <h2>
 897 |         Images
 898 |     </h2>
 899 |     <p>
 900 |         In addition to code and user interfaces, your app will also need some
 901 |         artwork. Due to the different screen types (Retina and non-Retina), you
 902 |         often need to provide multiple versions of each asset. To simplify this
 903 |         process, Xcode uses
 904 |         <em>
 905 |             Asset Libraries
 906 |         </em>
 907 |         to store and organize the assets that accompany the app.
 908 |     </p>
 909 |     <p>
 910 |         In the
 911 |         <em>
 912 |             Project Navigator
 913 |         </em>
 914 |         , click on
 915 |         <em>
 916 |             Assets.xcassets
 917 |         </em>
 918 |         . The only item there so far is
 919 |         <em>
 920 |             AppIcon
 921 |         </em>
 922 |         which will contain the various images needed to display the app icon in
 923 |         all the required resolutions. Click on
 924 |         <em>
 925 |             AppIcon
 926 |         </em>
 927 |         – you can see that it wants 10 different images to cover all the possibilities,
 928 |         but if you supply any one of these, Xcode will use it as best it can. This
 929 |         is not good practice, as you should supply all the required icon sizes,
 930 |         but for this tutorial one icon will be sufficient.
 931 |     </p>
 932 |     <p>
 933 |         Download the
 934 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/02/rw_logo.png.zip">
 935 |             sample icon
 936 |         </a>
 937 |         which is a 512 x 512 pixel image. Drag it into the
 938 |         <em>
 939 |             Mac 512pt 1x
 940 |         </em>
 941 |         box.
 942 |     </p>
 943 |     <p>
 944 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/AppIcon.png"
 945 |         alt="AppIcon" width="700" height="443" class="aligncenter size-full wp-image-152508"
 946 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/AppIcon.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/AppIcon-480x304.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/AppIcon-650x411.png 650w"
 947 |         sizes="(max-width: 700px) 100vw, 700px">
 948 |     </p>
 949 |     <p>
 950 |         Build and run the app to see the icon in the Dock menu. If you still see
 951 |         the default app icon, quit the HelloWorld app, go back to Xcode and choose
 952 |         <em>
 953 |             Clean
 954 |         </em>
 955 |         from the
 956 |         <em>
 957 |             Product
 958 |         </em>
 959 |         menu, then run the app again.
 960 |     </p>
 961 |     <p>
 962 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/DockIcon.png"
 963 |         alt="DockIcon" width="128" height="134" class="aligncenter size-full wp-image-152509">
 964 |     </p>
 965 |     <h2>
 966 |         Getting Help
 967 |     </h2>
 968 |     <p>
 969 |         As well as being an editor, Xcode also contains all the documentation
 970 |         you will need for writing macOS apps.
 971 |     </p>
 972 |     <p>
 973 |         Go to the
 974 |         <em>
 975 |             Help
 976 |         </em>
 977 |         menu and choose
 978 |         <em>
 979 |             Documentation and API Reference
 980 |         </em>
 981 |         . Search for
 982 |         <em>
 983 |             NSButton
 984 |         </em>
 985 |         . Make sure Swift is the selected language, then click the top search
 986 |         result so that you can read all the details about buttons and button properties.
 987 |     </p>
 988 |     <p>
 989 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/Docs.png"
 990 |         alt="Docs" width="600" height="485" class="aligncenter size-full wp-image-152511"
 991 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Docs.png 600w, https://koenig-media.raywenderlich.com/uploads/2017/01/Docs-396x320.png 396w"
 992 |         sizes="(max-width: 600px) 100vw, 600px">
 993 |     </p>
 994 |     <p>
 995 |         There is also a way to get to relevant documentation directly from your
 996 |         code. Go back to
 997 |         <em>
 998 |             ViewController.swift
 999 |         </em>
1000 |         and find the first line in
1001 |         <code>
1002 |             sayButtonClicked
1003 |         </code>
1004 |         .
1005 |         <em>
1006 |             Option-click
1007 |         </em>
1008 |         on the word
1009 |         <code>
1010 |             stringValue
1011 |         </code>
1012 |         . A popup appears with a short description. At the bottom of the popup
1013 |         is a link to
1014 |         <em>
1015 |             Property Reference
1016 |         </em>
1017 |         . Click this link and the documentation will open to show more information.
1018 |     </p>
1019 |     <p>
1020 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/01/OptionClick.png"
1021 |         alt="OptionClick" width="600" height="412" class="aligncenter size-full wp-image-152512"
1022 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/OptionClick.png 600w, https://koenig-media.raywenderlich.com/uploads/2017/01/OptionClick-466x320.png 466w"
1023 |         sizes="(max-width: 600px) 100vw, 600px">
1024 |     </p>
1025 |     <p>
1026 |         <em>
1027 |             Option-clicking
1028 |         </em>
1029 |         is often a really good way to learn, and you can even add documentation
1030 |         to your own functions so that it shows up in the same way.
1031 |     </p>
1032 |     <p>
1033 |         The
1034 |         <em>
1035 |             Help
1036 |         </em>
1037 |         menu also includes
1038 |         <em>
1039 |             Xcode Help
1040 |         </em>
1041 |         for specific information about the Xcode environment.
1042 |     </p>
1043 |     <h2>
1044 |         Where to Go From Here?
1045 |     </h2>
1046 |     <div class="inline-video-ad" id="sub-banner-inline">
1047 |         <div class="inline-video-ad-wrapper">
1048 |             <a href="https://videos.raywenderlich.com/courses">
1049 |                 <div class="col-wrapper">
1050 |                     <div class="col">
1051 |                         <img src="https://koenig-assets.raywenderlich.com/wp-content/themes/raywenderlich/images/global/video-yeti@2x.png"
1052 |                         alt="yeti holding videos">
1053 |                     </div>
1054 |                     <div class="col large-col">
1055 |                         <span>
1056 |                             Want to learn even faster? Save time with our
1057 |                             <span>
1058 |                                 video courses
1059 |                             </span>
1060 |                         </span>
1061 |                     </div>
1062 |                 </div>
1063 |             </a>
1064 |         </div>
1065 |     </div>
1066 |     <p>
1067 |         In the
1068 |         <a href="https://www.raywenderlich.com/151746/macos-development-beginners-part-2">
1069 |             next part
1070 |         </a>
1071 |         of this tutorial series, you will start to create a more complicated app.
1072 |         Hope to see you there!
1073 |     </p>
1074 |     <p>
1075 |         If you have any questions or comments on this tutorial series, please
1076 |         join the discussion below!
1077 |     </p>
1078 | </div>


--------------------------------------------------------------------------------
/Unit Testing on macOS - Part 1:2.md:
--------------------------------------------------------------------------------
   1 | # 单元测试：1/2部分
   2 | 
   3 | #### [原文地址](https://www.raywenderlich.com/141405/unit-testing-macos-part-12) 翻译：[DeveloperLx](http://weibo.com/DeveloperLx)
   4 | 
   5 | <div class="content-wrapper">
   6 |     <p>
   7 |         <a href="https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature.png"
   8 |         sl-processed="1">
   9 |             <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature-250x250.png"
  10 |             alt="Unit-Testing-macOS" width="250" height="250" class="alignright size-thumbnail wp-image-142750"
  11 |             srcset="https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature-250x250.png 250w, https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature-320x320.png 320w, https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature.png 500w, https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature-50x50.png 50w, https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature-64x64.png 64w, https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature-96x96.png 96w, https://koenig-media.raywenderlich.com/uploads/2016/08/UnitTesting-1-feature-128x128.png 128w"
  12 |             sizes="(max-width: 250px) 100vw, 250px">
  13 |         </a>
  14 |     </p>
  15 |     <p>
  16 |         单元测试是我们都深深知道需要去做的事之一，但看起来非常得困难和无聊，是一个很辛苦的工作。
  17 |     </p>
  18 |     <p>
  19 |         编写代码去完成令人激动的事情是多么得有趣，为何人们要花费一半的时间编写代码只是为了进行测试？
  20 |     </p>
  21 |     <p>
  22 |         为了
  23 |         <em>
  24 |             把握性
  25 |         </em>
  26 |         ！在本教程中，你将学习如何测试你的代码，以此增强对代码能够正确完成你所期望事情，适应变化，不造成问题的把握力。
  27 |     </p>
  28 |     <h2>
  29 |         入门
  30 |     </h2>
  31 |     <p>
  32 |         本项目使用Swift 3语言，Xcode 8 beta 6以上版本。下载
  33 |         <a href="https://koenig-media.raywenderlich.com/uploads/2016/08/HighRoller-starter.zip"
  34 |         sl-processed="1">
  35 |             起始项目
  36 |         </a>
  37 |         并打开。
  38 |     </p>
  39 |     <p>
  40 |         假如你已完成过raywenderlich.com中这里的其它教程，你可能会期望拿到这里运行。但这次不会去测试这些。点击
  41 |         <em>
  42 |             Product
  43 |         </em>
  44 |         菜单并选择
  45 |         <em>
  46 |             Test
  47 |         </em>
  48 |         。注意快捷键 —
  49 |         <em>
  50 |             Command-U
  51 |         </em>
  52 |         — 你将在本教程中使用多次。
  53 |     </p>
  54 |     <p>
  55 |         当你运行测试时，Xcode将构建app，你会看到几秒钟app的窗口，然后才给出信息“Test Succeeded”。在左侧的
  56 |         <em>
  57 |             Navigator
  58 |         </em>
  59 |         面板中，选择
  60 |         <em>
  61 |             Test navigator
  62 |         </em>
  63 |         。
  64 |     </p>
  65 |     <p>
  66 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/TestNavigator2.png"
  67 |         alt="TestNavigator2" width="513" height="346" class="aligncenter size-full wp-image-141436"
  68 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/08/TestNavigator2.png 513w, https://koenig-media.raywenderlich.com/uploads/2016/08/TestNavigator2-474x320.png 474w"
  69 |         sizes="(max-width: 513px) 100vw, 513px">
  70 |     </p>
  71 |     <p>
  72 |         这里展示了默认添加的三个测试；每个的旁边都有一个绿色的标记，表示该测试已通过。要查看包含这些测试的文件，可以点击
  73 |         <em>
  74 |             Test Navigator
  75 |         </em>
  76 |         中的第二行
  77 |         <em>
  78 |             High RollerTests
  79 |         </em>
  80 |         ，它带有一个大写T的图标，表示其层级更高。
  81 |     </p>
  82 |     <p>
  83 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/DefaultTests3.png"
  84 |         alt="DefaultTests3" width="700" height="395" class="aligncenter size-full wp-image-142138"
  85 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/08/DefaultTests3.png 700w, https://koenig-media.raywenderlich.com/uploads/2016/08/DefaultTests3-480x271.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/08/DefaultTests3-650x367.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/08/DefaultTests3-266x151.png 266w"
  86 |         sizes="(max-width: 700px) 100vw, 700px">
  87 |     </p>
  88 |     <p>
  89 |         这里有一些很重要的事值得注意：
  90 |     </p>
  91 |     <ul>
  92 |         <li>
  93 |             导入的
  94 |             <em>
  95 |                 XCTest
  96 |             </em>
  97 |             是由Xcode提供的测试框架。
  98 |             <code>
  99 |                 @testable import High_Roller
 100 |             </code>
 101 |             则让代码可以访问
 102 |             <code>
 103 |                 High_Roller
 104 |             </code>
 105 |             模块中的所有代码。每个测试文件都需要这样的两个导入。
 106 |         </li>
 107 |         <li>
 108 |             <code>
 109 |                 setup()
 110 |             </code>
 111 |             和
 112 |             <code>
 113 |                 tearDown()
 114 |             </code>
 115 |             ：两个方法会在:
 116 |             <em>
 117 |                 每个单个的
 118 |             </em>
 119 |             测试方法被调用之前和之后调用。
 120 |         </li>
 121 |         <li>
 122 |             <code>
 123 |                 testExample()
 124 |             </code>
 125 |             和
 126 |             <code>
 127 |                 testPerformanceExample()
 128 |             </code>
 129 |             ：实际的测试。第一个测试功能，第二个则测试性能。每个测试方法的名称都必须以: 
 130 |             <code>
 131 |                 test
 132 |             </code>
 133 |             开头，这样才能被Xcode识别为一个测试的方法去执行。
 134 |         </li>
 135 |     </ul>
 136 |     <h3>
 137 |         神马是单元测试？
 138 |     </h3>
 139 |     <p>
 140 |         在你开始编写你的测试之前，我们需要进行一个简短的讨论，单元测试到底是什么，你为何应当使用它。
 141 |     </p>
 142 |     <p>
 143 |         单元测试是用来测试你的一段代码的功能。它并不包含在你的app之中，但可以在开发期间测试代码是否符合你的期望。
 144 |     </p>
 145 |     <p>
 146 |         对于单元测试，常见的第一反应是：“你要我写
 147 |         <i>
 148 |             两次
 149 |         </i>
 150 |         的代码？一次为了app本身，
 151 |         <i>
 152 |             另一次
 153 |         </i>
 154 |         则用来测试这个方法？”实际上有可能比这更糟 — 一些项目的测试代码可能会比产品本身的代码
 155 |         <i>
 156 |             更多
 157 |         </i>
 158 |         。
 159 |     </p>
 160 |     <p>
 161 |         首先，看起来这非常浪费时间和精力 — 但当一个测试捕捉到了你之前未注意过的问题，或警告你出现了副作用的时候，你就会明白它是一个多么棒的工具了。慢慢地，你就会感到一个没有单元测试的项目是多么得脆弱，你做出任何的改动都会顾虑重重，因为你无法确定将会发生什么。
 162 |     </p>
 163 |     <h2>
 164 |         测试驱动开发
 165 |     </h2>
 166 |     <p>
 167 |         测试驱动开发（Test Driven Development TDD）是单元测试的一个分支，你会从这里开始测试，且只编写测试所需求的代码。这一开始看起来是个非常奇怪的处理方式，且会产生一些非常奇怪的代码。但最终你会发现，它可以在你编码之前帮助你思考编码的目的。
 168 |     </p>
 169 |     <p>
 170 |         TDD有三个重复的步骤：
 171 |     </p>
 172 |     <ol>
 173 |         <li>
 174 |             <em>
 175 |                 红色
 176 |             </em>
 177 |             ：编写一个失败的测试。
 178 |         </li>
 179 |         <li>
 180 |             <em>
 181 |                 绿色
 182 |             </em>
 183 |             ：编写可以使测试通过的最小代码集。
 184 |         </li>
 185 |         <li>
 186 |             <em>
 187 |                 重构
 188 |             </em>
 189 |             ：可选的步骤；如果一个任何的app或测试代码可以通过重构来让它变得更好，那就这么做。
 190 |         </li>
 191 |     </ol>
 192 |     <p>
 193 |         对于有效的TDD，顺序是非常重要和关键的。修复一个失败的测试，可以帮助你了解代码到底在做什么。如果你的测试在没有任何新编写代码的情况下，第一次就通过了，你就无法确知下一阶段的开发该做些什么。
 194 |     </p>
 195 |     <p>
 196 |         开始，你将使用TDD编写一系列测试和伴随的代码。
 197 |     </p>
 198 |     <p>
 199 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/dog-239x320.png"
 200 |         alt="dog" width="239" height="320" class="alignright size-medium wp-image-142110"
 201 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/08/dog-239x320.png 239w, https://koenig-media.raywenderlich.com/uploads/2016/08/dog-373x500.png 373w, https://koenig-media.raywenderlich.com/uploads/2016/08/dog.png 954w"
 202 |         sizes="(max-width: 239px) 100vw, 239px">
 203 |     </p>
 204 |     <h2>
 205 |         测试项目
 206 |     </h2>
 207 |     <p>
 208 |         这个项目是棋盘玩家的投骰子工具。有过和家人坐在一起玩游戏，但发现骰子却被狗吃了的经历么？这个App可以帮助你解决烦恼。如果有人说“我不相信计算机不会作弊！”你就可以自豪地说这个app已通过了单元测试，证明它可以正确地工作。这一定会给你的家人留下深刻的印象 — 让你们今晚的游戏可以继续下去。:]
 209 |     </p>
 210 |     <p>
 211 |         这个app的model包含两个主要的对象类型：一个是
 212 |         <code>
 213 |             Dice
 214 |         </code>
 215 |         ，它包含一个
 216 |         <code>
 217 |             value
 218 |         </code>
 219 |         property和一个用来生成任意值的方法；另一个是
 220 |         <code>
 221 |             Roll
 222 |         </code>
 223 |         ，它含有一个
 224 |         <code>
 225 |             Dice
 226 |         </code>
 227 |         对象的集合，并附有一起滚动骰子，计算总值等等的方法。
 228 |     </p>
 229 |     <p>
 230 |         第一个测试类针对的是
 231 |         <code>
 232 |             Dice
 233 |         </code>
 234 |         对象类型。
 235 |     </p>
 236 |     <h2>
 237 |         Dice测试类
 238 |     </h2>
 239 |     <p>
 240 |         在Xcode中切到
 241 |         <em>
 242 |             File Navigator
 243 |         </em>
 244 |         并选择
 245 |         <em>
 246 |             High RollerTests
 247 |         </em>
 248 |         组。选择
 249 |         <em>
 250 |             File/New/File…
 251 |         </em>
 252 |         ，然后点击
 253 |         <em>
 254 |             macOS/Unit Test Case Class
 255 |         </em>
 256 |         。点击
 257 |         <em>
 258 |             Next
 259 |         </em>
 260 |         并将类命名为
 261 |         <code>
 262 |             DiceTests
 263 |         </code>
 264 |         。语言设为Swift。点击
 265 |         <em>
 266 |             Next
 267 |         </em>
 268 |         及
 269 |         <em>
 270 |             Create
 271 |         </em>
 272 |         。
 273 |     </p>
 274 |     <p>
 275 |         选择类内部的全部代码并删除。添加下列的代码到
 276 |         <em>
 277 |             DiceTests.swift
 278 |         </em>
 279 |         中，就在
 280 |         <code>
 281 |             import XCTest
 282 |         </code>
 283 |         这行的下方：
 284 |     </p>
 285 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-meta">@testable</span> <span class="hljs-keyword">import</span> High_Roller
 286 | </pre>
 287 |     <p>
 288 |         现在你就可以删除
 289 |         <em>
 290 |             HighRollerTests.swift
 291 |         </em>
 292 |         了，因为你不再需要默认的测试。
 293 |     </p>
 294 |     <p>
 295 |         第一件要测试的事是
 296 |         <code>
 297 |             Dice
 298 |         </code>
 299 |         对象可否被创建。
 300 |     </p>
 301 |     <h3>
 302 |         你的第一个测试
 303 |     </h3>
 304 |     <p>
 305 |         在
 306 |         <em>
 307 |             DiceTests
 308 |         </em>
 309 |         类中，添加下列的测试方法：
 310 |     </p>
 311 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testForDice</span><span class="hljs-params">()</span></span> {
 312 |     <span class="hljs-keyword">let</span> <span class="hljs-number">_</span> = <span class="hljs-type">Dice</span>()
 313 |   }
 314 | </pre>
 315 |     <p>
 316 |         在你运行测试之前，这里会爆出一个编译错误：
 317 |         <code>
 318 |             "Use of unresolved identifier 'Dice'"
 319 |         </code>
 320 |         。在TDD中，一个未能编译通过的测试会被认做是失败的测试，因此你现在只是完成了TDD顺序中的第一步。
 321 |     </p>
 322 |     <p>
 323 |         要用最少的代码使这里的代码测试通过，切到
 324 |         <em>
 325 |             File Navigator
 326 |         </em>
 327 |         ，并在主
 328 |         <em>
 329 |             High Roller
 330 |         </em>
 331 |         组中选择
 332 |         <em>
 333 |             Model
 334 |         </em>
 335 |         组。点击
 336 |         <em>
 337 |             File/New/File…
 338 |         </em>
 339 |         创建一个新的Swift文件并命名为
 340 |         <em>
 341 |             Dice.swift
 342 |         </em>
 343 |         。
 344 |     </p>
 345 |     <p>
 346 |         添加下列的代码到文件中：
 347 |     </p>
 348 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">Dice</span> </span>{
 349 | 
 350 | }
 351 | </pre>
 352 |     <p>
 353 |         回到
 354 |         <em>
 355 |             DiceTests.swift
 356 |         </em>
 357 |         ，在下次构建之前，错误并不会消失。然而，你现在可以以几种不同的方式来运行测试。
 358 |     </p>
 359 |     <p>
 360 |         如果你点击测试方法旁边的菱形，就
 361 |         <em>
 362 |             只会运行这一个测试
 363 |         </em>
 364 |         。现在尝试一把，菱形就会变成绿色的勾，表示这个测试已通过。
 365 |     </p>
 366 |     <p>
 367 |         任何时候，你都可以点击这个绿色的标记（或表示失败测试的红色标记）来运行测试。这时在类名旁边就会出现另一个绿色的标记。点击它就会运行
 368 |         <em>
 369 |             在这个类中的
 370 |         </em>
 371 |         所有测试。此刻点击它和运行单个测试还没有什么区别，但很快就会发生变化。
 372 |     </p>
 373 |     <p>
 374 |         测试你代码的最后一种方式就是运行所有的测试。
 375 |     </p>
 376 |     <p>
 377 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/RunningTests-650x152.png"
 378 |         alt="RunningTests" width="650" height="152" class="aligncenter size-large wp-image-142112"
 379 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/08/RunningTests-650x152.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/08/RunningTests-480x112.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/08/RunningTests.png 700w"
 380 |         sizes="(max-width: 650px) 100vw, 650px">
 381 |     </p>
 382 |     <p>
 383 |         按下
 384 |         <em>
 385 |             Command-U
 386 |         </em>
 387 |         键就可以运行全部的测试，然后切到
 388 |         <em>
 389 |             Test Navigator
 390 |         </em>
 391 |         ，你就可以在High RollerTests部分看到你单个的测试。可能你需要将此部分展开才能看到。绿色的勾会出现在每个测试的旁边。如果你将鼠标指针在列表中上下移动，你就会看到出现了小小的播放按钮，你可以点击它来运行任意测试或测试的集合。
 392 |     </p>
 393 |     <p>
 394 |         在
 395 |         <em>
 396 |             Test Navigator
 397 |         </em>
 398 |         中，你看到
 399 |         <em>
 400 |             High RollerUITests
 401 |         </em>
 402 |         也会被运行。带有UI测试的问题是会变慢。你希望你的测试能够尽可能地快，以便频繁地进行测试。要解决这个问题，就需要编辑scheme来使得UI测试不会自动运行。
 403 |     </p>
 404 |     <p>
 405 |         在工具栏scheme的弹出菜单中选择
 406 |         <em>
 407 |             Edit scheme…
 408 |         </em>
 409 |         。点击左侧面板中的. Click
 410 |         <em>
 411 |             Test
 412 |         </em>
 413 |         ，然后取消勾选
 414 |         <em>
 415 |             High RollerUITests
 416 |         </em>
 417 |         。关闭scheme的窗口，然后按
 418 |         <em>
 419 |             Command-U
 420 |         </em>
 421 |         键再次运行你的测试。这时在
 422 |         <em>
 423 |             Test Navigator
 424 |         </em>
 425 |         中，你就会发现UI测试不会再被自动执行了，但仍然可以手动地让它执行。
 426 |     </p>
 427 |     <p>
 428 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/TurnOffUITests-650x362.png"
 429 |         alt="TurnOffUITests" width="650" height="362" class="aligncenter size-large wp-image-141411"
 430 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/08/TurnOffUITests-650x362.png 650w, https://koenig-media.raywenderlich.com/uploads/2016/08/TurnOffUITests-480x267.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/08/TurnOffUITests.png 700w"
 431 |         sizes="(max-width: 650px) 100vw, 650px">
 432 |     </p>
 433 |     <h3>
 434 |         选择运行哪个测试
 435 |     </h3>
 436 |     <p>
 437 |         我们应当选择哪个方法来运行测试？单个，类中，或是全部？
 438 |     </p>
 439 |     <p>
 440 |         如果你正基于某一个测试工作，通常就选择测试它本身或所在的整个类。通过一个测试后，检查它是否对其它的东西造成了破坏就变得非常关键，因此你应当在这时执行一次完整的测试。
 441 |     </p>
 442 |     <p>
 443 |         为了进展得更容易些，在
 444 |         <em>
 445 |             primary editor
 446 |         </em>
 447 |         中打开
 448 |         <em>
 449 |             DiceTests.swift
 450 |         </em>
 451 |         ，而在
 452 |         <em>
 453 |             assistant editor
 454 |         </em>
 455 |         中打开
 456 |         <em>
 457 |             Dice.swift
 458 |         </em>
 459 |         。这是一个非常方便的工作方式，便于完成TDD的序列。
 460 |     </p>
 461 |     <p>
 462 |         这就完成了TDD序列的第二个步骤。由于没有进行过重构，因此现在就应当返回步骤一，来编写另一个失败的测试。
 463 |     </p>
 464 |     <h3>
 465 |         测试nil
 466 |     </h3>
 467 |     <p>
 468 |         每个
 469 |         <em>
 470 |             Dice
 471 |         </em>
 472 |         对象都有一个
 473 |         <code>
 474 |             value
 475 |         </code>
 476 |         ，当
 477 |         <em>
 478 |             Dice
 479 |         </em>
 480 |         被初始化时，它的值应当为
 481 |         <code>
 482 |             nil
 483 |         </code>
 484 |         。
 485 |     </p>
 486 |     <p>
 487 |         添加下列的测试到
 488 |         <em>
 489 |             DiceTests.swift
 490 |         </em>
 491 |         中：
 492 |     </p>
 493 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-comment">// 1</span>
 494 |   <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testValueForNewDiceIsNil</span><span class="hljs-params">()</span></span> {
 495 |     <span class="hljs-keyword">let</span> testDie = <span class="hljs-type">Dice</span>()
 496 |     <span class="hljs-comment">// 2</span>
 497 |     <span class="hljs-type">XCTAssertNil</span>(testDie.value, <span class="hljs-string">"Die value should be nil after init"</span>)
 498 |   }
 499 | </pre>
 500 |     <p>
 501 |         上述的测试：
 502 |     </p>
 503 |     <ol>
 504 |         <li>
 505 |             方法的名称以
 506 |             <code>
 507 |                 'test'
 508 |             </code>
 509 |             开头，而剩余的部分则表明测试什么。
 510 |         </li>
 511 |         <li>
 512 |             本测试使用
 513 |             <code>
 514 |                 XCTAssert
 515 |             </code>
 516 |             方法之一来确认value是
 517 |             <code>
 518 |                 nil
 519 |             </code>
 520 |             。
 521 |             <code>
 522 |                 XCTAssertNil()
 523 |             </code>
 524 |             方法的第二个参数是一个可选的字符串，当测试失败的时候，用来提供错误信息。我通常偏好使用描述性较强的方法名称，而将这个参数置空，来保持实际测试的代码整洁易读。
 525 |         </li>
 526 |     </ol>
 527 |     <p>
 528 |         这个测试代码会产生一个编译错误：
 529 |         <code>
 530 |             “Value of type 'Dice' has no member 'value'”
 531 |         </code>
 532 |         。
 533 |     </p>
 534 |     <p>
 535 |         为修复这个错误，在
 536 |         <em>
 537 |             Dice.swift
 538 |         </em>
 539 |         中添加下列的property声明到
 540 |         <code>
 541 |             Dice
 542 |         </code>
 543 |         的结构体中：
 544 |     </p>
 545 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-keyword">var</span> value: <span class="hljs-type">Int</span>?
 546 | </pre>
 547 |     <p>
 548 |         在app构建之前，
 549 |         <em>
 550 |             DiceTests.swift
 551 |         </em>
 552 |         中的编译错误并不会消失。按下
 553 |         <em>
 554 |             Command-U
 555 |         </em>
 556 |         键来构建app并运行测试，这时测试就应该通过了。此时这里就没有需要重构的地方了。
 557 |     </p>
 558 |     <p>
 559 |         每个
 560 |         <code>
 561 |             Dice
 562 |         </code>
 563 |         对象都应该可以“滚动”并生成它的value。添加下一个测试到
 564 |         <em>
 565 |             DiceTests.swift
 566 |         </em>
 567 |         中：
 568 |     </p>
 569 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testRollDie</span><span class="hljs-params">()</span></span> {
 570 |     <span class="hljs-keyword">var</span> testDie = <span class="hljs-type">Dice</span>()
 571 |     testDie.rollDie()
 572 |     <span class="hljs-type">XCTAssertNotNil</span>(testDie.value)
 573 |   }
 574 | </pre>
 575 |     <p>
 576 |         这个测试使用了
 577 |         <code>
 578 |             XCTAssertNotNil()
 579 |         </code>
 580 |         方法来替换之前测试中的
 581 |         <code>
 582 |             XCTAssertNil()
 583 |         </code>
 584 |         。
 585 |     </p>
 586 |     <p>
 587 |         由于Dice结构体还没有
 588 |         <code>
 589 |             rollDie()
 590 |         </code>
 591 |         方法，此时必然就会出现另一个编译错误。为了修复它，切回到
 592 |         <em>
 593 |             Assistant Editor
 594 |         </em>
 595 |         中，并添加下列代码到
 596 |         <em>
 597 |             Dice.swift
 598 |         </em>
 599 |         中：
 600 |     </p>
 601 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">rollDie</span><span class="hljs-params">()</span></span> {
 602 | 
 603 |   }
 604 | </pre>
 605 |     <p>
 606 |         运行测试，你会看到一个警告，关于使用
 607 |         <code>
 608 |             var
 609 |         </code>
 610 |         来替换
 611 |         <code>
 612 |             let
 613 |         </code>
 614 |         ，以及一个
 615 |         <code>
 616 |             XCTAssert
 617 |         </code>
 618 |         这次将会失败的提示。这是讲得通的，因为
 619 |         <code>
 620 |             rollDie()
 621 |         </code>
 622 |         到现在还未做任何事。将
 623 |         <code>
 624 |             rollDie()
 625 |         </code>
 626 |         修改为如下的代码：
 627 |     </p>
 628 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-keyword">mutating</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">rollDie</span><span class="hljs-params">()</span></span> {
 629 |     value = <span class="hljs-number">0</span>
 630 |   }
 631 | </pre>
 632 |     <p>
 633 |         现在你已明白了TDD如何产生一些奇怪的代码。你很清楚
 634 |         <code>
 635 |             Dice
 636 |         </code>
 637 |         结构体最终产生的是随机的值，但由于目前为止，你还没有编写测试来验证这点，因此这个方法还是能够通过目前测试的最小代码集。再次运行测试来证明这点。
 638 |     </p>
 639 |     <h3>
 640 |         Developing to Tests
 641 |     </h3>
 642 |     <p>
 643 |         拓宽你的思路 — 接下来的几个测试旨在塑造你代码的组织方式。开始你会感到是不又要返工了，但实际上这是让你可以聚焦在你代码真实意图的强有力的方式。
 644 |     </p>
 645 |     <p>
 646 |         一个标准的骰子有6个面，因此任意一次滚动得出的值都应该在一和六之间。切到
 647 |         <em>
 648 |             DiceTests.swift
 649 |         </em>
 650 |         并添加下列的测试，现在又引入了两个
 651 |         <code>
 652 |             XCTAssert
 653 |         </code>
 654 |         方法：
 655 |     </p>
 656 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testDiceRoll_ShouldBeFromOneToSix</span><span class="hljs-params">()</span></span> {
 657 |     <span class="hljs-keyword">var</span> testDie = <span class="hljs-type">Dice</span>()
 658 |     testDie.rollDie()
 659 |     <span class="hljs-type">XCTAssertTrue</span>(testDie.value! &gt;= <span class="hljs-number">1</span>)
 660 |     <span class="hljs-type">XCTAssertTrue</span>(testDie.value! &lt;= <span class="hljs-number">6</span>)
 661 |     <span class="hljs-type">XCTAssertFalse</span>(testDie.value == <span class="hljs-number">0</span>)
 662 |   }
 663 | </pre>
 664 |     <p>
 665 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/one-sided_dice2.png"
 666 |         alt="one-sided_dice2" width="100" height="116" class="alignright size-full wp-image-142143">
 667 |     </p>
 668 |     <p>
 669 |         运行测试，现在两个断言都会失败。修改
 670 |         <code>
 671 |             rollDie()
 672 |         </code>
 673 |         方法，将
 674 |         <code>
 675 |             value
 676 |         </code>
 677 |         设置为1。这次就可以通过测试了，但这样的骰子仍没神马用处！:]
 678 |     </p>
 679 |     <p>
 680 |         换一个思路，我们何不测试滚动骰子多次，然后统计生成的每种value的个数？可能无法做到完美，但一个足够大的样本数量应该可以足够接近你的测试意图。
 681 |     </p>
 682 |     <p>
 683 |         在
 684 |         <em>
 685 |             DiceTests.swift
 686 |         </em>
 687 |         中添加另一个测试：
 688 |     </p>
 689 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testRollsAreSpreadRoughlyEvenly</span><span class="hljs-params">()</span></span> {
 690 |     <span class="hljs-keyword">var</span> testDie = <span class="hljs-type">Dice</span>()
 691 |     <span class="hljs-keyword">var</span> rolls: [<span class="hljs-type">Int</span>: <span class="hljs-type">Double</span>] = [:]
 692 |     <span class="hljs-comment">// 1</span>
 693 |     <span class="hljs-keyword">let</span> rollCounter = <span class="hljs-number">600.0</span>
 694 |     <span class="hljs-keyword">for</span> <span class="hljs-number">_</span> <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; <span class="hljs-type">Int</span>(rollCounter) {
 695 |       testDie.rollDie()
 696 |       <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> newRoll = testDie.value <span class="hljs-keyword">else</span> {
 697 |         <span class="hljs-comment">// 2</span>
 698 |         <span class="hljs-type">XCTFail</span>()
 699 |         <span class="hljs-keyword">return</span>
 700 |       }
 701 |       <span class="hljs-comment">// 3</span>
 702 |       <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> existingCount = rolls[newRoll] {
 703 |         rolls[newRoll] = existingCount + <span class="hljs-number">1</span>
 704 |       } <span class="hljs-keyword">else</span> {
 705 |         rolls[newRoll] = <span class="hljs-number">1</span>
 706 |       }
 707 |     }
 708 |     <span class="hljs-comment">// 4</span>
 709 |     <span class="hljs-type">XCTAssertEqual</span>(rolls.keys.<span class="hljs-built_in">count</span>, <span class="hljs-number">6</span>)
 710 |     <span class="hljs-comment">// 5</span>
 711 |     <span class="hljs-keyword">for</span> (key, roll) <span class="hljs-keyword">in</span> rolls {
 712 |       <span class="hljs-type">XCTAssertEqualWithAccuracy</span>(roll,
 713 |                                  rollCounter / <span class="hljs-number">6</span>,
 714 |                                  accuracy: rollCounter / <span class="hljs-number">6</span> * <span class="hljs-number">0.3</span>,
 715 |                                  <span class="hljs-string">"Dice gave <span class="hljs-subst">\(roll)</span> x <span class="hljs-subst">\(key)</span>"</span>)
 716 |     }
 717 |   }
 718 | </pre>
 719 |     <p>
 720 |         上述的测试代码：
 721 |     </p>
 722 |     <ol>
 723 |         <li>
 724 |             <code>
 725 |                 rollCounter
 726 |             </code>
 727 |             指示骰子将被滚动的次数。我们认为相应于每个期望的数字滚动100次是一个大致合理的样本数量。
 728 |         </li>
 729 |         <li>
 730 |             如果任何一次循环后value没有值，测试会失败并立刻退出。
 731 |             <code>
 732 |                 XCTFail()
 733 |             </code>
 734 |             类似于一个断言，它永远都不会通过，非常适合于
 735 |             <code>
 736 |                 guard
 737 |             </code>
 738 |             语句搭配使用。
 739 |         </li>
 740 |         <li>
 741 |             每次滚动之后，你都将结果保存到一个字典中。
 742 |         </li>
 743 |         <li>
 744 |             这个断言确定字典中有六个key，它们都是滚动骰子所期望得到的数字。
 745 |         </li>
 746 |         <li>
 747 |             这个测试使用了一个新的断言：
 748 |             <code>
 749 |                 XCTAssertEqualWithAccuracy()
 750 |             </code>
 751 |             ，它可以进行不精确的比较。由于
 752 |             <code>
 753 |                 XCTAssertEqualWithAccuracy()
 754 |             </code>
 755 |             会被调用非常多次，因此用可选的信息来表示哪一部分的循环失败了。
 756 |         </li>
 757 |     </ol>
 758 |     <p>
 759 |         运行测试，如你所料，测试因为每次滚动都得到的是1失败了。切到
 760 |         <em>
 761 |             Issue Navigator
 762 |         </em>
 763 |         可以查看更多详细的错误信息。
 764 |     </p>
 765 |     <p>
 766 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/IssueNavigator.png"
 767 |         alt="IssueNavigator" width="515" height="462" class="aligncenter size-full wp-image-142115"
 768 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/08/IssueNavigator.png 515w, https://koenig-media.raywenderlich.com/uploads/2016/08/IssueNavigator-357x320.png 357w"
 769 |         sizes="(max-width: 515px) 100vw, 515px">
 770 |     </p>
 771 |     <p>
 772 |         最后，添加随机数字生成器到
 773 |         <code>
 774 |             rollDie()
 775 |         </code>
 776 |         中。在
 777 |         <em>
 778 |             Dice.swift
 779 |         </em>
 780 |         中，将该方法修改成如下的样子：
 781 |     </p>
 782 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-keyword">mutating</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">rollDie</span><span class="hljs-params">()</span></span> {
 783 |     value = <span class="hljs-type">Int</span>(arc4random_uniform(<span class="hljs-type">UInt32</span>(<span class="hljs-number">6</span>))) + <span class="hljs-number">1</span>
 784 |   }
 785 | </pre>
 786 |     <p>
 787 |         上述代码使用了
 788 |         <code>
 789 |             arc4random_uniform()
 790 |         </code>
 791 |         产生一个1到6之间的数字。看起来非常得简单，但仍然需要进行测试！再次按下
 792 |         <em>
 793 |             Command-U
 794 |         </em>
 795 |         键，所有的测试都通过了。你现在就可以确信
 796 |         <code>
 797 |             Dice
 798 |         </code>
 799 |         结构体大致是以你所期望的比例产生数字了。如果有人说你的app作弊，你就可以把测试结果给它们看说不是的！
 800 |     </p>
 801 |     <p>
 802 |         完工大吉了！
 803 |         <code>
 804 |             Dice
 805 |         </code>
 806 |         结构体已完成，喝茶时间...
 807 |     </p>
 808 |     <p>
 809 |         如果你有这样的朋友，他玩过很多的角色扮演游戏，说你的app不支持多种类型的骰子：四面的，8面的，12面的，20面的甚至100面的...该怎么办？
 810 |     </p>
 811 |     <p>
 812 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/Dice.jpg"
 813 |         alt="Dice" width="400" height="469" class="aligncenter size-large wp-image-141427"
 814 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/08/Dice.jpg 400w, https://koenig-media.raywenderlich.com/uploads/2016/08/Dice-273x320.jpg 273w"
 815 |         sizes="(max-width: 400px) 100vw, 400px">
 816 |     </p>
 817 |     <h3>
 818 |         修改代码
 819 |     </h3>
 820 |     <p>
 821 |         你不想让你的朋友扫兴，因此回到
 822 |         <em>
 823 |             DiceTests.swift
 824 |         </em>
 825 |         并添加另一个测试：
 826 |     </p>
 827 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testRollingTwentySidedDice</span><span class="hljs-params">()</span></span> {
 828 |     <span class="hljs-keyword">var</span> testDie = <span class="hljs-type">Dice</span>()
 829 |     testDie.rollDie(numberOfSides: <span class="hljs-number">20</span>)
 830 |     <span class="hljs-type">XCTAssertNotNil</span>(testDie.value)
 831 |     <span class="hljs-type">XCTAssertTrue</span>(testDie.value! &gt;= <span class="hljs-number">1</span>)
 832 |     <span class="hljs-type">XCTAssertTrue</span>(testDie.value! &lt;= <span class="hljs-number">20</span>)
 833 |   }
 834 | </pre>
 835 |     <p>
 836 |         编译器会抱怨说
 837 |         <code>
 838 |             rollDie()
 839 |         </code>
 840 |         不可以传任何参数。切到
 841 |         <em>
 842 |             assistant editor
 843 |         </em>
 844 |         并在
 845 |         <em>
 846 |             Dice.swift
 847 |         </em>
 848 |         中修改
 849 |         <code>
 850 |             rollDie()
 851 |         </code>
 852 |         的声明，来添加一个
 853 |         <code>
 854 |             numberOfSides
 855 |         </code>
 856 |         的形参：
 857 |     </p>
 858 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-keyword">mutating</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">rollDie</span><span class="hljs-params">(numberOfSides: Int)</span></span> {
 859 | </pre>
 860 |     <p>
 861 |         但这会导致之前的测试失败，因为它们并没有提供参数。你
 862 |         <i>
 863 |             可以
 864 |         </i>
 865 |         将它们全部修改，但大多数的骰子都是6个面的（无需告知你角色扮演的朋友这点）。那么何不给
 866 |         <code>
 867 |             numberOfSides
 868 |         </code>
 869 |         参数一个默认值？
 870 |     </p>
 871 |     <p>
 872 |         将
 873 |         <code>
 874 |             rollDie(numberOfSides:)
 875 |         </code>
 876 |         的声明修改为：
 877 |     </p>
 878 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-keyword">mutating</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">rollDie</span><span class="hljs-params">(numberOfSides: Int = <span class="hljs-number">6</span>)</span></span> {
 879 | </pre>
 880 |     <p>
 881 |         现在所有的测试就都通过了，但你还在处在之前相同的位置：测试并不会检查当20个面的骰子滚动的时候，产生的值是1到20之间的。
 882 |     </p>
 883 |     <p>
 884 |         因此现在需要写另一个类似于
 885 |         <code>
 886 |             testRollsAreSpreadRoughlyEvenly()
 887 |         </code>
 888 |         的测试了，但针对的是20个面的骰子。
 889 |     </p>
 890 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testTwentySidedRollsAreSpreadRoughlyEvenly</span><span class="hljs-params">()</span></span> {
 891 |     <span class="hljs-keyword">var</span> testDie = <span class="hljs-type">Dice</span>()
 892 |     <span class="hljs-keyword">var</span> rolls: [<span class="hljs-type">Int</span>: <span class="hljs-type">Double</span>] = [:]
 893 |     <span class="hljs-keyword">let</span> rollCounter = <span class="hljs-number">2000.0</span>
 894 |     <span class="hljs-keyword">for</span> <span class="hljs-number">_</span> <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; <span class="hljs-type">Int</span>(rollCounter) {
 895 |       testDie.rollDie(numberOfSides: <span class="hljs-number">20</span>)
 896 |       <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> newRoll = testDie.value <span class="hljs-keyword">else</span> {
 897 |         <span class="hljs-type">XCTFail</span>()
 898 |         <span class="hljs-keyword">return</span>
 899 |       }
 900 |       <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> existingCount = rolls[newRoll] {
 901 |         rolls[newRoll] = existingCount + <span class="hljs-number">1</span>
 902 |       } <span class="hljs-keyword">else</span> {
 903 |         rolls[newRoll] = <span class="hljs-number">1</span>
 904 |       }
 905 |     }
 906 |     <span class="hljs-type">XCTAssertEqual</span>(rolls.keys.<span class="hljs-built_in">count</span>, <span class="hljs-number">20</span>)
 907 |     <span class="hljs-keyword">for</span> (key, roll) <span class="hljs-keyword">in</span> rolls {
 908 |       <span class="hljs-type">XCTAssertEqualWithAccuracy</span>(roll,
 909 |                                  rollCounter / <span class="hljs-number">20</span>,
 910 |                                  accuracy: rollCounter / <span class="hljs-number">20</span> * <span class="hljs-number">0.3</span>,
 911 |                                  <span class="hljs-string">"Dice gave <span class="hljs-subst">\(roll)</span> x <span class="hljs-subst">\(key)</span>"</span>)
 912 |     }
 913 |   }
 914 | </pre>
 915 |     <p>
 916 |         这个测试给出了7个失败：key的数量只有6个，且它们的分布并不相等。使用
 917 |         <em>
 918 |             Issue Navigator
 919 |         </em>
 920 |         来查看全部的细节。
 921 |     </p>
 922 |     <p>
 923 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/IssueNavigator2-213x500.png"
 924 |         alt="IssueNavigator2" width="213" height="500" class="aligncenter size-large wp-image-142116"
 925 |         srcset="https://koenig-media.raywenderlich.com/uploads/2016/08/IssueNavigator2-213x500.png 213w, https://koenig-media.raywenderlich.com/uploads/2016/08/IssueNavigator2.png 515w"
 926 |         sizes="(max-width: 213px) 100vw, 213px">
 927 |     </p>
 928 |     <p>
 929 |         你应当期望：
 930 |         <code>
 931 |             rollDie(numberOfSides:)
 932 |         </code>
 933 |         还不使用
 934 |         <code>
 935 |             numberOfSides
 936 |         </code>
 937 |         参数。
 938 |     </p>
 939 |     <p>
 940 |         用
 941 |         <code>
 942 |             numberOfSides
 943 |         </code>
 944 |         来替换
 945 |         <code>
 946 |             arc4random_uniform()
 947 |         </code>
 948 |         中的6，然后再次按下
 949 |         <em>
 950 |             Command-U
 951 |         </em>
 952 |         键。
 953 |     </p>
 954 |     <p>
 955 |         成功了！所有的测试都通过了 - 甚至包括之前调用了你刚修改过的方法的那些测试。
 956 |     </p>
 957 |     <h3>
 958 |         重构测试
 959 |     </h3>
 960 |     <p>
 961 |         你有一些很值得去重构的代码。
 962 |         <code>
 963 |             testRollsAreSpreadRoughlyEvenly()
 964 |         </code>
 965 |         和
 966 |         <code>
 967 |             testTwentySidedRollsAreSpreadRoughlyEvenly()
 968 |         </code>
 969 |         中的代码非常相似，因此你可以将其分离出来作为一个私有方法。
 970 |     </p>
 971 |     <p>
 972 |         添加下列的extension到
 973 |         <em>
 974 |             DiceTests.swift
 975 |         </em>
 976 |         文件的尾部，要在类的外部：
 977 |     </p>
 978 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">DiceTests</span> </span>{
 979 | 
 980 |   <span class="hljs-keyword">fileprivate</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">performMultipleRollTests</span><span class="hljs-params">(numberOfSides: Int = <span class="hljs-number">6</span>)</span></span> {
 981 |     <span class="hljs-keyword">var</span> testDie = <span class="hljs-type">Dice</span>()
 982 |     <span class="hljs-keyword">var</span> rolls: [<span class="hljs-type">Int</span>: <span class="hljs-type">Double</span>] = [:]
 983 |     <span class="hljs-keyword">let</span> rollCounter = <span class="hljs-type">Double</span>(numberOfSides) * <span class="hljs-number">100.0</span>
 984 |     <span class="hljs-keyword">let</span> expectedResult = rollCounter / <span class="hljs-type">Double</span>(numberOfSides)
 985 |     <span class="hljs-keyword">let</span> allowedAccuracy = rollCounter / <span class="hljs-type">Double</span>(numberOfSides) * <span class="hljs-number">0.3</span>
 986 |     <span class="hljs-keyword">for</span> <span class="hljs-number">_</span> <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; <span class="hljs-type">Int</span>(rollCounter) {
 987 |       testDie.rollDie(numberOfSides: numberOfSides)
 988 |       <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> newRoll = testDie.value <span class="hljs-keyword">else</span> {
 989 |         <span class="hljs-type">XCTFail</span>()
 990 |         <span class="hljs-keyword">return</span>
 991 |       }
 992 |       <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> existingCount = rolls[newRoll] {
 993 |         rolls[newRoll] = existingCount + <span class="hljs-number">1</span>
 994 |       } <span class="hljs-keyword">else</span> {
 995 |         rolls[newRoll] = <span class="hljs-number">1</span>
 996 |       }
 997 |     }
 998 |     <span class="hljs-type">XCTAssertEqual</span>(rolls.keys.<span class="hljs-built_in">count</span>, numberOfSides)
 999 |     <span class="hljs-keyword">for</span> (key, roll) <span class="hljs-keyword">in</span> rolls {
1000 |       <span class="hljs-type">XCTAssertEqualWithAccuracy</span>(roll,
1001 |                                  expectedResult,
1002 |                                  accuracy: allowedAccuracy,
1003 |                                  <span class="hljs-string">"Dice gave <span class="hljs-subst">\(roll)</span> x <span class="hljs-subst">\(key)</span>"</span>)
1004 |     }
1005 |   }
1006 | 
1007 | }
1008 | </pre>
1009 |     <p>
1010 |         这个方法的名称并不以
1011 |         <code>
1012 |             test
1013 |         </code>
1014 |         开头，因此不会被当做一个测试去运行。
1015 |     </p>
1016 |     <p>
1017 |         回到主
1018 |         <code>
1019 |             DiceTests
1020 |         </code>
1021 |         类，并将
1022 |         <code>
1023 |             testRollsAreSpreadRoughlyEvenly()
1024 |         </code>
1025 |         和
1026 |         <code>
1027 |             testTwentySidedRollsAreSpreadRoughlyEvenly()
1028 |         </code>
1029 |         方法替换为下列的代码：
1030 |     </p>
1031 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testRollsAreSpreadRoughlyEvenly</span><span class="hljs-params">()</span></span> {
1032 |     performMultipleRollTests()
1033 |   }
1034 | 
1035 |   <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testTwentySidedRollsAreSpreadRoughlyEvenly</span><span class="hljs-params">()</span></span> {
1036 |     performMultipleRollTests(numberOfSides: <span class="hljs-number">20</span>)
1037 |   }
1038 | </pre>
1039 |     <p>
1040 |         再次运行所有的测试，来证实上述重构正确。
1041 |     </p>
1042 |     <h3>
1043 |         使用 #line
1044 |     </h3>
1045 |     <p>
1046 |         为了演示另一项非常有用的测试技术，切回
1047 |         <em>
1048 |             Dice.swift
1049 |         </em>
1050 |         并撤销你在
1051 |         <code>
1052 |             rollDie(numberOfSides:)
1053 |         </code>
1054 |         中做的有关于20面的骰子的改动：将调用
1055 |         <code>
1056 |             arc4random_uniform()
1057 |         </code>
1058 |         中的
1059 |         <code>
1060 |             numberOfSides
1061 |         </code>
1062 |         替换为
1063 |         <code>
1064 |             6
1065 |         </code>
1066 |         。现在再次运行测试。
1067 |     </p>
1068 |     <p>
1069 |         <code>
1070 |             testTwentySidedRollsAreSpreadRoughlyEvenly()
1071 |         </code>
1072 |         失败了，但错误信息却位于
1073 |         <code>
1074 |             performMultipleRollTests(numberOfSides:)
1075 |         </code>
1076 |         中 — 不是一个非常有用的地点。
1077 |     </p>
1078 |     <p>
1079 |         Xcode可以帮助你解决这个问题。当定义一个助手方法的时候，你可以提供一个带有特定默认值
1080 |         <code>
1081 |             #line
1082 |         </code>
1083 |         的参数 - 它会包含调用这个方法时的代码的行序号。这个行序号就可以被用到
1084 |         <code>
1085 |             XCTAssert
1086 |         </code>
1087 |         方法中，使得错误的信息更有价值。
1088 |     </p>
1089 |     <p>
1090 |         在
1091 |         <code>
1092 |             DiceTests
1093 |         </code>
1094 |         的extension中，将方法的定义
1095 |         <code>
1096 |             performMultipleRollTests(numberOfSides:)
1097 |         </code>
1098 |         修改为如下的代码：
1099 |     </p>
1100 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-keyword">fileprivate</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">performMultipleRollTests</span><span class="hljs-params">(numberOfSides: Int = <span class="hljs-number">6</span>, line: UInt = #line)</span></span> {
1101 | </pre>
1102 |     <p>
1103 |         将
1104 |         <code>
1105 |             XCTAsserts
1106 |         </code>
1107 |         修改为如下的样子：
1108 |     </p>
1109 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-type">XCTAssertEqual</span>(rolls.keys.<span class="hljs-built_in">count</span>, numberOfSides, line: line)
1110 | 
1111 | <span class="hljs-keyword">for</span> (key, roll) <span class="hljs-keyword">in</span> rolls {
1112 |   <span class="hljs-type">XCTAssertEqualWithAccuracy</span>(roll,
1113 |                              expectedResult,
1114 |                              accuracy: allowedAccuracy,
1115 |                              <span class="hljs-string">"Dice gave <span class="hljs-subst">\(roll)</span> x <span class="hljs-subst">\(key)</span>"</span>,
1116 |                              line: line)
1117 | }
1118 | </pre>
1119 |     <p>
1120 |         你无需修改调用
1121 |         <code>
1122 |             performMultipleRollTests(numberOfSides:line:)
1123 |         </code>
1124 |         方法的代码，因为新的参数会被默认值自动地填充。再次运行测试，你就会发现现在错误的记号位于调用
1125 |         <code>
1126 |             performMultipleRollTests(numberOfSides:line:)
1127 |         </code>
1128 |         方法这行了 - 而不是在助手方法之中。
1129 |     </p>
1130 |     <p>
1131 |         将
1132 |         <code>
1133 |             rollDie(numberOfSides:)
1134 |         </code>
1135 |         方法恢复原状，然后按
1136 |         <em>
1137 |             Command-U
1138 |         </em>
1139 |         键确认一切工作正常。
1140 |     </p>
1141 |     <p>
1142 |         给自己点个赞吧 - 你已学会了如何使用TDD来开发一个经过完整测试的model类。
1143 |     </p>
1144 |     <p>
1145 |         <img src="https://koenig-media.raywenderlich.com/uploads/2016/08/victory.png"
1146 |         alt="victory" width="475" height="313" class="aligncenter size-full wp-image-142118">
1147 |     </p>
1148 |     <h2>
1149 |         添加单元测试到已存在的代码中
1150 |     </h2>
1151 |     <p>
1152 |         TDD在开发新的代码时很棒，但你经常会不得不在之前已有的代码中加入测试。步骤和之前基本相同，除了你现在是编写测试，来确认已存在的代码如同期望中的方式工作。
1153 |     </p>
1154 |     <p>
1155 |         要学习该怎么做，你要为
1156 |         <code>
1157 |             Roll
1158 |         </code>
1159 |         结构体添加测试。在这个app中，
1160 |         <code>
1161 |             Roll
1162 |         </code>
1163 |         包含了一个
1164 |         <code>
1165 |             Dice
1166 |         </code>
1167 |         的数组和一个
1168 |         <code>
1169 |             numberOfSides
1170 |         </code>
1171 |         的property。它用来处理滚动所有的筛子及统计滚动的结果。
1172 |     </p>
1173 |     <p>
1174 |         回到
1175 |         <em>
1176 |             File Navigator
1177 |         </em>
1178 |         ，选择
1179 |         <code>
1180 |             Roll.swift
1181 |         </code>
1182 |         。将全部占位的代码替换为如下内容：
1183 |     </p>
1184 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">Roll</span> </span>{
1185 | 
1186 |   <span class="hljs-keyword">var</span> dice: [<span class="hljs-type">Dice</span>] = []
1187 |   <span class="hljs-keyword">var</span> numberOfSides = <span class="hljs-number">6</span>
1188 | 
1189 |   <span class="hljs-keyword">mutating</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">changeNumberOfDice</span><span class="hljs-params">(newDiceCount: Int)</span></span> {
1190 |     dice = []
1191 |     <span class="hljs-keyword">for</span> <span class="hljs-number">_</span> <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; newDiceCount {
1192 |       dice.append(<span class="hljs-type">Dice</span>())
1193 |     }
1194 |   }
1195 | 
1196 |   <span class="hljs-keyword">var</span> allDiceValues: [<span class="hljs-type">Int</span>] {
1197 |     <span class="hljs-keyword">return</span> dice.flatMap { $<span class="hljs-number">0</span>.value}
1198 |   }
1199 | 
1200 |   <span class="hljs-keyword">mutating</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">rollAll</span><span class="hljs-params">()</span></span> {
1201 |     <span class="hljs-keyword">for</span> index <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; dice.<span class="hljs-built_in">count</span> {
1202 |       dice[index].rollDie(numberOfSides: numberOfSides)
1203 |     }
1204 |   }
1205 | 
1206 |   <span class="hljs-keyword">mutating</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">changeValueForDie</span><span class="hljs-params">(at diceIndex: Int, to newValue: Int)</span></span> {
1207 |     <span class="hljs-keyword">if</span> diceIndex &lt; dice.<span class="hljs-built_in">count</span> {
1208 |       dice[diceIndex].value = newValue
1209 |     }
1210 |   }
1211 | 
1212 |   <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">totalForDice</span><span class="hljs-params">()</span></span> -&gt; <span class="hljs-type">Int</span> {
1213 |     <span class="hljs-keyword">let</span> total = dice
1214 |       .flatMap { $<span class="hljs-number">0</span>.value }
1215 |       .<span class="hljs-built_in">reduce</span>(<span class="hljs-number">0</span>) { $<span class="hljs-number">0</span> - $<span class="hljs-number">1</span> }
1216 |     <span class="hljs-keyword">return</span> total
1217 |   }
1218 | 
1219 | }
1220 | </pre>
1221 |     <p>
1222 |         （发现错误了么？现在先忽略它，这就是我们将要测试的地方。:]）
1223 |     </p>
1224 |     <p>
1225 |         在
1226 |         <em>
1227 |             File Navigator
1228 |         </em>
1229 |         中选择
1230 |         <em>
1231 |             High RollerTests
1232 |         </em>
1233 |         组，并使用
1234 |         <em>
1235 |             File/New/File…
1236 |         </em>
1237 |         中的
1238 |         <em>
1239 |             macOS/Unit Test Case Class
1240 |         </em>
1241 |         来添加一个叫做
1242 |         <code>
1243 |             RollTests
1244 |         </code>
1245 |         的类。删除其中所有的测试代码。
1246 |     </p>
1247 |     <p>
1248 |         添加下列的import到
1249 |         <em>
1250 |             RollTests.swift
1251 |         </em>
1252 |         中：
1253 |     </p>
1254 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-meta">@testable</span> <span class="hljs-keyword">import</span> High_Roller
1255 | </pre>
1256 |     <p>
1257 |         在assistant editor中打开
1258 |         <em>
1259 |             Roll.swift
1260 |         </em>
1261 |         ，你将在其中编写更多的测试。
1262 |     </p>
1263 |     <p>
1264 |         首先，你想去测试
1265 |         <code>
1266 |             Roll
1267 |         </code>
1268 |         可否被创建，且可以添加
1269 |         <code>
1270 |             Dice
1271 |         </code>
1272 |         到
1273 |         <code>
1274 |             dice
1275 |         </code>
1276 |         数组中。测试使用5个骰子。
1277 |     </p>
1278 |     <p>
1279 |         添加测试到
1280 |         <em>
1281 |             RollTests.swift
1282 |         </em>
1283 |         中：
1284 |     </p>
1285 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testCreatingRollOfDice</span><span class="hljs-params">()</span></span> {
1286 |     <span class="hljs-keyword">var</span> roll = <span class="hljs-type">Roll</span>()
1287 |     <span class="hljs-keyword">for</span> <span class="hljs-number">_</span> <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; <span class="hljs-number">5</span> {
1288 |       roll.dice.append(<span class="hljs-type">Dice</span>())
1289 |     }
1290 |     <span class="hljs-type">XCTAssertNotNil</span>(roll)
1291 |     <span class="hljs-type">XCTAssertEqual</span>(roll.dice.<span class="hljs-built_in">count</span>, <span class="hljs-number">5</span>)
1292 |   }
1293 | </pre>
1294 |     <p>
1295 |         运行测试。目前一切都好 - 第一个测试通过了。和TDD不同，一个失败的测试并非是基本的第一步，因为代码（理论上）早已可以正常地工作。
1296 |     </p>
1297 |     <p>
1298 |         接下来，使用下列的测试，来检查在滚动之前，点数的总数为0：
1299 |     </p>
1300 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testTotalForDiceBeforeRolling_ShouldBeZero</span><span class="hljs-params">()</span></span> {
1301 |     <span class="hljs-keyword">var</span> roll = <span class="hljs-type">Roll</span>()
1302 |     <span class="hljs-keyword">for</span> <span class="hljs-number">_</span> <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; <span class="hljs-number">5</span> {
1303 |       roll.dice.append(<span class="hljs-type">Dice</span>())
1304 |     }
1305 |     <span class="hljs-keyword">let</span> total = roll.totalForDice()
1306 |     <span class="hljs-type">XCTAssertEqual</span>(total, <span class="hljs-number">0</span>)
1307 |   }
1308 | </pre>
1309 |     <p>
1310 |         再次成功了，但看起来似乎需要进行一些重构。每个测试的第一部分都设置了一个
1311 |         <code>
1312 |             Roll
1313 |         </code>
1314 |         对象，并使用5个骰子来填充它。如果将它移到
1315 |         <code>
1316 |             setup()
1317 |         </code>
1318 |         方法中，它就会在每个测试前执行。
1319 |     </p>
1320 |     <p>
1321 |         不仅如此，
1322 |         <code>
1323 |             Roll
1324 |         </code>
1325 |         有一个方法来改变自身数组中
1326 |         <code>
1327 |             Dice
1328 |         </code>
1329 |         的个数，因此测试也可以使用和测试这里。
1330 |     </p>
1331 |     <p>
1332 |         将
1333 |         <code>
1334 |             RollTests
1335 |         </code>
1336 |         类的内容替换为：
1337 |     </p>
1338 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-keyword">var</span> roll: <span class="hljs-type">Roll</span>!
1339 | 
1340 |   <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">setUp</span><span class="hljs-params">()</span></span> {
1341 |     <span class="hljs-keyword">super</span>.setUp()
1342 |     roll = <span class="hljs-type">Roll</span>()
1343 |     roll.changeNumberOfDice(newDiceCount: <span class="hljs-number">5</span>)
1344 |   }
1345 | 
1346 |   <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testCreatingRollOfDice</span><span class="hljs-params">()</span></span> {
1347 |     <span class="hljs-type">XCTAssertNotNil</span>(roll)
1348 |     <span class="hljs-type">XCTAssertEqual</span>(roll.dice.<span class="hljs-built_in">count</span>, <span class="hljs-number">5</span>)
1349 |   }
1350 | 
1351 |   <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testTotalForDiceBeforeRolling_ShouldBeZero</span><span class="hljs-params">()</span></span> {
1352 |     <span class="hljs-keyword">let</span> total = roll.totalForDice()
1353 |     <span class="hljs-type">XCTAssertEqual</span>(total, <span class="hljs-number">0</span>)
1354 |   }
1355 | </pre>
1356 |     <p>
1357 |         按照惯例，再次运行测试，来检查一切是否正常工作。
1358 |     </p>
1359 |     <p> 
1360 |         在6面骰子的情况下，最小的总数应当是5，而最大的总数则应是30，因此添加下列的测试来验证总数是否处于这个范围之中：
1361 |     </p>
1362 |     <pre lang="swift" class="language-swift hljs">  <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">testTotalForDiceAfterRolling_ShouldBeBetween5And30</span><span class="hljs-params">()</span></span> {
1363 |     roll.rollAll()
1364 |     <span class="hljs-keyword">let</span> total = roll.totalForDice()
1365 |     <span class="hljs-type">XCTAssertGreaterThanOrEqual</span>(total, <span class="hljs-number">5</span>)
1366 |     <span class="hljs-type">XCTAssertLessThanOrEqual</span>(total, <span class="hljs-number">30</span>)
1367 |   }
1368 | </pre>
1369 |     <p>
1370 |         运行测试 - 它失败了！看起来测试已经发现了一个代码中的bug。问题应该是在
1371 |         <code>
1372 |             rollAll()
1373 |         </code>
1374 |         或
1375 |         <code>
1376 |             totalForDice()
1377 |         </code>
1378 |         中，因为这个测试中只调用过这两个方法。如果
1379 |         <code>
1380 |             rollAll()
1381 |         </code>
1382 |         失败的话，总数应该是0.然而，返回的总数是一个负值，因此让我们来看一看
1383 |         <code>
1384 |             totalForDice()
1385 |         </code>
1386 |         方法。
1387 |     </p>
1388 |     <p>
1389 |         问题就在这里：
1390 |         <code>
1391 |             reduce
1392 |         </code>
1393 |         是减而不是加value。将减号改为加号：
1394 |     </p>
1395 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">totalForDice</span><span class="hljs-params">()</span></span> -&gt; <span class="hljs-type">Int</span> {
1396 |   <span class="hljs-keyword">let</span> total = dice
1397 |     .flatMap { $<span class="hljs-number">0</span>.value }
1398 |     <span class="hljs-comment">// .reduce(0) { $0 - $1 }       // bug line</span>
1399 |     .<span class="hljs-built_in">reduce</span>(<span class="hljs-number">0</span>) { $<span class="hljs-number">0</span> + $<span class="hljs-number">1</span> }          <span class="hljs-comment">// fixed</span>
1400 |   <span class="hljs-keyword">return</span> total
1401 | }
1402 | </pre>
1403 |     <p>
1404 |         再次运行你的测试 - 现在一切都完美地运行了。
1405 |     </p>
1406 |     <h2>
1407 |         从这儿去向哪里？
1408 |     </h2>
1409 |     <div class="inline-video-ad" id="sub-banner-inline">
1410 |         <div class="inline-video-ad-wrapper">
1411 |             <a href="https://videos.raywenderlich.com/courses" sl-processed="1">
1412 |                 <div class="col-wrapper">
1413 |                     <div class="col">
1414 |                         <img src="https://koenig-assets.raywenderlich.com/wp-content/themes/raywenderlich/images/global/video-yeti@2x.png"
1415 |                         alt="yeti holding videos">
1416 |                     </div>
1417 |                     <div class="col large-col">
1418 |                         <span>
1419 |                             想要学习得更快？通过我们的
1420 |                             <span>
1421 |                                 视频课程
1422 |                             </span>
1423 |                             来节约时间吧
1424 |                         </span>
1425 |                     </div>
1426 |                 </div>
1427 |             </a>
1428 |         </div>
1429 |     </div>
1430 |     <p>
1431 |         你可以在
1432 |         <a href="https://koenig-media.raywenderlich.com/uploads/2016/08/HighRoller-part1.zip"
1433 |         sl-processed="1">
1434 |             这里
1435 |         </a>
1436 |         下载本教程中，这一部分的完整的测试。
1437 |     </p>
1438 |     <p>
1439 |         请继续阅读
1440 |         <a href="https://github.com/DeveloperLx/macOS_Development_Tutorials_translation/blob/master/Unit%20Testing%20on%20macOS%20-%20Part%202:2.md"
1441 |         sl-processed="1">
1442 |             单元测试：2/2部分
1443 |         </a>
1444 |         ，来学习更多优秀的特性，包括交互测试，网络测试，性能测试和代码覆盖。希望可以在这里看到你！:]
1445 |     </p>
1446 | </div>


--------------------------------------------------------------------------------
/Menus and Popovers in Menu Bar Apps for macOS.md:
--------------------------------------------------------------------------------
   1 | # macOS教程：在Menu Bar App中的Menu和Popover
   2 | 
   3 | #### [原文地址](https://www.raywenderlich.com/165853/menus-popovers-menu-bar-apps-macos) 翻译：[DeveloperLx](http://weibo.com/DeveloperLx)
   4 | 
   5 | <div class="content-wrapper">
   6 |     <div class="note">
   7 |         <p>
   8 |             <em>
   9 |                 更新日志：
  10 |             </em>
  11 |             本教程已由Warren Burton更新至支持Xcode 9及Swift 4的版本。
  12 |             <a href="https://www.raywenderlich.com/98178/os-x-tutorial-menus-popovers-menu-bar-apps"
  13 |             sl-processed="1">
  14 |                 原教材
  15 |             </a>
  16 |             由Mikael Konutgan撰写。
  17 |         </p>
  18 |     </div>
  19 |     <div id="attachment_105403" style="width: 260px" class="wp-caption alignright">
  20 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/08/Menus-Popovers-feature.png"
  21 |         sl-processed="1">
  22 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/08/Menus-Popovers-feature.png"
  23 |             alt="Learn how to make a menu bar macOS app with a popover!" width="250"
  24 |             height="250" class="size-full wp-image-105403">
  25 |         </a>
  26 |         <p class="wp-caption-text">
  27 |             学习如何使用popover来制作一个macOS app的菜单栏！
  28 |         </p>
  29 |     </div>
  30 |     <p>
  31 |         菜单栏app长期以来都是macOS中的主打项。很多app例如
  32 |         <a href="https://agilebits.com/onepassword/mac" target="_blank" sl-processed="1">
  33 |             1Password
  34 |         </a>
  35 |         和
  36 |         <a href="http://dayoneapp.com" target="_blank" sl-processed="1">
  37 |             Day One
  38 |         </a>
  39 |         都有着相应的菜单栏app。其它app诸如
  40 |         <a href="http://flexibits.com/fantastical" target="_blank" sl-processed="1">
  41 |             Fantastical
  42 |         </a>
  43 |         甚至仅仅存在于macOS的菜单栏中。
  44 |     </p>
  45 |     <p>
  46 |         在本教程中，你将会构建一个菜单栏app，它会在一个popover中展示鼓舞人心的名言。你会在其中学到：
  47 |     </p>
  48 |     <ul>
  49 |         <li>
  50 |             如何创建一个菜单栏的图标
  51 |         </li>
  52 |         <li>
  53 |             如何让app仅仅存在于菜单栏中
  54 |         </li>
  55 |         <li>
  56 |             如何为用户添加菜单
  57 |         </li>
  58 |         <li>
  59 |             如何让popover按照需求展示和隐藏 - 也就是说事件监视
  60 |         </li>
  61 |     </ul>
  62 |     <div class="note">
  63 |         <em>
  64 |             注意：
  65 |         </em>
  66 |         本教程假定你已熟悉了Swift和macOS。如果你需要再温习一下，欢迎关注我们的
  67 |         <a href="https://www.raywenderlich.com/151741/macos-development-beginners-part-1"
  68 |         target="_blank" sl-processed="1">
  69 |             macOS Development for Beginners
  70 |         </a>
  71 |         系列教程。
  72 |     </div>
  73 |     <h2>
  74 |         入门
  75 |     </h2>
  76 |     <p>
  77 |         打开Xcode。点击
  78 |         <em>
  79 |             File/New/Project…
  80 |         </em>
  81 |         ，然后选择
  82 |         <em>
  83 |             macOS/Application/Cocoa App
  84 |         </em>
  85 |         模板并点击
  86 |         <em>
  87 |             Next
  88 |         </em>
  89 |         。
  90 |     </p>
  91 |     <p>
  92 |         在下一屏中，输入
  93 |         <em>
  94 |             Quotes
  95 |         </em>
  96 |         作为
  97 |         <em>
  98 |             Product Name
  99 |         </em>
 100 |         ，选择你的
 101 |         <em>
 102 |             Organization Name
 103 |         </em>
 104 |         和
 105 |         <em>
 106 |             Organization Identifier
 107 |         </em>
 108 |         。然后选择
 109 |         <em>
 110 |             Swift
 111 |         </em>
 112 |         编程语言，选中
 113 |         <em>
 114 |             Use Storyboards
 115 |         </em>
 116 |         。确保
 117 |         <em>
 118 |             Create Document-Based Application
 119 |         </em>
 120 |         ，
 121 |         <em>
 122 |             Use Core Data
 123 |         </em>
 124 |         ，
 125 |         <em>
 126 |             Include Unit tests
 127 |         </em>
 128 |         和
 129 |         <em>
 130 |             Include UI Tests
 131 |         </em>
 132 |         均不选中。
 133 |     </p>
 134 |     <p>
 135 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/configure-project.png"
 136 |         sl-processed="1">
 137 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/configure-project-442x320.png"
 138 |             alt="configure new project" width="442" height="320" class="aligncenter size-medium wp-image-167056"
 139 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/configure-project-442x320.png 442w, https://koenig-media.raywenderlich.com/uploads/2017/07/configure-project-650x471.png 650w, https://koenig-media.raywenderlich.com/uploads/2017/07/configure-project.png 1480w"
 140 |             sizes="(max-width: 442px) 100vw, 442px">
 141 |         </a>
 142 |     </p>
 143 |     <p>
 144 |         最后，再次点击
 145 |         <em>
 146 |             Next
 147 |         </em>
 148 |         ，选择一个地方来保存项目，并点击
 149 |         <em>
 150 |             Create
 151 |         </em>
 152 |         。
 153 |     </p>
 154 |     <p>
 155 |         设置完成新项目之后，打开
 156 |         <em>
 157 |             AppDelegate.swift
 158 |         </em>
 159 |         并添加下列的property到类中：
 160 |     </p>
 161 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-keyword">let</span> statusItem = <span class="hljs-type">NSStatusBar</span>.system.statusItem(withLength:<span class="hljs-type">NSStatusItem</span>.squareLength)
 162 | </pre>
 163 |     <p>
 164 |         这就创建了一个
 165 |         <em>
 166 |             Status Item
 167 |         </em>
 168 |         - 也就是说app的icon - 带有一个固定的长度并放置在菜单栏中，用户能够看到并使用它。
 169 |     </p>
 170 |     <p>
 171 |         接下来，你需要为status item关联一个图像，让你的app能够在菜单栏中易于识别。
 172 |     </p>
 173 |     <p>
 174 |         在project navigator中周到
 175 |         <code>
 176 |             Assets.xcassets
 177 |         </code>
 178 |         ，下载图片
 179 |         <a href="https://koenig-media.raywenderlich.com/uploads/2015/03/StatusBarButtonImage@2x.png"
 180 |         sl-processed="1">
 181 |             StatusBarButtonImage@2x.png
 182 |         </a>
 183 |         并将它拖拽到asset目录中。
 184 |     </p>
 185 |     <p>
 186 |         选择图片并打开attributes inspector。将
 187 |         <em>
 188 |             Render As
 189 |         </em>
 190 |         选项改变为Template Image。
 191 |     </p>
 192 |     <p>
 193 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/add-image-asset.png"
 194 |         sl-processed="1">
 195 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/add-image-asset-480x109.png"
 196 |             alt="" width="480" height="109" class="aligncenter size-medium wp-image-167058"
 197 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/add-image-asset-480x109.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/07/add-image-asset-650x147.png 650w"
 198 |             sizes="(max-width: 480px) 100vw, 480px">
 199 |         </a>
 200 |     </p>
 201 |     <p>
 202 |         如果你想使用自己的图片，请确保它是黑白图片，并将它配置为template image。这样Status Item才能在亮色和暗色主题下的菜单栏中都看起来比较不错。
 203 |     </p>
 204 |     <p>
 205 |         回到
 206 |         <em>
 207 |             AppDelegate.swift
 208 |         </em>
 209 |         ，添加下列的代码到
 210 |         <code>
 211 |             applicationDidFinishLaunching(\_:)
 212 |         </code>
 213 |         中
 214 |     </p>
 215 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> button = statusItem.button {
 216 |   button.image = <span class="hljs-type">NSImage</span>(named:<span class="hljs-type">NSImage</span>.<span class="hljs-type">Name</span>(<span class="hljs-string">"StatusBarButtonImage"</span>))
 217 |   button.action = #selector(printQuote(<span class="hljs-number">_</span>:))
 218 | }
 219 | </pre>
 220 |     <p>
 221 |         这会把你刚刚添加的图片作为icon配置到status item的上面，然后配置了一个当你点击这个item时会发生的动作。现在这里会出现一个错误，但你很快就会修复它。
 222 |     </p>
 223 |     <p>
 224 |         在类中添加下列的代码：
 225 |     </p>
 226 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-meta">@objc</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">printQuote</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: Any?)</span></span> {
 227 |   <span class="hljs-keyword">let</span> quoteText = <span class="hljs-string">"Never put off until tomorrow what you can do the day after tomorrow."</span>
 228 |   <span class="hljs-keyword">let</span> quoteAuthor = <span class="hljs-string">"Mark Twain"</span>
 229 |   
 230 |   <span class="hljs-built_in">print</span>(<span class="hljs-string">"<span class="hljs-subst">\(quoteText)</span> — <span class="hljs-subst">\(quoteAuthor)</span>"</span>)
 231 | }
 232 | </pre>
 233 |     <p>
 234 |         这个方法将会把名言直接打印到控制台中。
 235 |     </p>
 236 |     <p>
 237 |         注意
 238 |         <code>
 239 |             @objc
 240 |         </code>
 241 |         这个标记。它会把这个方法暴露给Objective-C的运行时，来让按钮响应这里的动作。
 242 |     </p>
 243 |     <p>
 244 |         运行app，你就会看到新的菜单栏app了。你办到了！
 245 |     </p>
 246 |     <p>
 247 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/menubar-light.png"
 248 |         sl-processed="1">
 249 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/menubar-light-650x10.png"
 250 |             alt="light mode menu bar" width="650" height="10" class="aligncenter size-large wp-image-167060"
 251 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/menubar-light-650x10.png 650w, https://koenig-media.raywenderlich.com/uploads/2017/07/menubar-light-480x8.png 480w"
 252 |             sizes="(max-width: 650px) 100vw, 650px">
 253 |         </a>
 254 |     </p>
 255 |     <p>
 256 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/menubar-dark.png"
 257 |         sl-processed="1">
 258 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/menubar-dark-650x10.png"
 259 |             alt="dark mode menu bar" width="650" height="10" class="aligncenter size-large wp-image-167059"
 260 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/menubar-dark-650x10.png 650w, https://koenig-media.raywenderlich.com/uploads/2017/07/menubar-dark-480x8.png 480w"
 261 |             sizes="(max-width: 650px) 100vw, 650px">
 262 |         </a>
 263 |     </p>
 264 |     <div class="note">
 265 |         <p>
 266 |             <em>
 267 |                 注意
 268 |             </em>
 269 |             ：如果菜单栏中的app太多了，可能你会无法看到这个按钮。可以切换到一个比Xcode的菜单少的app（例如Finder），你应该就可以看到它了。
 270 |         </p>
 271 |     </div>
 272 |     <p>
 273 |         每次你点击菜单栏的icon的时候，你就会看到名言被打印到了Xcode的控制台上。
 274 |     </p>
 275 |     <h2>
 276 |         隐藏Dock中的Icon和主窗口
 277 |     </h2>
 278 |     <p>
 279 |         在你完成完整功能的菜单栏app之前，还有两件小事需要做一下。
 280 |     </p>
 281 |     <ol>
 282 |         <li>
 283 |             禁用dock中的icon。
 284 |         </li>
 285 |         <li>
 286 |             移除主窗口。
 287 |         </li>
 288 |     </ol>
 289 |     <p>
 290 |         要禁用dock icon，只需打开
 291 |         <em>
 292 |             Info.plist
 293 |         </em>
 294 |         ，添加一个新的key
 295 |         <em>
 296 |             Application is agent (UIElement)
 297 |         </em>
 298 |         并将它的值设为
 299 |         <em>
 300 |             YES
 301 |         </em>
 302 |         。
 303 |     </p>
 304 |     <p>
 305 |         <img src="https://koenig-media.raywenderlich.com/uploads/2015/03/Application-Is-Agent-YES.png"
 306 |         class="aligncenter wp-image-98940" width="650">
 307 |     </p>
 308 |     <div class="note">
 309 |         <em>
 310 |             注意：
 311 |         </em>
 312 |         如果你是一个编辑plist editor的专家，你可以随意地使用
 313 |         <code>
 314 |             LSUIElement
 315 |         </code>
 316 |         键来进行设置。
 317 |     </div>
 318 |     <p>
 319 |         现在该来处理主窗口了。
 320 |     </p>
 321 |     <ul>
 322 |         <li>
 323 |             打开
 324 |             <code>
 325 |                 Main.storyboard
 326 |             </code>
 327 |         </li>
 328 |         <li>
 329 |             选择Window Controller场景并删除它。
 330 |         </li>
 331 |         <li>
 332 |             只留下View Controller场景。你很快就会用到它。
 333 |         </li>
 334 |     </ul>
 335 |     <p>
 336 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/delete-window-scene.png"
 337 |         sl-processed="1">
 338 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/delete-window-scene-480x137.png"
 339 |             alt="delete window scene" width="480" height="137" class="aligncenter size-medium wp-image-167061"
 340 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/delete-window-scene-480x137.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/07/delete-window-scene-650x185.png 650w"
 341 |             sizes="(max-width: 480px) 100vw, 480px">
 342 |         </a>
 343 |     </p>
 344 |     <p>
 345 |         运行项目。你就会看到这个app已经没有主窗口了，也没有讨厌的dock icon，只有一个简单的status item放在菜单栏中。为自己庆祝一下吧
 346 |         :]
 347 |     </p>
 348 |     <h2>
 349 |         添加一个菜单到Status Item上
 350 |     </h2>
 351 |     <p>
 352 |         通常，点击它只有可怜兮兮的一个动作，是不值得成为一个菜单栏的app的。为你的app添加更多功能，最简单的办法就是添加菜单了。因此添加下列的方法到
 353 |         <code>
 354 |             AppDelegate
 355 |         </code>
 356 |         的尾部。
 357 |     </p>
 358 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">constructMenu</span><span class="hljs-params">()</span></span> {
 359 |   <span class="hljs-keyword">let</span> menu = <span class="hljs-type">NSMenu</span>()
 360 | 
 361 |   menu.addItem(<span class="hljs-type">NSMenuItem</span>(title: <span class="hljs-string">"Print Quote"</span>, action: #selector(<span class="hljs-type">AppDelegate</span>.printQuote(<span class="hljs-number">_</span>:)), keyEquivalent: <span class="hljs-string">"P"</span>))
 362 |   menu.addItem(<span class="hljs-type">NSMenuItem</span>.separator())
 363 |   menu.addItem(<span class="hljs-type">NSMenuItem</span>(title: <span class="hljs-string">"Quit Quotes"</span>, action: #selector(<span class="hljs-type">NSApplication</span>.terminate(<span class="hljs-number">_</span>:)), keyEquivalent: <span class="hljs-string">"q"</span>))
 364 | 
 365 |   statusItem.menu = menu
 366 | }
 367 | </pre>
 368 |     <p>
 369 |         然后在
 370 |         <code>
 371 |             applicationDidFinishLaunching(\_:)
 372 |         </code>
 373 |         的尾部添加对它的调用
 374 |     </p>
 375 |     <pre lang="swift" class="language-swift hljs">
 376 |         constructMenu()
 377 |     </pre>
 378 |     <p>
 379 |         你在这里创建了一个
 380 |         <code>
 381 |             NSMenu
 382 |         </code>
 383 |         ，并添加了三个
 384 |         <code>
 385 |             NSMenuItem
 386 |         </code>
 387 |         的实例，然后把status item的菜单设置为这个新的菜单。
 388 |     </p>
 389 |     <p>
 390 |         这里有一些事值得去关注：
 391 |     </p>
 392 |     <ul>
 393 |         <li>
 394 |             menu item的title是将会出现在菜单中的文本。如果需要的话，这里是实现本地化的一个好地方。
 395 |         </li>
 396 |         <li>
 397 |             动作，类似于按钮或者其它控件的动作，是当你在点击菜单项的时候将会调用的方法。
 398 |         </li>
 399 |         <li>
 400 |             <code>
 401 |                 keyEquivalent
 402 |             </code>
 403 |             是用来激活菜单项的键盘快捷键。小写的字母将使用
 404 |             <em>
 405 |                 Cmd
 406 |             </em>
 407 |             作为修饰键，而大写的字母则使用
 408 |             <em>
 409 |                 Cmd+Shift
 410 |             </em>
 411 |             作为修饰键。这里的键盘快捷键只有当app位于应用的最前方且被激活的时候才会work。因此，在这个case中，这个菜单或其它的窗口必须在可见的情况下，键盘快捷键才可以使用，因为我们的app没有dock的icon。
 412 |         </li>
 413 |         <li>
 414 |             <code>
 415 |                 separatorItem
 416 |             </code>
 417 |             则是一个不活动的菜单项，它只会表现为其它菜单项之间的一条灰色的线。我们可以用它来对菜单中的功能进行分组。
 418 |         </li>
 419 |         <li>
 420 |             <code>
 421 |                 printQuote:
 422 |             </code>
 423 |             动作是你早已定义在
 424 |             <code>
 425 |                 AppDelegate
 426 |             </code>
 427 |             中的方法，而
 428 |             <code>
 429 |                 terminate:
 430 |             </code>
 431 |             动作则是定义在
 432 |             <code>
 433 |                 NSApplication
 434 |             </code>
 435 |             中的方法。
 436 |         </li>
 437 |     </ul>
 438 |     <p>
 439 |         运行项目，然后点击status item，你就会看到一个菜单。庆祝一下进展吧！
 440 |     </p>
 441 |     <p>
 442 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/Menu-Action.png"
 443 |         sl-processed="1">
 444 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/Menu-Action.png"
 445 |             alt="status bar item menu" width="442" height="180" class="aligncenter size-full wp-image-167062">
 446 |         </a>
 447 |     </p>
 448 |     <p>
 449 |         试验一下你的选项吧 - 选择
 450 |         <em>
 451 |             Print Quote
 452 |         </em>
 453 |         会在Xcode的控制台中打出一句名言，而选择
 454 |         <em>
 455 |             Quit Quotes
 456 |         </em>
 457 |         则会退出app。
 458 |     </p>
 459 |     <h2>
 460 |         给Status Item添加一个Popover
 461 |     </h2>
 462 |     <p>
 463 |         你已经看到了，使用代码来创建菜单是多么得容易，但在Xcode的控制台中展示名言，显然是无法被大多数你的终端用户所接受的。接来下，我们就会使用一个简单的view
 464 |         controller，来替代菜单展示名言。
 465 |     </p>
 466 |     <p>
 467 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/Create-QuotesViewController.png"
 468 |         sl-processed="1">
 469 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/Create-QuotesViewController-442x320.png"
 470 |             alt="" width="442" height="320" class="aligncenter size-medium wp-image-167063
 471 |             " srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/Create-QuotesViewController-442x320.png
 472 |             442w, https://koenig-media.raywenderlich.com/uploads/2017/07/Create-QuotesViewController-650x470.png
 473 |             650w, https://koenig-media.raywenderlich.com/uploads/2017/07/Create-QuotesViewController.png
 474 |             1460w " sizes="(max-width: 442px) 100vw, 442px " />
 475 |         </a>
 476 |     </p>
 477 |     <p>
 478 |         点击
 479 |         <em>
 480 |             File/New/File…
 481 |         </em>
 482 |         ，选择
 483 |         <em>
 484 |             macOS/Source/Cocoa Class
 485 |         </em>
 486 |         模板并点击
 487 |         <em>
 488 |             Next
 489 |         </em>
 490 |         。
 491 |     </p>
 492 |     <ul>
 493 |         <li>
 494 |             将这个类命名为
 495 |             <code>
 496 |                 QuotesViewController
 497 |             </code>
 498 |             。
 499 |         </li>
 500 |         <li>
 501 |             将它成为
 502 |             <code>
 503 |                 NSViewController
 504 |             </code>
 505 |             的子类。
 506 |         </li>
 507 |         <li>
 508 |             确保
 509 |             <em>
 510 |                 Also create XIB file for user interface
 511 |             </em>
 512 |             未被勾选。
 513 |         </li>
 514 |         <li>
 515 |             将语言设置为
 516 |             <em>
 517 |                 Swift
 518 |             </em>
 519 |             。
 520 |         </li>
 521 |     </ul>
 522 |     <p>
 523 |         最后，再次点击
 524 |         <em>
 525 |             Next
 526 |         </em>
 527 |         ，选择一个位置来保存文件（在项目目录下的
 528 |         <em>
 529 |             Quotes
 530 |         </em>
 531 |         子目录是一个不错的地方），然后点击
 532 |         <em>
 533 |             Create
 534 |         </em>
 535 |         。
 536 |     </p>
 537 |     <p>
 538 |         现在打开
 539 |         <em>
 540 |             Main.storyboard
 541 |         </em>
 542 |         。展开
 543 |         <em>
 544 |             View Controller场景
 545 |         </em>
 546 |         并选择
 547 |         <em>
 548 |             View Controller
 549 |         </em>
 550 |         实例。
 551 |     </p>
 552 |     <p>
 553 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/QuotesViewController-scene.png
 554 |         " sl-processed="1 ">
 555 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/QuotesViewController-scene-480x106.png
 556 |             " alt=" " width="480 " height="106 " class="aligncenter size-medium wp-image-167064
 557 |             " srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/QuotesViewController-scene-480x106.png
 558 |             480w, https://koenig-media.raywenderlich.com/uploads/2017/07/QuotesViewController-scene-650x143.png
 559 |             650w " sizes="(max-width: 480px) 100vw, 480px ">
 560 |         </a>
 561 |     </p>
 562 |     <p>
 563 |         首选选择
 564 |         <em>
 565 |             Identity Inspector
 566 |         </em>
 567 |         并将Class修改为
 568 |         <code>
 569 |             QuotesViewController
 570 |         </code>
 571 |         ，将
 572 |         <em>
 573 |             Storyboard ID
 574 |         </em>
 575 |         设置为
 576 |         <code>
 577 |             QuotesViewController
 578 |         </code>
 579 |     </p>
 580 |     <p>
 581 |         下面添加下列的代码到
 582 |         <em>
 583 |             QuotesViewController.swift
 584 |         </em>
 585 |         的尾部
 586 |     </p>
 587 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">QuotesViewController</span> </span>{
 588 |   <span class="hljs-comment">// MARK: Storyboard instantiation</span>
 589 |   <span class="hljs-keyword">static</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">freshController</span><span class="hljs-params">()</span></span> -&gt; <span class="hljs-type">QuotesViewController</span> {
 590 |     <span class="hljs-comment">//1.</span>
 591 |     <span class="hljs-keyword">let</span> storyboard = <span class="hljs-type">NSStoryboard</span>(name: <span class="hljs-type">NSStoryboard</span>.<span class="hljs-type">Name</span>(rawValue: <span class="hljs-string">"Main"</span>), bundle: <span class="hljs-literal">nil</span>)
 592 |     <span class="hljs-comment">//2.</span>
 593 |     <span class="hljs-keyword">let</span> identifier = <span class="hljs-type">NSStoryboard</span>.<span class="hljs-type">SceneIdentifier</span>(rawValue: <span class="hljs-string">"QuotesViewController"</span>)
 594 |     <span class="hljs-comment">//3.</span>
 595 |     <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> viewcontroller = storyboard.instantiateController(withIdentifier: identifier) <span class="hljs-keyword">as</span>? <span class="hljs-type">QuotesViewController</span> <span class="hljs-keyword">else</span> {
 596 |       <span class="hljs-built_in">fatalError</span>(<span class="hljs-string">"Why cant i find QuotesViewController? - Check Main.storyboard"</span>)
 597 |     }
 598 |     <span class="hljs-keyword">return</span> viewcontroller
 599 |   }
 600 | }
 601 | </pre>
 602 |     <p>
 603 |         上述代码...
 604 |     </p>
 605 |     <ol>
 606 |         <li>
 607 |             获取到对
 608 |             <em>
 609 |                 Main.storyboard
 610 |             </em>
 611 |             的引用。
 612 |         </li>
 613 |         <li>
 614 |             创建一个能够匹配你刚设定的identifier的
 615 |             <em>
 616 |                 Scene identifier
 617 |             </em>
 618 |             。
 619 |         </li>
 620 |         <li>
 621 |             实例化
 622 |             <em>
 623 |                 QuotesViewController
 624 |             </em>
 625 |             并返回。
 626 |         </li>
 627 |     </ol>
 628 |     <p>
 629 |         创建了这个方法之后，其它用到
 630 |         <code>
 631 |             QuotesViewController
 632 |         </code>
 633 |         的东西就不需要了解如何去实例化它了。直接调用它就阔以了:]
 634 |     </p>
 635 |     <p>
 636 |         注意位于
 637 |         <code>
 638 |             guard
 639 |         </code>
 640 |         语句中的
 641 |         <code>
 642 |             fatalError
 643 |         </code>
 644 |         。使用它或
 645 |         <code>
 646 |             assertionFailure
 647 |         </code>
 648 |         ，来让自己或团队其它的成员知晓这里出现了问题，是一个非常好的习惯。
 649 |     </p>
 650 |     <p>
 651 |         现在返回到
 652 |         <em>
 653 |             AppDelegate.swift
 654 |         </em>
 655 |         。添加一个新的property声明到类中：
 656 |     </p>
 657 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-keyword">let</span> popover = <span class="hljs-type">NSPopover</span>()
 658 | </pre>
 659 |     <p>
 660 |         现在，使用下列的方法替换
 661 |         <code>
 662 |             applicationDidFinishLaunching(\_:)
 663 |         </code>
 664 |         ：
 665 |     </p>
 666 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">applicationDidFinishLaunching</span><span class="hljs-params">(<span class="hljs-number">_</span> aNotification: Notification)</span></span> {
 667 |   <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> button = statusItem.button {
 668 |     button.image = <span class="hljs-type">NSImage</span>(named:<span class="hljs-type">NSImage</span>.<span class="hljs-type">Name</span>(<span class="hljs-string">"StatusBarButtonImage"</span>))
 669 |     button.action = #selector(togglePopover(<span class="hljs-number">_</span>:))
 670 |   }
 671 |   popover.contentViewController = <span class="hljs-type">QuotesViewController</span>.freshController()
 672 | }
 673 | </pre>
 674 |     <p>
 675 |         现在你已把按钮的动作替换为
 676 |         <code>
 677 |             togglePopover(\_:)
 678 |         </code>
 679 |         ，接下来我们就会实现它，用popover去展示存在于QuotesViewController中的内容。
 680 |     </p>
 681 |     <p>
 682 |         添加下面的三个方法到
 683 |         <code>
 684 |             AppDelegate
 685 |         </code>
 686 |         中
 687 |     </p>
 688 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-meta">@objc</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">togglePopover</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: Any?)</span></span> {
 689 |   <span class="hljs-keyword">if</span> popover.isShown {
 690 |     closePopover(sender: sender)
 691 |   } <span class="hljs-keyword">else</span> {
 692 |     showPopover(sender: sender)
 693 |   }
 694 | }
 695 | 
 696 | <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">showPopover</span><span class="hljs-params">(sender: Any?)</span></span> {
 697 |   <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> button = statusItem.button {
 698 |     popover.show(relativeTo: button.bounds, of: button, preferredEdge: <span class="hljs-type">NSRectEdge</span>.minY)
 699 |   }
 700 | }
 701 | 
 702 | <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">closePopover</span><span class="hljs-params">(sender: Any?)</span></span> {
 703 |   popover.performClose(sender)
 704 | }
 705 | </pre>
 706 |     <p>
 707 |         <code>
 708 |             showPopover()
 709 |         </code>
 710 |         方法会向用户展示popover。你只需要提供一个源rect，macOS会基于此来展示popover和箭头，这样看起来popover就像是从菜单栏中的icon中弹出来的。
 711 |     </p>
 712 |     <p>
 713 |         <code>
 714 |             closePopover()
 715 |         </code>
 716 |         会把popover关闭掉，而
 717 |         <code>
 718 |             togglePopover()
 719 |         </code>
 720 |         则会基于当前的状态，来确定是打开还是关闭popover。
 721 |     </p>
 722 |     <p>
 723 |         运行项目，然后点击菜单栏中的icon，来查看展示空popover和关闭它的效果。
 724 |     </p>
 725 |     <p>
 726 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/show-QuotesViewController.png
 727 |         " sl-processed="1 ">
 728 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/show-QuotesViewController-480x292.png
 729 |             " alt=" " width="480 " height="292 " class="aligncenter size-medium wp-image-167065
 730 |             " srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/show-QuotesViewController-480x292.png
 731 |             480w, https://koenig-media.raywenderlich.com/uploads/2017/07/show-QuotesViewController-650x395.png
 732 |             650w, https://koenig-media.raywenderlich.com/uploads/2017/07/show-QuotesViewController.png
 733 |             1040w " sizes="(max-width: 480px) 100vw, 480px ">
 734 |         </a>
 735 |     </p>
 736 |     <p>
 737 |         你的popover已能够正常地工作，但那些令人鼓舞的内容在哪里？你看到的只有一个空空的view，没有名言。猜猜看接下来该做什么了？
 738 |     </p>
 739 |     <h2>
 740 |         实现Quote View Controller
 741 |     </h2>
 742 |     <p>
 743 |         首先，你需要一个model来储存名言和属性。点击
 744 |         <em>
 745 |             File/New/File…
 746 |         </em>
 747 |         并选择
 748 |         <em>
 749 |             macOS/Source/Swift File
 750 |         </em>
 751 |         模板，然后点击
 752 |         <em>
 753 |             Next
 754 |         </em>
 755 |         。将文件命名为
 756 |         <em>
 757 |             Quote
 758 |         </em>
 759 |         并点击
 760 |         <em>
 761 |             Create
 762 |         </em>
 763 |         。
 764 |     </p>
 765 |     <p>
 766 |         打开
 767 |         <em>
 768 |             Quote.swift
 769 |         </em>
 770 |         并添加下列代码到文件中：
 771 |     </p>
 772 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">Quote</span> </span>{
 773 |   <span class="hljs-keyword">let</span> text: <span class="hljs-type">String</span>
 774 |   <span class="hljs-keyword">let</span> author: <span class="hljs-type">String</span>
 775 |   
 776 |   <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> all: [<span class="hljs-type">Quote</span>] =  [
 777 |     <span class="hljs-type">Quote</span>(text: <span class="hljs-string">"Never put off until tomorrow what you can do the day after tomorrow."</span>, author: <span class="hljs-string">"Mark Twain"</span>),
 778 |     <span class="hljs-type">Quote</span>(text: <span class="hljs-string">"Efficiency is doing better what is already being done."</span>, author: <span class="hljs-string">"Peter Drucker"</span>),
 779 |     <span class="hljs-type">Quote</span>(text: <span class="hljs-string">"To infinity and beyond!"</span>, author: <span class="hljs-string">"Buzz Lightyear"</span>),
 780 |     <span class="hljs-type">Quote</span>(text: <span class="hljs-string">"May the Force be with you."</span>, author: <span class="hljs-string">"Han Solo"</span>),
 781 |     <span class="hljs-type">Quote</span>(text: <span class="hljs-string">"Simplicity is the ultimate sophistication"</span>, author: <span class="hljs-string">"Leonardo da Vinci"</span>),
 782 |     <span class="hljs-type">Quote</span>(text: <span class="hljs-string">"It’s not just what it looks like and feels like. Design is how it works."</span>, author: <span class="hljs-string">"Steve Jobs"</span>)
 783 |   ]
 784 | }
 785 | 
 786 | <span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">Quote</span>: <span class="hljs-title">CustomStringConvertible</span> </span>{
 787 |   <span class="hljs-keyword">var</span> description: <span class="hljs-type">String</span> {
 788 |     <span class="hljs-keyword">return</span> <span class="hljs-string">"\"<span class="hljs-subst">\(text)</span>\" — <span class="hljs-subst">\(author)</span>"</span>
 789 |   }
 790 | }
 791 | </pre>
 792 |     <p>
 793 |         上述代码定义了一个简单的名言结构体，其中包含一个静态的property来返回全部的名言。同时，你让
 794 |         <code>
 795 |             Quote
 796 |         </code>
 797 |         遵循
 798 |         <code>
 799 |             CustomStringConvertible
 800 |         </code>
 801 |         协议，这样你就能够很轻松地获得一个准备好的字符串。
 802 |     </p>
 803 |     <p>
 804 |         你已经取得了很大的进展，但你现在需要一些方法，来在UI中展示全部的名言。
 805 |     </p>
 806 |     <h3>
 807 |         设置View Controller的UI
 808 |     </h3>
 809 |     <p>
 810 |         打开
 811 |         <code>
 812 |             Main.storyboard
 813 |         </code>
 814 |         并拖拽三个
 815 |         <em>
 816 |             Push Button
 817 |         </em>
 818 |         ，一个
 819 |         <em>
 820 |             Multiline Label
 821 |         </em>
 822 |         到view controller中。
 823 |     </p>
 824 |     <p>
 825 |         把按钮和标签拖拽成就像下面的样子。蓝色的虚线会帮助你去定位到正确的位置去进行布局：
 826 |     </p>
 827 |     <p>
 828 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/layout-no-constraints.png"
 829 |         sl-processed="1">
 830 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/layout-no-constraints-480x304.png"
 831 |             alt="view controller layout" width="480" height="304" class="aligncenter size-medium wp-image-167083"
 832 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/layout-no-constraints-480x304.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/07/layout-no-constraints-650x412.png 650w, https://koenig-media.raywenderlich.com/uploads/2017/07/layout-no-constraints.png 1118w"
 833 |             sizes="(max-width: 480px) 100vw, 480px">
 834 |         </a>
 835 |     </p>
 836 |     <p>
 837 |         你可以独自完成添加自动布局的约束，来适配用户的交互么？在查看下面的详解之前，可以首先自己进行一下尝试。如果成功的话，就可以略过下面这部分了，你可以直接奖励给自己一颗星星。
 838 |     </p>
 839 |     <h3>
 840 |         解决方案
 841 |     </h3>
 842 |     <p>
 843 |         下列是获取正确布局所需的约束：
 844 |     </p>
 845 |     <li>
 846 |         将左侧的按钮固定到距左边20，且竖直居中的位置。
 847 |     </li>
 848 |     <li>
 849 |         将右侧的按钮固定到距右边20，且竖直居中的位置。
 850 |     </li>
 851 |     <li>
 852 |         将底部的按钮固定到距底部20，且水平居中的位置。
 853 |     </li>
 854 |     <li>
 855 |         将标签固定到距离左右两边均为20，且竖直居中的位置。
 856 |     </li>
 857 |     <p>
 858 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/final-layout-show-constraints.png"
 859 |         sl-processed="1">
 860 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/final-layout-show-constraints-480x292.png"
 861 |             alt="constraints for layout" width="480" height="292" class="aligncenter size-medium wp-image-167067"
 862 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/final-layout-show-constraints-480x292.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/07/final-layout-show-constraints-650x396.png 650w, https://koenig-media.raywenderlich.com/uploads/2017/07/final-layout-show-constraints.png 1110w"
 863 |             sizes="(max-width: 480px) 100vw, 480px">
 864 |         </a>
 865 |     </p>
 866 |     <p>
 867 |         你会发现出现了一些布局的错误，因为没有足够的信息以确定布局。
 868 |     </p>
 869 |     <p>
 870 |         因此将label的
 871 |         <em>
 872 |             Horizontal Content Hugging Priority
 873 |         </em>
 874 |         设置为249，以允许label恰当地增长。
 875 |     </p>
 876 |     <p>
 877 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/conflict-resolution.png"
 878 |         sl-processed="1">
 879 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/conflict-resolution-480x192.png"
 880 |             alt="resolve constraint conflicts" width="480" height="192" class="aligncenter size-medium wp-image-167068"
 881 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/conflict-resolution-480x192.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/07/conflict-resolution-650x260.png 650w"
 882 |             sizes="(max-width: 480px) 100vw, 480px">
 883 |         </a>
 884 |     </p>
 885 |     <p>
 886 |         在得到满意的布局之后：
 887 |     </p>
 888 |     <ul>
 889 |         <li>
 890 |             设置左侧按钮的图片为
 891 |             <code>
 892 |                 NSGoLeftTemplate
 893 |             </code>
 894 |             ，并删除title。
 895 |         </li>
 896 |         <li>
 897 |             设置右侧按钮的图片为
 898 |             <code>
 899 |                 NSGoRightTemplate
 900 |             </code>
 901 |             ，并删除title。
 902 |         </li>
 903 |         <li>
 904 |             设置下侧按钮的title为
 905 |             <em>
 906 |                 Quit Quotes
 907 |             </em>
 908 |             。
 909 |         </li>
 910 |         <li>
 911 |             设置label的对齐方式为居中对齐。
 912 |         </li>
 913 |         <li>
 914 |             设置label的
 915 |             <em>
 916 |                 Line Break
 917 |             </em>
 918 |             模式为
 919 |             <em>
 920 |                 Word Wrap
 921 |             </em>
 922 |             。
 923 |         </li>
 924 |     </ul>
 925 |     <p>
 926 |         现在，打开
 927 |         <em>
 928 |             QuotesViewController.swift
 929 |         </em>
 930 |         ，并添加下列的代码到
 931 |         <code>
 932 |             QuotesViewController
 933 |         </code>
 934 |         类的实现中：
 935 |     </p>
 936 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">var</span> textLabel: <span class="hljs-type">NSTextField</span>!
 937 | </pre>
 938 |     <p>
 939 |         添加下列的extension到类的实现之后。现在在
 940 |         <em>
 941 |             QuotesViewController.swift
 942 |         </em>
 943 |         中你会有两个extension。
 944 |     </p>
 945 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-comment">// MARK: Actions</span>
 946 | 
 947 | <span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">QuotesViewController</span> </span>{
 948 |   <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">previous</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: NSButton)</span></span> {
 949 |   }
 950 | 
 951 |   <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">next</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: NSButton)</span></span> {
 952 |   }
 953 | 
 954 |   <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">quit</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: NSButton)</span></span> {
 955 |   }
 956 | }
 957 | </pre>
 958 |     <p>
 959 |         你现在已为label添加了一个outlet，你将会用这个label来展示鼓舞人心的名言。还添加了三个动作，你将把它们分别连接到三个按钮上。
 960 |     </p>
 961 |     <h3>
 962 |         将代码连接到Interface Builder上
 963 |     </h3>
 964 |     <p>
 965 |         你会注意到源码编辑器的左侧已出现了一些小小的圆形。只要你使用
 966 |         <code>
 967 |             @IBAction
 968 |         </code>
 969 |         和
 970 |         <code>
 971 |             @IBOutlet
 972 |         </code>
 973 |         关键字，这些原型就会出现。
 974 |     </p>
 975 |     <p>
 976 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/IB-handles.png"
 977 |         sl-processed="1">
 978 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/IB-handles-340x320.png"
 979 |             alt="" width="340" height="320" class="aligncenter size-medium wp-image-167069"
 980 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/IB-handles-340x320.png 340w, https://koenig-media.raywenderlich.com/uploads/2017/07/IB-handles-532x500.png 532w, https://koenig-media.raywenderlich.com/uploads/2017/07/IB-handles.png 972w"
 981 |             sizes="(max-width: 340px) 100vw, 340px">
 982 |         </a>
 983 |     </p>
 984 |     <p>
 985 |         现在，你就会使用它们来将代码和UI进行连接。
 986 |     </p>
 987 |     <p>
 988 |         在project navigator中按住
 989 |         <em>
 990 |             alt
 991 |         </em>
 992 |         点击
 993 |         <em>
 994 |             Main.storyboard
 995 |         </em>
 996 |         ，就会把storyboard打开到Assistant Editor的右侧，而源码位于左侧。
 997 |     </p>
 998 |     <p>
 999 |         拖拽靠近
1000 |         <code>
1001 |             textLabel
1002 |         </code>
1003 |         的小圆形到interface builder中的label上。并用相同的方式把previous，next和quit动作连接到相应的按钮上。
1004 |     </p>
1005 |     <p>
1006 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/connect-outlets.png"
1007 |         sl-processed="1">
1008 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/connect-outlets-480x300.png"
1009 |             alt="" width="480" height="300" class="aligncenter size-medium wp-image-167070"
1010 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/connect-outlets-480x300.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/07/connect-outlets-650x406.png 650w"
1011 |             sizes="(max-width: 480px) 100vw, 480px">
1012 |         </a>
1013 |     </p>
1014 |     <div class="note">
1015 |         <p>
1016 |             <em>
1017 |                 注意
1018 |             </em>
1019 |             ：如果你在上面的步骤中遇到了困难，请参考我们的
1020 |             <a href="https://www.raywenderlich.com/category/macos" target="_blank"
1021 |             title="macOS tutorials" sl-processed="1">
1022 |                 macOS教程
1023 |             </a>
1024 |             ，你会在这里找到macOS开发的引导性的教程，涉及到其中的方方面面，包括在interface builder中添加view和约束，以及连接outlets和actions。
1025 |         </p>
1026 |     </div>
1027 |     <p>
1028 |         站起来伸一下懒腰吧，做一个胜利的手势，你已成功地完成了一堆interface builder的工作。
1029 |     </p>
1030 |     <p>
1031 |         运行项目，你的popover现在应该看起来是下面这个样子了：
1032 |     </p>
1033 |     <p>
1034 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/ui-completed.png"
1035 |         sl-processed="1">
1036 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/ui-completed-480x245.png"
1037 |             alt="" width="480" height="245" class="aligncenter size-medium wp-image-167071"
1038 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/ui-completed-480x245.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/07/ui-completed-650x332.png 650w, https://koenig-media.raywenderlich.com/uploads/2017/07/ui-completed.png 1002w"
1039 |             sizes="(max-width: 480px) 100vw, 480px">
1040 |         </a>
1041 |     </p>
1042 |     <p>
1043 |         你对上面的popover采取了view controller的默认尺寸。如果你想要一个更小或更大的popover，只需在storyboard中调整view controller即可。
1044 |     </p>
1045 |     <p>
1046 |         关于交互的部分现在已完成了，但还并没有实现。这些按钮现在正等着你去实现，当你点击它们的时候，该做些什么事情 - 不要把它们挂在那里。
1047 |     </p>
1048 |     <h2>
1049 |         为按钮创建动作
1050 |     </h2>
1051 |     <p>
1052 |         如果你尚未使用
1053 |         <em>
1054 |             Cmd-Return
1055 |         </em>
1056 |         或
1057 |         <em>
1058 |             View &gt; Standard Editor &gt; Show Standard Editor
1059 |         </em>
1060 |         来关闭Assistant Editor
1061 |     </p>
1062 |     <p>
1063 |         打开
1064 |         <em>
1065 |             QuotesViewController.swift
1066 |         </em>
1067 |         并添加下列的property到类的实现中：
1068 |     </p>
1069 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-keyword">let</span> quotes = <span class="hljs-type">Quote</span>.all
1070 | 
1071 | <span class="hljs-keyword">var</span> currentQuoteIndex: <span class="hljs-type">Int</span> = <span class="hljs-number">0</span> {
1072 |   <span class="hljs-keyword">didSet</span> {
1073 |     updateQuote()
1074 |   }
1075 | }
1076 | </pre>
1077 |     <p>
1078 |         <code>
1079 |             quotes
1080 |         </code>
1081 |         property会持有所有的名言，而
1082 |         <code>
1083 |             currentQuoteIndex
1084 |         </code>
1085 |         则持有着当前的名言。
1086 |         <code>
1087 |             currentQuoteIndex
1088 |         </code>
1089 |         同时会作为一个property的观察器，他会在序号发生变化的时候，使用新的名言来更新文本标签。
1090 |     </p>
1091 |     <p>
1092 |         接下来，添加下列的方法到类中：
1093 |     </p>
1094 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
1095 |   <span class="hljs-keyword">super</span>.viewDidLoad()
1096 |   currentQuoteIndex = <span class="hljs-number">0</span>
1097 | }
1098 | 
1099 | <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">updateQuote</span><span class="hljs-params">()</span></span> {
1100 |   textLabel.stringValue = <span class="hljs-type">String</span>(describing: quotes[currentQuoteIndex])
1101 | }
1102 | </pre>
1103 |     <p>
1104 |         当这个view被加载的时候，你就会把当前名言的序号设置为0，相应地来更新UI。
1105 |         <code>
1106 |             updateQuote()
1107 |         </code>
1108 |         会根据
1109 |         <code>
1110 |             currentQuoteIndex
1111 |         </code>
1112 |         确定的当前选择的名言来更新文本的标签。
1113 |     </p>
1114 |     <p>
1115 |         要把它们到绑定到一起，更新三个方法，就像下面这样：
1116 |     </p>
1117 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">previous</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: NSButton)</span></span> {
1118 |   currentQuoteIndex = (currentQuoteIndex - <span class="hljs-number">1</span> + quotes.<span class="hljs-built_in">count</span>) % quotes.<span class="hljs-built_in">count</span>
1119 | }
1120 | 
1121 | <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">next</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: NSButton)</span></span> {
1122 |   currentQuoteIndex = (currentQuoteIndex + <span class="hljs-number">1</span>) % quotes.<span class="hljs-built_in">count</span>
1123 | }
1124 | 
1125 | <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">quit</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: NSButton)</span></span> {
1126 |   <span class="hljs-type">NSApplication</span>.shared.terminate(sender)
1127 | }
1128 | </pre>
1129 |     <p>
1130 |         在
1131 |         <code>
1132 |             next()
1133 |         </code>
1134 |         和
1135 |         <code>
1136 |             previous()
1137 |         </code>
1138 |         中，你会循环遍历全部的名言。而
1139 |         <code>
1140 |             quit
1141 |         </code>
1142 |         则会退出当前的app。
1143 |     </p>
1144 |     <p>
1145 |         再次运行项目，
1146 |         <i>
1147 |             现在
1148 |         </i>
1149 |         你就可以循环地浏览名言及退出app了！
1150 |     </p>
1151 |     <p>
1152 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/code-connected.png"
1153 |         sl-processed="1">
1154 |             <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/code-connected-480x267.png"
1155 |             alt="final UI" width="480" height="267" class="aligncenter size-medium wp-image-167074"
1156 |             srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/code-connected-480x267.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/07/code-connected-650x361.png 650w, https://koenig-media.raywenderlich.com/uploads/2017/07/code-connected.png 964w"
1157 |             sizes="(max-width: 480px) 100vw, 480px">
1158 |         </a>
1159 |     </p>
1160 |     <h2>
1161 |         事件监听
1162 |     </h2>
1163 |     <p>
1164 |         你的用户会在你小小的谦逊的菜单栏app上期待一个特性，就是当你点击app之外的任何地方，让popover自动地关闭。
1165 |     </p>
1166 |     <p>
1167 |         菜单栏的app应当在点击它的时候打开UI，而当用户移动到下一个项目的时候就消失。因此，你需要一个macOS的全局事件监听器。
1168 |     </p>
1169 |     <p>
1170 |         接下来我们就会创建一个时间监听器，它可以复用到你所有的项目上，例如当展示popover的时候就可以用到它。
1171 |     </p>
1172 |     <p>
1173 |         我赌你早已变得更聪明了！
1174 |     </p>
1175 |     <p>
1176 |         <img src="https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1-320x320.png"
1177 |         alt="" width="320" height="320" class="aligncenter size-medium wp-image-167085"
1178 |         srcset="https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1-320x320.png 320w, https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1-250x250.png 250w, https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1-500x500.png 500w, https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1-50x50.png 50w, https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1-64x64.png 64w, https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1-96x96.png 96w, https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1-128x128.png 128w, https://koenig-media.raywenderlich.com/uploads/2017/07/osx-triumphant-1.png 1000w"
1179 |         sizes="(max-width: 320px) 100vw, 320px">
1180 |     </p>
1181 |     <p>
1182 |         创建一个Swift文件并将它命名为
1183 |         <em>
1184 |             EventMonitor
1185 |         </em>
1186 |         ，然后用下列的类定义来替换它的内容：
1187 |     </p>
1188 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-keyword">import</span> Cocoa
1189 | 
1190 | <span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">EventMonitor</span> </span>{
1191 |   <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> monitor: <span class="hljs-type">Any</span>?
1192 |   <span class="hljs-keyword">private</span> <span class="hljs-keyword">let</span> mask: <span class="hljs-type">NSEvent</span>.<span class="hljs-type">EventTypeMask</span>
1193 |   <span class="hljs-keyword">private</span> <span class="hljs-keyword">let</span> handler: (<span class="hljs-type">NSEvent</span>?) -&gt; <span class="hljs-type">Void</span>
1194 | 
1195 |   <span class="hljs-keyword">public</span> <span class="hljs-keyword">init</span>(mask: <span class="hljs-type">NSEvent</span>.<span class="hljs-type">EventTypeMask</span>, handler: @escaping (<span class="hljs-type">NSEvent</span>?) -&gt; <span class="hljs-type">Void</span>) {
1196 |     <span class="hljs-keyword">self</span>.mask = mask
1197 |     <span class="hljs-keyword">self</span>.handler = handler
1198 |   }
1199 | 
1200 |   <span class="hljs-keyword">deinit</span> {
1201 |     stop()
1202 |   }
1203 | 
1204 |   <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">start</span><span class="hljs-params">()</span></span> {
1205 |     monitor = <span class="hljs-type">NSEvent</span>.addGlobalMonitorForEvents(matching: mask, handler: handler)
1206 |   }
1207 | 
1208 |   <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">stop</span><span class="hljs-params">()</span></span> {
1209 |     <span class="hljs-keyword">if</span> monitor != <span class="hljs-literal">nil</span> {
1210 |       <span class="hljs-type">NSEvent</span>.removeMonitor(monitor!)
1211 |       monitor = <span class="hljs-literal">nil</span>
1212 |     }
1213 |   }
1214 | }
1215 | </pre>
1216 |     <p>
1217 |         你会通过传递一个待监听事件类型的标记来初始化这个类的实例 - 事件诸如按键，滚动鼠标，单击左键等 - 以及一个事件处理者。
1218 |     </p>
1219 |     <p>
1220 |         当你准备好开始监听的时候，
1221 |         <code>
1222 |             start()
1223 |         </code>
1224 |         就会调用
1225 |         <code>
1226 |             addGlobalMonitorForEventsMatchingMask(\_:handler:)
1227 |         </code>
1228 |         ，它会返回一个可以让你持有的对象。任何时候只有指定的事件发生，系统就会调用你的处理方法。
1229 |     </p>
1230 |     <p>
1231 |         要移除全局事件的监听器，可以调用
1232 |         <code>
1233 |             stop()
1234 |         </code>
1235 |         中的
1236 |         <code>
1237 |             removeMonitor()
1238 |         </code>
1239 |         方法，并通过将其设置为nil，删除返回的对象。
1240 |     </p>
1241 |     <p>
1242 |         现在剩下的工作，就只有在需要的时候调用
1243 |         <code>
1244 |             start()
1245 |         </code>
1246 |         和
1247 |         <code>
1248 |             stop()
1249 |         </code>
1250 |         方法了。是不是很容易？当然这个类也会在它的析构器中调用
1251 |         <code>
1252 |             stop()
1253 |         </code>
1254 |         方法来实现清理自己。
1255 |     </p>
1256 |     <h3>
1257 |         连接事件监听器
1258 |     </h3>
1259 |     <p>
1260 |         最后一次打开
1261 |         <em>
1262 |             AppDelegate.swift
1263 |         </em>
1264 |         ，并为其添加一个新的property声明：
1265 |     </p>
1266 |     <pre lang="swift" class="language-swift hljs"><span class="hljs-keyword">var</span> eventMonitor: <span class="hljs-type">EventMonitor</span>?
1267 | </pre>
1268 |     <p>
1269 |         然后，在
1270 |         <code>
1271 |             applicationDidFinishLaunching(\_:)
1272 |         </code>
1273 |         的尾部添加下列代码来配置事件监听器：
1274 |     </p>
1275 |     <pre lang="swift" class="language-swift hljs">eventMonitor = <span class="hljs-type">EventMonitor</span>(mask: [.leftMouseDown, .rightMouseDown]) { [<span class="hljs-keyword">weak</span> <span class="hljs-keyword">self</span>] event <span class="hljs-keyword">in</span>
1276 |   <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> strongSelf = <span class="hljs-keyword">self</span>, strongSelf.popover.isShown {
1277 |     strongSelf.closePopover(sender: event)
1278 |   }
1279 | }
1280 | </pre>
1281 |     <p>
1282 |         上述代码会监听系统的鼠标左键和有件按下的事件，当这些事件发生的时候，就会将popover关闭。注意，发送到你的自己app上的事件，这里是不会响应的。这就是为何当你点击popover中的内容时，它并不会消失的原因。:]
1283 |     </p>
1284 |     <p>
1285 |         你使用了一个指向self的
1286 |         <code>
1287 |             weak
1288 |         </code>
1289 |         引用以避免
1290 |         <code>
1291 |             AppDelegate
1292 |         </code>
1293 |         和
1294 |         <code>
1295 |             EventMonitor
1296 |         </code>
1297 |         之间潜在的
1298 |         <i>
1299 |             循环引用
1300 |         </i>
1301 |         。在本例中它并非是必要的，因为这里只有一次循环，但这却是一个值得在你自己的代码中关注的地方，尤其是你在两个对象之间使用block处理回调的时候。
1302 |     </p>
1303 |     <p>
1304 |         添加下列的代码到
1305 |         <code>
1306 |             showPopover(\_:)
1307 |         </code>
1308 |         的尾部：
1309 |     </p>
1310 |     <pre lang="swift" class="language-swift hljs">eventMonitor?.start()
1311 | </pre>
1312 |     <p>
1313 |         这样就会在popover出现的时候启动事件监听器。
1314 |     </p>
1315 |     <p>
1316 |         然后添加下列的代码到
1317 |         <code>
1318 |             closePopover(\_:)
1319 |         </code>
1320 |         的尾部：
1321 |     </p>
1322 |     <pre lang="swift" class="language-swift hljs">eventMonitor?.stop()
1323 | </pre>
1324 |     <p>
1325 |         这样当popover关闭的时候，就会停止事件监听器的监听。
1326 |     </p>
1327 |     <p>
1328 |         全部都搞定了！再次运行项目。点击菜单栏的icon来展示popover，然后点击外面的任意地方来关闭它。Awesome！
1329 |     </p>
1330 |     <h2>
1331 |         从这儿去向哪里？
1332 |     </h2>
1333 |     <div class="inline-video-ad" id="sub-banner-inline">
1334 |         <div class="inline-video-ad-wrapper">
1335 |             <a href="https://videos.raywenderlich.com/courses" sl-processed="1">
1336 |                 <div class="col-wrapper">
1337 |                     <div class="col">
1338 |                         <img src="https://koenig-assets.raywenderlich.com/wp-content/themes/raywenderlich/images/global/video-yeti@2x.png"
1339 |                         alt="yeti holding videos">
1340 |                     </div>
1341 |                     <div class="col large-col">
1342 |                         <span>
1343 |                             想要学习得更快？通过我们的
1344 |                             <span>
1345 |                                 视频课程
1346 |                             </span>
1347 |                             来节约时间吧
1348 |                         </span>
1349 |                     </div>
1350 |                 </div>
1351 |             </a>
1352 |         </div>
1353 |     </div>
1354 |     <p>
1355 |         这里是
1356 |         <a href="https://koenig-media.raywenderlich.com/uploads/2017/07/Quotes_final-s4b3.zip"
1357 |         sl-processed="1">
1358 |             最终的项目
1359 |         </a>
1360 |         ，包含了上述教程中你所开发的所有的代码。
1361 |     </p>
1362 |     <p>
1363 |         你已经明白了如何在你菜单栏的status items上设置菜单和popovers –&nbsp;为何不尝试下使用属性字符创或多个label来美化名言，或是连接web的后端来拉群新的名言。也许你还可以找到使用键盘快捷键去循环浏览名言的方法。
1364 |     </p>
1365 |     <p>
1366 |         一个寻找其它可能性的很棒的地方，就是阅读苹果的官方文档，如
1367 |         <a href="https://developer.apple.com/documentation/appkit/nsmenu" target="_blank"
1368 |         sl-processed="1">
1369 |             <code>
1370 |                 NSMenu
1371 |             </code>
1372 |         </a>
1373 |         ，
1374 |         <a href="https://developer.apple.com/documentation/appkit/nspopover" target="_blank"
1375 |         sl-processed="1">
1376 |             <code>
1377 |                 NSPopover
1378 |             </code>
1379 |         </a>
1380 |         和
1381 |         <a href="https://developer.apple.com/documentation/appkit/nsstatusitem"
1382 |         target="_blank" sl-processed="1">
1383 |             <code>
1384 |                 NSStatusItem
1385 |             </code>
1386 |         </a>
1387 |         。
1388 |     </p>
1389 |     <p>
1390 |         需要考虑的一件事是你希望你的用户把你的app当做一个非常珍贵的屏幕上的不动产，因此当你感觉在状态栏上有一个item很酷的时候，可能你的用户并不这么认为。很多的app会提供偏好选项来让用户确定是打开还是隐藏这个item。你可以把它作为自己的一个进阶的练习。
1391 |     </p>
1392 |     <p>
1393 |         感谢你抽出时间来学习如何为macOS打造一个很酷的popover菜单的app。它相当得简单，但可以看出来，你所学到的这些概念将会成为你开发各种app的绝佳基础。
1394 |     </p>
1395 | </div>


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