Umíme to s Delphi, 58. díl – buďte cool

Dnes si ukážeme způsob, jakým učinit svou aplikaci ještě krásnější, přívětivější, modernější, konkurenceschopnější, progresivnější... Prostě cool! Prvek, který si dnes popíšeme, se v současných aplikacích používá v ohromné míře – nenaleznete mnoho případů, které se bez něho obejdou...
Po tomto trochu záhadném úvodu si konečně můžeme prozradit, že obsahem dnešního dílu seriálu bude popis komponenty CoolBar, která slouží k vytváření vzájemně nezávislých, posuvných skupin komponent. Z této věty asi nemůže nikdo tušit, oč vlastně jde, nicméně z následujících praktických příkladů a obrázků bude brzy vše zřejmé.

Co to je CoolBar?

Než začneme vytvářet svůj první CoolBar, musíme učinit několik přípravných kroků. Především si ukážeme, k čemu vlastně bude směřovat naše snažení. Na následujícím obrázku můžete vidět aplikaci, která využívá komponentu CoolBar:

Klepněte pro větší obrázek

Na tomto obrázku je aplikace Web Browser (která je mimochodem k dispozici v adresáři Delphi5\Demos\Coolstuff). Obsah dnešního dílu, tedy komponenta CoolBar, je k vidění v horní části formuláře, jedná se o tři pruhy umístěné bezprostředně pod hlavní nabídkou. První z těchto pruhů nese tlačítka Back, Forward, Stop a Refresh, druhý obsahuje internetovou adresu a na třetím vidíme tlačítka sloužící jako internetové odkazy (Links).

Výhodou těchto ovládacích prvků je uživatelova možnost upravovat si jejich vzájemnou pozici. Pokud se uživateli zlíbí, v zásadě nic mu nebrání přesunout si adresu nahoru, an místo navigačních tlačítek, případně může dva pruhy umístit do jedné řádky nebo jeden z pruhů úplně skrýt. Jeden z možných modifikovaných vzhledů ukazuje následující obrázek:

Klepněte pro větší obrázek

Velkou výhodou komponenty CoolBar je fakt, že programátor nemusí žádným způsobem ošetřovat toto její chování – nemusíme odchytávat události pro pohyb myší ani nic podobného. Všechno zajišťuje Delphi, přesněji řečeno operační systém Windows.

Nyní již víme, co si pod pojmem CoolBar představit. Pojďme si ukázat, jak jej používat.

Co na CoolBar umístíme

Abyste si mohli následující informace prakticky zkoušet, prozraďme hned na začátku, že CoolBar je obsahem komponenty CoolBar z palety Win32. Abychom jej však mohli úspěšně použít, musíme mít především jasno v tom, jaké ovládací prvky na něj chceme umístit. Obecně vzato, CoolBar může nést jakékoliv ovládací prvky, ale pouze prvky odvozené od TWinControl (tedy „okenní“ ovládací prvky) způsobí vytvoření posuvného pruhu. Pokud na CoolBar umístíme třeba komponentu Label (což je sice potomek TGraphicControl, takže „je vidět“), bude na něm zobrazena, ale nevytvoří se žádná záložka, žádný posuvný pruh.

V souvislosti s CoolBarem se asi nejčastěji používá nástrojový pruh – ToolBar. Vhodným spojením ToolBaru a CoolBaru vznikají skutečně hezky vyhlížející aplikace – ostatně viz obrázky v předchozí podkapitole.

Abychom se v dalším textu mohli zaměřit právě na tvorbu takovýchto aplikací, vytvoříme nejprve nástrojový pruh (ToolBar), který budeme následně používat. Popis vytváření nástrojových pruhů byl uveden v 15. kapitole tohoto seriálu, proto budeme maximálně struční a pro podrobnosti se podívejte do zmíněného 15. dílu.

Vytvoření panelu nástrojů – ToolBar

Nástrojový pruh vytvoříme v několika krocích:
  • Na formulář umístěte komponenty ToolBar (Name = ToolBar1) a ImageList (Name = ImageList1) z palety Win32.
  • Klepněte pravým tlačítkem na komponentu ImageList a z kontextové nabídky vyberte Image List Editor.
  • Otevře se příslušný nástroj. Klepněte na tlačítko Add... a najděte požadované ikony (je možné buď použít soubory *.ico nebo bitmapy *.bmp; máte-li k dispozici bitmapu obsahující více ikon (nebo prostě větší bitmapu), můžete ji vybrat – bude automaticky rozdělena na obrázky o požadované velikosti). Podrobnosti o používání komponenty ImageList naleznete také v 15. dílu seriálu.
  • Máte-li nalezeny požadované ikony, klepněte v Image List Editoru na tlačítko OK.
  • Nyní nastavte vlastnost Images komponenty CoolBar na komponentu ImageList (Images = ImageList, je možné vybrat z rozbalovacího seznamu).
  • Nyní již vytvoříme vlastní nástrojový pruh. Klepněte na komponentu ToolBar pravým tlačítkem a z kontextové nabídky vyberte New Button. Na nástrojovém pruhu se vytvoří tlačítko, které bude obsahovat první obrázek ze seznamu ImageList.
  • Tímto způsobem vytvoříme několik tlačítek, čas od času je oddělíme novým oddělovačem (z kontextové nabídky zvolte New Separator).
Předpokládejme, že nástrojový pruh je hotov. Poznámka: Pokud chcete vědět – ač to nesouvisí s náplní dnešního dílu -, jakým způsobem nyní ošetřovat např. klepnutí na jednotlivý tlačítka nástrojového pruhu, všimněte si, že každé tlačítko tohoto pruhu vytvořilo nový objekt třídy TToolButton. V Object Inspectoru tedy nalezněte např. komponentu ToolButton1 a sepsáním ošetřující procedury pro některou jeho událost zajistíte vhodnou reakci na příslušnou akci.

Abychom si mohli ukázat všechny možnosti práce s komponentou CoolBar, vytvořte si podobným způsobem ještě jeden nástrojový pruh (vložte tedy na formulář ještě jednu komponentu ToolBar (Name = ToolBar2) a ImageList (ImageList2) a zopakujte předchozí postup.

Vrhněme se na CoolBar

Máme připraveny všechny výchozí podmínky a můžeme se bez obav začít zabývat přímo komponentou CoolBar. Nejprve si povíme nezbytné teoretické informace a na závěr prakticky vytvoříme ukázkovou aplikaci.

Komponenta CoolBar (z palety Win32), podobně jako např. ToolBar, vytváří při svém používání další komponenty, potomky. Zatímco u komponenty ToolBar jsou těmito potomky tlačítka (objekty třídy TToolButton), komponenta CoolBar vytváří skupiny (Bands, objekty třídy TCoolBand). Každá tato skupina je následně jedním přesouvacím pruhem.

Skupiny mohou být posouvány na sobě nezávisle, stejně tak může být měněna jejich velikost. Uživatel mění velikost a pozici každé skupiny „chycením“ za její levý okraj, na kterém je viditelná dvojitá svislá čára.

Aby bylo možné používat komponentu CoolBar, je nutná verze 4.7 knihovny COMCTL32.DLL (nebo novější). Tato knihovna se obvykle nachází v adresáři Windows\System nebo Windows\System32.

Poznámka pro příznivce multiplatformního programování: komponenta CoolBar nemůže být použita při vytváření multiplatformních aplikací, neboť v knihovně CLX není obsažena (v té je možné používat např. ControlBar).

Všechny skupiny panelu CoolBar jsou obsaženy ve vlastnosti Bands této komponenty (později se jí budeme věnovat podrobně). V době návrhu je možné přidávat, odstraňovat nebo modifikovat skupiny pomocí nástroje Bands Editor. Tento nástroj je možné otevřít poté, co v Object Inspectoru najdete vlastnost Bands komponeny CoolBar, a poklepete do políčka vedle této vlastnosti (případně klepnete na tlačítko se třemi tečkami). Přidávat skupiny je také možné velmi jednoduše tak, že v paletě komponent vyberete nějakou okenní komponentu a vložíte ji na CoolBar. Otevřený Bands Editor vidíte na následujícím obrázku:

Klepněte pro větší obrázek

Vlastnosti komponenty CoolBar

Pojďme se nyní podívat na všechny důležité vlastnosti komponenty CoolBar:

Vlastnost: Align

Popis: Určuje zarovnání komponenty CoolBar. Možné hodnoty: alBottom, alLeft, alRight, alTop (CoolBar bude zarovnán na spodním / levém / pravém / horním okraji formuláře), alNone (žádné automatické zarovnání, CoolBar si můžete umístit na zcela libovolné místo), alClient (CoolBar se bude rozprostírat po celé ploše formuláře), alCustom (pozice bude určena voláním CustomAlignInsertBefore a CustomAlignPosition). Pokud nastavíte Align na alLeft nebo alRight, dojde k automatické změněn hodnoty vlastnosti Vertical na True, v jiných případech na False.

Vlastnost: BandBorderStyle

Popis: Určuje styl okrajů skupin. Standardní nastavení je bsSingle, což způsobí jednoduché ohraničení každé skupiny. Je také možné okraje zrušit nastavením hodnoty bsNone.

Vlastnost: BandMaximize

Popis: Specifikuje podmínky, za nichž se skupina maximalizuje. Možné hodnoty: bmNone (nemaximalizuje se nikdy), bmClick (maximalizuje se po klepnutí myší), bmDoubleClick (maximalizuje se poklepáním myší).

Vlastnost: Bands

Popis: Seznam skupin komponenty. Velmi důležitá vlastnost, kterou se budeme podrobně zabývat za týden, v příštím dílu seriálu.

Vlastnost: Bitmap

Popis: Velmi šikovná vlastnost: určuje bitmapu, která bude zobrazena pod skupinami na CoolBaru.

Vlastnost: FixedOrder

Popis: Udává, může-li uživatel změnit pořadí skupin na CoolBaru.

Vlastnost: FixedSize

Popis: Určuje, zda skupiny si budou automaticky zachovávat stejnou šířku (nebo výšku). Za normálních podmínek (tedy pokud jsou vlastnosti Vertical a FixedSize nastaveny na False), je výška každého CoolBaru stanovena přesně tak, aby se na něj vešly všechny okenní komponenty, které na něj umístíme. Pokud je FixeSize nastavena na True, skupiny automaticky změní svou výšku tak, aby byla u všech shodná. Zvětšením výšky nejvyšší viditelné skupiny automaticky zvětšíme výšku všech ostatních skupin. Pokud je hodnota Vertical nastavena na True, je situace ještě trochu komplikovanější. Pokud FixedSize má hodnotu False, šířka každé skupiny (Bandu) je určena šířkou okenní komponenty, kterou tato skupina obsahuje. Jsou-li naopak FixedSize i Vertical rovny True, skupiny si udržují stejnou šířku. Zvětšením šířky nejširší skupiny dojde k automatickému zvětšení šířky všech ostatních skupin.

Vlastnost: Images

Popis: Seznam obrázků pro skupiny na CoolBaru. Pokud nastavíme hodnotu této vlastnosti (jinak řečeno – pokud vytvoříme seznam obrázků (komponentu ImageList) a ten přiřadíme jako hodnotu vlastnosti Images), můžeme na levé straně každé skupiny zobrazit obrázek. Toho se s výhodou využívá – na CoolBar umístíme několik nástrojových lišt a před každou z nich umístíme obrázek s krátkým popisem nebo ikonkou, která signalizuje význam této nástrojové lišty. Jak toho prakticky docílit? Předpokládejme, že je vytvořen ImageList a že je přiřazen do vlastnosti Images komponenty CoolBar. Zvolení příslušného obrázku se provádí nastavením vlastnosti ImageIndex, kterou disponuje každá skupina. Toto nastavování se musí provádět za běhu programu. Podrobnosti pochopíte až v okamžiku, kdy si popíšeme vlastnost Bands komponeny CoolBar, takže se podívejte jen na ukázku:

procedure TfrmHlavni.btnNastavClick(Sender: TObject);
begin
  CoolBar1.Bands.Items[2].ImageIndex := 1;
end;

Tento kód způsobí zobrazení obrázku s pořadovým číslem 1 před skupinou s pořadím 2.

Vlastnost: ShowText

Popis: Říká, bude-li na skupině zobrazen text. Pokud je hodnotou této vlastnosti True, hodnota vlastnosti Text každé skupiny (tedy nikoliv vlastnosti Text celého CoolBaru) se za běhu programu zobrazí na příslušné skupině. V opačném případě se zobrazí pouze ovládací prvky, které tuto skupinu tvoří. Vliv tohoto zobrazení textů (stejně jako vliv vlastnosti Bitmap, která způsobí zobrazení bitmapy pod skupinami) ukazuje následujicí nesmírně ošklivý, přesto snad dostatečně názorný obrázek:

Klepněte pro větší obrázek

Vlastnost: Vertical

Popis: Hodnota True znamená, že skupiny jsou uspořádány vertikálně, hodnota False naopak horizontálně.

Vlastnost: EdgeBorders

Popis: Určuje, který okraj CoolBaru bude mít viditelný okraj. Je možné nastavovat zvláště viditelnost levého, pravého, horního a dolního okraje. Vzhled tohoto okraje je určen následujícími dvěma vlastnostmi.

Vlastnost: EdgeInner

Popis: Určuje vzhled vnitřní části okrajů CoolBaru. Podrobnosti o používání naleznete u popisu následující vlastnosti.

Vlastnost: EdgeOuter

Popis: Určuje vzhled vnější části okrajů CoolBaru. Použitím této vlastnosti (a vlastnosti EdgeInner) je možné docílit třírozměrného vzhledu komponenty CoolBar, jehož okraj je složen ze dvou fragmentů: z vnitřního a z vnějšího. Každý z nich může být vyvýšen nebo snížen, čímž je možné dosáhnout zajímavých efektů. Doporučuji prakticky vyzkoušet.

Poznámka: tři poslední uvedené vlastnosti nepochází přímo ze třídy TCoolBar (nejsou to vlastnosti CoolBaru), ale jsou zděděny od TToolWindow. Z našeho hlediska to samozřejěm nehraje roli, tuto poznámku berte jen pro úplnost.

Na závěr

Tímto konstatováním pro dnešek problematiku CoolBarů uzavřeme. Protože jsme samozřejmě ještě nepopsali všechny detaily a podrobnosti, vrátíme se k tomutomodernímu ovládacímu prvku ještě za týden. Příští díl tedy začneme tam, kde jsme dnes skončili – podrobným popisem vlastnosti Bands.
Diskuze (5) Další článek: Digitální přetížení G2

Témata článku: Software, Windows, Programování, Vertical, Zobrazený prvek, ALCL, Toto, Levý okraj, Demos, DEL, Ovládací aplikace, COO, Důležitá vlastnost, Kontextová nabídka, Fragment, Díl, Horní lišta, Šířka, Komponenta, Images, Následující aplikace, Automatický nástroj, Tito, Forward, Nástrojový pruh


Určitě si přečtěte



Aktuální číslo časopisu Computer

Test 9 bezdrátových reproduktorů

Jak ovládnout Instagram

Test levných 27" herních monitorů

Jak se zbavit nepotřebných věcí na internetu