Конфигурирование окна
XCode предоставляет библиотеке объектов, которые можно добавить к окну или представлению. Приложение TrackMix уже содержит окно — теперь необходимо добавить текстовое поле, ползунок и кнопку. Затем Вы делаете соединения между этими элементами и Вашими классами, и реализуете поведение, которое Вы хотите в следующей главе.

Добавьте элементы UI
Вы добавляете элементы UI путем перетаскивания их от библиотеки объектов до представления или окна. После того, как элементы UI добавляются, можно переместить, изменить размеры и сконфигурировать их по мере необходимости.
В навигаторе проекта, под группой TrackMix, выбор
MainMenu.xibфайл для отображения окна TrackMix.Если необходимо, нажмите самую правую кнопку View на панели инструментов для отображения служебной области в правой стороне окна.

Если необходимо, щелкните по значку объекта окна в области редактора для отображения окна.
В области редактора сделайте окно более узким путем перетаскивания трех точек, кажущихся смежными с углами и краями окна.

Если необходимо, открытый библиотека объектов.
Библиотека объектов появляется у основания служебной области. Если Вы не видите библиотеки объектов, можно нажать ее кнопку, которая является третьей кнопкой слева в панели селектора библиотеки:

В библиотеке объектов выберите Cocoa> Controls от всплывающего меню Библиотеки объектов.
XCode выводит на экран список средств управления ниже всплывающего меню. Список выводит на экран имя каждого управления, изображение и краткое описание его функции.
По одному перетащите текстовое поле, вертикальный ползунок и кнопку из списка и в окно.
Можно использовать поле поиска в основе служебной области для нахождения объектов, Вы хотите и перетаскиваете их к окну.

Вы изменяете размеры использования элементов, изменяют размеры дескрипторов, где это необходимо, и меняют местоположение их путем перетаскивания. Поскольку Вы перемещаете элементы в представлении, руководства по выравниванию выведены на экран как подчеркнутые штриховой линией синие строки.
Перетащите текстовое поле так, чтобы это было около вершины окна и центрируется горизонтально.
Поскольку Вы перемещаете текстовое поле (или любой элемент UI), штриховые синие строки — названный руководствами по выравниванию — появляются, которые помогают Вам выровнять элемент с центром и краями представления. Прекратите перетаскивать текстовое поле, когда Вы будете видеть центральные и верхние руководства по выравниванию представления, как показано здесь:

Перетащите вертикальный ползунок так, чтобы это казалось в центре и ниже текстового поля.
В представлении подготовьте изменять размеры вертикального ползунка.
Вы изменяете размеры элемента UI путем перетаскивания изменять размеры дескрипторов, которые являются небольшими белыми квадратами, которые могут появиться на границах элемента. В целом Вы показываете, что элемент изменяет размеры дескрипторов путем выбора его. Если Ваш вертикальный ползунок похож на тот ниже, Вы готовы изменить размеры его; если это не делает, выберите его на холсте.

Перетащите вертикальный ползунок, ниже изменяют размеры дескриптора, пока не появляется руководство по выравниванию по центру окна.
Прекратите изменять размеры текстового поля, когда Вы будете видеть что-то вроде этого:

Перетащите кнопку так, чтобы это было около нижней части окна (ниже вертикального ползунка) и центрируется горизонтально.
После того, как Вы добавите текстовое поле, вертикальный ползунок и элементы кнопки UI и сделаете рекомендуемые изменения макета, Ваш проект должен выглядеть подобным этому:

Можно указать часть поведения элементов UI и появления с помощью инспектора Атрибутов. Добавьте строку по умолчанию 5 к текстовому полю сконфигурируйте вертикальный ползунок, чтобы иметь минимальные и максимальные значения и установить заголовок кнопки к Mute.
Щелкните по текстовому полю, чтобы выбрать его и открыть инспектора Атрибутов (если необходимый) путем щелчка по значку, который похож на это:

В поле Текста заголовка наверху инспектора Атрибутов Текстового поля войти
5.Это - начальное значение текстового поля. Также дважды щелкните по текстовому полю в окне TrackMix и введите номер непосредственно.
Нажмите Align Center button для центрирования текста текстового поля.
После того, как Вы введете текст и измените настройки выравнивания, инспектор Атрибутов Текстового поля должен быть похожим на это:

В области редактора выберите ползунок.
В поле Minimum раздела Value инспектора Атрибутов Ползунка введите нуль (
0).В поле Maximum раздела Value войти
11.В поле Current Value войти
5(для соответствия текстового поля).Прокрутите вниз к атрибутам Управления (если необходимый), и установите флажок Continuous.
Если ползунок непрерывен, он отправляет сообщения, в то время как он перемещается, а не только когда установлено новое значение.
После того, как Вы измените настройки ползунка, инспектор Атрибутов Ползунка должен быть похожим на это:

Выполнить одно из следующих действий:
Дважды щелкните в кнопке, введите
Mute, и нажмите Tab.Нажмите кнопку, введите
Muteв поле Title инспектора Атрибутов Кнопки, и нажимают Tab.
Дополнительно, щелкните по Кнопке запуска (или выберите Product> Run) удостоверяться, что элементы UI, Вы добавили взгляд путем, Вы ожидаете их к. Необходимо видеть что-то вроде этого:

Можно взаимодействовать с элементами UI, но в данный момент, Кнопка отключения звука ничего не делает, ввод текстового поля не перемещает кнопку ползунка, и ползунок не изменяет значение, выведенное на экран текстовым полем. Для добавления этой функциональности необходимо сделать надлежащие соединения между элементами UI и записать некоторый код. Эти соединения описаны затем.
Действия по созданию для кнопки, текстового поля и ползунка
Когда пользователь активирует элемент UI, элемент может отправить сообщение в объект, знающий, как выполнить соответствующее действие. Это взаимодействие является частью механизма целевого действия, шаблона разработки Какао.
В этом учебном руководстве, когда пользователь щелкает по Кнопке отключения звука, Вы хотите, чтобы она отправила “регулируемый громкость дорожки для обнуления” сообщения (действие) делегату приложения (цель). В этом случае делегат приложения действует как контроллер представления в шаблоне разработки Контроллера представления Модели. Это сообщение действия изменяет данные «модели» (объем дорожки), которым управляет делегат приложения. Затем делегат приложения обновляет другие представления (ползунок и текстовое поле) для отражения изменения в данных объекта модели. Вы создадите объект модели, представляющий дорожку позже.

Используя XCode, можно установить действие для элемента UI и установить его соответствующий метод действия Перетаскиванием управления от элемента на холсте к файлу соответствующего источника (например, к AppDelegate исходный файл класса). Соединения, которые Вы создаете таким образом, архивируются, вместе с элементами UI, в файле пера. Позже, когда загрузки приложения файл пера, восстанавливаются соединения.
Если необходимо, выбрать
MainMenu.xibв навигаторе проекта для отображения окна приложения.На панели инструментов Xcode нажмите кнопку Utilities (самое правое управление Представлением), чтобы скрыть служебную область и нажать кнопку Заместителя редактора для отображения области заместителя редактора.
Кнопка Заместителя редактора является средней кнопкой Editor, и это похоже на это
:. Удостоверьтесь, что заместитель редактора выводит на экран
AppDelegateзаголовочный файл класса (т.е.AppDelegate.h).Выбрать
AppDelegate.hиз меню Top Level Objects наверху заместителя редактора.
На редакторе Перетащите управление от Кнопки отключения звука до области объявления метода в
AppDelegate.h(т.е. между@interfaceоператор и@endоператор).Для Перетаскивания управление нажмите и содержите Клавишу CTRL, в то время как Вы перетаскиваете от кнопки до заголовочного файла в области заместителя редактора.

При выпуске Перетаскивания управление XCode выводит на экран легкую сдобу, в которой можно сконфигурировать соединение действия, которое Вы просто сделали.

В легкой сдобе сконфигурируйте соединение действия кнопки:
Во всплывающем меню Соединения выберите Action.
В Поле имени введите имя метода
mute:.На более позднем шаге Вы реализуете
mute:метод для обнуления объема.Удостоверьтесь, что поле Type содержит
id.idтип данных может представлять любой объект Какао. Вы хотите использоватьidздесь, потому что не имеет значения, какой объект отправляет сообщению.
После конфигурирования соединения действия легкая сдоба должна быть похожей на это:

В легкой сдобе нажмите Connect.
XCode добавляет объявление метода к заголовочному файлу и тупику для нового метода к файлу реализации. XCode указывает, что соединение было сделано путем отображения заполненного - в кругу налево от метода:

Перетащите управление от текстового поля до области объявления метода в
AppDelegate.h.
В легкой сдобе, появляющейся, когда Вы выпускаете Перетаскивание управление, конфигурируете соединение действия текстового поля:
Во всплывающем меню Соединения выберите Action.
В Поле имени войти
takeFloatValueForVolumeFrom:.На более позднем шаге Вы реализуете
takeFloatValueForVolumeFrom:метод, чтобы установить данные модели и синхронизировать текстовое поле с ползунком.Удостоверьтесь, что поле Type содержит
id.
В легкой сдобе нажмите Connect.
XCode добавляет объявление метода к заголовочному файлу и тупику для нового метода к файлу реализации. XCode указывает, что соединение было сделано путем отображения заполненного - в кругу налево от метода:

Вы выполнили две вещи Перетаскиванием управления от поля кнопки и текстового поля к AppDelegate.h заголовочный файл:
Вы создали соединение между элементом UI и делегатом приложения объект.
Например, когда файл пера загружается, цель кнопки поставлена делегату приложения, объект и его действие установлены в
mute:обменивайтесь сообщениями так, чтобы, когда кнопка нажата, она отправилаmute:передайте делегату приложения объект. (В Objective C объекты отправляют сообщения друг другу, и время выполнения Objective C определяет который реализация метода выполниться.)Вы добавили соответствующий код к
AppDelegateкласс. В частности Вы добавили следующие реализации тупика метода действия кAppDelegate.mи соответствующие объявления кAppDelegate.h:- (IBAction)mute:(id)sender {}
- (IBAction)takeFloatValueForVolumeFrom:(id)sender {}
Перетаскивание управления от элемента UI до исходного кода является удобным ярлыком для создания соединения с объектом и добавлением действия или выхода к его классу. Если действие или выход уже существуют, Вы Перетаскиваете управление непосредственно к или от него.
Поскольку ползунок может использовать то же takeFloatValueForVolumeFrom: метод как текстовое поле использует, Вы просто соединяетесь, это к приложению делегирует объект поставить цель и действие ползунка. Можно сделать это, потому что метод действия был добавлен к AppDelegate класс на предыдущем шаге.
В области редактора Перетащите управление от ползунка до Делегата Приложения синий куб, появляющийся на левой стороне области редактора ниже значка окна (синий куб представляет объект).
XCode выводит на экран список методов действия, реализованных
AppDelegateкласс.
При выпуске Перетаскивания управление выберите
takeFloatValueForVolumeFrom:метод для создания соединения.
Создайте выходы для текстового поля и ползунка
Выход описывает соединение между двумя объектами. Когда Вы хотите, чтобы объект (такой как делегат приложения) связался с объектом в файле пера (таком как текстовое поле), Вы определяете содержащий в нем объект как выход. Когда файл пера загружается во время выполнения, выход, который Вы создаете в XCode, восстанавливается, который позволяет объектам связаться друг с другом.
В этом учебном руководстве Вы хотите, чтобы делегат приложения получил текст пользователя от текстового поля, регулировал громкость соответственно и обновил ползунок. Для разрешения приложения делегируют для передачи с этими объектами, Вы создаете соединения розетки для каждого. Вам нужен выход только для текстового поля и ползунка. Вам не нужен выход для кнопки, потому что делегат приложения не должен отправлять сообщения в кнопку.
Шаги, которые Вы предпринимаете для добавления выходов для текстового поля и ползунка, очень подобны шагам, которые Вы предприняли, когда Вы добавили действие кнопки. Перед запуском удостоверьтесь что MainMenu.xib файл все еще видим в редакторе и этом AppDelegate.h открыто в заместителе редактора.
Перетащите управление от текстового поля в окне к области объявления метода в интерфейсном файле.
Не имеет значения, где Вы выпускаете Перетаскивание управление, пока это в области объявления метода. В этом учебном руководстве новые выходы появляются ниже объявления выхода окна.
В легкой сдобе, появляющейся, когда Вы выпускаете Перетаскивание управление, конфигурируете соединение текстового поля:
Удостоверьтесь, что всплывающее меню Соединения содержит Выход.
В Поле имени войти
textField.Можно вызвать выход вообще, Вы хотите, но Ваш код более понятен, когда имя выхода имеет некоторое отношение к элементу, это представляет.
Удостоверьтесь, что поле Type содержит
NSTextField.Установка поля Type к
NSTextFieldгарантирует, что XCode подключает выход только к текстовому полю.Удостоверьтесь, что всплывающее меню Хранения содержит Слабый, который является значением по умолчанию для выходов.
После установки этих настроек легкая сдоба должна быть похожей на это:

В легкой сдобе нажмите Connect.
XCode добавляет объявление для выхода и указывает, что соединение было сделано путем отображения заполненного - в кругу налево от метода:

Перетащите управление от ползунка в окне к области объявления метода в заголовочном файле.
В легкой сдобе, появляющейся, когда Вы выпускаете Перетаскивание управление, конфигурируете соединение ползунка:
Удостоверьтесь, что всплывающее меню Соединения содержит Выход.
В Поле имени войти
slider.Удостоверьтесь, что поле Type содержит
NSSlider.Удостоверьтесь, что всплывающее меню Хранения содержит Слабый.
После установки этих настроек легкая сдоба должна быть похожей на это:

В легкой сдобе нажмите Connect.
Вы выполнили две вещи путем добавления выходов для текстового поля и ползунка:
Вы установили соединения розетки от делегата приложения в текстовом поле и ползунке.
Когда файл пера загружается, делегат приложения
textFieldвыход (свойство Objective-C) установлен вNSTextFieldвозразите иsliderвыход установлен вNSSliderобъект. Это позволяет делегату приложения непосредственно получать и устанавливать значения этих элементов UI.Вы добавили соответствующий код к
AppDelegateкласс. В частности Вы добавили следующие свойства кAppDelegate.h:@property (weak) IBOutlet NSTextField *textField;
@property (weak) IBOutlet NSSlider *slider;
Кроме того, Вы добавили следующие строки кода к
AppDelegate.mсинтезировать эти свойства (процесс, создающий соответствие, добираются и методы установки):@synthesize textField;
@synthesize slider;
В этой точке в учебном руководстве Вы создали в общей сложности пять соединений с делегатом приложения объект:
Соединение действия для кнопки
Соединение действия для текстового поля
Соединение действия для ползунка
Соединение розетки для текстового поля
Соединение розетки для ползунка
Можно проверить эти соединения в инспекторе Соединений.
При просмотре
MainMenu.xibфайл, нажмите Стандартную кнопку редактора, чтобы закрыть заместителя редактора и переключиться на стандартное представление редактора.Стандартная кнопка редактора является крайней левой кнопкой Editor, и это похоже на это:

Нажмите кнопку представления Utilities для открытия области утилит.
Выберите App Delegate в области редактора (синий куб, расположенный под значком окна).
Покажите инспектору Соединений в области утилит.
Инспектор Соединений нажимает на кнопку, находится в панели селектора инспектора, и она похожа на это:

В инспекторе Соединений XCode выводит на экран соединения для выбранного объекта (в этом случае, делегат приложения). В Вашем окне рабочей области необходимо видеть что-то вроде этого:

Заметьте эти пять соединений (три действия и два выхода), Вы создали делегату приложения. Так как текстовое поле и вертикальный ползунок используют то же takeFloatValueForVolumeFrom: метод действия они группируются при Полученных Действиях. Также заметьте, что существует соединение между делегатом приложения и его окном и делегатом приложения и Владельцем Файла. XCode обеспечивает эти соединения по умолчанию для Вашего удобства; Вы не должны использовать их всегда.
Протестируйте приложение
При выполнении приложения теперь оно ведет себя то же как прошлый раз, когда Вы протестировали его после первого добавления элементов UI к окну. Соединения между объектами существуют, но потому что методы действия ничего не делают, нет никакого нового поведения наблюдать. Так, чтобы можно было протестировать и лучше понять соединения, Вы сделали в файле реализации, AppDelegate.m, добавьте операторы журнала к методам действия.
Выведите на экран файл реализации в редакторе исходного кода путем выбора
AppDelegate.mв области навигатора на левой панели.Добавьте сингл
NSLogоператор кmute:метод, чтобы указать, что был вызван метод.- (IBAction)mute:(id)sender {NSLog(@"received a mute: message");
}
Реализуйте
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]);
}
Проверки метода, какое управление было отправителем и регистрирует сообщение, указывающее и отправителя и его текущее значение плавающее.
NSLogфункционируйте регистрирует строку с помощью формата, указанного строкой формата. (Это очень подобно Cprintfфункция.) Строка%@указывает, что нужно заменить строковым объектом.Метод комбинирует два довольно общих образца в Какао: определение отправителя сообщения и передачи обратно сообщения к нему. В этом случае не необходимо знать, какой объект отправил сообщение — все, что это необходимо, его значение плавающее — но это служит, чтобы проиллюстрировать тезис.
При тестировании приложения покажите консоль так, чтобы Вы видели сообщения журнала.
Щелкните по Кнопке запуска на панели инструментов на сборку и выполните проект.
Если диалоговое окно кажется спрашивающим, прекратить ли выполнять TrackMix, нажмите Stop.
Если необходимо, на панели инструментов Xcode, нажимают кнопку области отладки для показа области отладки.
Кнопка области отладки является средним управлением Представлением, и это похоже на это:

Нажмите самую правую кнопку на панели инструментов представления области отладки рядом с кнопкой Clear для отображения консоли.


Удостоверьтесь, что Вывод Target выбран из консольного всплывающего меню.

В TrackMix введите числовое значение в текстовое поле и нажмите Return, переместите ползунок и щелкните по Кнопке отключения звука.
Поскольку Вы взаимодействуете с этими элементами UI, необходимо видеть надлежащие сообщения в консоли.
Резюме
Вы создали соединения между элементами UI и делегатом приложения объект Перетаскиванием управления от элемента UI до a AppDelegate исходный файл класса и конфигурирование действия или выхода. Эта работа выполнила две задачи: Это создало соединение между объектами и добавило необходимый код для действия или выхода к исходным файлам.
Вы не должны использовать функцию Xcode, автоматически добавляющую код, когда Вы устанавливаете соединение Перетаскиванием управления от холста до исходного файла. Вместо этого можно добавить свойство и объявления метода к исходным файлам сами и затем сделать соединения из элементов UI непосредственно Делегату Приложения объектом в области редактора. Как правило, хотя, Вы делаете меньше ошибок (и имейте меньше ввода, чтобы сделать), когда Вы позволяете XCode выполнить такую большую работу, как это может.
В настоящее время пользовательский интерфейс не синхронизируется (т.е. текстовое поле и ползунок могут иметь различные значения). В следующей главе Вы реализуете Track класс для разделения данных модели от элементов UI и в следующей главе реализует методы действия.
© 2013 Apple Inc.Все права защищены. (Последнее обновление: 23.04.2013)