en_lang.jpg, 1 kB sk_lang.jpg, 1 kB
English Slovak

      Px Framework - ASP.NET komponenty pre rýchly vývoj databázových aplikácií


Menu:



Č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:

<Prx:PxSpeedButton ID="sbtnFind" runat="server" ImageUrl="img/btnFind.png" Caption="Hľadať"
 OnClick="sbtnFind_Click" />

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:

Obrázok komponenty PxSpeedButton


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:

<Prx:PxSpeedButton ID="sbtnFind" runat="server" Font-Name="Arial, Sans Serif" Font-Size="Medium"
 Font-Bold="true" ImageUrl="img/btnFind.png" Caption="Hľadať" />

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.

<Prx:PxSpeedButton ID="sbtnFind" runat="server" Layout="lbTop" ImageUrl="img/btnFind.png"
 Caption="Hľadať" />

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:

Obrázok komponenty 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:

<Prx:PxSpeedButton ID="sbtnFind" runat="server" ImageUrl="img/btnFind.png" Caption="Hľadať"
 AllowUp="false" Down="true" />
<Prx:PxSpeedButton ID="sbtnStorno" runat="server" ImageUrl="img/btnStorno.png" Caption="Zavrieť"
 AllowUp="false" Down="false" />

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

Obrázok komponenty PxSpeedButton


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

<Prx:PxSpeedButton ID="sbtnFind" runat="server" ToolTip="Zvoľte hľadanie..."
 ImageUrl="img/btnFind.png" Caption="Hľadať" />

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

Obrázok komponenty PxSpeedButton


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

<Prx:PxSpeedButton ID="sbtnOk" runat="server" Width="80px" ImageUrl="img/btnOK.png"
 Caption="Ok" />

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:

<Prx:PxSpeedButton ID="sbtnFind" runat="server" ImageUrl="img/btnFind.png" Caption="Hľadať"
 OnClick="sbtnFind_Click" />

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

protected void sbtnFind_Click(object sender, EventArgs e)
{
  sbtnFind.Down = true;
}

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.





Ďalšie články o Px Frameworku:



Nie je zmyslom, tejto časti webu dopodrobna popisovať prácu s komponentami PxFrameworku, podrobný popis komponent najdete v manuali, ktorý si môľete stiahnuť tu: Download manual pre Px Framework