Dashcode в Mac OS X

Интегрированная среда Dashcode позволяет вам выложить, код, и даже протестировать виджеты и веб-приложения без открытия других приложений. Его разметочные инструменты упрощают процесс создания всех необходимых ресурсов. Dashcode также включает в себя удобные средства кодирования и отладки, которые помогут вам управлять и тестировать созданный вами код.

Перед началом работы

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

Перейдите на сайт http://developer.apple.com. Зарегистрируйтесь в качестве Apple developer - это бесплатно и загрузите инструмент Dashcode.

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

dashboard widget дней до моего дня рождения

Выбираем шаблон

Запускаем Dashcode, на странице создания нового проекта выбираем проект Dashboard и шаблон Countdown, как показано ниже.

dashcode new project

В результате создастся новый проект на основе шаблона, окно Dascode будет выглядеть примерно следующим образом:

dashboard coutdown template project

По левой стороне окна проекта расположен навигатор, который можно использовать для переключения между различными инструментами, доступными при проектировании виджета. Основная часть окна - канва (холст), которую вы используете для разработки интерфейса виджета.

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

Примечание: Если вы не хотите, видеть список Workflow Steps, вы можете скрыть его, выбрав View > Steps в меню или, нажав на кнопку, которая выглядит как checkbox на нижней кромке окна проекта.

Кроме того, вы можете просмотреть список файлов виджета на месте списка Workflow Steps. Если вы хотите, увидеть список файлов, выберите View > Files или нажмите на кнопку списка в нижней кромке окна проекта (это кнопка выглядит как маркированный список).

Установка намеченной даты

Countdown шаблон предоставляет вам Dashboard виджет со всеми элементами и кодом, необходимыми для отсчета до требуемого события. Все, что вам нужно сделать, это рассказать виджету о намеченном сроке. Чтобы задать намеченную дату, выберите Widget Attributes в навигаторе. Канва заменяется на панель атрибутов виджетов, в которой вы можете задать важные значения, в которых нуждается ваш виджет.

В разделе Properties панели атрибутов виджетов, выберите Date and Time в Target Kind всплывающем меню и введите дату вашего следующего дня рождения, как показано на рисунке ниже:

dashcode set attributes

Тестирование Countdown

Ваш новый виджет Dashboard полностью функционален. Чтобы убедиться в этом, выберите Debug > Run для запуска виджета. Dashcode может запустить виджет, не открывая его в Dashboard, что делает его удобным местом для тестирования виджета и устранения любых проблем. После того, как виджет загрузится, он начинает отсчет до вашего очередного дня рождения.

Когда вы будете удовлетворены, что ваш виджет работает так, как вы ожидаете, выберите Debug > Stop, чтобы остановить его.

Теперь сохраните проект виджета. Выберите File > Save, чтобы сохранить проект. Задайте вашему проекту имя и выберите папку для его сохранения. Ваш виджет будет сохранен в виджет проекте, который инкапсулирует виджет и информацию Dashcode необходимую для создания для вас виджета.

Настройки внешнего вида виджета

Хотя теперь у вас есть полностью функционирующий виджет Dashboard, которым вы готовы поделиться, вы можете настроить его, чтобы сделать его уникальным. Инструменты дизайна в Dashcode позволяют легко настроить интерфейс виджета. Выберите Widget пункт в навигаторе (он должен отображать имя, которое вы дали ему при сохранении проекта). На панели виджетов атрибуты заменяются на канву.

Во-первых, изменим цвет нашего виджета. Выделите сам виджет (также называемый front image или frontImg) на канве, а затем выберите Window > Show Inspector. Окно инспектора позволяет изменять свойства выбранного элемента, например, его внешний вид и поведение. Нажмите кнопку Fill & Stroke в верхней части окна инспектора (вторая слева). Если она еще не выбрана, выберите вкладку Style, чтобы установить значения заливки, обводки, угловых округлостей, и непрозрачности. Нажмите на цвет и выберите новый цвет в окне цветовой гаммы. Пробуйте различные стили заливки, пока не найдете комбинацию, которая вам понравится. Если вы хотите, попытаться изменить другие эффекты, такие как стеклянный внешний вид, выберите вкладку Effects, чтобы обнаружить эти значения, как показано на рисунке ниже:

dashcode front image

Когда вы закончите настройку вашего виджета, добавьте свою фотографию из iPhoto на виджет. Ваша iPhoto библиотека доступна из окнa Library. Чтобы показать свою iPhoto библиотеку, выберите Window > Show Library, а затем нажмите кнопку Photo. Найдите фотографию и перетащите ее в ваш виджет на холсте. Измените размер путем перетаскивания любого из маркеров изменения размера на фото.

И, наконец, измените текст Event Label на что-то вроде "... дней до моего дня рождения." Вы можете сделать это, выбрав текст Event Label, нажать на кнопку Attributes в окне инспектора (левая кнопка) и введя текст в поле Value, или двойным щелчком мыши по тексту в виджете и ввести новый текст.

Добавим функциональности с использованием элементов управления

Теперь у вас есть персонализированный виджет Dashboard, который ведет отсчет до вашего ​​дня рождения, добавим кнопку, при нажатии на которую, выводится Apple Store (чтобы ваши друзья и семья могли купить вам подарок на день рождения!). Чтобы добавить кнопку на ваш виджет, используйте кнопку part. Parts содержит элементы управления и просмотра используемые в интерфейсе виджета.

Чтобы найти кнопку Parts, выберите Window > Show Library и нажмите Parts. Вы можете использовать поле поиска в нижней части окна, чтобы найти определенную parts или тип Parts. Из списка, перетащите элемент Lozenge Button из окна библиотеки, на тело вашего виджета. Дважды щелкните кнопку, чтобы выбрать ее текст, введите текст "купить подарок" и нажмите Enter. Вам, вероятно, потребуется изменить размер кнопки, чтобы соответствовать новому тексту.

Создадим код, чтобы показать магазин Apple Store

Для того, чтобы обработать событие нажатия пользователя на кнопку вызова Apple Store, вы должны добавить обработчик србытия к кнопке. В окне инспектора нажмите кнопку Behaviors (самая правая кнопка). Это выведит панель поведения, в которой вы назначаете функций обработчика событий для объекта. Нажмите кнопку на канве и дважды щелкните на колонке Handlers рядом с событием onclick. Введите название новой функции, к примеру showAppleStore и нажмите Return. Нажмите на стрелку рядом с именем функции которую вы ввели, чтобы показать редактор исходного кода под канвой. Здесь вы пишете код для добавления функциональности в ваш виджет. Нажатие стрелки показывает в Dashcode showAppleStore функцию вставленнуюя в код виджета. Между фигурными скобками ({..}) введите следующие строки кода:

widget.openURL("http://store.apple.com/");
dashcode events onclick behavor

Проверьте свой виджет снова, выбрав Debug > Run. Нажмите на кнопку, которую вы добавили и убедитесь, что в новом окне Safari открывается веб-сайт Apple Store. Сохраните ваш проект, чтобы сохранить внесенные изменения.

Развертывание Widget

Чтобы открыть виджет в Dashboard, выберите File > Deploy Widget. Нажмите кнопку Install в появившемся диалоговом окне, чтобы увидеть виджет в Dashboard.

Чтобы поделиться своим виджетом с миром, выберите пункт Run & Share в навигаторе, которая отобразит имя проекта виджета, который вы выбрали в "dash1", но вы можете заменить его другим именем, если хотите. Вы также можете установить минимальную версию OS X с которой виджет должен работать. Нажмите кнопку Save to disk для сохранения вашего виджета. Теперь вы можете отправлять по электронной почте друзьям или разместить его на своем сайте.

 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac