Примеры работы с AdvToolBarPager (TMS Menus)

22.06.2011
Пожалуй одним из самых интересных компонентов от TMS является ADVToolBarPager, это ничто иное как ленточное меню которое вы могли видеть MS Office начиная с версии 2007, AutoCAD 2010, 2GIS и т.д. И судя по тенденциям - такое меню станет в скором времени эдаким стандартом де-факто.
Главной особенностью этого меню является безусловно его стильность, большие иконки у кнопок куда приятней глазу, чем обычные пункты меню.
Что и где
ADVToolBarPager и ещё 19 компонентов находятся на вкладке TMS Menus. В числе которых есть и менюшка в стиле MS Office 2003, и контекстное меню и прочее прочее. В общем неплохой джентельменский набор.
А теперь разберём небольшой пример

Первый шаг, первая панель, первая кнопка


Первым делом конечно же добавим на форму ADVToolBarPager и у нас появится само ленточное меню с тремя вкладками.

Вкладки есть, теперь осталось добавить на них "Панели инструментов", а добавляются они легко - вызываем ПКМ контекстное меню у вкладки и выбираем пункт - "Add ToolBar" и вот она, новая панель. Аналогично добавляется новая вкладка.

А если вызвать контекстное меню у только что добавленной панели, то перед вами откроется внушительный список различных объектов, которые можно в него добавить, но чаще всего вам будет необходима кнопка AdvGlowButton, поэтому нажмём "Add AdvGlowButton".

Свойств у ADVToolBar не так уж и много, а нам понадобяться ещё меньше, описание основних свойств будет рассмотрено в другой заметке.
Вы уже наверное заметили на скриншотах,значок вопроса в правом углу. За его отображение отвечает следующие свойство:
AdvToolBarPager1.ShowHelpButton: Boolean;

Давайте поставим его в false, а вот это
AdvToolBarPager1.ShowExpandCollapsButton: Boolean;

Поставим в true. Оно отобразит небольшой значок, всё в том же углу, с помощью которого можно будет скрывать основную часть ленточного меню, оставив только названия вкладок.

Вы уже наверное заметили, что это Ленточное меню вполне самодостаточно, ведь у него есть кнопки свёртывания, увеличения и закрытия, значит можно можно у самой формы убрать рамку и заголовок.
Form1.BorderStyle := bsNone;

Именно так и сделаны скриншоты выше.
А теперь вспомним MS Word 2007, откроем его и отметим некоторые особенности интерфейса, о которых сейчас и поговорим.

Кнопка меню


Во первых, это кнопка меню. Сделаем у себя такую же. Для этого снова вызываем контекстное меню у AdvToolBarPager1 и выбираем пункт Add Application Menu Button и аккурат в левом верхнем углу появится синенький квадратик (AdvShapeButton1). А нам что нужно? Правильно, кружок =) Значит надо настроить его внешний вид (Appearance).
А за это отвечает следующие свойство, которое я установил в значение bsOrb:
AdvShapeButton1.Appearance.Shape := bsOrb;

Значения свойства Shape:
bsCustom - нет оформления, т.е. полностью прозрачен;
bsOrb - в виде круга;
bsRectangle - в виде квадрата.
Если вам потребуется изменить цветовую гамму кружка/квадрата - поиграйтесь со значениями свойств входящих в AdvShapeButton1.Appearance.
Кружок есть, теперь добавим в него картинку, за него отвечает следующие свойство:
AdvShapeButton1.Picture : TGDIPPicture;

В итоге у меня получилось следующие:

Панель быстрого доступа


Панель быстрого доступа добавить ещё проще. Так же как и в случае с кнопкой меню - вызываем контекстное меню AdvToolBarPager1 и выбираем пункт Add Quick Access Button и в ту же секунду появится панелька возле менюшки. На эту панельку кнопки добавляются всё тем же способом, через контекстное меню.
В Word 2007 по умолчанию там три кнопки, это сохранение, отмена (с выпадающим списком) и повтор. Значит добавим на только что созданную панель быстрого доступа три кнопки, это AdvGlowButton, AdvGlowButtonMenu и AdvGlowButton соответственно. Первая и последняя это обычные кнопки, а средняя - с выпадающим списком, хотя по сути они отличаются всего лишь одним свойством:
DropDownButton : Boolean;

По умолчанию эти кнопки являются прозрачными
AdvGlowButton1.Transparent := True;

AdvGlowButtonMenu1.Transparent := True;

Осталось поставить иконки, через свойство Picture:
И вот моя маленькая, славненькая менюшка:

Кнопка опций


Кнопка опций необходима, как видно из её названия, для вывода на экран отдельного окна со списком дополнительных опций, которые некрасиво бы смотрелись на ленточном меню. У каждой панели, по умолчанию есть эта кнопка.
А убрать её можно с помощью свойства:
AdvToolBar11.ShowOptionIndicator := false;

Аналогично она и включается. В данный момент подробно её рассматривать не будем, но оставим её включенной.

Вернёмся к первой кнопке


Она у нас пока что невзрачная, маленькая и квадратная. Сделаем её похожей на кнопку "Вставить", как у MS Word.
Первым делом изменим её размер и ориентацию:
AdvGlowButton1.Top    := 2;

AdvGlowButton1.Left := 2;
AdvGlowButton1.Width := 56;
AdvGlowButton1.Height := 67;

Добавим выпадающие меню, по умолчанию оно выпадает справа (dpRight), а нам необходимо снизу (dpBottom).
AdvGlowButton1.DropDownButton      := true;

AdvGlowButton1.DropDownPosition := dpBottom;


Осталось только вставить картинку, это можно сделать через полюбившееся нам уже свойство Picture или через ImageList. Так же надо подписать название кнопки, установить расположение картинки относительно названия и поставить прозрачность:
//Заголовок

AdvGlowButton1.Caption := 'Вставить';
//Расположение рисунка
AdvGlowButton1.Layout := blGlyphTop;
//Прозрачность
AdvGlowButton1.Transparent := true;

Помимо этого, я переименовал панель и вкладку, на которой находится кнопка, а две оставшиеся вкладки удалил.

И на самый конец у нас осталось - добавить три небольшие кнопки:
1) Вырезать
AdvGlowButton4.Top          := 2;

AdvGlowButton4.Left := 60;
AdvGlowButton4.Width := 125;
AdvGlowButton4.Height := 21;
AdvGlowButton4.Caption := 'Вырезать';
AdvGlowButton4.Layout := blGlyphLeftAdjusted;
AdvGlowButton4.Transparent := true;

2) Копировать
AdvGlowButton5.Top          := 25;

AdvGlowButton5.Left := 60;
AdvGlowButton5.Width := 125;
AdvGlowButton5.Height := 21;
AdvGlowButton5.Caption := 'Копировать';
AdvGlowButton5.Layout := blGlyphLeftAdjusted;
AdvGlowButton5.Transparent := true;

3) Формат по образцу
AdvGlowButton6.Top          := 48;

AdvGlowButton6.Left := 60;
AdvGlowButton6.Width := 125;
AdvGlowButton6.Height := 21;
AdvGlowButton6.Caption := 'Формат по образцу';
AdvGlowButton6.Layout := blGlyphLeftAdjusted;
AdvGlowButton6.Transparent := true;

И не забываем добавить иконки.

И как итог к сегодняшней заметке:

Надеюсь, всё изложил понятно. Ждите новых заметок о компонентах TMS.
X