pátek 16. srpna 2013

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í.

úterý 13. srpna 2013

Použití stylů ve FireMonkey

Použití stylů ve FireMonkey

Integrace stylů do produktů Delphi a C++Builder umožňuje vývojářům používat takzvané "skinování", neboli měnit během návrhu nebo běhu aplikace její grafický vzhled. Nový styl samozřejmě neudělá ze špatné aplikace dobrou, ale i v softwarovém průmyslu platí, že obal prodává.
Stylování lze použít v obou aplikačních rámcích, které vývojové nástroje společnosti Embarcadero nabízí, tedy jak ve VCL tak FireMonkey. V dnešním příspěvku se zaměřím na základy použití stylů ve FireMonkey. Za pomoci FireMonkey lze na rozdíl od VCL (Visual Component Library) vytvářet aplikace i pro jiné platformy než jsou Microsoft Windows. Pro každou s podporovaných platforem existuje standardní ("defaultní") styl odpovídající klasickému vzhledu nativních ovládacích prvků daného operačního systému. Pokud tedy budeme ve vytvářené aplikaci existenci stylů zcela ignorovat, bude mít po přeložení pro Windows vzhled standardní Windows aplikace a po přeložení pro Mac případně iOS vzhled odpovídající zvyklostem Mac nebo iOS prostředí.

StyleBook

Rozhodneme-li se pro oživení aplikace použitím jiného, než standardního vzhledu (stylu), máme dvě možnosti, jak toho dosáhnout. První, snazší, je použití komponenty "TStyleBook". Ukážeme si to na jednoduché FireMonkey Desktop HD aplikaci, která bude sestávat ze dvou oken. Každé okno bude mít tlačítko pro zavření okna. Do prvního z okna navíc umístíme dvě tlačítka pro změnu stylu a jedno pro otevření druhého okna:



Nyní bychom mohli na formulář umístit komponentu "TStyleBook" a nastavit popožadovaný styl a provázat s formulářem. Problém je, že toto nastavení by bylo účinné pouze pro první okno. Samozřejmě by bylo možné přidávat StyleBook do každého okna aplikace, ale to by nebylo příliš elegantní řešení. Proto do aplikace přidáme datový modul a StyleBook umístíme do něj:



Každé okno bude samozřejmě muset mít odkaz na datový modul v sekci "uses" a v parametru StyleBook odkaz na StyleBook umístěný v datovém modulu:




Vzhled celé aplikace lze následně změnit tak, že komponentě "StyleBook" přiřadíme požadovaný styl (odkaz na resource nebo zdrojový soubor). To lze udělat prostřednictvím okna "Object Inspector" nebo v kódu:

procedure TForm1.Button3Click(Sender: TObject);
begin
  DataModule1.StyleBook1.FileName :=   'C:\DEMAXE4\Test\Styly\GoldenGraphite.Style';
end;

Kliknutím na tlačítko změníme styl všech oken, které se na StyleBook odkazují:



Style Manager

Druhou možností jak řídit vzhled aplikace je použití "StyleManagera". Narozdíl od "StyleBooku" jej nenajdeme v paletě komponent. Do formuláře hlavního okna přidáme do sekce "uses" knihovnu "FMX.Styles". Ošetření tlačítka pro změnu stylu pak bude vypadat následovně:

uses
  FMX.Styles;
...

procedure TForm1.Button3Click(Sender: TObject);

begin
  TStyleManager.SetStyleFromFile('GoldenGraphite.Style');
end;

Nastavení stylu za pomoci "StyleManagera" má globální efekt. V ostatních oknech tak není třeba se na něj odkazovat nebo provádět jakékoliv jiné zásahy.
Z hlediska funkcionality jsou obě metody srovnatelné. StyleBook i StyleManager se vyrovnali i s vloženými rámci (Frames). Použití "StyleManagera" je úspornější z hledisla kódu. Na výslednou velikost aplikace nebo její rychlost neměla volba zásadnější vliv:



Aplikace postupně otevírala 10 oken, CPU tiky jsou průměrem z 5 měření. Použita byla licence Delphi XE4 Enterprise Update 1.