Подписка

Проекты

Сборник идей для разработок в Delphi и использования их в Интернет. Участвуй в работе коллективного разума!

Google API в Delphi - проект с открытым исходным кодом.


А тут я коплю на лицензию Delphi 2011. Сумма пожертвования не фиксирована.

Друзья блога

Блоги и сообщества

DelphiFeeds.ru - Все Delphi-блоги Рунета О раскрутке блога по программированию Сообщество умных людей VR-Online.RU Бесплатный журнал для программистов и всех, кто интересуется IT Статьи и уроки по Delphi Статьи по Delphi

Счётчики


Анализ веб сайтов

Рейтинг блогов




Система Orphus

  • 29Oct

    Продолжаем медленно, но верно углубляться в 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’ами и их руссификацией.

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

    Мой блог находят по следующим фразам

    Для того, чтобы быть в курсе последних обновлений блога WebDelphi.ru Вы можете:
    Подписаться на RSS
    Подписаться на рассылку по e-mail
    Подписаться на RSS-трубу Delphi и получать новости сразу пяти блогов по программированию на Delphi

    Related posts:

    1. Ribbon Controls шаг за шагом. Шаг 1 – визуальная разработка интерфейса.
    2. Справочник Ribbon Controls в Delphi 2010. Визуальная разработка интерфейса приложения.
    3. Ribbon Controls в Delphi. Создаем элементы управления “на лету”.
    4. Ribbon Controls шаг за шагом. Шаг 3 – работа со ScreenTips.
    5. Ribbon Controls шаг за шагом. Шаг 4 – создаем уникальный стиль или как работать в RibbonSkins.

    Автор Vlad в 8:46 pm

    Метки: , , , , , ,

29 Comments

WP_Cloudy
  • bambarmia пишет:

    Hi All! удалось ли Вам разобраться со ScreenTips? меня конкретно интересуют всплывающие подсказки над элементами галереи и над DialogAction в RibbonGroup (такой маленький квадратик в правом нижнем углу у RibbonGroup)

  • Vlad пишет:

    Так в статье же про ScreenTips все рассказано :) Только в первом шаге

  • Константин пишет:

    Супер статья. Автору респект респектущщий)
    А у меня вот вопрос: Можно ли в “галлерею” впихнуть помимо изображений другие обьекты? например TRibbonComboBox или обычный TButton?

  • Vlad пишет:

    Спасибо. Вообще я с галереями дел мало имел, но видимо впихнуть в галерею сторонний объект врядли удасться…иначе у тогоже Word’а было бы что-то подобное реализовано :)

  • Тимофей пишет:

    Помогите! сделал как всё написано, но действия в галереи становятся не сеткой, а накладываются друг на друга! Что делать?

  • Vlad пишет:

    Изображения по ширине меньше делайте.

  • Тимофей пишет:

    Так они у меня вообще 32 на 32! И само окно галереи размером 32 на 32 становиться и вдно только последний добавленный action.

  • Vlad пишет:

    Исходник проекта со всеми картинками на vlad383@mail.ru. Посмотрю.

  • Дмитрий пишет:

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

  • Dikabos пишет:

    Привет чуваки у меня такой вопрос. Может вам покажется тупым но мне очень нужно. Вот вопрос: Я хочу загрузить в меню картинку формата *.png, Я пробывал вставлять картинку эту но она отображается на чёрном фоне, подскажите как можно поставить такого формата картинку!!!!!

  • Дмитрий пишет:

    Vlad у меня тажа проблема что и у Тимофея, что делать?

  • Vlad пишет:

    Видимо тоже самое, что я посоветовал Тимофею. Я же не не экстрасенс, чтоб по одной фразе “у меня не получается” сразу определить где ты напортачил. Шли исходник на мыло – посмотрю и скажу чего не так. Или выкладывай тут все настройки компонентов, размеры картинок, и т.д.

  • Дмитрий пишет:

    Я создаю галерею цветов текста.
    Все картинки цветов 16х16
    Я уклал компоненты ActionList1, ImageList1, ActionManager1, Ribbon1
    Вот свойства ActionList1:
    [URL="http://p23a.pp.ua/vopros/1.png"]http://p23a.pp.ua/vopros/1.png[/URL]
    [URL="http://p23a.pp.ua/vopros/4.png"]http://p23a.pp.ua/vopros/4.png[/URL]
    Вот свойства ActionManager1:
    [URL="http://p23a.pp.ua/vopros/2.png"]http://p23a.pp.ua/vopros/2.png[/URL]
    [URL="http://p23a.pp.ua/vopros/3.png"]http://p23a.pp.ua/vopros/3.png[/URL]
    Теперь я в ActionManager1 создал событие Action1 и перенёс на RibbonGroup1, и вот этой собитя свойства:
    [URL="http://p23a.pp.ua/vopros/5.png"]http://p23a.pp.ua/vopros/5.png[/URL]
    [URL="http://p23a.pp.ua/vopros/6.png"]http://p23a.pp.ua/vopros/6.png[/URL]

  • Дмитрий пишет:

    Ну что Vlad?, может аску киниш свою?

  • Егор пишет:

    +1 Тоже за аську Влада ) Моя: 982-4O1

  • Vlad пишет:

    Юзайте почту :)

  • Дмитрий пишет:

    Vlad, доброе утро, ты нашол проблему?

  • Дмитрий пишет:

    Vlad, а у тебя агент стоит к mail.ru?

  • Vlad пишет:

    Дмитрий, ты блог просматриваешь? Хотя бы последние посты? http://www.webdelphi.ru/2010/07/zhivoj-interfejs-s-ribbon-controls/

    Mail-агентом не пользуюсь. Галереи ещё не смотрел. Будет время – посмотрю. Не сейчас

  • Дмитрий пишет:

    Vlad у меня тажа ситуация что и у Тимофея!!

  • Дмитрий пишет:

    Vlad мне срочно надо узнать

  • Vlad пишет:

    А у меня есть срочные дела. Я это сказал ещё в прошлом комментарии. Будет время – посмотрю. Кому надо срочно – идут на freelance.ru или договариваются со мной о цене вопроса. Всё что написано в посте работает. Качал исходник, разбирался?

  • Дмитрий пишет:

    Vlad, привет кинь ссылку на исходник

  • Vlad пишет:
  • Дмитрий пишет:

    Vlad, спс галерея вышла, можно както над галереей сделать кнопку, и после галереи кнопку?

  • Vlad пишет:

    читай справочник – по визуальной работе там есть все. В том числе и про ток как правильно выравнивать элементы в группе

  • Дмитрий пишет:

    Vlad как можно зделать спложную линию? вот такую:
    http://p23a.pp.ua/vopros/pr.png

  • Vlad пишет:

    Обычно такая линия делается руками. Читай справочник.

  • Дмитрий пишет:

    Vlad, привет у меня одна проблема, я в TRibbonComboBox создал список и добавил из Action Manager события, проблема в том что я хочу ети события отобразить как csText иконка показывает а вот текст нет, что делать?

Ваш ответ

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

Пожалуйста, заключайте исходный код в тэги [code][/code].