DevExpress и Google Calendar #1. Введение в ExpressScheduler.

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

Чтобы быть последовательным в изложении всего материала, касающегося работы с Google Calendar в DevExpress я решил разделить всю серию постов на три большие части, которые условно можно обозначить следующим образом:

1. Работа с ExpressScheduler в оффлайн. Обзор компонентов ExpressScheduler, основные моменты по организации календарей и работе с событиями, типы событий, экспорт календарей и т.д.
2. Google Calendar API 3.0. Отличительные особенности этой версии API, работа с календарями и событиями в Google Calendar API, разработка компонентов и классов для работы с API в Delphi.
3. ExpressScheduler + Google API. Доработка компонентов ExpressScheduler для работы с Google Calendar API, синхронизация календарей и событий и т.д.

И сегодня я начну работу над первой частью из «трилогии». Сегодняшняя статья будет касаться набора компонентов DevExpress ExpressScheduler с которыми в дальнейшем нам предстоит очень плотно и, надеюсь, плодотворно работать.

Палитра компонентов ExpressScheduler

Итак, все компоненты для работы с календарями и событиями в DevExpress объединены в библиотеку под названием ExpressScheduler. Это довольно обширная библиотека, насчитывающая порядка 40 модулей. В ExpressScheduler нам доступны следующие компоненты:

cxSheduler. Визуальный компонент, представляющий собой сетку расписания. С точки зрения пользовательского интерфейса — это основной компонент. Именно с cxScheduler пользователь будет работать в большинстве случаев.

cxDateNavigator. Визуальный компонент, предоставляющий доступ к календарю. cxScheduler’е по умолчанию уже содержит DateNavigator, однако, если его использование не оправдано (надо сэкономить место в сетке, есть необходимость вынести календарь за границы сетки и т.д.), то для этого можно настроить cxDateNavigator на работу с cxScheduler. Также cxDateNavigator может использоваться как отдельный самостоятельный компонент.

cxSchedulerStorage. Компонент для хранения и управления событиями расписания, хранящимися в памяти. И, если cxScheduler — это основной компонент для пользователя, то cxScheduler (и его «родственник» cxSchedulerDBStorage) — это основные компоненты для разработчиков. Именно с этим компонентом нам предстоит разобраться детально в следующих статьях про DevExpress и Google Calendar API.

cxSchedulerHolidays. Компонент для хранения данных о праздниках, которые могут использоваться пользователями при работе с cxScheduler. cxSchedulerHolidays позволяет импортировать и экспортировать данные о праздниках в файлы (*.hol).

cxShedulerAggregateStorage. Компонент, позволяющих подключать к cxScheduler’у сразу несколько хранилищ, например, подключить одновременно cxShedulerStorage и cxShedulerDBStorage.

Кроме этого, как я уже сказал выше, в ExpressScheduler имеется достаточно большое количество различных модулей в которых содержатся разного рода хэлперы для работы с расписаниями, функции импорта/экспорта для iCalendar и т.д. С возможностями этих модулей мы будем разбираться по ходу работы, а пока посмотрим как можно использовать ExpressScheduler в своих приложениях.

Пример приложения, использующего ExpressScheduler

Для того, чтобы продемонстрировать самую простую работу с ExpressScheduler, создадим новый проект «VCL Application» и бросим на главную форму приложения два компонента — cxScheduler и cxSchedulerStorage. Должно получиться примерно так:

cxScheduler и cxSchedulerStorage

Теперь выбираем компонент cxScheduler и указываем в свойстве Storage наш компонент хранилища, который по умолчанию был назван как cxSchedulerStorage1.

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

[youtube_sc url=»http://www.youtube.com/watch?v=Kz2yTuwXLwU»]

Теперь, с помощью этого простенького приложения разберемся как можно настраивать и работать с компонентами ExpressScheduler.

Начнем с того, что «лежит на поверхности» — с компонента cxScheduler.

cxScheduler

По умолчанию в сетке расписания отображается расписание на день. Для того, чтобы показать расписание на другой промежуток времени необходимо воспользоваться одним из свойств ViewXXX в Object Inspector или вызвать контекстное меню компонента и выбрать необходимую опцию:

Опции настройки внешнего вида сетки в Object Inspector’е

Настройка внешнего вида сетки с использованием контекстного меню

Всего доступно шесть различных видов отображения сетки расписания:

Day — сетка расписания на один день. Как выглядит такая сетка Вы можете увидеть как в видео-ролике так и на рисунке выше.

Week — сетка расписания на неделю. Такая сетка может выглядеть следующим образом:

Расписание на неделю Две колонки.

Такой вид сетка принимает по умолчанию при установке вида Week.

Расписание на неделю. Одна колонка

Такой внешний вид сетки можно получить, изменив значение свойства: ViewWeek->DaysLayout на wdlOneColumn.

Weeks — отображение сетки расписания по-недельно. Внешний вид такой сетки по умолчанию:

Вид по умолчанию

Как видно на рисунке, выходные дни (суббота и воскресенье) «сжаты» и умещаются в одном столбце сетки. Чтобы выводить выходные дни также как и рабочие необходимо установить значение False для свойства: ViewWeeks->CompressWeekEnds. При этом сетка примет следующий вид:

ViewWeeks->CompressWeekEnds=False

ViewYear — сетка расписания на год. В этом случае cxScheduler примет следующий вид:

Расписание на год

TimeGrid — в этом случае сетка будет выглядеть следующим образом:

Сетка TimeGrid

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

Диаграмма Ганта

Дополнительные свойства событий

Для того, чтобы активировать тот или иной вид для cxScheduler в run-time, достаточно установить соответствующему свойству ViewXXX .Active значение True. Например, добавим на форму приложения ComboBox, в который добавим 6 строк: Day, Week, Weeks, Year, TimeGrid и Gantt и добавим для этого ComboBox следующий обработчик  события OnChange:

procedure TForm15.cbSchedulerViewChange(Sender: TObject);
begin
  case cbSchedulerView.ItemIndex of
    0:myScheduler.ViewDay.Active:=True;
    1:myScheduler.ViewWeek.Active:=True;
    2:myScheduler.ViewWeeks.Active:=True;
    3:myScheduler.ViewYear.Active:=True;
    4:myScheduler.ViewTimeGrid.Active:=True;
    5:myScheduler.ViewGantt.Active:=True;
  end;
end;

Теперь можно запустить приложение и работать с событиями в сетке с удобным для нас видом. На видео ниже показана работа с различными видами отображения, а также работа с событиями в режиме показа диаграммы Ганта:

[youtube_sc url=»http://www.youtube.com/watch?v=26NwHN38SqU»]

Следующие свойства cxScheduler, которые могут нам пригодиться в работе — это набор свойств OptionsView.

Важными для нас свойствами из OptionsView можно назвать следующие:

CurrentTimeZone и AdditionalTimeZone — текущая и дополнительная временные зоны. Про работу с временными зонами, думаю, стоит поговорить отдельно, т.к. при работе с тем же Google Calendar, в частности при определении параметров временной зоны нам, возможно, придется делать небольшой «финт ушами», если к моменты пока мы не дойдем до API Google слегка не подредактирует свой API. Пока же отмечу, что, управляя свойствами CurrentTimeZone и AdditionalTimeZone мы можем настроить сетку на отображение времени в определенном часовом поясе. Например, на рисунке ниже показана сетка, в которой время указывается для двух временных зон — моей текущей (Мск. +3, UTC+7) и в формате UTC-2:

Настройки временных зон

 WorkDays — рабочие дни недели. Ещё одно важное свойство, которое стоит запомнить. С помощью него можно указать cxScheduler’у какие дни недели являются рабочими и, соответственно, оставшиеся автоматически станут выходными. Почему обращаю внимание на это свойство. Дело в том, что Google почему-то считает, что у всех рабочая неделя начинается строго в понедельник и заканчивается в пятницу. Что, согласитесь, далеко не всегда соответствует действительности (например, у меня суббота — это обычный рабочий день). Когда мы будем работать с повторяющимися событиями в Google список рабочих и выходных дней нам очень пригодится и позволит избежать одной маленькой, но  нехорошей проблемы.

В принципе, остальные свойства cxScheduler нам врядли сильно пригодятся в работе, потому их рассматривать детально не будем. Если потребуется — рассмотрим их по ходу работы.

С самой сеткой более менее познакомились. Теперь посмотрим на работу редактора событий. Выше я обращал ваше внимание на то, что все события, которые добавляются в сетку могут находиться в одном cxSchedulerStorage, но при этом отображаться так, как будто они находятся в разных календарях. По большому счёту, принадлежность события к какому-либо календарю в ExpressScheduler определяется только цветом этого события или, точнее, значением свойства LabelColor объекта события. По умолчанию список доступных «календарей» (или меток) в DevExpress следующий:

Список календарей

В принципе, для оффлайн-работы этого списка должно быть вполне достаточно. Но мы-то с Вами готовимся к тому, чтобы работать с календарями Google, а там, как Вы можете знать — каждый календарь может иметь свое название (не обязательно уникальное) и свой цвет (то же необязательно уникальный). В свете этого было бы неплохо научиться добавлять в список календарей DevExpress свои собственные метки, с определенными цветами.

Для того, чтобы управлять метками в редакторе событий нам необходимо подключить в uses модуль cxSchedulerUtils. В этом модуле содержаться разные хелперы для работы с датой/временем, событиями, а также определен список под названием EventLabels

EventLabels: TcxSchedulerEventLabels;

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

var
  I: Integer;
begin
 for I := 0 to EventLabels.Count-1 do
    OutputDebugString(PChar(EventLabels[i].Caption+' '+ColorToString(EventLabels[i].Color)));
end;

В «Event Log» IDE появятся такие строки:

Debug Output: None clDefault 
Debug Output: Important $003C57FA
Debug Output: Business $00FF9C9A
Debug Output: Personal $006CDCB3
Debug Output: Vacation $00C2C2C2
Debug Output: Must Attend $0046ADFF
Debug Output: Travel Required $00E7E19F
Debug Output: Needs Preparation $005E72AC
Debug Output: Birthday $00E27AA4
Debug Output: Anniversary $00C0E192
Debug Output: Phone Call $0065D1FA

Аналогичным образом мы можем добавить/удалить/отредактировать любую метку календаря в ExpressScheduler. Для этого достаточно найти нужный элемент в коллекции EventLabels или создать новый, например так:

EventLabels.Add(clRed, 'Моя новая метка')

С тем, что принадлежность события в cxScheduler определяется по цвету метки, кстати, связана одна нехорошая мелочь. Для того, чтобы продемонстрировать её создадим новую метку, скажем с цветом календаря «Important», т.е. так:

EventLabels.Add(EventLabels[1].Color, 'Моя новая метка')

И теперь попробуйте выбрать эту метку в списке :) Как бы Вы не старались будет выбираться самая первая метка с цветом $003C57FA. Для оффлайн-работы, в принципе, проблема не критичная, а вот для работы с Google может привести к нехорошей ситуации, в том случае, если у пользователя будет несколько календарей одного цвета (а такое, кстати, вполне может быть). Так что эту «фичу» ExpressScheduler запомним — пригодиться на будущее.

В целом, информации изложенной выше, нам должно быть достаточно, чтобы начать работу с DevExpress. Я намеренно не стал рассматривать детально каждый компонент в ExpressScheduler его свойства, методы и события, т.к. всю эту информацию мы можем без особых проблем найти в документации (благо и DevExpress она довольно подробная). И, раз уж первый пост на тему DevExpress и Google Calendar вызвал хоть и небольшой, но интерес у читателей, то в следующей статье попробуем разработать небольшой пример по авторизации в Google Calendar и чтению данных по календарям. Конечно же пример будет основан на работе с DevExpress и активно использовать рассмотренные выше компоненты ExpressScheduler.

Книжная полка

	Автор: Андрей Шкрыль Название: Разработка клиент-серверных приложений в Delphi Описание: Рассмотрены практические вопросы по разработке клиент-серверных приложений в среде Delphi 7 и Delphi 2005 с использованием СУБД MS SQL Server 2000, InterBase и Firebird. Приведена информация о теории построения реляционных баз данных и языке SQL. Освещены вопросы эксплуатации и администрирования СУБД.
	Автор: Антон Григорьев Название: О чем не пишут в книгах по Delphi Описание: Рассмотрены малоосвещенные вопросы программирования в Delphi. Описаны методы интеграции VCL и API. Показаны внутренние механизмы VCL и приведены примеры вмешательства в эти механизмы. Рассмотрено использование сокетов в Delphi: различные режимы их работы, особенности для протоколов TCP и UDP и др.