Vylepšování vzhledu aplikace

Vylepšování vzhledu aplikací se často programátoři brání, protože přináší řadu nevýhod (převzato ze seriálu Umíme to s Delphi V. Kadlece, podobně jako další části této kapitoly):

• zpomalují aplikaci; (ubírají systémové prostředky)
• berou čas programátorův („proč mám ztrácet čas programováním blikající a pípající animace, když je mnohem důležitější optimalizovat algoritmus?“);
• nesouvisí bezprostředně s řešeným problémem;
• dělají z původně svižné aplikace monstrózní, avšak neefektivní monstrum;
• …atd, atd, dobrý programátor najde jistě spoustu dalších důvodů :-)

Efektivní aplikaci může programátor vytvářet pokud programuje jen pro sebe, pokud se má ale program prodávat, pak nezbyde než vzhledově aplikaci vylepšit a uživatelsky "zpříjemnit". Běžného uživatele nebudou zajímat efektivní algoritmy, ale to, jak program vypadá a jak se ovládá, to že běží o desetiny sekund pomaleji, ho vůbec trápit nebude. Váš program nebudete prodávat programátorovi, ale běžnému uživateli, který bude potřebovat nápovědu takřka ke každému kliknutí! (Proč asi myslíte, že jsou "Wokna" nejrozšířenější, přesto, že běží pomalu a často padají? :-) ) Ale ani s efekty by se to nemělo přehánět, je potřeba najít zlatou střední cestu...

Oddělovací čáry – komponenta Bevel

Nejjednodušším, přesto poměrně elegantním způsobem, jak vylepšit vzhled aplikace, je používání oddělovacích čar a rámečků. Pomocí nich vizuálně rozdělíme komponenty na formuláři do logických skupin a celý formulář vypadá mnohem přehledněji. Komponentu Bevel nalezneme v paletě Additional. Pomocí ní můžeme vytvořit jak pouhou oddělovací čáru, tak rámeček, který navíc může být zapuštěný či vyzdvihnutý. Důležité je, že Bevel (na rozdíl např. od komponenty Panel) se nestává vlastníkem komponent, které na něho umístíme, funguje jen čistě vizuálně. Důležité jsou dvě jeho vlastnosti: Shape a Style.
Vlastnost Shape říká, jak bude Bevel vypadat:
bsBottomLine – zobrazí se jen jako čára vespod své klientské oblasti;
bsBox – zobrazí se jako box, v závislosti na hodnotě vlastnosti Style bude zapuštěný (lowered) či vyzdvihnutý (raised);
bsFrame – klientská oblast bude ohraničena rámečkem (opět lowered nebo raised);
bsLeftLine – zobrazí se jako čára na levé straně své klientské oblasti;
bsRightLine – zobrazí se jako čára na pravé straně své klientské oblasti;
bsSpacer – prázdné místo (nebude vidět nic);
bsTopLine - zobrazí se jako čára na horní straně své klientské oblasti.

Vlastnost Style říká, zda tvar bude zapuštěný (bsLowered) nebo vyzdvihnutý (bsRaised) u těch nastavení Shape, kde to má smysl.
Na obrázku z projektu Kalkulačka je oddělen vodorovnou čarou "displej" a v rámečku jsou tlačítka s operacemi.

Tlačítko s obrázkem – komponenta BitBtn

Dalším vylepšením vzhledu jsou tlačítka s bitmapou – komponenty BitBtn z palety Additional. Mezi jejími základními vlastnostmi jsou (popis dalších vlastností můžete najít např. u V. Kadlece):

Kind - výběr některého z předdefinovaných tlačítek (ukázky viz obrázek)


Glyph - přiřazuje libovolný obrázek (bitmapu bmp) k tlačítku, bitmapy na předdefinovaných tlačítcích mají velikost 18x18 bodů

Layout - určuje, kde se na tlačítku bitmapa objeví (vlevo, vpravo, nahoře, dole)

Margin - počet pixelů mezi levým okrajem tlačítka a obrázkem. Hodnota –1 (která je default) říká, že obrázek i s textem (titulkem) bude centrovaný.

Spacing - počet pixelů mezi obrázkem a titulkem (Caption).

Chcete-li pro tlačítko využít tzv. "horkou" klávesu (podtržená v textu na tlačítku), potom před znak, který chcete použít, zapište do Caption znak & .

Další možnost je různý vzhled tlačítka při jeho zobrazení, zakázání a kliknutí, pro takové tlačítko je potřeba obrázek tvořený třemi (nebo čtyřmi pro SpeedButton) stejně velkými obrázky vedle sebe.

Potom je potřeba správně nastavit vlastnost NumGlyphs, která říká, kolik obrázků bitmapa obsahuje.

Dalšími drobnými vylepšením může být i jiná ikonka v titulku formuláře (někteří z vás už vyzkoušeli), ta se určí ve vlastnosti Icon formuláře. Při některých příležitostech se hodí i ozdobení obrázky - pro jejich vložení je určena komponenta TImage a její vlastnost Picture. Některé z těchto efektů vyzkoušíme v dalším jednoduchém projektu, ve kterém vytvoříme kalkulačku (skoro jako z Příslušenství Windows :-), viz ukázka ).

Projekt Kalkulačka

Jako obvykle nejprve připravíme a uspořádáme všechny potřebné komponenty například podle předcházejících obrázků (jeden Edit a sada Buttonů). Upravíme také vzhledově, přidáme komponentu Bevel a vybereme bitmapové ukončovací tlačítko BitBtn , obarvíme atd. - fantazii se nikdy meze nekladou :-) (jen časové).

Pro "displej" (komponenta Edit) změníme tyto vlastnosti:
- Cursor na hodnotu crIBeam (textový kurzor), čili pokud se dostane kurzor myši na tento Edit, změní se na textový (svislá čárka)
- BiDiMode - zvolíme hodnotu RIghtToLeft - text se bude psát zleva doprava - také vepíšeme do "displeje" jako úvodní číslici nulu.

Čísla, se kterými se bude počítat, je možné psát přímo do "displeje", ale také by mělo být možné volit číslice pomocí tlačítek, a to už se dostáváme k programování. Po kliknutí na tlačítko chceme do "displeje" připsat příslušnou číslici, událost OnClick tlačítek s číslicemi bude doplněna u všech podobně:

procedure TForm2.Button1Click(Sender: TObject);
begin
if Edit1.text='0' then edit1.Text:='7' else edit1.Text:=Edit1.Text+'7';
end;

Překlad: jestliže je v Edit1 ("displej") číslice 0 (začínáme psát číslo (je v apostrofech, protože v Edit je text)) zapiš do něj číslici 7, jinak (když už tam nějaké číslo je) ulož do Edit1 součet (spojení textů) toho, co v něm je a číslice 7 (neboli doprava doplň 7)

K další práci budeme potřebovat proměnné, nejprve je musíme v sekci var nadefinovat:
cislo1: real;
cislo2: real;
operace: integer;
Proměnné cislo1 a cislo2 budou sloužit k uložení operandů (čísel, se kterými se bude počítat) a proměnná operace bude určovat, která operace se bude provádět.

Další řádky programu budou obsahovat události OnClick tlačítek se znaménky (v ukázce jsou znaménka + a -):

procedure TForm2.Button10Click(Sender: TObject);
begin
operace:=1;
cislo1:=strtofloat(Edit1.Text);
edit1.Text:='0';
end;
Nejprve si do proměnné operace uložíme jedničku (podle ní v dalším kroku určíme, co se s čísly má provést), potom do proměnné cislo1 uložíme číslo, které vznikne převodem textu v Edit1 na reálné číslo a nakonec do Edit1 zapíšeme 0, připravíme jej pro další číslo.

Už chybí jen událost OnClick tlačítka = :

procedure TForm2.Button11Click(Sender: TObject);
begin
cislo2:=strtofloat(edit1.Text);
if operace=1 then edit1.Text:=floattostr(cislo1+cislo2);
if operace=2 then edit1.Text:=floattostr(cislo1-cislo2);
end;
Do proměnné cislo2 uložíme druhé číslo napsané v "displeji", potom do "displeje" vypíšeme buď součet nebo rozdíl proměnných cislo1 a cislo2 podle toho, jestli je v proměnné operace číslo 1 nebo 2.
A je to! :-)