Контроли на лентата стъпка по стъпка

Продължаваме бавно, но сигурно да навлизаме в контролите на лентата. В предишна публикация разгледах разработването на прост интерфейс без никакви "звънци и свирки", като галерии с елементи, менюта и т.н. Нека направим точно това днес.

1. Разделени бутони. Какво е това и как да го направите?

Пред вас, който вече стана познат, е интерфейсният елемент на Word 2007 - разделен бутон за вмъкване на текст. Тези, които са учили английски, лесно ще разберат защо бутонът се нарича по този начин (сплит - разделен, разделен наполовина). Бутонът Slit се състои от две части: горната част е за извършване на основното действие, долната част е за показване на списък с допълнителни действия под формата на меню. Например същият този бутон изпълнява три действия едновременно:

основно - поставяне от клипборда
първа екстра - специална вложка
втората допълнителна - вмъкване на хипервръзка

Сега, що се отнася до създаването на ваши собствени разделени бутони. Нека се върнем към нашето тестово приложение и създадем бутон, чието основно действие е да отвори главната страница на блога и няколко допълнителни действия - да отвори различни страници от блога. За да направим това, ще трябва леко да модифицираме приложението, а именно:

Добавете друг ImageList към формата (сега ще има 2 от тях). Първият ImageList "e (да го наречем ImageList_32) ще съхранява икони на бутони с размер 32x32 пиксела, вторият (ImageList_16) -строго в същия ред същите икони, но вече 16x16 пиксела
Променете свойствата на ActionManager "a
в Images посочваме ImageList_16
в LargeImages посочваме ImageList_32

Така че по подразбиране всичко е новодействията в ActionManager"e, както се очаква, ще имат малка икона с размери 16x16 пиксела и, ако е необходимо, можем да я променим на голяма.

Сега създаваме ново действие в ActionManager "e и веднага променяме неговите свойства:

Надпис = "WebDelphi.ru"
name="OpenIndex"
Подсказка = "Отворете началната страница на блога"

В манипулатора пишем:

Сега създаваме допълнителни действия за бутона. Първото допълнително действие - отваря страница за абониране за RSS. Свойства на действието:

Надпис = "Отвори RSS"
Име = "RSIndex"
Съвет = „Отворете страницата за абонамент“

Второто допълнително действие ще зареди страница със списък на всички статии в блога. Неговите свойства:

Надпис = "Отворен списък"
Име = "OpenList"
Подсказка = "Отворете списъка със статии"

Сега плъзгаме действието (TAction)OpenIndex върху безплатния панел на лентата и задаваме следните свойства на новия елемент:

Свойства на командата -> ButtonSize =bsLarge
Свойства на командата -> ButtonType =btSplit
CommandStyle =csButton

Сега нека отидем на свойствотоItems и да добавим допълнителни действия към бутона. За това:

Пускаме приложението и се възхищаваме на резултата:

Както виждате, нямаше нищо особено трудно за правене.

Единственото нещо, което остава да се отбележи за разделените бутони е, че обикновено основният е включен в допълнителните действия. Тези. в нашия случай действието за отваряне на главната страница на блога също трябва да бъде в списъка с допълнителни. Не направих това, за да намаля леко списъка с подобни действия.

Нека да преминем към следващия въпрос - създаванегалерии.

2. Галерии в лентата

Галериите са нова дума в науката и технологиите, всъщност друг вид падащо меню, реализирано в интерфейсите на лентата.

Както можете да видите, галерията има очевидни предимства пред обикновените текстови менюта.

Първо, използването на такъв интерфейсен елемент значително подобрява външния вид на приложението като цяло.

Второ, галерията предоставя на потребителя информация в по-удобна и разбираема форма. Съгласете се, че ако вместо големи снимки, показващи различни номерирани списъци, ни се покаже обикновено меню с елементи като "Списък с латински букви и точка", тогава едва ли ще ни достави удоволствие да влезем в такова меню още веднъж, а ако представим подобно текстово меню, например, за да изберем стилове за дизайн на страница, тогава ще си счупим главите, мислейки какво означават имена като "Връх" или "Слънцестоене". А галерията ни дава ясна и недвусмислена представа до какво ще доведе това или онова действие.

Сега нека се опитаме да създадем проста галерия. Да кажем например, че галерията съдържа снимки, които показват различни стилове за лента.

Тъй като нашата галерия ще съдържа големи изображения (100×100 пиксела), за тях е препоръчително да използвате още един компонент -TActionList (Стандартна страница от палитрата на компонентите) и нов ImageList. Това ще ни спести излишни мъки с Action Manager.

И така, поставяме ActionList и новия ImageList върху формуляра и танцуваме с тамбура, правим следните промени в свойствата:

Сега всички нови действия от ActionList ще бъдат автоматично свързани с ActionManager.

Заредете изображения в ImageList. Ако е необходимо, изображения (100x137 пиксела) от различниСтилове на ленти можете да изтеглите тук.

Добавяне на нови елементи на галерията. За това:

Сега в ActionManager"e по обичайния начин създаваме ново действие, например с иметоstyles. Поставяме новия елемент на панела и променяме свойствата му, както следва:

Свойства на командата -> ButtonType =btSplit
CommandStyle =csGallery
Свойства на командата -> ItemsPerRow =3
В Items добавяме действия в следната последователност:
първо създаваме празен елемент и задаваме неговите свойства:
Надпис = "&Стилове"
CommandStyle = csSeparator
след това добавете три действия от StyleList, без да променяте техните свойства

Ние пишем манипулатори. Нека Luna бъде стилът на кожата по подразбиране. Тогава манипулаторът застилове ще бъде:

Събитията в галерията ще имат манипулатори като този:

За всеки случай обръщам внимание - за да промените стила на дизайн на лентата, трябва да се свържат три модула с вашите употреби: RibbonLunaStyleActnCtrls, RibbonObsidianStyleActnCtrls и RibbonSilverStyleActnCtrls.

Сега нека проверим ефективността на нашата галерия. Получих този интерфейс:

Сега създадохме проста галерия с едно заглавие и таблица с 3 колони. Ако трябва да създадете по-сложна галерия (например галерията „Форми“ в раздела „Вмъкване“ в Word 2007), тогава всяка нова група елементи се разделя с разделител, чието име (Надпис) съвпада с името на групата елементи. Тоест, ако искам да направя галерия от две групи елементи, например "Стилове" и "Стилове 2", тогава действията ще бъдат както следва:

В резултат на това получаваме галерия на две нива:

Итака че можете да увеличавате нивата, докато не ви омръзне.

Работа с TRibbonComboBox

В основата си компонентът TRibbonComboBox не се различава от своя далечен роднина TComboBox с едно малко изключение - за да се запази стила на дизайна, е необходимо всеки елемент (елемент) на TRibbonComboBox да бъде представен като елемент от колекцията TActionCliets. Как да направите това - вижте първия параграф на статията за разделените бутони. В противен случай TRibbonComboBox е абсолютно същият като TComboBox.

Тук, например, фигурата показва RibbonComboBox с един разделител и три елемента за избор.

Меню: главно меню на приложението, изскачащо меню

И накрая, нека да преминем към разработването на менюта в стил Ribbon.

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

Първо, накратко за основното, по-точно за състава на панела на главното меню:

Както можете да видите от фигурата, в допълнение към обичайния набор от елементи на основното меню, Ribbon допълнително реализира още един панел за поставяне на допълнителни команди или връзки към отворени документи, както и възможност за добавяне на бутони в долната част на менюто. Нека създадем наше собствено меню. За да направите това, извикайте контекстното меню на компонентаTRibbon и изберете елемента " Добавяне на меню за приложение ". Новото меню по подразбиране съдържа един празен контейнер за действието (TActionClients[0]) и празен допълнителен панел. За да промените заглавието на допълнителния панел:

Изберете TRibbon компонент
Отидете в инспектора на обекти и отидете в раздела свойства на менюто на приложението.

Разделът със свойства на ApplicationMenu съдържа следните свойства:

Надпис - допълнителен надпис на панела
CommandType - тип команда за допълнителния панел:ctCommands - допълнителен панел съдържа командни елементи (TAction действия) ctRecent - допълнителен панел съдържа връзки към предишни отворени документи.
Икона - икона на бутона на главното меню. Може също да се промени чрез свойството Икона на приложение в опциите на проекта.
IconSize - размер на иконата на бутона на главното меню.
Меню - лента с главно меню.

За да промените състава на лентата на главното меню, изберете раздела свойства: TRibbon -> Меню на приложението -> Меню или изберете компонент TRibbonApplicationMenuBar в инспектора на обекти.

Тук:

OptionItems - съдържа набор от действия за блока от допълнителни бутони на менюто

RecentItems - набор от действия за допълнителния панел на главното меню.

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

Сега нека да разгледаме основните елементи на главното меню. Основните елементи (тези, които се виждат при отваряне на менюто) се създават по същия начин като всички други елементи на панелите на лентата - чрез просто плъзгане на действията от ActionManager с мишката до празно място на панела.

Ситуацията е малко по-различна в случай на създаване на подменю. За да създадете списък с команди с подменю за всеки основен елемент, трябва да:

изберете необходимия елемент
добавете необходимите действия към списъка с елементи
в същото време всяко действие от подменюто трябва да има свойството CommandStyle = csMenu.

Ето примерно подменю за един от елементите на главното меню:

Както можете да видите, списъкът с допълнителни елементи съдържа два компонента с тип csSeparator (разделител)

Освен това всекидопълнителният елемент от менюто съдържа обяснителен надпис.

За да направите този вид подменю, всеки елемент от колекцията TActionClients в списъка трябва да има следните свойства:

Също така, при разработването на менюто на приложението трябва да се вземе предвид следното обстоятелство - размерът на панела за подменюто напълно съответства на размера на основния панел. Тоест, ако имате едно действие в главното меню, тогава без значение колко елемента добавяте към подменюто, в работещото приложение подменюто ще бъде с размер точно един елемент.

Изскачащо меню на приложението

Тук всичко е по-просто и след като прочетете тази статия изцяло, ще създадете изскачащо меню с всякаква конфигурация и всякаква сложност без никакви проблеми.

Единственото нещо, което трябва да се отбележи е, че когато разработвате PopUp меню, трябва да използвате компонентитеTPopUpActionBar.

За да поддържате цялостния външен вид на приложението, не забравяйте, чеPopUpActionBar също има свойство Style.

Вместо заключение

Днес направихме още една крачка напред в изучаването на контролите на лентата и научихме как да създаваме интерфейсни елементи като: разделени бутони, галерии, списъци, главно меню и изскачащо меню.

Що се отнася до сложността на разработването на интерфейси на лентата, според мен основната трудност е да не се объркате във всички тези TAction, TActionClients, Items и т.н. Като цяло, съдейки по това, което научих през последните няколко дни за работата с Ribbon, можем да кажем, че повече или по-малко функционален интерфейс може да бъде разработен само с три компонента под ръка: TRibbon, TImageList и TActionManager. Естествено, ще има такива ограничения като невъзможност за създаване на бутони с различни размери, галерии с големи елементи и т.н., но като цяло интерфейсът ще бъдефункционален. Въпреки това не бих поел рискове и не бих загубил в удобството на разработката, спестявайки допълнителни няколко десетки килобайта от exe файл.

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

Е, докато вие развивате вашите интерфейси, аз ще продължа със скромните си стъпки към по-задълбочено изучаване на Ribbon Controls и ще се опитам да се занимавам с Costumizer-ите и тяхната българизация.