Spec-Zone .ru
спецификации, руководства, описания, API
Библиотека разработчика Mac Разработчик
Поиск

Конфигурирование окна

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

image: ../Art/TrackMixViews.png

Добавьте элементы UI

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

bullet
Добавить элементы UI к окну
  1. В навигаторе проекта, под группой TrackMix, выбор MainMenu.xib файл для отображения окна TrackMix.

  2. Если необходимо, нажмите самую правую кнопку View на панели инструментов для отображения служебной области в правой стороне окна.

    image: ../Art/utility_button.png
  3. Если необходимо, щелкните по значку объекта окна в области редактора для отображения окна.

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

    image: ../Art/9_ib_objectlibrary.png
  5. Если необходимо, открытый библиотека объектов.

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

    image: ../Art/9b_objectlibrarybutton.png
  6. В библиотеке объектов выберите Cocoa> Controls от всплывающего меню Библиотеки объектов.

    XCode выводит на экран список средств управления ниже всплывающего меню. Список выводит на экран имя каждого управления, изображение и краткое описание его функции.

  7. По одному перетащите текстовое поле, вертикальный ползунок и кнопку из списка и в окно.

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

    image: ../Art/9c_objectlibrarysearch.png

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

bullet
Размечать элементы UI соответственно
  1. Перетащите текстовое поле так, чтобы это было около вершины окна и центрируется горизонтально.

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

    image: ../Art/13_dragtextfield.png
  2. Перетащите вертикальный ползунок так, чтобы это казалось в центре и ниже текстового поля.

  3. В представлении подготовьте изменять размеры вертикального ползунка.

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

    image: ../Art/14_resizeslider.png
  4. Перетащите вертикальный ползунок, ниже изменяют размеры дескриптора, пока не появляется руководство по выравниванию по центру окна.

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

    image: ../Art/15_stopresizeslider.png
  5. Перетащите кнопку так, чтобы это было около нижней части окна (ниже вертикального ползунка) и центрируется горизонтально.

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

image: ../Art/10_ib_layout.png

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

bullet
Сконфигурировать текстовое поле
  1. Щелкните по текстовому полю, чтобы выбрать его и открыть инспектора Атрибутов (если необходимый) путем щелчка по значку, который похож на это: image: ../Art/attributes_icon.jpg

  2. В поле Текста заголовка наверху инспектора Атрибутов Текстового поля войти 5.

    Это - начальное значение текстового поля. Также дважды щелкните по текстовому полю в окне TrackMix и введите номер непосредственно.

  3. Нажмите Align Center button для центрирования текста текстового поля.

    После того, как Вы введете текст и измените настройки выравнивания, инспектор Атрибутов Текстового поля должен быть похожим на это:

    image: ../Art/16_textfieldattrinsp.png
bullet
Сконфигурировать ползунок
  1. В области редактора выберите ползунок.

  2. В поле Minimum раздела Value инспектора Атрибутов Ползунка введите нуль (0).

  3. В поле Maximum раздела Value войти 11.

  4. В поле Current Value войти 5 (для соответствия текстового поля).

  5. Прокрутите вниз к атрибутам Управления (если необходимый), и установите флажок Continuous.

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

    После того, как Вы измените настройки ползунка, инспектор Атрибутов Ползунка должен быть похожим на это:

    image: ../Art/17_sliderattrinsp.png
bullet
Сконфигурировать кнопку

Выполнить одно из следующих действий:

  • Дважды щелкните в кнопке, введите Mute, и нажмите Tab.

  • Нажмите кнопку, введите Mute в поле Title инспектора Атрибутов Кнопки, и нажимают Tab.

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

image: ../Art/18_runtrackmix.png

Можно взаимодействовать с элементами UI, но в данный момент, Кнопка отключения звука ничего не делает, ввод текстового поля не перемещает кнопку ползунка, и ползунок не изменяет значение, выведенное на экран текстовым полем. Для добавления этой функциональности необходимо сделать надлежащие соединения между элементами UI и записать некоторый код. Эти соединения описаны затем.

Действия по созданию для кнопки, текстового поля и ползунка

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

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

image: ../Art/TrackMixVC.png

Используя XCode, можно установить действие для элемента UI и установить его соответствующий метод действия Перетаскиванием управления от элемента на холсте к файлу соответствующего источника (например, к AppDelegate исходный файл класса). Соединения, которые Вы создаете таким образом, архивируются, вместе с элементами UI, в файле пера. Позже, когда загрузки приложения файл пера, восстанавливаются соединения.

bullet
Добавить действие для кнопки
  1. Если необходимо, выбрать MainMenu.xib в навигаторе проекта для отображения окна приложения.

  2. На панели инструментов Xcode нажмите кнопку Utilities (самое правое управление Представлением), чтобы скрыть служебную область и нажать кнопку Заместителя редактора для отображения области заместителя редактора.

    Кнопка Заместителя редактора является средней кнопкой Editor, и это похоже на этоimage: ../Art/assistant_editor_button.jpg:.

  3. Удостоверьтесь, что заместитель редактора выводит на экран AppDelegate заголовочный файл класса (т.е. AppDelegate.h).

    Выбрать AppDelegate.h из меню Top Level Objects наверху заместителя редактора.

    image: ../Art/18b_assistantmenu.png
  4. На редакторе Перетащите управление от Кнопки отключения звука до области объявления метода в AppDelegate.h (т.е. между @interface оператор и @end оператор).

    Для Перетаскивания управление нажмите и содержите Клавишу CTRL, в то время как Вы перетаскиваете от кнопки до заголовочного файла в области заместителя редактора.

    image: ../Art/19a_buttonconnection.png

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

    image: ../Art/19_buttonconnection.png
  5. В легкой сдобе сконфигурируйте соединение действия кнопки:

    • Во всплывающем меню Соединения выберите Action.

    • В Поле имени введите имя метода mute:.

      На более позднем шаге Вы реализуете mute: метод для обнуления объема.

    • Удостоверьтесь, что поле Type содержит id.

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

    После конфигурирования соединения действия легкая сдоба должна быть похожей на это:

    image: ../Art/20_buttonconnection2.png
  6. В легкой сдобе нажмите Connect.

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

    image: ../Art/21_buttonactionmethod.png
bullet
Добавить действие для текстового поля
  1. Перетащите управление от текстового поля до области объявления метода в AppDelegate.h.

    image: ../Art/22a_textfieldconnection.png
  2. В легкой сдобе, появляющейся, когда Вы выпускаете Перетаскивание управление, конфигурируете соединение действия текстового поля:

    • Во всплывающем меню Соединения выберите Action.

    • В Поле имени войти takeFloatValueForVolumeFrom:.

      На более позднем шаге Вы реализуете takeFloatValueForVolumeFrom: метод, чтобы установить данные модели и синхронизировать текстовое поле с ползунком.

    • Удостоверьтесь, что поле Type содержит id.

  3. В легкой сдобе нажмите Connect.

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

    image: ../Art/22_textfieldactionmethod.png

Вы выполнили две вещи Перетаскиванием управления от поля кнопки и текстового поля к AppDelegate.h заголовочный файл:

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

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

bullet
Поставить цель и действие ползунка
  1. В области редактора Перетащите управление от ползунка до Делегата Приложения синий куб, появляющийся на левой стороне области редактора ниже значка окна (синий куб представляет объект).

    XCode выводит на экран список методов действия, реализованных AppDelegate класс.

    image: ../Art/22b_slideraction.png
  2. При выпуске Перетаскивания управление выберите takeFloatValueForVolumeFrom: метод для создания соединения.

Создайте выходы для текстового поля и ползунка

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

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

Шаги, которые Вы предпринимаете для добавления выходов для текстового поля и ползунка, очень подобны шагам, которые Вы предприняли, когда Вы добавили действие кнопки. Перед запуском удостоверьтесь что MainMenu.xib файл все еще видим в редакторе и этом AppDelegate.h открыто в заместителе редактора.

bullet
Добавить выход для текстового поля
  1. Перетащите управление от текстового поля в окне к области объявления метода в интерфейсном файле.

    Не имеет значения, где Вы выпускаете Перетаскивание управление, пока это в области объявления метода. В этом учебном руководстве новые выходы появляются ниже объявления выхода окна.

  2. В легкой сдобе, появляющейся, когда Вы выпускаете Перетаскивание управление, конфигурируете соединение текстового поля:

    • Удостоверьтесь, что всплывающее меню Соединения содержит Выход.

    • В Поле имени войти textField.

      Можно вызвать выход вообще, Вы хотите, но Ваш код более понятен, когда имя выхода имеет некоторое отношение к элементу, это представляет.

    • Удостоверьтесь, что поле Type содержит NSTextField.

      Установка поля Type к NSTextField гарантирует, что XCode подключает выход только к текстовому полю.

    • Удостоверьтесь, что всплывающее меню Хранения содержит Слабый, который является значением по умолчанию для выходов.

    После установки этих настроек легкая сдоба должна быть похожей на это:

    image: ../Art/23_textfieldconnection.png
  3. В легкой сдобе нажмите Connect.

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

    image: ../Art/24_textfieldoutlet.png
bullet
Добавить выход для ползунка
  1. Перетащите управление от ползунка в окне к области объявления метода в заголовочном файле.

  2. В легкой сдобе, появляющейся, когда Вы выпускаете Перетаскивание управление, конфигурируете соединение ползунка:

    • Удостоверьтесь, что всплывающее меню Соединения содержит Выход.

    • В Поле имени войти slider.

    • Удостоверьтесь, что поле Type содержит NSSlider.

    • Удостоверьтесь, что всплывающее меню Хранения содержит Слабый.

    После установки этих настроек легкая сдоба должна быть похожей на это:

    image: ../Art/25_sliderconnection.png
  3. В легкой сдобе нажмите Connect.

Вы выполнили две вещи путем добавления выходов для текстового поля и ползунка:

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

Можно проверить эти соединения в инспекторе Соединений.

bullet
Открыть инспектора Соединений для делегата приложения
  1. При просмотре MainMenu.xib файл, нажмите Стандартную кнопку редактора, чтобы закрыть заместителя редактора и переключиться на стандартное представление редактора.

    Стандартная кнопка редактора является крайней левой кнопкой Editor, и это похоже на это: image: ../Art/standard_editor_button.jpg

  2. Нажмите кнопку представления Utilities для открытия области утилит.

  3. Выберите App Delegate в области редактора (синий куб, расположенный под значком окна).

  4. Покажите инспектору Соединений в области утилит.

    Инспектор Соединений нажимает на кнопку, находится в панели селектора инспектора, и она похожа на это: image: ../Art/connections_inspector_button.jpg

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

image: ../Art/26_inspectconnections.png

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

Протестируйте приложение

При выполнении приложения теперь оно ведет себя то же как прошлый раз, когда Вы протестировали его после первого добавления элементов UI к окну. Соединения между объектами существуют, но потому что методы действия ничего не делают, нет никакого нового поведения наблюдать. Так, чтобы можно было протестировать и лучше понять соединения, Вы сделали в файле реализации, AppDelegate.m, добавьте операторы журнала к методам действия.

bullet
Добавить операторы журнала к методам действия
  1. Выведите на экран файл реализации в редакторе исходного кода путем выбора AppDelegate.m в области навигатора на левой панели.

  2. Добавьте сингл NSLog оператор к mute: метод, чтобы указать, что был вызван метод.

    - (IBAction)mute:(id)sender {
        NSLog(@"received a mute: message");
    }
  3. Реализуйте 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 функционируйте регистрирует строку с помощью формата, указанного строкой формата. (Это очень подобно C printf функция.) Строка %@ указывает, что нужно заменить строковым объектом.

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

При тестировании приложения покажите консоль так, чтобы Вы видели сообщения журнала.

bullet
Протестировать приложение
  1. Щелкните по Кнопке запуска на панели инструментов на сборку и выполните проект.

    Если диалоговое окно кажется спрашивающим, прекратить ли выполнять TrackMix, нажмите Stop.

  2. Если необходимо, на панели инструментов Xcode, нажимают кнопку области отладки для показа области отладки.

    Кнопка области отладки является средним управлением Представлением, и это похоже на это: image: ../Art/debug_area_button.jpg

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

    image: ../Art/27b_consolebutton.pngimage: ../Art/27b_consolebutton.png
  4. Удостоверьтесь, что Вывод Target выбран из консольного всплывающего меню.

    image: ../Art/27_consolesettings.png
  5. В TrackMix введите числовое значение в текстовое поле и нажмите Return, переместите ползунок и щелкните по Кнопке отключения звука.

    Поскольку Вы взаимодействуете с этими элементами UI, необходимо видеть надлежащие сообщения в консоли.

Резюме

Вы создали соединения между элементами UI и делегатом приложения объект Перетаскиванием управления от элемента UI до a AppDelegate исходный файл класса и конфигурирование действия или выхода. Эта работа выполнила две задачи: Это создало соединение между объектами и добавило необходимый код для действия или выхода к исходным файлам.

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

В настоящее время пользовательский интерфейс не синхронизируется (т.е. текстовое поле и ползунок могут иметь различные значения). В следующей главе Вы реализуете Track класс для разделения данных модели от элементов UI и в следующей главе реализует методы действия.