Formulár a komponenty

Vo vývojovom prostredí budeme vytvárať aplikácie tak, že navrhneme vzhľad aplikácie, t. j. ako bude vyzerať okno nášho programu, budeme spúšťať a ladiť, čiže testovať a opravovať, naše programy. Vzhľad aplikácie vytvoríme pomocou komponentov a ich umiestňovania do formulára

• komponent vyberieme z palety kliknutím myšou na ikonu komponentu
• vybraný komponent potom umiestnime do formulára kliknutím myši alebo jej ťahaním vo formulári.

Komponenty sú stavebné prvky, z ktorých vytvárame (skladáme) aplikácie. Slúžia na interakciu používateľa s programom, na zadávanie vstupných a zobrazovanie výstupných hodnôt alebo na riadenie behu aplikácie. Sú rozdelené do niekoľkých skupín, napr. Standard, Aditional, System,... Najčastejšie budeme používať komponenty tlačidlo (Button), obrázok (Image), editovacie políčko (Edit), textová plocha (Memo), zaškrtávacie políčko (CheckBox) (obr. 5).

Okno s formulárom je viditeľné hneď po vytvorení novej aplikácie. Ak ho nevidíme, nájdeme ho pomocou klávesu F12 alebo v hlavnej ponuke Zobraziť ► Toggle Form/Unit View (zobrazenie formulára/jednotky)

Pridajme do formulára tlačidlo zo záložky Standard pod názvom TButton (obr. 6).

Tlačidlo je ohraničené čiernymi štvorčekmi a môžeme ho presúvať či meniť mu veľkosť. Ak máme takto zvolené tlačidlo Button1 z formulára, zmení sa aj obsah okna Inšpektor objektov. V položkách Height (výška) a Width (šírka) sú uložené rozmery tlačidla. Kliknutím na ich hodnoty je možné ich zmeniť. Popis tlačidla je uložený v položke Caption (nadpis, titulok). 

Pozor!!! zatiaľ neodporúčame meniť položku Name!

Tlačidiel môžeme mať vo formulári ľubovoľne veľa, môžu mať rôzne rozmery a nápisy (obr. 8). Tlačidlá sa dajú jednoducho zmazať. Stačí, aby bolo označené (klikneme naň), potom stlačíme kláves Del (Delete).

Ďalší komponent, ktorý budeme často používať je obrázok (Image). Nachádza sa v skupine komponentov Additional (obr. 9).

Objaví sa prázdny štvorček, ktorý môžeme pomocou čiernych štvorčekov naťahovať a posúvať po formulári. V okne Inšpektor sa objavili nastavenia pre Image1. Dá sa opäť nastaviť jeho výška, šírka a pod. Na obrázok sa dá kresliť a písať pomocou grafických príkazov, s ktorými sa postupne oboznámime.

Priradenie akcie, vykonanie príkazov

Teraz by sme chceli, aby náš program skutočne niečo vykonal. Do formulára vložíme tlačidlo (Button zo záložky Standard) a chceme, aby sa po jeho stlačení v bežiacom programe aplikácia zatvorila, aj keď vieme, že aplikáciu zatvoríme aj iným spôsobom. Na vložené tlačidlo (predpokladajme, že to bolo tlačidlo Button1 - Lazarus dáva automaticky komponentom mená Button1, Button2,...) dvojklikneme a zobrazí sa nám editovacie okno (obr. 10): 

Vidíme, že kurzor je nastavený medzi kľúčové slová begin a end - editovacie okno je pripravené, aby sme doň (na správne miesto) napísali príkazy programu. Dôležité je všimnúť si slovo Button1Click, ktoré označuje, že to, čo teraz naprogramujeme medzi slová begin a end sa spustí vždy, keď (počas behu programu) klikneme na tlačidlo Button1. Pre lepšiu názornosť sa naučíme jednoduchý príkaz Close (obr. 11).

Keď teraz spustíme program (F9) a klikneme na tlačidlo Button1, naša aplikácia sa zatvorí.

• V programe môžeme mať niekoľko tlačidiel, a každému z nich môžeme naprogramovať inú akciu. Dvojklik na dané tlačidlo vo formulári zabezpečí, že sa v editore kódu pripraví časť programu, do ktorej dopíšeme nové príkazy. 

• Každému tlačidlu môžeme priradiť niekoľko akcií (príkazov), ktoré sa budú spracovávať postupne (obr. 12):

Prvý príkaz zmení meno tlačidla Button1 na Tlačidlo a po druhom kliknutí sa jeho meno zmení na Zmena.

Každý znak v príkaze je veľmi dôležitý a ak sa pri písaní pomýlime, urobíme preklep, Lazarus nám to pri pokuse o spustenie aplikácie (F9) oznámi chybovou správou.

Riadok príkazu Button1.Caption := 'Tlačidlo' ;

• začína menom komponentu (komponent Button1),
• za bodkou nasleduje názov nastavenia z Inšpektora objektov (v našom prípade Caption).
• Do programu sme takto zapísali, že budeme meniť text na tlačidle Button1.
• Dôležitým znakom je znak priradenia (dvojbodka a rovná sa). V tomto príklade môžeme doslova povedať, že tlačidlu Button1 priradíme názov Tlačidlo.
• Za znakom priradenia (:=) teda nasleduje nová hodnota, ktorou chceme nahradiť pôvodné nastavenie. V našom prípade je nová hodnota znakový reťazec 'Tlačidlo', ktorý musí byť uzavretý v apostrofoch.
• Riadok príkazu je ukončený bodkočiarkou (;), ktorú budeme písať za každým príkazom. V opačnom prípade nám program pri spustení vypíše chybovú správu.

Teraz sme si ukázali, ako a kam zapísať príkaz, avšak to je len malá časť Editovacieho okna, ktoré nám Lazarus pripravil. Videli sme len koniec programu, ale po vyrolovaní okna uvidíme (obr. 13): 

• Môže sa nám zdať, že editor kódu obsahuje priveľa textu, v ktorom zatiaľ poznáme len jeden nami zapísaný riadok. Postupne sa oboznámime s celým programom, teraz je pre nás dôležitá len časť kódu medzi slovami implementation a záverečným end (vyznačenými na obrázku).
• Označenie {$R *.dfm} nám oznamuje, že náš program pracuje s formulárom. Tento zápis nebudeme meniť ani mazať 
  
• Akcie pre tlačidlá sú v špeciálnych blokoch začínajúcich slovom procedure a končiacich slovom end. Táto konštrukcia sa vytvára automaticky dvojklikom na tlačidlo a nesmieme ju do textu zapisovať sami (ani ju manuálne vymazať!). Túto konštrukciu nazývame procedúra alebo podprogram.

Ďalší komponent, ktorý sa naučíme je jednoduchý text, popisok (komponent Label). Slúži na ukladanie textov do formulára, prípadne ho môžeme použiť aj na výpis jednoduchých oznamov vo formulári (podobnú funkciu má aj komponent Edit). Použijeme ho na zadanie jednoduchej otázky, rovnako aj na výpis odpovede. Vytvoríme nový projekt (pozri vyššie vytvorenie a uloženie projektu), pričom budeme potrebovať dva komponenty Button a dva komponenty Label (zo záložky Standard), ktoré umiestnime do formulára (obr. 14). Vo formulári sa objavil text Label1 (podobne ako Button1).

V Inšpektore objektov zmeníme nastavenie Caption:

· Label1 ► Ahoj, ako sa máš? (podobne ako pri nastaveniach Button)

· Label2 ► zmeníme na text .......... (miesto na odpoveď)

· Button1 ► Dobre.

· Button2 ► Zle.

Priradenie textov pre komponent Label je podobné ako pri komponente Button (obr. 15).