(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Ribbon Controls шаг за шагом. Шаг 2 - дополнительные элементы интерфейса

Источник: webdelphi

Источник: webdelphi

Продолжаем медленно, но верно углубляться в Ribbon Controls. В предыдущем посте я рассмотрел разработку простого интерфейса без каких-либо "наворотов", наподобие галерей элементов, меню и и т.д. Сегодня займемся именно этим.

ribbon

Кстати, сразу замечу, что я далеко не специалист в вопросах работы с Ribbon Controls и всё, что я рассказываю - это не более, чем мои попытки разобраться с этими компонентамиDelphi. Поэтому, если Вы заметите какие-либо недочёты или (не дай Бог) ошибки в моих рассуждениях - не стесняйтесь, отписывайте комментарии с замечаниями. Так, я думаю, со временем можно будет собрать более-менее подробное руководство по использованию компонентов Ribbon в Delphi, которое пригодится многим. Ну, а теперь продолжим начатое.

1. Split Buttons. Что это и как сделать?

split button Перед Вами, уже ставший привычным, элемент интерфейса Word 2007 - split-кнопка для вставки текста. Те, кто изучал английский язык, без труда поймут почему кнопка называется именно так (split - расщепленный, разделенный пополам). Slit-кнопка состоит из двух частей: верхняя часть - для выполнения основного действия, нижняя часть - для вывода списка дополнительных действий в виде меню. Например эта же самая кнопка выполняет сразу три действия:

  • основное - вставка из буфера обмена
  • первое дополнительное - специальная вставка
  • второе дополнительное - вставка гиперссылки

Теперь, что касается создания собственных split-кнопок. Вернемся к нашему тестовому приложению и создадим такую кнопку у которой основное действие - то открытие главной страницы блога, и пара дополнительных действий - на открытие различных страниц блога.
Для этого придётся немного модифицировать приложение, а именно:

  1. Добавляем на форму ещё один ImageList (теперь их будет 2). В первом ImageList"e (назовем его ImageList_32) будут храниться иконки кнопок размером 32х32 пикселя, во втором (ImageList_16) - строго в том же порядке такие же самые иконки, но уже 16х16 пикселей
  2. Изменяем свойства ActionManager"а
    • в Images указываем ImageList_16
    • в LargeImages указываем ImageList_32

Таким образом, по умолчанию все новые действия в ActionManager"e будут, как и полагается, иметь маленькую пиктограмму 16х16 пикселей и при необходимости мы сможем её изменять на большую.

Теперь создаем новое действие в ActionManager"e и сразу изменяем его свойства:

  • Caption = "WebDelphi.ru"
  • Name = "OpenIndex"
  • Hint = "Открыть главную страницу блога"

В обработчике пишем:

procedure TForm3.OpenIndexExecute(Sender: TObject);
begin
WebBrowser1.Navigate('http://webdelphi.ru');
end;

Теперь создаем дополнительные действия для кнопки. Первое дополнительное действие - открывает страницу для подписки на RSS. Свойства действия:

  • Caption = "Open RSS"
  • Name = "RSSIndex"
  • Hint = "Открыть страницу на подписку"

Обработчик действия:

procedure TForm3.RSSIndexExecute(Sender: TObject);
begin
WebBrowser1.Navigate('http://feeds.feedburner.com/myDelphi');
end;

Второе дополнительное действие  загрузит страницу со списком всех статей блога. Его свойства:

  • Caption = "Open List"
  • Name = "OpenList"
  • Hint = "Открыть список статей"

Обработчик действия:

procedure TForm3.OpenListExecute(Sender: TObject);
begin
WebBrowser1.Navigate('http://www.webdelphi.ru/spisok-statej/');
end;

Теперь перетаскиваем действие (TAction) OpenIndex на свободную панель Ribbon и задаем новому элементы следующие свойства:

  • CommandProperties -> ButtonSize = bsLarge
  • CommandProperties -> ButtonType = btSplit
  • CommandStyle = csButton

Теперь переходим к свойству Items и добавляем дополнительные действия на кнопку. Для этого:

  1. Открываем редактор свойства и жмем кнопку Insert. В список должно добавиться новое действие с названием ActionClientItem0.
  2. Выделяем новое действие и переходим в Object Inspector
  3. Изменяем свойства на следующие:
    • Action = RSSIndex
    • Caption = "Открыть RSS"
  4. Таким же образом добавляем в список второе действие и задаем ему свойства:
    • Action = OpenList
    • Caption = "Открыть список статей"

Запускаем приложение и любуемся результатом:

split_button_2Как видите, ничего особенно сложного делать не пришлось.

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

Переходим к следующему вопросу - создание галерей.

2. Галереи в Ribbon

Галереи (Galery) - это новое слово в науке и технике по сути ещё одна разновидность выпадающего меню, реализованная в интерфейсах Ribbon.

В отличие от простых PopUp-меню и Split-кнопок, в галереях могут содержаться большие графические элементы. Вот, например, содержание галереи "Библиотека нумерации" из Word 2007 (с описанием элементов):

Ribbon GaleryКак видите, галерея имеет очевидные преимущества перед обычными текстовыми меню.

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

Во-вторых, галерея предоставляет пользователю информацию в более удобной и понятной форме. Согласитесь, что если бы вместо крупных рисунков, демонстрирующих различные нумерованные списки, нам бы показали обычное меню с пунктами, типа "Список с латинскими буквами и точкой", то лишний раз заходить в такое меню нам врядли доставило бы удовольствие, а если представить подобное текстовое меню, например, для выбора стилей оформления страницы, то и голову бы сломали думая, что имелось в виду под названиями наподобие "Апекс" или "Солнцестояние".   А галерея дает нам четкое и однозначное представление о том к чему приведет то или иное действие.

Теперь попробуем создать простую галерею. Пусть, например, в галерее будут содержаться картинки, демонстрирующие различные стили оформления для Ribbon.

Смысл создания галерей примерно тот же, что и для split-кнопок, но за одним исключением - все действия (Actions) для галереи должны относиться к одной категории. До этого момента, мы сильно не задумываясь создавали новые действия в ActionManager"e и они автоматически попадали в группу (No Category). В галерею такие действия врядли попадут (по крайней мере мне акого сделать пока не удалось).

Так как наша галерея будет содержать большие рисунки (100×100 пикселей), то целесообразно для них задействовать ещё один компонент - TActionList (страница Standard палитры компонентов) и новый ImageList. Это избавит нас от лишних мучений с Action Manager.

Итак, укладываем ActionList и новый ImageList на форму и танцуем с бубном проводим следующие изменения в свойствах:

  1. У ActionList меняем свойства:
    • Name = "StyleList"
    • в Images указываем новый ImageList
  2. Выбираем Action Manager, ищем свойство LinkedActionLists, открываем редактор свойства и добавляем в список StyleList.

Теперь все новые действия из ActionList"а будут автоматически линковаться в ActionManager.

В ImageList загружаем изображения. Если необходимо, то изображения (100х137 пикселей) различных стилей Ribbon Вы можете скачать здесь.

Добавляем новые элементы галереи. Для этого:

  1. Открываем двойным кликом редактор для ActionList (StyleList)
  2. Создаем новое действие
  3. Изменяем его свойства:
    • Caption = "Luna"
    • Name = "galery_Luna"
    • Caterory = "Стили"
    • ImageIndex - указываем индекс изображения стиля в ImageList
  4. Аналогичным образом создаем новые действия для стилей Obsidian и Silver

Теперь в ActionManager"e обычным образом создаем новое действие, например с названием styles . Укладываем новый элемент на панель и изменяем его свойства следующим образом:

  1. CommandProperties -> ButtonType = btSplit
  2. CommandStyle = csGallery
  3. CommandProperties -> ItemsPerRow = 3
  4. В Items добавляем действия в следующей последовательности:
    • вначале создаем пустой элемент и задаем ему свойства:
      • Caption = "&Стили"
      • CommandStyle = csSeparator
    • затем добавляем три действия из StyleList, не меняя их свойств

Пишем обработчики. Пусть по умолчанию основным стилем оформления будет стиль Luna. Тогда обработчик для styles будет следующим:

procedure TForm3.StyleActionExecute(Sender: TObject);
begin
Ribbon1.Style := RibbonLunaStyle;
end;

У событий галереи обработчики будут такими:

procedure TForm3.galery_LunaExecute(Sender: TObject);
begin
Ribbon1.Style := RibbonLunaStyle;
end;

procedure TForm3.galery_ObsidianExecute(Sender: TObject);
begin
Ribbon1.Style := RibbonObsidianStyle;
end;

procedure TForm3.galery_SilverExecute(Sender: TObject);
begin
Ribbon1.Style := RibbonSilverStyle
end;

На всякий случай обращаю внимание - для того, чтобы изменить стиль оформления Ribbon у вас в uses должны быть подключены три модуля: RibbonLunaStyleActnCtrls,  RibbonObsidianStyleActnCtrls и RibbonSilverStyleActnCtrls.

Теперь проверим работоспособность нашей галереи. У меня получился вот такой интерфейс:

Ribbon_Galery

Сейчас мы создали простую галерею с одним заголовком и таблицей на 3 столбца.
Если Вам необходимо создать более сложную галерею (например по типу Word 2007 галерея "Фигуры" на вкладке "Вставка"), то каждая новая группа элементов разделяется сепаратором у которого название (Caption) совпадает с названием группы элементов. То есть, если я захочу сделать галерею из двух групп элементов, например "Стили" и "Стили 2″, то дествия будут следующими:

  1. в ActionList"e создаю новые элементы, которые включаю в категория с названием "Стили 2″. Неважно какое количество элементов - хоть 100 штук - все они будут расположены в зависимости от свойства ItemsPerRow корневого элемента.
  2. В свойстве Items корневого элемента создаю новый сепаратор (разделитель) со свойством Caption = "&Стили 2″
  3. Добавляю новые элементы из ActionList в Items.

В итоге получаем галерею на два уровня:

Ribbon Galery 2 level

И так можно наращивать уровни пока не надоест.

Работа с TRibbonComboBox

По своей сути компонент TRibbonComboBox ничем не отличается от своего дальнего родственника TComboBox за одним небольшим исключением - для того, чтобы сохранялся стиль оформления необходимо, чтобы каждый пункт (элемент) TRibbonComboBox представлялся в виде элемента коллекции TActionCliets. Как это сделать - см. первый пункт статьи про split-кнопки. В остальном TRibbonComboBox точно такой же как и TComboBox.

RibbonComboBox

Вот, например, на рисунке представлен RibbonComboBox с одним разделителем и тремя элементами для выбора.

Меню: главное меню приложения, PopUp-меню

Переходим, наконец, к разработке менюшек в стиле Ribbon.

Главное меню приложения

Вначале, коротко о главном, точнее о составе панели главного меню:

Ribbon MainMenu

Как видно из рисунка, кроме обычного набора элементов главного меню, в Ribbon дополнительно реализована ещё одна панель для размещения дополнительных команд или ссылок на открываемые документы, а также возможность добавления кнопок в нижнюю часть меню. Создадим свое собственное меню.
Для этого необходимо вызвать контекстное меню компонента TRibbon и выбрать пункт " Add Application Menu ". Новое меню по умолчанию содержит один пустой контейнер для действия (TActionClients[0]) и пустую дополнительную панель.
Для того, чтобы изменить заголовок дополнительно панели необходимо:

  • Выбрать компонент TRibbon
  • Переити в Object Inspector и перейти на вкладку свойств ApplicationMenu.

Вкладка свойств  ApplicationMenu содержит следующие свойства:

  1. Caption - заголовок дополнительной панели
  2. CommandType - тип команд для дополнительной панели: ctCommands - в дополнительной панели размещаются элементы команд (действия TAction) ctRecent - в дополнительной панели размещаются ссылки на ранее открытые документы.
  3. Icon - иконка на кнопке главного меню. Её же можно изменить через свойство Application Icon в опциях проекта.
  4. IconSize - размер иконки на кнопке главного меню.
  5. Menu - панель главного меню.

Для того, чтобы изменить состав панели главного меню необходимо выбрать вкладку свойств: TRibbon -> ApplicationMenu -> Menu или выбрать в Object Inspector компонент TRibbonApplicationMenuBar.

RibbonApplicationMenuЗдесь:

OptionItems - содержит набор действий для блока дополнительных кнопок меню

RecentItems - набор действий для дополнительной панели главного меню.

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

Создаются они обычным способом через редактор свойств. Здесь стоит заметить лишь то, что в отличие от ранее рассмотренных способов организации действий (split-кнопок, галерей и т.д.), действия в дополнительном меню и кнопки не содержат вложенныx свойств Items.

Теперь разберемся с основными элементами главного меню. Корневые элементы (те которые видны при открытии меню) создаются также как и любые другие элементы на панелях Ribbon - простым перетаскиванием мышкой действий из ActionManager"а на свободное место панели.

Несколько иначе обстоит дело в случае создания подменю. Для того, чтобы создать для какого-либо корневого элемента список команд с sub-menu необходимо:

  1. выбрать необходимый элемент
  2. добавить необходимые действия в список Items
  3. при этом каждое действие из sub-menu должно иметь свойство CommandStyle = csMenu.

Вот пример под-меню для одного из элементов главного меню:

RibbonApplicationMenu_submenuКак видно список дополнительных элементов содержит два компонента с типом csSeparator (разделитель)

Кроме того, каждый пункт дополнительного меню содержит поясняющую подпись.

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

  1. CommandStyle = csMenu
  2. CommandProperties -> ShowRichContent = true
  3. CommandProperties -> Content = поясняющий текст для элемента.

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

PopUp-меню приложения

popup_menuЗдесь все проще и, прочитав эту статью полностью, Вы без каких-либо проблем создадите popup-меню любой конфигурации и любой сложности.

Единственно, что следует отметить, это то, что при разработке PopUp-меню необходимо использовать компоненты TPopUpActionBar.

Для сохранения общего внешнего вида приложения, не забывайте также, что PopUpActionBar имеет свойство Style.

Вместо заключения

Сегодня мы продвинулись ещё на один шаг вперед в изучении Ribbon Controls и научились создавать такие элементы интерфейса как: split-кнопки, галереи, списки, главное меню и popup-меню.

Что касается сложности разработки интерфейсов Ribbon, то на мой взгляд, основная сложность - это не запутаться во всех этих TAction, TActionClients, Items и т.д. Вообще, судя по тому, что я узнал за последние несколько дней про работу с Ribbon, можно сказать, что более-менее функциональный интерфейс можно разработать имею под рукой всего три компонента: TRibbon, TImageList и TActionManager. Естественно будут возникать такие ограничения как невозможность создания разных по размеру кнопок, галерей с большими элементами и т.д., но в уцелом интерфейс будет функциональным. Однако, я бы не стал рисковать и терять в удобстве разработки, экономя лишние пару десятков килобайт exe-файла.

При разработке более-менее функциональных приложений с количеством элементов меню свыше 20 шт. все-таки желательно разделять действия: по группам и по различным компонентам ActionLists - получится на порядок удобнее.

Ну, а пока Вы разрабатываете свои интерфейсы, я продолжу свои скромные шаги в направлении более глубокого изучения Ribbon Controls и попробую разобраться с Costumizer"ами и их руссификацией.

Приложение, на основании которого написана данная статья, Вы можете скачать здесь

Ссылки по теме


 Распечатать »
 Правила публикации »
  Обсудить материал в конференции Embarcadero »
Написать редактору 
 Рекомендовать » Дата публикации: 11.01.2010 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Delphi Professional Named User
Enterprise Connectors (1 Year term)
Quest Software. TOAD for Oracle Edition
ESET NOD32 Cyber Security Pro, лицензия на 1 год
Bamboo
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование на Microsoft Access
CASE-технологии
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
СУБД Oracle "с нуля"
Один день системного администратора
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Разработка программ базы данных (54)
Написание прикладных компьютерных программ (базы данных) на заказ. Разработка корпоративных...
 
Беговая дорожка (3)
Купила беговую дорожку вот здесь https://4gym.com.ua/product/technogym-artis-run Очень классная,...
 
Аналоги виагры (3)
Если мужчине, по каким либо причинам, не подходит виагра, существуют качественные аналоги...
 
работа на дому! (8)
Доброго времени суток дорогие друзья. Многоуровневый маркетинг окончательно признан...
 
Отличается ли ДрифтКазино от беттинга? (16)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
 
 



    
rambler's top100 Rambler's Top100