Ribbon Controls крок за кроком. Крок 2 – додаткові елементи інтерфейсу, Різне, Програмування, статті

Джерело: webdelphi


Продовжуємо повільно, але вірно заглиблюватися в Ribbon Controls. У попередньому пості я розглянув розробку простого інтерфейсу без будь-яких “наворотів”, на зразок галерей елементів, меню і тощо Сьогодні займемося саме цим.

ribbon


До речі, відразу зауважу, що я далеко не фахівець у питаннях роботи з Ribbon Controls і все, що я розповідаю – це не більше, ніж мої спроби розібратися з цими компонентамиDelphi. Тому, якщо Ви помітите які-небудь недоліки або (не дай Бог) помилки в моїх міркуваннях – не соромтеся, відписувати коментарі з зауваженнями. Так, я думаю, з часом можна буде зібрати більш-менш докладний посібник з використання компонентів Ribbon в Delphi, Яке стане в нагоді багатьом. Ну, а тепер продовжимо почате.


1. Split Buttons. Що це і як зробити?


Перед Вами, що вже став звичним, елемент інтерфейсу 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 і відразу змінюємо його властивості:



В обробнику пишемо:

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

Тепер створюємо додаткові дії для кнопки. Перше додаткову дію – відкриває сторінку для підписки на RSS. Властивості дії:



Оброблювач дії:

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

Друге додаткову дію завантажить сторінку зі списком усіх статей блога. Його властивості:



Оброблювач дії:

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

Тепер перетягуємо дію (TAction) OpenIndex на вільну панель Ribbon і задаємо новому елементи наступні властивості:



Тепер переходимо до властивості Items і додаємо додаткові дії на кнопку. Для цього:



  1. Відкриваємо редактор властивості і тиснемо кнопку Insert. У список має додатися нову дію з назвою ActionClientItem0.

  2. Виділяємо нову дію і переходимо в Object Inspector

  3. Змінюємо властивості на наступні:

    • Action = RSSIndex

    • Caption = “Відкрити RSS”

  4. Таким же чином додаємо в список друга дія і задаємо йому властивості:

    • Action = OpenList

    • Caption = “Відкрити список статей”

Запускаємо програму і милуємося результатом:


Як бачите, нічого особливо складного робити не довелося.


Єдине, що залишається зауважити з приводу split-кнопок – це те, що зазвичай в додаткові дії включається і основне. Тобто в нашому випадку в списку додаткових мало б бути присутнім і дію на відкриття головної сторінки блогу. Я не став цього робити щоб трохи скоротити список однотипних дій.


Переходимо до наступного питання – створення галерей.


2. Галереї в Ribbon


Галереї (Galery) – це нове слово в науці і техніці по суті ще один різновид випадаючого меню, реалізована в інтерфейсах Ribbon.


На відміну від простих PopUp-меню і Split-кнопок, в галереях можуть міститися великі графічні елементи. Ось, наприклад, вміст галереї “Бібліотека нумерації” з Word 2007 (з описом елементів):


Як бачите, галерея має очевидні переваги перед звичайними текстовими меню.


По-перше, використання такого елемента інтерфейсу значно покращує зовнішній вигляд програми в цілому.


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


Тепер спробуємо створити просту галерею. Нехай, наприклад, в галереї будуть міститися картинки, що демонструють різні стилі оформлення для 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.


Тепер перевіримо працездатність нашої галереї. У мене вийшов ось такий інтерфейс:


Зараз ми створили просту галерею з одним заголовком і таблицею на 3 стовпці.
Якщо Вам необхідно створити більш складну галерею (наприклад по типу Word 2007 галерея “Фігури” на вкладці “Вставка”), то кожна нова група елементів поділяється сепаратором у якого назва (Caption) збігається з назвою групи елементів. Тобто, якщо я захочу зробити галерею з двох груп елементів, наприклад “Стилі” і “Стилі 2”, то дії який будуть наступними:



  1. в ActionList “e створюю нові елементи, які включаю в категорія з назвою” Стилі 2 “. Неважливо яку кількість елементів – хоч 100 штук – всі вони будуть розташовані в залежності від властивості ItemsPerRow кореневого елемента.

  2. У властивості Items кореневого елемента створюю новий сепаратор (роздільник) з властивістю Caption = “& Стилі 2”

  3. Додаю нові елементи з ActionList в Items.

У підсумку отримуємо галерею на два рівні:


І так можна нарощувати рівні поки не набридне.


Робота з TRibbonComboBox


За своєю суттю компонент TRibbonComboBox нічим не відрізняється від свого далекого родича TComboBox за одним невеликим винятком – для того, щоб зберігався стиль оформлення необхідно, щоб кожен пункт (елемент) TRibbonComboBox представлявся у вигляді елемента колекції TActionCliets. Як це зробити – див. перший пункт статті про split-кнопки. В іншому TRibbonComboBox точно такий же як і TComboBox.


Ось, наприклад, на малюнку представлений RibbonComboBox з одним роздільником і трьома елементами для вибору.


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


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


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


Спочатку, коротко про головне, точніше про склад панелі головного меню:


Як видно з малюнка, крім звичайного набору елементів головного меню, в Ribbon додатково реалізована ще одна панель для розміщення додаткових команд або посилань на відкриваються документи, а також можливість додавання кнопок у нижню частину меню. Створимо своє власне меню.
Для цього необхідно викликати контекстне меню компонента TRibbon і вибрати пункт “Add Application Menu”. Нове меню за умовчанням містить один порожній контейнер для дії (TActionClients [0]) і порожню додаткову панель.
Для того, щоб змінити заголовок додатково панелі необхідно:



Вкладка властивостей ApplicationMenu містить наступні властивості:



  1. Caption – Заголовок додаткової панелі

  2. CommandType – Тип команд для додаткової панелі: ctCommands – у додатковій панелі розміщуються елементи команд (дії TAction) ctRecent – у додатковій панелі розміщуються посилання на раніше відкриті документи.

  3. Icon – Ікона на кнопці головного меню. Її ж можна змінити через властивість Application Icon в опціях проекту.

  4. IconSize – Розмір іконки на кнопці головного меню.

  5. Menu – Панель головного меню.

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


Тут:


OptionItems – Містить набір дій для блоку додаткових кнопок меню


RecentItems – Набір дій для додаткової панелі головного меню.


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


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


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


Трохи інакше йде справа в разі створення підменю. Для того, щоб створити для будь-якого кореневого елемента список команд з sub-menu необхідно:



  1. вибрати необхідний елемент

  2. додати необхідні дії в список Items

  3. при цьому кожна дія з sub-menu повинно мати властивість CommandStyle = csMenu.

Ось приклад під-меню для одного з елементів головного меню:


Як видно список додаткових елементів містить два компоненти з типом csSeparator (роздільник)


Крім того, кожен пункт додаткового меню містить пояснює підпис.


Для того, щоб зробити подібного роду підменю необхідно, щоб кожен елемент колекції TActionClients в списку мав наступні властивості:



  1. CommandStyle = csMenu

  2. CommandProperties -> ShowRichContent = true

  3. CommandProperties -> Content = пояснювальний текст для елемента.

Так само при розробці Application Menu слід враховувати таку обставину – розмір панелі для під-меню цілком і повністю відповідає розміри основної панелі. Тобто, якщо в основному меню у Вас міститься одна дія, то скільки б елементів ви не вносили в підменю, в працюючому додаток підменю буде розміром точно в один елемент.


PopUp-меню програми


Тут все простіше і, прочитавши цю статтю повністю, Ви без будь-яких проблем створите popup-меню будь-якої конфігурації і будь-якої складності.


Єдине, що слід відзначити, це те, що при розробці PopUp-меню необхідно використовувати компоненти TPopUpActionBar.


Для збереження загального зовнішнього вигляду програми, не забувайте також, що PopUpActionBar має властивість Style.


Замість висновку


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


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


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


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


Додаток, на підставі якого написана ця стаття, Ви можете скачати тут

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*