Creating Your First Mac AppConfiguring the window 设置窗口

 

Configuring the Window(设置窗口)

Xcode provides a library of objects that you can add to a window or view. The TrackMix app already contains a window—now you need to add a text field, slider, and button. Then, you make connections between these elements and your classes, and implement the behavior you want in the next chapter.

Xcode提供了一个你可以把它们加到窗口或视图上的对象库。TrackMix 应用已经有了一个窗口 -- 现在你需要在上面添加 一个文本框(text field)， 滑动条(slider) 和 按钮(button)。然后把这些元素和类之间做个连接，在下章实现你想要的行为(behavior)。

Add the UI Elements(添加用户界面元素)

You add UI elements by dragging them from the object library to a view or window. After the UI elements are added, you can move, resize, and configure them as needed.

你通过把 用户界面元素(UI elements)从对象库中拖到视图或窗口上来添加它们。添加完后，根据需要你可以移动，更改尺寸和设置它们。

一、To add the UI elements to the window

　　向窗口添加UI元素

1. In the project navigator, under the TrackMix group, select the MainMenu.xib file to display the TrackMix window.

   在项目导航，TrackMix组下方，选择 MainMenu.xib 文件 显示 TrackMix 窗口

2. If necessary, click the rightmost View button in the toolbar to display the utility area at the right side of the window.

   如果需要，点击工具栏(toolbar)上最右边的视图按钮，在窗口的右边显示实用区(utility area)。

   

3. If necessary, click the window object icon in the editor area to display the window.

   如果需要，点击编辑区(editor area)的窗口window object 图标，让窗口显示。

4. In the editor area, make the window narrower by dragging the three dots that appear adjacent to the window’s corners and edges.

   在编辑区(editor area), 拖拉窗口角落和边缘的三个点可以让窗口变窄。

   

5. If necessary, open the object library.

   如有必要，打开对象库(object library)

   The object library appears at the bottom of the utility area. If you don’t see the object library, you can click its button, which is the third button from the left in the library selector bar:

   对象库(object library)位于实用区(utility area)的底部。如果你没找到对象库，你可以点击这个按钮--库选择器栏(library selector bar)上从左数第三个按钮:

   

6. In the object library, choose Cocoa > Controls from the Object Library pop-up menu.

   在对象库(object library)中，从对象库弹出菜单(Object Library pop-up menu)选择 Cocoa > Controls

   Xcode displays a list of controls below the pop-up menu. The list displays each control’s name, an image, and a short description of its function.

   Xcode 在弹出菜单下显示了一系列的控件。列表显示了每个控件的名字，一个缩略图，和一小段功能描述。

7. One at a time, drag a text field, a vertical slider, and a push button from the list and into the window.

   You can use the search field at the base of the utility area to find the objects you want and drag them to the window.

   一次性从列表往窗口拖入一个文本框(text field)，纵向滑动条(vertical slider)和推送按钮(push button)。

   

You resize the items using resize handles, where appropriate, and reposition them by dragging. As you move items within the view, alignment guides are displayed as dashed blue lines.

使用大小调整手柄(resize handles)调整控件大小，必要时拖动它们重新定位。当你在移动它们时，蓝色虚线会指导你对齐。

二、To lay the UI elements out appropriately (UI元素布局)

1. Drag the text field so that it’s near the top of the window and centered horizontally.

   拖动文本框到窗口的顶部水平中间位置。

   As you move the text field (or any UI element), dashed blue lines—called alignment guides—appear that help you align the item with the center and edges of the view. Stop dragging the text field when you can see the view’s center and upper alignment guides, as shown here:

   当你移动文本框(或任何UI元素), 蓝色虚线 -- 对其参考线 -- 会帮助控件跟视图中间和边缘对齐。 当你看到视图中间和上面对其参考线后，停止拖动文本框。如下图：

   

2. Drag the vertical slider so that it appears centered and below the text field.

   拖动纵向滑动条，让它位于文本框下方中间位置。

3. In the view, prepare to resize the vertical slider.

   更改纵向滑动条尺寸。

   You resize a UI element by dragging its resize handles, which are small white squares that can appear on the element’s borders. In general, you reveal an element’s resize handles by selecting it. If your vertical slider looks like the one below, you’re ready to resize it; if it doesn’t, select it on the canvas.

   拖动大小调整手柄(resize handles)更改UI元素尺寸，手柄是出现在元素边框上的白色小方块。选中滑动条，让白色小方块显示，开始调整大小。

   

4. Drag the vertical slider’s lower resize handle until the window’s center alignment guide appears.

   Stop resizing the text field when you see something like this:

   拖动纵向滑动条(vertical slider)直到窗口的中间对齐参考线(center alignment guide)出现。如下图：

   

5. Drag the button so that it’s near the bottom of the window (below the vertical slider) and centered horizontally.

   拖动按钮到窗口底部(纵向滑动条下方)水平中间位置。

After you add the text field, vertical slider, and push button UI elements and make the recommended layout changes, your project should look similar to this:

全部完成后，项目如下图：

You can specify some of the UI elements’ behavior and appearance using the Attributes inspector. Add a default string 5 to the text field, configure the vertical slider to have minimum and maximum values, and set the title of the button to Mute.

你可以用属性检查器(Attributes inspector)制定一些UI元素的行为(behavior)和外观(appearance)。比如给文本框添加默认数字 5，设置滑动条的最小值和最大值，给按钮设置标题“Mute”。

三、To configure the text field

　　设置文本框

1. Click the text field to select it and open the Attributes inspector (if necessary) by clicking the icon that looks like this: 

   点击选中文本框，(如有必要)点击图标打开属性检查器(Attributes inspector)。注：图标位于Xcode窗口右上角

2. In the Title text field at the top of the Text Field Attributes inspector, enter 5.

   在文本框属性检查器顶部的Title文本框内，输入5。

   This is the initial value of the text field. Alternatively, double-click the text field in the TrackMix window and enter the number directly.

   这是文本框的初始值，也可以双击TrackMix 窗口上的文本框直接输入数字。

3. Click the Align Center button to center the text field’s text.

   After you enter the text and change the alignment setting, the Text Field Attributes inspector should look like this:

   选中中间对齐按钮(Align Center button)。如下图：

   

四、To configure the slider

　　设置滑动条

1. In the editor area, select the slider.

   在编辑区选中滑动条。

2. In the Value section’s Minimum field of the Slider Attributes inspector, enter zero (0).

   在滑动条属性检查器中Value项的Minimum字段输入0。

3. In the Value section’s Maximum field, enter 11.

   Maximum字段输入11

4. In the Current Value field, enter 5 (to match the text field).

   Current字段输入5(跟文本框中的值相同)

5. Scroll down to the Control attributes (if necessary) and select the Continuous checkbox.

   (如有必要)向下滚动到Control属性，选中 Continuous 选择框。

   If the slider is continuous, it sends messages while it’s being moved rather than only when a new value is set.

   After you change the slider setting, the Slider Attributes inspector should look like this:

   选中continuous, 它会连续的像文本框发送当前音量值，而不是当滑动块停止运动后才改变文本框的值。

   

五、To configure the button(设置按钮)

Do one of the following:

• Double-click inside the button, type Mute, and press Tab.

• Select the button, type Mute in the Title field of the Button Attributes inspector, and press Tab.

  方法二选一：双击按钮，输入Mute，按空格键结束； 在按钮属性检查器中Title项输入Mute，按空格键结束。

Optionally, click the Run button (or choose Product > Run) to make sure that the UI elements you added look the way you expect them to. You should see something like this:

点击“Run"按钮(Product > Run)运行应用，确定你所天机的UI元素看起来跟期望的一样。如下图：

You can interact with the UI elements but at the moment, the Mute button doesn’t do anything, the text field input doesn’t move the slider’s knob, and the slider doesn’t change the value displayed by the text field. To add this functionality, you need to make the appropriate connections between the UI elements and write some code. These connections are described next.

你可以和UI元素进行交互，但是目前Mute按钮不会做任何事，文本框中的值也不会移动滑块， 移动滑块也不会改变文本框的值。为了实现这些功能，你需要写代码让UI元素之间建立连接。接下来将描述这些连接。

Create Actions for the Button, Text Field, and Slider

为按钮，文本框，和滑动条创建动作(Actions)

When the user activates a UI element, the element can send a message to an object that knows how to perform the corresponding action. This interaction is part of the target-action mechanism, a Cocoa design pattern.

当用户激活一个UI元素，该元素可以将消息发送到对象，该对象知道如何执行相应的动作。这种交互是目标-动作机制(target-action mechanism)的一部分，是一种Cocoa设计模式。

In this tutorial, when the user clicks the Mute button, you want it to send a “set the track’s volume to zero” message (the action) to the app delegate (the target). In this case, the app delegate acts as a view controller in the Model-View-Controller design pattern. This action message changes the “model” data (the track’s volume) that the app delegate manages. Then, the app delegate updates the other views (the slider and text field) to reflect the change in the model object’s data. You’ll create the model object that represents the track later.

在本教程中，当用户点击"Mute"按钮，你想给delegate(the target)发送"set the track's volume to zero(设置静音)"(the action)消息。 在这种情况下，应用程序的delegate在Model-View-Controller(M-V-C)设计模式中扮演着视图控制器（view controller）的角色。这个 动作消息(action message) 改变了应用程序代理（app delegate）控制着的模型数据(mode data -- the track's volume--音量)。然后，应用delegate更新了其他views(视图)--(滑动条和文本框)--体现模型对象数据(model object's data)的改变。你将在稍候创建 模型对象(model object) 用来代表轨道(track)。

Using Xcode, you can set an action for a UI element and set up its corresponding action method by Control-dragging from the element on the canvas to the appropriate source file (for example, to the AppDelegate class source file). The connections that you create in this way are archived, along with the UI elements, in the nib file. Later, when the app loads the nib file, the connections are restored.

在Xcode中，你可以为UI元素设置一个动作(action), 然后从画布上的元素到相应的资源文件（比如：到 AppDelegate 类资源文件） 通过 控制-拖动（Control-dragging）建立它相应的动作方法。你通过这种方式建立的连接会跟UI元素一起在nib文件里存档。 稍候，当应用程序加载nib文件时，连接被存储。

一、To add an action for the button

　　给按钮添加动作

1. If necessary, select MainMenu.xib in the project navigator to display the app window.

   如有必要，在项目导航里选中MainMenu.xib，使它显示在窗口上。

2. In the Xcode toolbar, click the Utilities button (the rightmost View control) to hide the utility area and click the Assistant editor button to display the assistant editor pane.

   The Assistant editor button is the middle Editor button and it looks like this: .

   在Xcode 工具栏（toolbar）上，点击“Utilities”按钮（位于视图控制的最右边）隐藏实用区（utility area）, 然后点击 助理编辑器（Assistant editor）按钮显示  助理编辑器 窗格。

   助理编辑器（Assistant editor） 按钮 是位于中间的Editor按钮，位于Xcode工具栏的右边，看起来像这样：

3. Make sure that the assistant editor displays the AppDelegate class header file (that is,AppDelegate.h).

   Select AppDelegate.h from the Top Level Objects menu at the top of the assistant editor.

   请确定 助理编辑器（assistant editor） 显示了 AppDelegate 类的头文件（AppDelegate.h）。 从 助理编辑器顶部的 Top Level Objects 菜单 选中AppDelegate.h。如下图：

   

4. On the editor, Control-drag from the Mute button to the method declaration area in AppDelegate.h(that is, between the @interface statement and the @end statement).

   在编辑器上，从控制拖动（Control-drag） Mute按钮  到 AppDelegate.h的方法声明区(@interface 和 @end之间的区域空白处)。

   To Control-drag, press and hold the Control key while you drag from the button to the header file in the assistant editor pane.

   控制拖动（Control-drag）就是当你从 拖动 按钮到头文件的过程中按住Control键不动。

   

   When you release the Control-drag, Xcode displays a popover in which you can configure the action connection you just made.

   当你放开控制拖动，Xcode跳出一个popover小窗口，你可以在上面设置你刚刚完成的控制连接。

   

5. In the popover, configure the button’s action connection:

   在popover窗口设置按钮的动作连接：

   • In the Connection pop-up menu, choose Action.

     Connection 弹出菜单，选择 Action

   • In the Name field, enter the method name mute:.

     Name 字段，输入方法名：mute:

     In a later step, you’ll implement the mute: method to set the volume to zero.

     在稍候的步骤中，你将实现该mute:方法，把音量设为0

   • Make sure that the Type field contains id.

     请确定 Type字段包含了id

     The id data type can represent any Cocoa object. You want to use id here because it doesn’t matter what type of object sends the message.

     id数据类型能指代任何Cocoa对象。 这里选择id 是因为任何消息类型都可以。

   After you configure the action connection, the popover should look like this:

   完成设置后如下图：

   

6. In the popover, click Connect.

   点击“Connect”

   Xcode adds a method declaration to the header file and a stub for the new method to the implementation file. Xcode indicates that the connection has been made by displaying a filled-in circle to the left of the method:

   Xcode 在头文件里加了一个方法声明，也给该方法的实现文件提供了一个存根（stub）。Xcode在方法的左侧用 实心圆 标记已经完成的连接。

   

二、To add an action for the text field

　　给文本框添加动作

1. Control-drag from the text field to the method declaration area in AppDelegate.h.

   控制拖拉 文本框到AppDelegate.h里的方法声明区

   

2. In the popover that appears when you release the Control-drag, configure the text field’s action connection:

   在popover窗口，设置文本框的动作连接：

   • In the Connection pop-up menu, choose Action.

     Connection 弹出菜单，选择Action

   • In the Name field, enter takeFloatValueForVolumeFrom:.

     Name字段，输入 takeFloatValueForVolumeFrom:

     In a later step, you’ll implement the takeFloatValueForVolumeFrom: method to set the model data and synchronize the text field with the slider.

     在稍候的步骤里，你将实现takeFloatValueForVolumeFrom:方法，用来设置 模型数据(model data) 并让滑动条和文本框同步。

   • Make sure that the Type field contains id.

     请确定Type字段选择了id

3. In the popover, click Connect.

   点击“Connect”

   Xcode adds a method declaration to the header file and a stub for the new method to the implementation file. Xcode indicates that the connection has been made by displaying a filled-in circle to the left of the method:

   Xcode 在头文件里加了一个方法声明，也给该方法的实现文件提供了一个存根（stub）。Xcode在方法的左侧用 实心圆 标记已经完成的连接。

   

You accomplished two things by Control-dragging from the button and text field to the AppDelegate.h header file:

控制拖动按钮和文本框到AppDelegata.h头文件需要完成2件事情：

• You created a connection between the UI element and the app delegate object.

  给UI元素和应用delegate对象(app delegate object)创建一个连接。

  For example, when the nib file is loaded, the button’s target is set to the app delegate object and its action is set to the mute: message so that when the button is clicked, it sends the mute: message to the app delegate object. (In Objective-C, objects send messages to each other and the Objective-C runtime determines which method implementation to execute.)

  举个例子，当nib文件被加载之后，按钮的目标(target)被设置到应用代理对象(app delegate object), 而它的动作被设置为mute: 。当按钮被点击时，它发送mute:消息到app delegate 对象。（在Objective-C里，对象之间互相发送消息，由Objective-C运行确定需要执行的方法实现）

• You added the corresponding code to the AppDelegate class. Specifically, you added the following action method stub implementations to AppDelegate.m and corresponding declarations toAppDelegate.h:

  在AppDelegate类里添加对应代码。具体来说，您增加了以下操作方法存根实现到AppDelegate.m和相应的声明到AppDelegate.h。

  - (IBAction)mute:(id)sender {

  }

  - (IBAction)takeFloatValueForVolumeFrom:(id)sender {

  }

Note: IBAction is a constant (defined as void) that is used to tell Xcode to treat a method as an action for target-action connections.

注意：IBAction 是一个常量（定义为void），它告诉Xcode该方法是目标动作连接（target-action connections）的一个动作。

The sender parameter in the action method is the object that invoked the action method. It’s common for a receiving object to first check which object sent the message and possibly query that object for more information before performing an operation. (In this tutorial, the sender of the mute: method is the button but the sender of the takeFloatValueForVolumeFrom: method could be either the text field or the slider.)

动作方法（action method）的 sender 参数 用来调用动作方法的。通常用于一个接收对象（receiving object）第一次查询(check)是从哪个对象发出的消息，并且可能在执行一个操作之前向那个对象询问(query)更多信息。（在本教程里，mute:方法的发送者（sender）是按钮，但是takeFloatValueForVolumeFrom:方法的发送者(sender)既可能是文本框(text field)也可能是滑动条(slider)。

Control-dragging from a UI element to source code is a convenient shortcut for creating a connection to an object and adding an action or outlet to its class . If the action or outlet already exists, you Control-drag directly to or from it.

从UI元素控制拖动到资源代码是 创建一个对象连接 和 向它的类添加一个动作（action）或接口（outlet） 的方便快捷方法。如果动作或接口已经存在，则可以直接从它上面控制拖动 或者 直接控制拖动到它上面。

Because the slider can use the same takeFloatValueForVolumeFrom: method as the text field uses, you simply connect it to the app delegate object to set the slider’s target and action. You can do this because the action method was added to the AppDelegate class in a previous step.

因为滑动条（slider）也使用文本框使用的takeFloatValueForVolumeFrom: 方法， 所以你可以简单地把它连接到 应用delegate对象（app delegate object）来设置滑动条的目标和动作。你可以这么做，因为动作方法在前面的步骤里已经被添加到AppDelegate类里了。

三、To set the slider's target and action

　　设置滑动条的目标和动作

1. In the editor area, Control-drag from the slider to the App Delegate blue cube that appears on the left side of the editor area below the window icon (the blue cube represents an object).

   在编辑区，控制拖动 滑动条到 App Delegate 蓝色立方体上。立方体位于编辑区的左侧，在window 图标的下方（蓝色立方体代表一个对象）。

   Xcode displays a list of action methods implemented by the AppDelegate class.

   Xcode 显示一个由AppDelegate 类实现的动作方法列表。

   

2. When you release the Control-drag, select the takeFloatValueForVolumeFrom: method to make the connection.

   释放控制拖动，选择takeFloatValueForVolumeFrom: 方法建立连接。

Create Outlets for the Text Field and Slider

给文本框（Text Field）和滑动条（slider）创建接口（Outlets）

An outlet describes a connection between two objects. When you want an object (such as the app delegate) to communicate with an object in the nib file (such as the text field), you designate the contained object as an outlet. When the nib file is loaded at runtime, the outlet you create in Xcode is restored, which allows the objects to communicate with each other.

接口表示2个对象之间的连接。当你想要一个对象（比如：app delegate）跟另一个在nib文件里的对象（比如：文本框）通信时，你指定包含的对象作为一个接口。当nib文件运行载入时，你在Xcode里创建的接口被存储，该接口允许对象之间相互通信。

In this tutorial, you want the app delegate to get the user’s text from the text field, set the volume accordingly, and update the slider. To allow the app delegate to communicate with these objects, you create outlet connections for each. You need an outlet only for the text field and slider. You don’t need an outlet for the button because the app delegate doesn’t need to send messages to the button.

教程里，你想让应用代理（app delegate）从文本框获取用户输入，设置相应的音量，并更新滑动条。 为了让app delegate 跟这些对象通信，你需要给每个对象创建接口连接（outlet connections）。你只需要给文本框和滑动条创建一个接口。不需要给按钮创建接口，因为app delegate 不需要想按钮发送消息。

The steps you take to add outlets for the text field and slider are very similar to the steps you took when you added the button’s action. Before you start, make sure that the MainMenu.xib file is still visible in the editor and that AppDelegate.h is open in the assistant editor.

给文本框和滑动条添加接口的步骤 和 之前给按钮添加动作的步骤很相似。开始之前，请确定MainMenu.xib文件在编辑区可见，AppDelegate.h 在助理编辑区里打开。

一、To add an outlet for the text field

　　给文本框添加接口

1. Control-drag from the text field in the window to the method declaration area in the interface file.

   控制拖动文本框到界面文件的方法声明区域。

   It does not matter where you release the Control-drag as long as it’s inside the method declaration area. In this tutorial, the new outlets appear below the window outlet declaration.

   只要在方法声明区域，在哪释放控制拖动都可以。教程里，新接口出现在窗口接口声明下面。

2. In the popover that appears when you release the Control-drag, configure the text field’s connection:

   放开控制拖动后，出现的popover窗口里，设置文本框连接：

   • Make sure that the Connection pop-up menu contains Outlet.

     Connection 弹出菜单选择Outlet

   • In the Name field, enter textField.

     Name字段，输入textField

     You can call the outlet whatever you want, but your code is more understandable when an outlet name bears some relationship to the item it represents.

     你可以给接口任何名字，但是如果你的接口名跟它所代表的控件有点关系的话，你的代码会变得更易读。

   • Make sure that the Type field contains NSTextField.

     Type 字段选择 NSTextField

     Setting the Type field to NSTextField ensures that Xcode connects the outlet only to a text field.

     Type字段设置为 NSTextTield 确保 Xcode 只把这个接口绑定给文本框。

   • Make sure that the Storage pop-up menu contains Weak, which is the default value for outlets.

     Storage 弹出菜单保持Weak, Weak是接口的默认值。

   After you make these settings, the popover should look like this:

   完成后效果如下图：

   

3. In the popover, click Connect.

   点击“Connect”

   Xcode adds a declaration for the outlet and indicates that the connection has been made by displaying a filled-in circle to the left of the method:

   Xcode为接口添加了声明，方法左侧的实心圆表明连接已经设置完成。

   

二、To add an outlet for the slider

　　给滑动条添加接口

1. Control-drag from the slider in the window to the method declaration area in the header file.

   控制拖动 滑动条到头文件里的方法声明区域。

2. In the popover that appears when you release the Control-drag, configure the slider’s connection:

   在popover窗口里设置滑动条的连接：

   • Make sure that the Connection pop-up menu contains Outlet.

     Connection 弹出菜单选择Outlet。

   • In the Name field, enter slider.

     Name字段，输入slider。

   • Make sure that the Type field contains NSSlider.

     Type 字段选择 NSSlider。

   • Make sure that the Storage pop-up menu contains Weak.

     Storage 弹出菜单 选 Weak。

   After you make these settings, the popover should look like this:

   完成设置后效果，如下图：

   

3. In the popover, click Connect.

   点击“Connect”

You accomplished two things by adding outlets for the text field and slider:

　　给文本框和滑动条添加接口，你完成了2件事情：

• You established outlet connections from the app delegate to the text field and slider.

  从应用代理（app delegate）到文本框 和 滑动条 建立接口连接。

  When the nib file is loaded, the app delegate’s textField outlet (an Objective-C property) is set to theNSTextField object and the slider outlet is set to the NSSlider object. This allows the app delegate to directly get and set the values of these UI elements.

  当nib文件被加载，应用代理（app delegate）的文本框接口（一个Objective-C 特性（property））被设置为 NSTextField 对象，滑动条接口被设置为 NSSlider对象。这样就允许应用代理（app delegate)直接 get 或 set 这些UI元素的值。

• You added the corresponding code to the AppDelegate class. Specifically, you added the following properties to AppDelegate.h:

  你在AppDelegate类里添加了相应的代码。 具体的说，就是你添加了以下特性到AppDelegate.h:

  @property (weak) IBOutlet NSTextField *textField;

  @property (weak) IBOutlet NSSlider *slider;

  Note: IBOutlet is a constant that is used only to tell Xcode to treat the object as an outlet. It’s actually defined as nothing, so it has no effect at compile time.

   注意：IBOutlet 是一个常量， 用来告诉Xcode 对象是一个接口（outlet）。 它实际被设置为空，所以在编译时没有任何效果。

  Also, you added the following code lines to AppDelegate.m to synthesize these properties (a process that creates the corresponding get and set methods):

  同时，你也把以下代码添加到 AppDelegate.m 用来合成（synthesize）特性（properties），synthesize 是一个创建相应get 和 set 方法的过程。

  @synthesize textField;

  @synthesize slider;

At this point in the tutorial, you’ve created a total of five connections to the app delegate object:

到这时，你已经给应用代理对象 (app delegate object)创建了全部的5个连接。

• An action connection for the button

  一个按钮的动作连接

• An action connection for the text field

  一个文本框的对象连接

• An action connection for the slider

  一个滑动条的动作连接

• An outlet connection for the text field

  一个文本框的接口连接

• An outlet connection for the slider

  一个滑动条的接口连接

You can verify these connections in the Connections inspector.

　　你可以在 连接检查器(Connections inspector)里确认连接。

三、To open the Connections inspector for the app delegate

　　打开应用代理(app delegate)里的连接检查器（Connections inspector）。

1. While viewing the MainMenu.xib file, click the Standard editor button to close the assistant editor and switch to the standard editor view.

   点击 Standard editor 按钮，关闭助理编辑器，切换到标准编辑器视图(standard editor view)。

   The Standard editor button is the leftmost Editor button and it looks like this: 

    标准编辑器按钮（Standard editor button）位于 Editor 按钮(位于Xcode 工具栏（tool bar）右边)的最左边，它看起来像：

2. Click the Utilities view button to open the utilities area.

   点击实用视图（Utilities view)按钮，打开 实用区（utilities area).

3. Select App Delegate in the editor area (the blue cube located under the window icon).

   选择 编辑区的 App Delegate（位于window图标下面的蓝色立方体）

4. Show the Connections inspector in the utilities area.

   The Connections inspector button is in the inspector selector bar, and it looks like this: 

   显示utilities area的 连接检查器（Connections inspector）

   连接检查器按钮(Connections inspector button) 在 检查器选择栏（inspector selector bar），它看起来像：

In the Connections inspector, Xcode displays the connections for the selected object (in this case, the app delegate). In your workspace window, you should see something like this:

在连接检查器（Connections inspector)里， Xcode 显示了被选择对象（这里指 app delegate）的连接。在你的工作区窗口，你应该看起来像下图：

Notice the five connections (three actions and two outlets) you created to the app delegate. Since the text field and vertical slider use the same takeFloatValueForVolumeFrom: action method they are grouped together under Received Actions. Also notice that there’s a connection between the app delegate and its window and the app delegate and the File’s Owner. Xcode provides these default connections for your convenience; you do not have to use them in any way.

请注意你给 应用代理（app delegate）创建的五个连接（3个动作和2个接口）。因为文本框 和 纵向滑动条 共同使用 takeFloatValueForVolumeFrom: 动作方法，所以它们在 Received Actions 下面被列为一组。也请注意在 应用代理（app delegate ）和 它的窗口之间, app delegate 和 File's Owner之间 都有一个连接(connection).  Xcode提供这些默认连接为您提供方便，你不必以任何方式使用。

Test the App

测试应用

If you run your app now, it behaves the same as the last time you tested it after you first added the UI elements to the window. The connections between the objects exist but because the action methods do nothing, there is no new behavior to observe. So that you can test and better understand the connections you made, in the implementation file, AppDelegate.m, add log statements to the action methods.

如果你现在运行你的应用，它跟你上一次向窗口添加了UI 元素后测试时是一样的。 存在对象之间的连接，但是他们的动作不做任何事情，没有新的行为需要察看。所以你可以在实现文件AppDelegate.m 里给动作方法添加 日志报表（log statements），用来测试和更好的理解你做的连接。 

一、To add log statements to the action methods

　　给动作方法添加日志报表（log statements）

1. Display the implementation file in the source editor by selecting AppDelegate.m in the navigator area in the left pane.

   在左窗格的导航区里选择AppDelegate.m，在代码编辑器里显示实现文件。

2. Add a single NSLog statement to the mute: method to indicate that the method has been invoked.

   给mute: 方法 添加一条 NSLog 语句，用来标记该方法已被调用。

   - (IBAction)mute:(id)sender {

       NSLog(@"received a mute: message");

   }

3. Implement the takeFloatValueForVolumeFrom: method as follows:

   takeFloatValueForVolumeFrom: 方法实现如下：

   - (IBAction)takeFloatValueForVolumeFrom:(id)sender {

       NSString *senderName = nil;

       if (sender == self.textField) {

           senderName = @"textField";

       }

       else {

           senderName = @"slider";

       }

       NSLog(@"%@ sent takeFloatValueForVolumeFrom: with value %1.2f", senderName, [sender floatValue]);

   }

   The method checks which control was the sender and logs a message indicating both the sender and its current float value. The NSLog function logs a string using the format specified by the format string. (This is very similar to the C printf function.) The string %@ indicates that a string object should be substituted.

   该方法检查哪个控件是 发送者（sender），并打印一条信息表明这个 sender 和 它的当前值。 NSLog 函数打印一条字符串日志，字符串由格式字符串指定。（跟C语言的printf 函数很相似）字符串%@表明这个字符串对象将被替代。

   The method combines two fairly common patterns in Cocoa: determining the sender of a message and sending a message back to it. In this case, it’s not necessary to know which object sent the message—all that’s needed is its float value—but it serves to illustrate the point.

   在Cocoa中，该方法结合了2个比较常见的模式：确定一条信息的发送者，并向它回送一条信息。这种情况下，没有必要知道是哪个对象发出的信息--我们需要的是它的float值--但是这已足够说明问题（but it serves to illustrate the point.）。

When you test the app, show the console so that you can see the log messages.

当你测试时，打开控制台（console），这样就可以看到打印的消息。

二、To test the app（测试应用）

1. Click the Run button in the toolbar to build and run the project.

   If a dialog appears asking whether to stop running TrackMix, click Stop.

   点击工具栏（toolbar）上的“Run”按钮，构建并运行该项目。

   如果跳出窗口询问是否停止正在运行的 TrackMix, 点击“Stop”。

2. If necessary, in the Xcode toolbar, click the debug area button to show the debug area.

   The debug area button is the middle View control and it looks like this: 

   如有需要，点击Xcode 工具栏上的调试区按钮（debug area button），打开调试区（debug area）。

   debug area button 是 View 控件(位于 Xcode 菜单栏右侧)的中间那个，它看起来像：

3. Click the rightmost button in the debug area view toolbar next to the Clear button to display the console.

   点击 debug area 视图工具栏的最右边那个按钮，该按钮位于Clear按钮边上，打开控制器。

   

4. Make sure that Target Output is selected from the console pop-up menu.

   在控制台弹出菜单选择 目标输出（Target Output）。

   

5. In TrackMix, enter a numeric value in the text field and press Return, move the slider, and click the Mute button.

   在文本框输入一个数值，按 回车（Return）键， 拖动滑动条，点击 Mute 按钮。

   As you interact with these UI elements, you should see appropriate messages in the console.

   当你跟这些UI元素交互，你应该能在控制台看到相应的输出信息。

Recap（概括）

You created connections between the UI elements and the app delegate object by Control-dragging from the UI element to a AppDelegate class source file and configuring the action or outlet. This operation performed two tasks: It created the connection between the objects and added the necessary code for the action or outlet to the source files.

你通过从UI元素 控制拖动（Control-dragging）到 一个 AppDelegate 类资源文件 建立了UI元素和 应用代理（app delegate）之间的连接，并设置了动作（action）和 接口（outlet）。该操作完成了2个任务: 给对象之间建立了连接 和 给资源文件里的动作和接口添加了必要的代码。

You don’t have to use the Xcode feature that automatically adds code when you establish a connection by Control-dragging from the canvas to a source file. Instead, you can add the property and method declarations to the source files yourself and then make the connections from the UI elements directly to the App Delegate object in the editor area. Typically, though, you make fewer mistakes (and have less typing to do) when you let Xcode do as much of the work as it can.

当你从画布到一资源文件用控制拖动建立一个连接时，你并不一定要使用Xcode提供的自动添加代码功能。你可以自己在资源文件里添加特性（property）和 方法声明，然后给UI元素和 编辑区（editor area）的应用代理对象（App Delegate object）直接建立连接。不过，通常情况下，让Xcode完成它能做的事情可以减少错误发生（减少打字输入）。

Currently, the user interface is not synchronized (that is, the text field and slider may have different values). In the next chapter, you’ll implement the Track class to separate the model data from the UI elements and in the following chapter implement the action methods.

目前，用户界面是不同步的（就是说，文本框和滑动条可能有不同值）。 下章，你将实现Track(轨道)类，从UI元素中分离出模型数据（model data），并实现这些动作方法。

Previous    Next