Ribbon Controls крок за кроком. Крок 4 – створюємо унікальний стиль або як працювати в RibbonSkins., Різне, Програмування, статті

Джерело: webdelphi


Продовжуємо порпатися в нетрях і хитросплетіннях Ribbon Controls. Сьогодні на порядку денному настройка Ribbon Controls для російськомовного населення плюс трохи креативу в плані створення своїх тем оформлення для Ribbon Controls.
Згадую у когось з читачів блогу виникало питання “Як русифікувати меню Costumize Dialog?” . Давайте розбиратися. Адже ні зі стелі ж падають рядки і вставляються самі в менюшку?
Найпростіший спосіб вирішення подібних питань – це зазирнути в папку



C:Program FilesEmbarcaderoRAD Studio7.0lib


і подивитися модуль з назвою, на зразок RibbonSrt або RibbonConst. Адже розробники повинні дотримуватися всіх правил написання програмного коду, в тому числі і уникати використання строкових і, по можливості, інших констант в тілах процедур і функцій. Відкриваємо папку і дійсно спостерігаємо там чудовий файлик RibbonConsts.dcu . Однойменний файл, але з розширенням *. Pas знаходиться в папці



C:Program FilesEmbarcaderoRAD Studio7.0sourceWin32vcl


Перетягуємо RibbonConsts.pas собі в проект, підключаємо в uses і відкриваємо в редакторі коду. Тепер все, що від нас вимагається – це грамотно і без помилок перекласти на російську мову все, що містяться в модулі рядка. Там їх небагато – лише двадцять чотири штучки.
Після русифікації модуля меню буде виглядати приблизно так:


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


Ribbon Skins в Delphi 2010


Почнемо вивчення теми з того, що найбільш просто – колірні схеми. В Delphi вже спочатку є три готових компонента для колірних схем:



Спробуємо застосувати їх на практиці. За логікою речей і, судячи з назви властивостей у компонентів, залежно від колірної схеми повинні змінюватися кольору шрифтів і тіні компонентів як мінімум. Перевіримо на практиці. Розміщуємо на формі, як звичайно: ActionManager і Ribbon . Створюємо парочку Action в менеджері, у ріббона створює один Tab і дві групи (а можна і одну – як Вам завгодно) і розміщуємо в групах наші Action “и.
Тепер кидаємо на форму простий ComboBox , Всі три доступні колірні схеми і кнопку. У мене вийшла ось така непоказна формочка:


Тепер додаємо в ComboBox три рядки, кожна з яких буде описувати одну з колірних схем і в обробнику кліка по кнопці пишемо наступний код






1
2
3
4
5
6
7
8
[…]
case ComboBox1.ItemIndex of
0:Ribbon1.ColorMap:=XPColorMap1;
1:Ribbon1.ColorMap:=StandardColorMap1;
2:Ribbon1.ColorMap:=TwilightColorMap1;
end;
Ribbon1.Repaint:
[…]

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


Не порадував глюк з панеллю швидкого запуску – зверніть на нього увагу. Причому як виявилося глюк цей не пропадає навіть якщо перезавантажити Delphi … хоча це може тільки на робочій машинці глюк – вдома перевірю напевно. А поки продовжимо.
Зараз ми розглянули один з варіантів зміни колірної схеми – з використанням стандартних, вже довгий час існуючих компонентів колірних схем.
Але у Ribbon також є і свій тип TcustomRibbonColorMap в модулі Ribbon . Можна, та й мабуть, потрібно використовувати цей тип даних при роботі з колірними схемами Ribbon . Спробуємо застосувати його.
Після недовгих маніпуляцій з мишкою форма додатка прийняла такий вигляд:


Кожен з нових ColorBox буде описувати значення кольору для одного з властивостей TcustomRibbonColorMap .
Дописуючи обробник події кнопки:






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
[…]
var Ribbon: TCustomRibbonColorMap;
begin
case case ComboBox1.ItemIndex of
[…]
3: begin
Ribbon:=TCustomRibbonColorMap.Create(self);
With Ribbon do
begin
BevelMinimizedInner:=ColorBox1.Selected;
BevelMinimizedOuter:=ColorBox2.Selected;
BtnSelectedFont:=ColorBox3.Selected;
CaptionFontColor:=ColorBox4.Selected;
ControlColor:=ColorBox5.Selected;
ControlInactiveColor:=ColorBox6.Selected;
ControlFrameColor:=ColorBox7.Selected;
DisabledFontColor:=ColorBox8.Selected;
DocumentFontColor:=ColorBox16.Selected;
FontColor:=ColorBox15.Selected;
HighlightColor:=ColorBox14.Selected;
ActiveTabFontColor:=ColorBox13.Selected;
GroupFontColor:=ColorBox12.Selected;
InactiveTabFontColor:=ColorBox11.Selected;
QuickAccessToolbarMoreColor:=ColorBox10.Selected;
QuickAccessToolbarMoreBorderColor:=ColorBox9.Selected;
end;
Ribbon1.ColorMap:=Ribbon;
end;
end;
[…]
end;

І тепер можемо експериментувати з колірною схемою Ribbon скільки нашій душі завгодно, підбирати свої кольори шрифтів і т.д. Наприклад, я зібрав ось таку “тошнотно” схемку:


Жах, чи неправда? Але це проcто приклад. А у нас залишився ще один відкрите питання: як змінити не тільки колір шрифту, а й тему оформлення цілком? Адже якщо просто прикинути, скільки людей купили RAD Studio 2009-2010, скільки використовують або пробують використовувати Ribbon Controls? І на всіх лише 3 теми. Несерйозно. Треба якось виділитися, створити щось своє (на крайняк – купити за N зелених єнотів).
Благо розробники з Embarcadero залишили нам можливість трохи покреативити в своє задоволення.
Судячи по малюнку вище, креативщик з мене хреновенькій, але я все-таки спробую. Перше, що слід зробити – зрозуміти яким чином і, найголовніше, звідки береться це гарне оформлення панелей, менюшек і табів. Я вирішив відштовхнутися у своїх пошуках від модуля RibbonLunaStyleActnCtrls і пошуки в підсумку привели до наступного класу:






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
TCustomRibbonSkin = class
public
type TRibbonSkinLoadType = (ltResource, ltFile);
private
FBitmap: TAlphaBitmap;
protected
procedure DoLoadByResource; virtual;
procedure DoLoadByFile; virtual;
public
constructor Create; virtual;
destructor Destroy; override;
function GetLoadType: TRibbonSkinLoadType; virtual;
function GetResourceHandle: THandle; virtual;
function GetLoadTypeValue: string; virtual;
procedure LoadSkin; virtual;
property Bitmap: TAlphaBitmap read FBitmap;
end;

Виходить з якого стилю оформлення ми б не починали свої пошуки – все упреться саме в цей клас. Як бачите у цього класу не так вже й багато властивостей і методів.
З типом TribbonSkinLoadType все цілком зрозуміло – визначає звідки буде завантажуватися скрін: з ресурсного файлу або ж з файлу на диску.
Далі одне єдине поле: FBitmap: TalphaBitmap – Власне це і є файл з необхідними зображеннями для скіна.
Слідом ідуть два методи, які спрацьовують відповідно в залежності від того звідки буде завантажуватися скін.
Але саме чудове – це відкрите для читання властивість Bitmap . Згадую ще коли в мене стояла Delphi 2009 я немогу знайти толком інформації про розташування всіх графічних елементів в бітмапи … треба було відразу шукати тут. Але це все лірика. Давайте подивимося як виглядає файл з елементами скіна для Ribbon .
Повертаємося до нашого додатку, кидаємо на форму ще одну кнопку, SaveDialog і пишемо у властивості Caption у кнопки “Зберегти скін”, а в обробнику такий код:






1
2
3
4
[…]
if SaveDialog1.Execute then
Ribbon1.Style.RibbonSkin.Bitmap.SaveToFile(SaveDialog1.FileName);
[…]

Тепер ми можемо на власні очі поглянути на бітмап скрина Ribbon і сфабрикувати свій за образом і подобою. Файл важить не багато ні мало 1056kb тому заради ілюстрації я наведу стиснений в gif та зменшений трохи по розміром малюнок. Ось він:


Так як я не дизайнер і в PhotoShop практично нічого не тямлю, то заради експерімнта я розфарбував трохи деякі області, щоб бачити що в мене вийшло завантажити свій скін в програму. Тепер приступаємо до фази № 2 – пишемо свій модуль для завантаження скіна .
Ви звертали увагу, що після першої ж компіляції проекту з Ribbon в uses з’являється як мінімум один додатковий модуль RibbonLunaStyleActnCtrls ? Ось такий же самий модуль ми і будемо писати.
Створюємо порожній модуль і даємо йому какое0нібудь гучне назва, наприклад: RibbonMegaStyleActnCtrls . Відразу в uses підключаємо три модулі: ActnMan, RibbonStyleActnCtrls і Ribbon . А також оголошуємо одну константу:






1
const LoadType: TCustomRibbonSkin.TRibbonSkinLoadType = ltFile;
 

Тобто домовляємося, що саморобний скін будемо вантажити з bmp-файла. Тепер обявлялись такий клас:






1
2
3
4
5
6
7
type
TRibbonMegaStyleActionBars = class(TRibbonStyleActionBars)
public
function GetColorMapClass(ActionBar: TCustomActionBar): TCustomColorMapClass; override;
function GetSkinClass: TCustomRibbonSkinClass; override;
function GetStyleName: string; override;
end;

і розписуємо його методи:






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
implementation
 
uses
ActnMenus, SysUtils;
 
function TRibbonMegaStyleActionBars.GetColorMapClass(
ActionBar: TCustomActionBar): TCustomColorMapClass;
begin
Result := TRibbonLunaColorMap;
end;
 
function TRibbonMegaStyleActionBars.GetSkinClass: TCustomRibbonSkinClass;
begin
Result := TRibbonMegaSkin;
end;
 
function TRibbonMegaStyleActionBars.GetStyleName: string;
begin Result: = “Ribbon – Mega”; / / російськими буквами не писати!
end;

Зверніть увагу на перший метод – я використовував вже готову кольорову схему від скіна Luna, щоб сильно не забивати пост зайвими рядками коду, Ви ж можете визначити у своєму модулі власну колірну схему для скіна, думаю, що багато часу це не займе.


Тепер створюємо клас для нашого скіна, який будемо використовувати в програмі:






1
2
3
4
5
TRibbonMegaSkin = class(TCustomRibbonSkin)
public
function GetLoadTypeValue: string; override;
function GetLoadType: TCustomRibbonSkin.TRibbonSkinLoadType; override;
end;

Методи знову ж прості і непоказні (дли прикладу):






1
2
3
4
function TRibbonMegaSkin.GetLoadType: TCustomRibbonSkin.TRibbonSkinLoadType;
begin Result: = LoadType; / / використовували нашу константу
end;





1
2
3
4
5
function TRibbonMegaSkin.GetLoadTypeValue: string;
begin Result: = ExtractFilePath (ParamStr (0)) + “mega.bmp”; / / вказали розташування файлу
end;
end;

Якщо не влаштовує те, що скін буде лежати прямо поруч з виконуваним файлом – немає проблем, вкажіть свій шлях. А нам залишається тільки зареєструвати наш новий скін і вчасно його вивантажити. Не будемо знову ж винаходити велосипед (тим більше, що на швидку руку він може вийти далеко не з круглими колесами), а пишемо теж саме, що і для стандартних скінів в секціях initialization і finalization :






1
2
3
4
5
6
7
initialization
RibbonMegaStyle := TRibbonMegaStyleActionBars.Create;
RegisterActnBarStyle(RibbonMegaStyle);
 
finalization
UnregisterActnBarStyle(RibbonMegaStyle);
RibbonMegaStyle.Free;

Та й незабудьте перед implementation оголосити глобальну змінну:






1
2
var
RibbonMegaStyle: TRibbonMegaStyleActionBars;

Тепер підключаємо наш модуль в uses і в будь-якому зручному для вас обробнику пишемо:






1
2
3
4
[…]
Ribbon1.Style:=RibbonMegaStyle;
Ribbon1.Repaint;
[…]

Я додав ці рядки в обробник кнопки для застосування колірної схеми. Ось який вигляд прийняла моя програма після того як я познущався над скіном:


Моторошно некрасиво, але зате яскраво і відразу видно, що хтось навмисно спотворив Ribbon .
На сьогодні все. В якості бонуса до посту додається та сама програмка, яку я писав по ходу справи роботи над статтею. В архіві з програмою ви знайдете також її вихідні коди, включаючи модулі RibbonConsts (З одного перекладеної рядком) і модулем тестового скіна, який, в разі чого, позбавить Вас від зайвої писанини – просто поміняєте шлях і назву файлу і скін готовий.

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


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

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

Ваш отзыв

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

*

*