Delphi - TWebTableGenerator komponens

A mellékelt példaprogram megnyitása előtt a WebTableGenerator.pas-ban lévő komponenst telepítenie kell a Delphi alá. Szükség lesz még a múlt heti cikkben közölt WebFormGenerator.pas-ban lévő komponensre is. Ha múlt hét óta esetleg levette ezt a komponenst, akkor kérjük telepítse ismét.

Továbbá kérjük, hozza létre az ASWEBSHOP04 alias-t. Ez mutasson a mellékelt példaprogram Data könyvtárára, az adatbázis elérés végett.
A lefordított WS04.EXE-t helyezze a web szerver scripts könyvtárába, ahonnan az futtatható.
A HTM könyvtárban lévő Index.htm állományt pedig helyezze el a web szerveren úgy, hogy az egy böngészőn keresztül elérhető legyen. Például: C:\Inetpub\wwwroot\webshop. Ekkor a böngészőbe a www.animare.hu/webshop/ cím beírásakor meg kell hogy jelenjen az iménti web lap. Persze a web szerver neve mindenkinél más és más lesz.

A jelenlegi cikk elolvasása előtt javasoljuk a sorozat előző részeinek megismerését, mivel a mostani ismeretek csupán kiegészítői az előzőeknek, így azok ismerete nélkül e konkrét cikk tartalma sem érthető meg teljes egészében.

A múlt héten létrehoztunk egy olyan komponenst, mely képes volt a HTML-ben használt <form> kódolására, mellyel adatbeviteli lapokat készíthettünk. A mostani komponensünk egy HTML nyelv <table> parancsát valósítja meg. Ezt felhasználva egyszerűen készíthetünk tetszőleges táblázatokat.

Mostani cikkünkben össze is kapcsoljuk e két komponenst és segítségükkel néhány kattintással létrehozunk egy olyan web lapot, melyben táblázatos formában megjelenik egy adatbeviteli lap. Ennek segítségével hozunk létre új rekordot a már meglévő Product.dbf táblánkhoz.

Ahhoz hogy a dinamikus web lap generáláshoz már csak arra a néhány kattintásra legyen szükségünk, először is el kell készítenünk az új komponenst, mellyel létrehozhatjuk egyedi HTML táblázatainkat.

Bár a cikk végére a komponens már teljes mértékben használható lesz, ennek ellenére még lesznek hiányosságai, melyeket a cikksorozat következő fejezeteiben még megoldunk.

A táblázat sorokból és oszlopokból áll. Ehhez létrehozunk egy olyan property-t, melyen keresztül az egyes sorokat, illetve egy olyant, melyen keresztül az egyes oszlopokat érhetjük el.

A sorokhoz a Rows nevű TWebTableRowItems típusú property-t hozzuk létre, míg az oszlopokhoz a Cols nevű TWebTableColItems típusú property-t.

Mindkét típus a TCollection osztályból származik.

A komponens további property-einek neve és funkciója is megegyezik a HTML-ből ismert <table> parancs paramétereivel. Ugyanez igaz a Rows és Cols egyes elemeinek property-eire is, persze a soroknál a <tr> parancs paramétereit állíthatjuk be, míg az oszlopoknál a <td> parancsét.

Nézzük át gyorsan, hogy ezek a paraméterek pontosan mit is takarnak.

A TWebTableGenerator property-ei:

Align - a táblázat igazítását írja elő vízszintesen a web lapon
VAlign - a táblázat igazítását írja elő függőlegesen a web lapon
BGColor - a táblázat háttérszíne
Border - a táblázat keretének vastagsága
CellPadding - a cellákon belüli margó mértéke
CellSpacing - a cellák közötti távolság mértéke
Custom - egyedileg megadható paraméter
Height - a táblázat magassága pixelben ha számot írunk, és százalékban ha százalék jelet is használjuk
Width - a táblázat szélessége pixelben ha számot írunk és százalékban ha százalék jelet is használjuk
Title - az itt megadott sztring jelenik meg, amikor az egérrel a táblázatra mutatunk (Hint)

A sorok (Rows) property-ei:

Align - az adott soron belül az összes cella tartalma az itt megadott irányba lesz igazítva vízszintesen
VAlign - az adott soron belül az összes cella tartalma az itt megadott irányba lesz igazítva függőlegesen
BGColor - az adott soron belül az összes cella háttérszíne
Custom - egyedileg megadható paraméter
Title - az itt megadott sztring jelenik meg, amikor az egérrel az adott sor celláira mutatunk (Hint)

Az oszlopok (Cols) property-ei:

Align - az adott oszlopon belül az összes cella tartalma az itt megadott irányba lesz igazítva vízszintesen
VAlign - az adott oszlopon belül az összes cella tartalma az itt megadott irányba lesz igazítva függőlegesen
BGColor - az adott oszlopon belül az összes cella háttérszíne
Custom - egyedileg megadható paraméter
Title - az itt megadott sztring jelenik meg, amikor az egérrel az adott oszlop celláira mutatunk (Hint)
ColSpan - cellák összevonása az oszlopban
RowSpan - cellák összevonása a sorban
Width - az oszlop celláinak szélessége
Height - az oszlop celláinak magassága
NoWrap - az adott oszlop celláinak szövege nem jelenhet meg megtörve

A táblázat HTML kódjának lekérdezéséhez létrehoztunk a komponenshez egy Content nevű függvényt, mely sztringként adja vissza a szükséges kódot.

A Content függvény működési elve a következő: kezdődik a <table> parancs összeállításával. Minden paraméterhez egy-egy függvény kerül meghívásra, melyek neve: GetxxxProperty. Ezek után két egymásba ágyazott ciklust kezdünk, melyek végigmennek a Rows-ban megadott sorokon illetve a Cols-ban megadott oszlopokon, így a táblázat minden egyes cellája külön-külön előáll.

A Rows-ban és a Cols-ban is találunk egy Content függvényt, mely nem tesz mást, mint az adott objektum paramétereit szedi össze és adja vissza sztringként. Ezeket a paramétereket is az adott property-k értéke alapján állítja össze a függvény.

A kettős ciklusnál még néhány eseményt is meghívunk az egyes műveletek előtt (OnBeforexxx) és után (OnAfterxxx), valamint van egy olyan eseményünk is, melyen keresztül értékkel tölthetjük fel a táblázat egyes celláit. Ez az esemény lesz az OnCellData.

Itt első paraméterként a komponensre utaló referenciát kapunk. A következő két szám mondja meg, hogy melyik sorban és melyik oszlopban vagyunk éppen. A végső Data nevű változóban pedig azt a sztringet kell megadnunk, amit az adott cellában szeretnénk viszontlátni.

Nézzük a komponens felhasználását.

Amikor a megjelenő kezdeti web lapon az Új termék linkre kattintunk, akkor meghívásra kerül a programunk a NewProduct paraméterrel. Ekkor a kérést a PageProducer1-ben tárolt web lappal szolgáljuk ki:

procedure TWebModule1.WebModule1WebActionItem1Action(
  Sender: TObject; Request: TWebRequest; Response: 
  TWebResponse; var Handled: Boolean);
begin
  Response.Content:=PageProducer1.Content;
end;

Ebben a web lapban azonban elhelyeztünk egy címkét TABLE névvel. Amikor a PageProducer1 komponens ehhez ér, akkor jön létre az OnHTMLTag eseménye.

Ez lesz az a pillanat, amikor a saját komponenseinkkel létre kell hoznunk az adatbeviteli lap HTML kódját.

procedure TWebModule1.PageProducer1HTMLTag(Sender: 
  TObject; Tag: TTag;const TagString: String; 
  TagParams: TStrings; var ReplaceText: String);
begin
  if TagString='table' then begin
    ReplaceText:=WebFormGenerator1.Content(feStart);
    ReplaceText:=ReplaceText+WebTableGenerator1.
       Content;
    ReplaceText:=ReplaceText+WebFormGenerator1.
       Content(feEnd);
  end;
end;

Első lépésként a WebFormGenerator1 komponens segítségével elkészítjük a <form> parancs kezdő sorát.
Ezek után jön a táblázat készítése a WebTableGenerator1.Content; hívásával.
Végül a <form> parancsot lezáró sor következik a WebFormGenerator1 komponens által.

Amikor a táblázatot készítjük, akkor jön létre a WebTableGenerator1 komponens OnCellData eseménye minden egyes cella esetén.

Ekkor kell értéket adnunk a celláknak.

Az eseménynél kettéágaztatjuk a végrehajtást attól függően, hogy az első vagy a második oszlopról van-e szó. Az első oszlopba az adatbázis mezők nevei, míg a másodikba az adatbeviteli mezők kerülnek.

Az első oszlop esetén lekérdezzük a WebFormGenerator1 komponenstől, hogy az adott sorban melyik adatbázis mezőt kell megjeleníteni. Ezek után a TTable komponenstől megtudakoljuk az adott mező DisplayLabel értékét, és ezt írjuk a táblázat cellájába.

A második oszlop esetén a WebFormGenerator1 komponenstől lekérjük az adott sorhoz tartozó adatbeviteli eszköz HTML kódját, és ezt tesszük a cellába.

procedure TWebModule1.WebTableGenerator1CellData(
   Sender: TObject; row, col: Integer; var data: String);
var
  f: TField;
begin
  case col of
    0: begin
      f:=tProduct.FindField(WebFormGenerator1.FormItems
        [row].DataField);
      if Assigned(f) then begin
        data:=f.DisplayLabel+':';
      end;
    end;
    1: begin
      data:=WebFormGenerator1.Content(feItem, row);
    end;
  end;
end;

Amint látható, minimális gépeléssel és néhány property beállításával létrehoztunk egy olyan web lapot, melyen keresztül felvehetünk egy új rekordot az adatbázisunkba az Interneten keresztül.

TWebTableGenerator komponens

Internet áruház 4. rész