Когда мы работали над нашим плагином Sketch Confetti, я заметил, насколько сложно было найти хорошую документацию, которая помогла бы нам создать что-то столь же простое, как диалоговое окно для плагина. Больше всего меня поразило отсутствие документации, когда я создавал диалоговое окно. Идея заключалась в том, чтобы создать диалоговое окно с параметрами плагина, которые будут отображаться, когда пользователь запускает плагин. Однако я потерял много времени, чтобы выяснить, как создать диалоговое окно, которое я задумал. Мне пришлось покопаться в коде других плагинов Sketch, чтобы получить общее представление о том, как диалоговые окна работают в Sketch. Если вы читаете это, вы, вероятно, находитесь в том же положении, что и я, когда часами проводил в сети в поисках способа создания диалоговых окон Sketch. Тебе повезло, твоя борьба здесь заканчивается.
Я задокументировал свои выводы и упростил процесс создания диалогового окна для вашего плагина Sketch. Поскольку статья получилась довольно длинной, мы решили разделить ее на 2 части. Наслаждайтесь частью 1 и следите за обновлениями части 2 в ближайшем будущем.
Оглавление
Набор инструментов разработчика Dialog
- Javascript
- Cocoascript
- Apple AppKit Framework
Простые диалоговые окна
- Показать сообщение
- Получите некоторый вклад
Расширенные диалоговые окна
- Настройка диалогового окна
- Размещение элементов (метки, поля ввода, изображения…) в диалоговом окне
- Создание этикеток
- Создание входов
- - TextInput
- - Раскрывающийся
- - Флажок
- - Переключатель
- Показать диалог
- … (часть 2)
Что нам понадобится
JavaScript
Правильно, это знакомое лицо из мира языков программирования присоединилось к нам! Вы сможете использовать все свои навыки JavaScript для создания отличных плагинов для Sketch.
CocoaScript
Sketch определяет CocoaScript как «мост, который позволяет вам использовать код Objective-C / Cocoa из внешнего скрипта, написанного на JavaScript. Мост заботится о переводе между JavaScript и Какао ». При использовании CocoaScript мы можем просто использовать JavaScript, а также получить доступ к структуре Apple Cocoa, которая открывает массу возможностей.
AppKit
Вы можете использовать платформу Apple AppKit для создания диалогового окна так, как вам нравится. Возможности безграничны. Это может показаться немного сложным при попытке создать диалоговое окно для вашего плагина Sketch, если вы не знакомы с AppKit (или даже с Cocoascript в целом). Однако не бойтесь. Базового набора навыков Javascript достаточно, чтобы создать роскошное диалоговое окно, когда вы будете следовать этому руководству.
Простые диалоговые окна
Не каждому плагину требуется расширенное диалоговое окно. Иногда простой ввод или сообщение могут помочь. Если вы ищете какой-то простой способ получить базовый ввод от пользователя и отобразить вывод пользователю в виде сообщения, вы найдете ответы на свои вопросы ниже.
Показать сообщение
Получите некоторый вклад
Пока все хорошо, но все становится сложнее, когда вашему плагину требуется расширенное диалоговое окно (с несколькими типами полей ввода).
Расширенные диалоговые окна
Когда вы требуете (или предлагаете) пользователю изменить настройки вашего плагина, было бы неплохо сгруппировать все эти параметры в одном диалоговом окне. Вы же не хотите расстраивать пользователя, рассылая ему серию диалоговых окон. В следующем разделе мы создадим более сложное диалоговое окно для вашего плагина Sketch.
Вы не хотите расстраивать пользователя, рассылая ему серию диалоговых окон.
Настройка диалогового окна
Возможно, вы захотите создать функцию (моя называется createWindow ()), в которую вы поместите весь код, который вы будете использовать для создания своего диалога и типов ввода.
Размещение элементов (метки, поля ввода, изображения…) в диалоговом окне
Вы можете оформить свой диалог так, как вам нравится. Вы можете использовать ярлыки, поля ввода, изображения ... Однако вы не можете просто волей-неволей добавить все эти элементы в диалоговое окно. Вы хотите расположить элементы на экране логически структурированным образом. Для этого мы должны сначала понять, как элементы могут быть расположены в диалоговом окне.
Для размещения элементов (таких как метки, текстовые поля, кнопки…) мы будем использовать AppKits NSMakeRect.
Создание этикеток
Ярлыки - отличный (и простой) способ отобразить текст в диалоговом окне, где бы вы ни хотели.
Создание входов
Хотя ярлыки хороши, они всего лишь; статические метки. В конце концов, вы захотите получить ввод от пользователя (ввод текста, выбранный вариант из раскрывающегося списка…) и обработать этот ввод. В этом разделе статьи мы рассмотрим, как вы можете создавать входные данные и отображать их в форме, готовые к получению входных данных от пользователя.
Примечание: в следующих примерах кода переменные для входов будут объявлены локально. В реальном проекте вам нужно объявить их глобально, чтобы вы могли вызывать их в других функциях. Фрагмент полного кода (с глобально объявленными переменными) доступен во второй части
TextInput
Если мы хотим получить только текст от пользователя, может быть достаточно простого диалогового окна с одним полем ввода (проверьте его в верхней части этой статьи). Но если нам нужен больший контроль над нашими полями (или если мы хотим, чтобы в одном окне отображалось несколько входных данных), нам понадобится более продвинутое диалоговое окно. Мы будем использовать ввод типа NSTextField для создания наших полей ввода.
Раскрывающийся список
Если мы хотим, чтобы наш пользователь выбрал вариант из предопределенного раскрывающегося списка, мы можем использовать NSPopUpButton
Раскрывающийся список - отличный способ заставить пользователя выбрать вариант из предопределенного (большого) списка параметров.
Флажок
Флажок на самом деле является типом кнопки, поэтому мы будем использовать тип ввода NSSwitchButton.
Переключатель
Хотя переключатель выглядит как флажок, код, стоящий за ним, немного более продвинутый. Чтобы создать переключатель, мы должны создать экземпляр NSButton с типом кнопки NSRadioButton. Однако радиокнопки используются для выбора одного варианта из выбора, поэтому мы должны сгруппировать радиокнопки, чтобы они имели смысл.
Вы ожидаете, что мы сделаем переключатель для каждого параметра и разместим этот переключатель в диалоговом окне, но фактический поток будет совершенно другим. Вместо этого мы собираемся определить NSMatrix, который будет содержать наши ячейки (так называемые переключатели). Поместив эти переключатели в NSMatrix, переключатели смогут «работать вместе». Это означает, что пользователь никогда не может выбрать более 1 радиокнопки, точно так же, как должны работать радиокнопки.
Отображение диалога
Мы просто инициализировали диалоговое окно внутри функции createWindows (), поэтому для отображения диалогового окна нам просто нужно вызвать это окно. Если вы хотите открывать диалоговое окно, когда пользователь щелкает пункт меню, вы можете обратиться к этой второй функции в файле manifest.json. Если вы запутались, вы можете найти весь код внизу этой статьи.
Я создал функцию getUserInput (), которая вызывает диалог, а также обрабатывает ответ. Не беспокойтесь об этом, мы разберемся, как это сделать, во второй части серии.
Далее во второй части
Поздравляем, теперь у вас есть красивое настраиваемое диалоговое окно для вашего плагина Sketch. Однако мы еще не закончили. Диалоговое окно может выглядеть законченным, но если мы не найдем способ получить и обработать данные, предоставленные нашим пользователем, диалог будет совершенно бессмысленным. К счастью, мы покажем вам, как именно это сделать, во части II серии. Тогда увидимся, ребята!
