Články o Px Frameworku:

PxSpeedButton - varianta tlačítka s obrázkom a textom

Komponenta PxSpeedButton je kombinácia tlačítka s obrázkom a textom. V komponente je možné meniť polohu obrázku, poprípade použiť tlačítko na zaznamenanie stavu (Up / Down).

V súbore *.aspx sa komponenta PxSpeedButton definuje nasledovne:


Takto zadefinovaná komponenta PxSpeedButton sa nám vo výstupnom formulári zobrazí ako tlačítko. Obrázok tlačítka komponenty PxSpeedButton, môžete vidieť, viac obrázok dole:




Ako vidieť v hore uvedenej definícii, tak cez vlastnosť ImageUrl sme si zadefinovali relatívnu url adresu k obrázku. Čo sa týka obrázku, tento obrázok je vhodné zadávať vo formáte gif alebo png, s nastavenými transparentnými okrajmi obrázku. To ako urobiť transparentný obrázok pomocou Gimpu, môžete nájsť na tejto adrese http://www.proxima-soft.sk/clanky/PxSpeedButton-Gimp-Vytvorenie-transparentneho-obrazku.html .

Vo vlastnosti Caption si zas zadefinujeme popisok, text tlačítka. V udalosti OnClick, si definujeme názov metódy, ktorá bude zavolaná po stlačený tlačítka. Ďalšou vlastnosťou, ktorú má komponenta PxSpeedButton je vlastnosť Font, viac definícia dole v súbore *.aspx:


Cez vlastnosť Font-Name môžeme zadať názov fontu, ktorý sa použije pri vypísaný textu tlačítka. Cez vlastnosť Font-Size zas zadáme veľkosť fontu a cez Font-Bold, či má byť zobrazený text vypísaný hrubým textom.


Cez vlastnosť Layout, môžeme nastaviť pozíciu obrázka, buď vľavo alebo v pravo, poprípade hore alebo dole. V hore uvedenej definícii sme umiestnili obrázok hore nad text, tým že sme vlastnosti Layout priradili hodnotu lbTop.
Viac dole na obrázku tlačítka PxSpeedButton:




Ďalšiu vlastnosť, ktorú má komponenta PxSpeedButton, je vlastnosť AllowUp. Keď túto vlastnosť AllowUp nastavíme na hodnotu false, tlačítko komponenty začne mať dva stavy. Keď tlačítko stlačíme ostane nám v pozícii zatlačenia, teda dole. Ak naň klikneme ešte raz, tlačítko sa vráti do pôvodnej polohy. Cez vlastnosť Down môžeme nastaviť v akej východzej polohe sa má tlačítko zobraziť, či hore alebo dole, či bude zatlačené alebo nie.
Viac definícia dole:


Obrázok ku hore uvedenej definícii dvoch tlačítok, s jedným tlačítkom stlačeným a druhým nie.




Bublinovú nápovedu u komponenty PxSpeedButton, môžeme vytvoriť, cez zadanie textu do vlastnosti ToolTip, viac definícia obrázok dole:


Tlačítko PxSpeedButton zobrazené s bublinovou nápovedou:




Pokiaľ by sme chceli ujednotiť dĺžku tlačítka, môžeme tak urobiť cez property Width. Viac definícia dĺžky tlačítka dole:


Samozrejme nemali by sme zabudnúť na udalosť OnClick komponenty PxSpeedButton. Po stlačený tlačítka sa nám zavolá procedúra ktorá bola zadaná v property OnClick komponenty PxSpeedButton.

V súbore *.aspx sa udalosť OnClick v komponente PxSpeedButton definuje nasledovne:


V súbore *.aspx.cs sa metóda udalosti OnClick komponenty PxSpeedButton definuje nasledovne:


Pokiaľ by sme chceli pre tlačítko použiť vlastný štýl, môžeme to urobiť cez vlastnosti CssClass a CssClassDown. Trieda CssClassDown slúži na definíciu štylu tlačitka v stave stlačenia, čiže Down = true.