Použití stylů k úpravě nebo tvorbě komponent

Použití stylů k úpravě nebo tvorbě komponent

Styly a jejich implementace v Delphi a C++ Builderu jsou mnohem komplexnější, než by se mohlo zdát na první pohled. Ve FireMonkey, která je založena na vektorové grafice, umožňují styly měnit nejen vzhled jednotlivých komponent, ale také jejich vlastnosti.
Jako jednoduchý příklad lze použít "komponentu ProgressBar". Ta v závislosti na parametrech "Min", "Max" poskytuje grafickou informaci o aktuálním stavu hodnoty "Value". Někdy by ale mohlo být užitečné, aby komponenta "ProgressBar" kromě grafického znázornění předané hodnoty, zobrazovala zároveň i její číselnou nebo procentuální hodnotu. Bohužel, komponenta "ProgressBar" nenabízí vlastnosti "Text" nebo "Caption", které by mohly být pro tento účel použity. Komponentu si proto upravíme za pomoci stylů.
Vytvoříme si novou aplikaci ("File => New => FireMonkey Desktop Application") a na formulář přidáme komponentu "ProgressBar". Pro úpravu stylu klikneme na komponentu pravým tlačítkem myši a z kontextové nabídky vybereme volbu "Edit Custom Style" nebo "Edit Default Style":

V otevřeném "style editoru" si můžeme zobrazit jednotlivé objekty, z kterých je komponenta "ProgressBar" sestavena. Stačí kliknout na příslušný objekt v okně "Structure" a získáme jeho náhled.

V paletě komponent vybereme komponentu "Label" a myší ji přetáhneme na hlavní uzel stylu "progressbar1style1: TLayout" v okně "Structure". Nyní je Label součástí komponenty "ProgressBar". V okně "Object Inspector" ještě upravíme velikost fontu, umístění textu (horizontální i vertikální zarovnání nastavíme na ""taCenter) a defaultní hodnotu pro text nastavíme "0". Důležitý je také parametr "StyleName", tedy jméno, prostřednictvím kterého můžeme následně ke komponentě "Label" přistupovat.

Provedené úpravy uložíme v editoru stylů kliknutím na tlačítko "Apply and Close". Na formulář byla automaticky umístěna komponenta "StyleBook" s upraveným stylem, namapovaným prostřednictvím vlastnosti "Resource".

Viditelnost úprav

Kdybychom nyní umístili na formulář další komponentu "ProgressBar", měla by standardní, tedy neupravenou podobu. Provedené rozšíření bylo aplikováno pouze na objekt, pro který jsme styl editovali. Pokud bychom si přáli na nově přidaný "ProgressBar" aplikovat stejné změny, stačí v okně "Object Inspector" rozbalit nabídku u parametru "Style Lookup". Přibyla zde položka pro námi upravený vzhled "progressbar1style1", která změní vzhled prvku na námi požadovaný styl rozšířený o Label.

Přístup k vlastnosti text

Pokud do projektu přidáme tlačítko a v editoru kódu budeme chtít nastavit, že parametr "Label.Text" bude mít stejnou hodnotu jako "ProgressBar.Value", zjistíme, že tato vlastnost není přístupná. Proto musíme využít odkaz na dříve zmiňovaný "StyleName". V mém případě jsem label pojmenoval "progresslabel" a tak bude kód pro tlačítko následující:

procedure TForm1.Button2Click(Sender: TObject);
begin
  ProgressBar1.Value := 70;
  ProgressBar1.StylesData['progresslabel.Text'] := FloatToStr(ProgressBar1.Value);
end;

Stejným postupem můžeme upravit prakticky libovolnou komponentu FireMonkey, nebo si vytvořit svou vlastní. Combo box může obsahovat bitmapu, ListBox tlačítka a podobně. Aplikování úprav s využitím stylů je jednoduché a garantuje jednotný vzhled celé aplikace. Možnost vytvářet vlastní, specifické komponenty oceníte zvláště při návrhu mobilních aplikací.

View Petr Houf's profile