tdxbarmanager delphi что это
Блог Rouse_
то, о чём вы подозревали, но боялись задуматься
вторник, 26 февраля 2013 г.
Нюансы использования Ribbon от DevExpress
Версия 1.0.3
Однако ребята из Редмонда не перестают удивлять нас своими наработками в рамках пользовательского интерфейса. То у них модными были тулбары и плоские кнопки, то тулбары в градиенте и разворачивающиеся меню, лента вот недавно появилась, а в последней версии офиса опять в моду входит концепция «плоских» элементов (я уж не говорю о METRO). Причем каждый раз с новым веянием Microsoft публикует большой манускрипт, описывающий почему именная текущая концепция самая правильная.
А что делать разработчикам стремящимся поддерживать GUI в актуальном состоянии в соответствии с «модой» (как делают большинство коммерческих разработчиков)? По понятным причинам полностью самостоятельно переписывать GUI слишком накладно, нам бы логику программы отладить, какой уж там GUI и прочие финтифлюшки. 🙂
Вот здесь-то и выходят на сцену компании, которые зарабатывают на этих новомодных тенденциях, предоставляя разработчикам собственный фреймворк для реализации необходимого.
Сразу оговорюсь что из хороших альтернатив есть еще продукция от компании TMS Software, но я с ней не работал, ограничившись только демками/триалом, когда выбирал что нам больше подходит и работа наших ребят мне понравилась гораздо больше в плане удобства использования.
В статье я буду рассматривать «DevExpress VCL ExpressBars components» версии 12.1.4 и все описанное будет относится именно к данной версии. В более ранних версиях данного пакета некоторые элементы могут отсутствовать или работать не так как описано.
Собственно для чего я вообще решил писать данную статью:
Я не ставил себе целью подробно рассказать о данном наборе классов, для этого есть достаточно подробная справка и хороший набор демопримеров, идущие в составе с пакетом. Я просто хочу показать некоторые, скажем так, первые шаги и дать небольшой набор базовых знаний о данном пакете, которые будут некоей отправной точкой.
Так же постараюсь показать некоторые нюансы, не описанные в справке и показать небольшой набор ошибок в самом пакете, с которыми вы можете столкнуться.
На полноту изложения я не претендую, ибо буду рассказывать только о том, с чем сам сталкивался в повседневной работе, ну и конечно в завершение покажу некую практическую часть по расширению функционала контролов данного пакета.
В статье будут присутствовать комментарии от разработчиков данного набора компонентов. В них описаны некоторые не упомянутые мной нюансы, поэтому обращайте внимание на следующий текст.
Комментарий от DevExpress Team:
Ну что ж, приступим.
1. Форма и dxRibbon
После установки данного пакета в меню New появится два новых пункта, это «DevExpress VCL v12.1 Ribbon 2007 Form» и «DevExpress VCL v12.1 Ribbon 2010 Form». Оба пункта создают новую форму с уже размещенным на ней компонентом dxRiboon в стиле MS Office 2007 и 2010 соответственно.
Данные пункты подойдут скорее только в случае создания проекта с нуля. Если же уже имеется на руках рабочий проект, который требуется перевести на стиль Ribbon, то лучше все сделать самостоятельно. За одно будет более понятно как правильно настроить сам dxRibbon.
Итак, создайте новый проект и на главной форме проекта разместите компонент dxRibbon с вкладки ExpressBars. Должно получится вот так:
Это только заготовка будущей ленты. Чтобы заставить ленту заработать, к ней необходимо подключить основной компонент, через который будет происходить работа со всеми элементами DevExpress VCL ExpressBar, называется он dxBarManager и расположен на той же вкладке ExpressBars. Подключается через свойство BarManager компонента dxRibbon.
После подключения лента примет следующий вид:
Однако если мы запустим проект, мы увидим только пустую форму. Для того чтобы отобразить ленту в положенном ей месте необходимо выполнить следующие действия.
1. В uses главной формы необходимо добавить юнит dxRibbonForm, а саму главную форму приложения унаследовать не от TForm, а от TdxRibbonForm, примерно вот таким образом:
2. В свойствах dxRibbon параметр SupportNonClientDrawing установить в True.
Теперь можно запускать проект и посмотреть на первые результаты нашей работы:
Кнопка слева вверху называется Application Button. При нажатии на нее должно появляться расширенное меню приложения, но сейчас оно не настроено, на этом я остановлюсь позже. Единственный нюанс заключается в том, что если мы прямо сейчас по ней щелкнем два раза, приложение закроется. Это связано с тем что при двойном клике на данную кнопку вызывается пункт по умолчанию у стандартного меню формы, вот у этого:
. который отвечает как раз за закрытие приложения.
2. Группы, кнопки и меню
Прежде чем разбираться с остальными параметрами dxRibbon необходимо научится работать с основными элементами управления, размещаемыми на ленте.
Все элементы управления, используемые в DevExpress VCL ExpressBar разделяются на три подгруппы:
1. Основные элементы управления: создаются и управляются посредством dxBarManager.
2. Контейнеры для элементов управления: создаются отдельно на форме.
3. Различные компоненты утилитарного назначения (для наведения красоты): наследники от TComponent, размещаются так же на форме.
Элементами управления являются наследники от TdxBarItem.
Их много разных: dxButton, dxBarEdit. dxBarCombo и т.д.
Контейнерами для них являются наследники от TdxBarComponent и TcxControl.
Их так же предостаточно: это и dxRibbon, и dxPopupMenu и прочее элементы.
Комментарий от DevExpress Team:
Основное и главное отличие элементов управления DevExpress VCL ExpressBar от стандартных элементов управления (тех же кнопок TButton) заключается в том, что они являются виртуальными элементами. Т.е. они присутствуют только в рамках dxBarManager-а и нигде более, а за их визуализацию (отрисовку, реакцию на пользовательский ввод) отвечает класс TdxBarItemLink. По этой причине данные элементы управления нельзя разместить произвольно на форме, только в рамках контейнера. Но именно в их виртуализации и заключается большое удобство работы с данными элементами управления.
Допустим раньше, если у нас была кнопка на тулбаре, которая совершает некое действие (выводит MessageBox, к примеру), то для того чтобы вызвать это же действие из меню необходимо было создавать новый пункт меню, где уже обработчиком цеплять вызов от первой кнопки. В случае с DevExpress VCL ExpressBar создание дополнительных элементов управления с общим обработчиком не потребуется. Из виртуального контрола мы спокойно можем управлять всеми линками на него, отвечающими за визуализацию, и управлять их состоянием (к примеру нажата кнопка или нет, указывать ее Enable/Visible состояния и прочее). Если немного огрубить, данная виртуализация чем-то похожа на механизм работы TAction, только реализованная немного другим способом.
Впрочем рассмотрим это на практике.
Откройте BarManager и на вкладке Commands создайте элемент TdxBarLargeButton.
Далее откройте вкладку событий данного элемента и назначьте новый обработчик OnClick.
В обработчике пропишите следующий код:
Осталось разместить данный элемент в контейнере, но для начала его нужно создать, щелкните на закладке ленты с именем dxRibbonTab1 правой кнопкой и выберите пункт меню «Add Group With ToolBar»
При этом в ленте создастся пустая группа (о работе с группами чуть позже) а так же тулбар, на котором можно размещать дополнительные элементы управления.
Данный тулбар так же появится в BarManager-е на вкладке «Toolbars».
Для того чтобы разместить нашу кнопку в созданном тулбаре необходимо открыть BarManager и перетащить кнопку на нужное место в dxRibbon.
Запустите приложение и проверьте работоспособность кнопки, должно получится вот так:
А теперь посмотрим что дает нам виртуализация. Откройте опять BarManager и снова перетащите кнопку на ленту так, чтобы она разместилась рядом с первой примерно таким образом:
Я перенес на ленту данный элемент четыре раза и у меня получилось ровно четыре рабочих кнопки, каждая из которых является ссылкой на оригинальный элемент TdxBarLargeButton и каждая будет обрабатывать его обработчик OnClick.
А теперь важный нюанс!
Для удаления элементов управления с ленты не используйте кнопку Delete.
Воспользуйтесь любым из следующих двух способов:
1. Просто перетащите требуемый визуальный элемент за пределы контейнера.
2. Щелкните на визуальный элемент правой кнопкой и в меню выберите пункт «Delete Link»
В случае если вы все же воспользуетесь кнопкой «Delete» исчезнут все 4 кнопки (можете поэкспериментировать). Произойдет это по той причине что уничтожились все ссылки TdxBarItemLink, являющиеся «визуальной проекцией» на виртуальный элемент TdxBarLargeButton. Причем разрушены будут ссылки во всех контейнерах, а не только в текущем.
Комментарий от DevExpress Team:
Есть небольшой нюанс. В том случае если открыта Customize форма, будет удален сам элемент TdxBarLargeButton, в результате чего все линки на данный Item также будут удалены. Если Customize форма не отображена, будут удалены сами линки.
2.1 Меню
Размещать один и тот же элемент рядом четыре раза подряд конечно смысла не имеет, а вот разместить его допустим в том же меню, дублирующем функционал с закладки, достаточно хорошая идея.
В качестве второго контейнера выступит всплывающее меню TdxRibbonPopupMenu из вкладки ExpressBars. После размещения данного элемента на форме откроется диалог его конфигурации. Выглядит следующим образом:
Все что требуется сделать, это перетащить требуемые элементы на открывшуюся вкладку, по аналогии с перетаскиванием на ленту.
Теперь необходимо подключить данное меню к форме. Проблема в том, что данное меню не является наследником от TPopupMenu и просто так его назначить форме не получится. Для этого обычно используется шлюз в виде обычного TPopupMenu в обработчике OnPopup которого реализуется следующий код.
Ну а само меню, выступающее в качестве шлюза назначается требуемому контролу (в данном случае форме).
Для подключения меню к обычным элементам управления (не форме), используется свойство PopupMenuLinks у BarManager.
3. Стили dxRibbon, цветовая гамма, панель быстрого доступа
С кнопками и меню разобрались, теперь настало время посмотреть на дополнительные параметры dxRibbon и различные стили самих кнопок.
Скачайте архив примеров и откройте самый первый, скомпилируйте и запустите приложение.
Начнем сверху вниз.
В самом верху появилась панель быстрого доступа (QuickAccessToolbar).
Она уже содержит в себе несколько элементов, а так же предоставляет интерфейс собственной кастомизации в виде всплывающего меню.
Создается данная панель достаточно тривиально, для этого необходимо открыть BarManager и на закладке Toolbars создать новую панель с произвольным описанием (допустим так и назовем: «Панель быстрого доступа»). Название данной панели будет примерно следующее: dxBarManager1Bar2
После этого на форме появится сама панель снизу ленты:
Сейчас панель не слинкована ни на один из контейнеров, поэтому она размещена непосредственно на главной форме. Для подключения ее в виде панели быстрого доступа необходимо зайти в настройки dxRibbon и у параметра QuickAccessToolbar в качестве Tooolbar указать название только что созданной панели (dxBarManager1Bar2).
После этого панель пропадет с формы, но появится сверху над лентой:
3.1 Стиль ленты
Комментарий от DevExpress Team:
Можно избежать утяжеления путем динамической загрузки скинов.
В составе инсталятора идут бинарные файлы скинов (. \DevExpress.VCL\ExpressSkins Library\Binary Skin Files\). Вы можете просто загрузить скины из этих бинарных файлов, используя технику, показанную вот в этой статье: How to load skins dynamically
3.2 TdxBarSubItem, TdxBarListItem
Для того чтобы данные две кнопки автоматически переключались и разработчику не нужно было ручками выставлять их состояние, свойство ButtonStyle обоих кнопок было установлено в bsChecked, а GroupIndex установлен в значение 10 (в принципе можно использовать любое другое, я обычно использую кратное десятке).
Таким образом они стали работать в режиме RadioButton-ов.
А для переключения цвета ленты я использовал еще более простой в использовании элемент TdxBarListItem.
Наименование цветовой схемы является обычной строкой. Данная строка в виде констант присутствует в каждом стиле ленты, представляющего из себя наследник от TdxSkinLookAndFeelPainter и возвращается методом LookAndFeelName.
Если вы не уверены в правильности данной константы, можете открыть юнит с соответствующим скином и посмотреть реализацию данного метода, откуда и взять строковую константу.
3.3. TcxImageList
Для назначения иконок элементам ленты используется внешние ImageList-ы, в принципе это могут быть и обычные TImageList, но желательно использовать TcxImageList ибо данный элемент обладает несколько большим функционалом, по сравнению со стандартным.
Самым важным его свойством является то, что он позволяет работать с 32-битными иконками с альфа-каналом. Раньше приходилось возится с ImageList ручками переводя его в режим ILC_COLOR32 и руками добавлять в него иконки из ресурсов, дабы не было потери альфаканала при конвертации. С появлением TcxImageList данная проблема отпала.
Второй интересной возможностью является параметр CompressData, позволяющий уменьшить размер информации об изображениях, размещаемой в DFM. В одном из моих проектов один из ImageList-ов содержит более 500 иконок (проект чем-то похож на MS Excel и такое количество изображений обусловлено значительным количеством функциональных элементов). Будь они помещены в обычный TImageList их объем занял-бы в районе 1.2 мегабайта. В случае использования сжатия размер уменьшается примерно до 700кб (мелочь, а приятно).
Обычно используются два листа, подключаемые через свойство ImageOptions элемента BarManager. Первый ImageList содержит иконки размером 16х16 и подключается через параметр Images, второй 32х32 через параметр LargeImages. Есть еще несколько листов, таких как DisabledImages, DisabledLargeImages и HotImages, но я их обычно не использую ибо нет такой необходимости.
После подключения листов к BarManager у каждого элемента можно назначить требуемую ему иконку, используя свойства ImageIndex/LargeImageIndex и т.п.
Если вы работаете с «большими» элементами (не знаю как назвать правильно) такими как TdxBarLargeButton или TdxBarSubitem, которые могут отображать на ленте иконку большого размера, необходимо обязательно назначить соответствующую маленькую, ибо при изменении размеров ленты, размеры самих элементов будут подстраиваться под оставшийся размер свободной площади и будут переходить в отображение маленьких иконок, которые они не смогут отрисовать, по причине того что их индекс не назначен.
Поэксперементируйте с демоприложением, запустите его и попробуйте плавно изменять его ширину и понаблюдайте за поведением элементов.
Для примера посмотрите вот на эту форму:
Обратите внимание на кнопку «Цвет стиля», она сейчас отображает большую иконку, но вот маленькая ей не назначена и при уменьшении ширины формы произойдет следующее:
Иконка у данной кнопки пропадет.
Конечно не критично, но как-то неаккуратненько 🙂
Ну и кстати обратите внимание на зеленый шарик в панели быстрого доступа. Таким шариком отображаются элементы, у которых не назначен ImageIndex, а в данном случае этим элементом как раз и является кнопка «Цвет стиля».
Важное уточнение:
Такое поведение проявляется только в случаях если TcxImageList расположен не на главной форме (в моем случае он размещен на отдельном TDataModule). Вот что по этому поводу сообщают разработчики.
Комментарий от DevExpress Team:
Скорее всего, это известная проблема с TPersistent с референсами на компоненты, находящихся в DataModule. У нас достаточно много тикетов по этой теме. Например, посмотрите на объяснения в следующих тикетах:
1. FakeComponentLink
2. cxGridDBTableView (and cxTreeList) lose properties referencing objects on another form.
Во втором тикете предложен workaround пользователем Mike F, который может помочь в решении данной проблемы.
3.4. параметры Application/BackStage button и QuickAccessBar
Перейдем к следующим трем кнопкам демопримера.
Грубо говоря в зависимости от состояния данной кнопки происходит переключение видимости ApplicationButton приложения.
А вот с ней есть небольшой нюанс.
В зависимости от стиля данная кнопка выглядит по разному.
Слева вариант для стиля MS Office 2007, справа для 2010-го.
Во втором случае у данной кнопки появляется возможность изменения цвета (как я и говорил выше в главе 3.1). Для изменения цвета данной кнопки я опять использую TdxBarListItem, содержащий список цветов в порядке, объявленном в типе TdxRibbonColorSchemeAccent и обработчик кнопки изменения цвета выглядит следующим образом:
Единственно, дабы кнопка изменения цвета была доступна только в случае включенного стиля rs2010 приходится управлять ее видимостью через параметр Visible, который не является булевым типом (как обычно) а представляет из себя перечисление TdxBarItemVisible и принимает следующие значения:
Delphi. Как сделать Ribbon меню на DevExpress?
Делая меню для одной из своих программ, я экспериментировал со встроенными Риббонами из стандартной библиотеки Delphi. Но, скажу честно, отказался от этой идеи. Местами были глюки. Всё настроил, но оно слетает. Пожелание разработчикам стандартных Риббонов Delphi – довести до ума.
Остановился на риббонах от DevExpress. Скажу честно, мне эта библиотека очень понравилась, но в неё нужно “вьезжать” какое-то время. Чтоб это время сэкономить тем, кто хочет сделать себе красивое меню для VCL программы, предлагаю данный пост.
Вот, что может получиться после прочтения данной статьи. Это пример одной из моих программ, которую я делаю сейчас.
Итак, что нужно сделать? Разберем по шагам.
Дизайн Риббона
Добавляем на форму dxBarManager
Сразу же добавим к нему images и LargeImages. Это нужно для того, чтобы присоединять картинки к кнопкам. У меня это выглядело так
Добавляем TdxRibbon
2 раза кликаем на tdxBarManager, и далее жмем на New и добавляем новый toolBar, даем ему понятное имя.
В результате должна появиться такая белая полоса, также сразу поменяем Caption и Имя, так как тул баров в нормальном проекте будет много. 1 tool bar будет соответствовать 1 группе на вкладке риббона. Групп на вкладках будет по 5-6 в не маленьком проекте и вкладок будет 5-6. Соответственно, нужно давать понятные имена, для 25-36 тул баров.
Также, появится белая полоса. Это и есть заготовка нашего тул бара, еще не присоединенная к группе.
Жмем правой кнопкой на Риббоне.
Из маленького окна dxRibbon.Tabs выбираем нужную нам вкладку и жмем на группы.
Теперь выбираем тул бар, он у нас один. И прописываем здесь любой название. Это будет названием группы на вкладке Риббона.
Далее, правой кнопкой мыши жмем на группу и выбираем тот элемент, который нам нужно добавить
Добавим Button и LargeButton
Теперь меняем имена и caption кнопок и присоединяем к ним картинки в свойствах images и LargeImages.
Ну и в конце заменим caption вкладки. Правой кнопкой по Ribbon > TabsEditor, выбираем нужную вкладку и меняем ей имя и caption
Обработчики
Я делаю обработчики централизованно, через TActionManager. Добавим его на форму. 2 раза кликнем и добавим новое действие, и переименуем его, скажем в aSmallButton
Теперь идём далее. Обработаем OnExecute данного обработчика. Можно просто дабл клик в окне ActionManager, а можно в Events самого action.
Прицепим обработчик следующим образом
После чего у нас слетит картинка и Caption, они будут взяты из Action, который мы прицепили, нужно перенастроить их ещё раз. Либо сделать это в самом Action, но там нет свойства LargeImageIndex и для больших картинок это не прокатит
В принципе это всё, теперь покажу, как это выглядит у меня в проекте…