Home   Px Framework   Download   FAQ   Kontakt   Fórum
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:


PxEdit - komponenta, ktorá slúži na editáciu dát, obdoba komponenty TextBox



Pomocou komponenty PxEdit môžeme automaticky editovať stĺpec riadka tabuľky, ktorý je natiahnutý v komponente PxWebQuery. Vytvoríme si súbor AddAdresar.aspx, a do neho zapíšeme nasledujúcu definíciu:

<Prx:PxWebQuery ID="wquAdresar" runat="server" Value="wquAdresar"/>
<asp:Label ID="lblAddEditPanel" Font-Size="18pt" Font-Bold="true" runat="server" Text="Label"></asp:Label>


<Prx:PxEdit ID="edtIDADRESAR" runat="server" AddTableRow="True" TableBegin="True" > </Prx:PxEdit>
<Prx:PxEdit ID="edtName" runat="server" AddTableRow="True" ></Prx:PxEdit>
<Prx:PxEdit ID="edtADDRESS" runat="server" AddTableRow="True" ></Prx:PxEdit>
<Prx:PxComboBox ID="cmbPravnaForma" runat="server" AddTableRow="True" ></Prx:PxComboBox>
<Prx:PxJSDatePicker ID="edtCREATE_DATE" runat="server" AddTableRow="True" TableEnd="True" ></Prx:PxJSDatePicker>

<asp:Button ID="btnOK" runat="server" Text="Ok" Width="60" onclick="ButtonOk_Click" />
<asp:Button ID="btnStorno" runat="server" Text="Storno" Width="60" onclick="ButtonStorno_Click" />

V súbore AddAdresar.aspx.cs, si zase zadefinujeme prepojenie jednotlivých komponent PxEdit s komponentou PxWebQuery, a jej prepojenie na konkrétny stĺpec tabuľky. Ďalej v tomto súbore sú zadefinované metódy tlačítok "Ok" a "Storno". V prvom prípade, pri tlačítku "Ok", sa všetky zmeny v komponentách PxEdit potvrdia príkazom Post(), v druhom prípade pri tlačítku "Storno", sa všetky zmeny anulujú príkazom Cancel(). Ak sú oba príkazy úspešne vykonané, potom príkazom GoBackPreviousPage() sme vrátení do formulára Adresar.aspx. Ak ukladanie dát, bolo neúspešné, ostaneme v pôvodnom formulári, kde za konkrétnou komponentou PxEdit, bude popísaný dôvod prečo nedošlo ku automatickému uloženiu. Komponenta PxEdit podporuje aj automatickú validáciu, viac o automatickej validácii a ako sa s ňou pracuje, nájdete v druhej časti tohto manuálu.

Tu je vzor súboru AddAdresar.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
  if (wquAdresar.StateQuery == PxWebQuery.eStateQuery.sqInsert)
  lblAddEditPanel.Text = "Pridať adresu";
  else lblAddEditPanel.Text = "Editovať adresu";

  edtIDADRESAR.PxDataSource = wquAdresar;
  edtIDADRESAR.FieldName = "IDADRESAR";

  edtName.PxDataSource = wquAdresar;
  edtName.FieldName = "NAME";

  edtADDRESS.PxDataSource = wquAdresar;
  edtADDRESS.FieldName = "ADDRESS";

  cmbPravnaForma.PxDataSource = wquAdresar;
  cmbPravnaForma.FieldName = "idpravnaforma";

  edtCREATE_DATE.PxDataSource = wquAdresar;
  edtCREATE_DATE.FieldName = "CREATE_DATE";
}

protected void ButtonOk_Click(object sender, EventArgs e)
{
  wquAdresar.Post();
  wquAdresar.GoBackPreviousPage();
}

protected void ButtonStorno_Click(object sender, EventArgs e)
{
  wquAdresar.Cancel();
  wquAdresar.GoBackPreviousPage();
}

Výsledný formulár pre editáciu riadka tabuľky vyzerá nasledovne:

Obrázok formulára PxEdit


Na to aby bol zavolaný formulár AddAdresar.aspx, musíme vo formuláry Adresar.aspx pre komponentu PxSuperGrid priradiť property PxEditFormName meno formulára v ktorom sa budu editovať dáta za daný zvolený riadok.

<Prx:PxSuperGrid ID="grdAdresar" runat="server"
  PageSize="4"
  PxEditFormName="AddAdresar.aspx"
  PxInfoFormName="InfoAdresar.aspx"
  PxVisibleButtons="SIDEO">
  <SelectedItemStyle BackColor="#ffddff" />
</Prx:PxSuperGrid>

Po stlačení tlačítka "editovať" Tlačítko edit v komponente PxSuperGridu , sa nám otvorí formulár AddAdresar.aspx.
Tam môžeme zadávať nové hodnoty, poprípade meniť staré hodnoty, po stlačení tlačítka "Ok", sú tieto hodnoty uložené.
Komponenta PxEdit(ale aj PxComboBox, PxFlyComboBox, PxJSDatePicker a pod.) obsahuje automatickú validáciu. Ak stĺpec tabuľky, ktorý je pripojený na komponentu PxEdit je typu string, je automaticky prevádzaná validácia dĺžky reťazca, ak je typu int, validuje sa či bolo zadané celé číslo, ak je typu date, validuje sa či bol zadaný validný dátum a pod. Viac o automatickej validácii sa dočítate v druhej časti knihy. Na obrázku je príklad, kde sme zadali reťazec, ktorý svojou dĺžkou presahoval dĺžku reťazca stanoveného v databáze. Ďalej sme zadali dátum, ktorý nebol validný.

Obrázok formulára PxEdit


Polohovanie a zarovnanie prvkov PxEdit:

Keď do súboru AddAdresar.aspx, zadáme komponenty PxEdit, jednu za druhou, dôjde nám ku nesúmernému rozhádzaniu prvkov, viac uvidíte na obrázku:

Obrázok formulára PxEdit - rozhádzané prvky


Toto nesúmerné rozhádzanie môžeme napraviť nasledujúcim spôsobom: Ku každému prvku zadefinujeme property AddTableRow a tu nastavíme na hodnotu True;

<Prx:PxEdit ID="edtIDADRESAR" runat="server" AddTableRow="True"></Prx:PxEdit>

Každá komponenta PxEdit je zložená z nasledujúcich prvkov v tomto poradí:

Label + TextBox + Label alebo Button

Táto zapnutá property nám medzi tieto komponenty vloží tabuľkový riadok.
V praxi to vyzerá nasledovne:

<tr><td>Label + <td>TextBox +<td> Label alebo Button<td>

Pri prvom prvku nastavíme ešte property TableBegin na True. V praxi to vyzerá nasledovne:

<Prx:PxEdit ID="edtIDADRESAR" runat="server" AddTableRow="True" TableBegin="True"></Prx:PxEdit>

Pri poslednej komponente PxEdit v poradí nastavíme zase property TableEnd na True. V praxi to vyzerá nasledovne:

<Prx:PxEdit ID="edtCREATE_DATE" runat="server" AddTableRow="True" TableEnd="True"></Prx:PxEdit>

Takto to môžeme aplikovať na celý kód, a ten bude vyzerať nasledovne:

<Prx:PxEdit ID="edtIDADRESAR" runat="server" AddTableRow="True" TableBegin="True"></Prx:PxEdit>
<Prx:PxEdit ID="edtName" runat="server" AddTableRow="True"></Prx:PxEdit>
<Prx:PxEdit ID="edtADDRESS" runat="server" AddTableRow="True"></Prx:PxEdit>
<Prx:PxComboBox ID="cmbPravnaForma" runat="server" AddTableRow="True"></Prx:PxComboBox>
<Prx:PxJSDatePicker ID="edtCREATE_DATE" runat="server" AddTableRow="True" TableEnd="True"></Prx:PxJSDatePicker>

Keď budeme mať property AddTableRow, TableBegin a TableEnd správne nastavené, potom, by sa nám mali prvky správne zoradiť a zarovnať, viacej na obrázku:

Obrázok formulára PxEdit - zarovnanie


Názov popiskov Caption alebo názvy stĺpcov v gride(Title) môžete zadať centrálne, pri definícii komponenty PxWebQuery, kde hodnota v hranatých zátvorkách je názov stĺpca:

wquAdresar.Columns["NAME"].Caption = "Priezvisko a Meno";

Zmena popisku komponenty PxEdit (Label): Zmenu popisku komponenty PxEdit môžeme vykonať, okrem centrálnej definície, nasledujúcim spôsobom:

edtIDADRESAR.Caption = "Main text";



Tu nájdete funkčný príklad s komponentou PxEdit, aj so zdrojovými kódmi. Tento funkčný príklad na tomto webe, beží pod databázou MySQL 5.0.


P.č. Názov príkladu Zdrojové Kódy SQL Script
1.4.
PxEdit - komponenta, ktorá slúži na editáciu dát, obdoba komponenty TextBox
 Adresar.aspx
Adresar.aspx.cs
AddAdresar.aspx
AddAdresar.aspx.cs
 SQLScript_MySQL.5.1
SQLScript_MySQL.5.0



Ď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




All rights reserved PROXIMA SOFT 2003-2011.
counter