Hozzunk létre egy új Web App Debugger executable alkalmazást, CoClass névnél adjuk meg a Step08 sztringet, a projekt neve pedig Project8 legyen.
Hozzunk létre egy új WebSnap Page Module-t. A megjelenő New WebSnap Page Module ablakban Producer – Type legördíthető listában az alapértelmezett komponens a PageProducer. Mivel most a feladatunkhoz egy AdapterPageProducer komponensre lesz szükségünk, így itt most ezt válasszuk ki. Az Ok gomb után létrejön az új modul, melyben most egy AdapterPageProducer komponenst kapunk. Mellékelt példában ez a Unit3.pas-ban található.
Szükségünk lesz most egy olyan adattáblára, melyben adott két mező: az egyik egy kódot kell hogy tartalmazzon, a másik egy olyan mezőt, mely a felhasználó számára is értelmezhető, mint például egy név. Mellékelt példánkhoz a Delphi DBDEMOS alias név alatt lévő vendors.db tábláját használjuk. Ebben a VendorNo lesz a kód és a VendorName a név mezőnk.
Mivel az adatbázis elérés most majd több modulból is szükségessé válik, ezért nincs értelme a most létrehozott AdapterPageProducerPage3 modulban létesíteni azt. Erre az esetre lett kitalálva a WebSnap Data Module, mely egy olyan speciális modul, ahová elhelyezhetjük az adatbázis kezeléssel kapcsolatos komponenseinket és ezeket elérhetjük a többi modulból.
Válasszuk a File – New – Other menüpontot, majd a WebSnap lapról a WebSnap Data Module elemet. Ugyanezt érhetjük el, ha a Toolbar-on látható az Internet paletta és ott a New WebSnap Data Module gombra kattintunk. A megjelenő ablakban fogadjuk el az alapértelmezett értékeket és kattintsunk az Ok gombra. Ekkor létrejön a WebDataModule4, mely a Unit4.pas-ban kap helyet.
Helyezzünk el itt egy Session komponenst a BDE palettáról. Az AutoSessionName property-t állítsuk igazra.
Tegyünk fel egy Table komponenst is. A DatabaseName property-je legyen DBDEMOS értéken, a TableName vendors.db és az Active property legyen igaz. Kattintsunk duplán a Table komponensen, majd Ctrl + F. Ezzel minden egyes mezőhöz létrehoztunk egy új objektumot. Válasszuk most a VendorNo elemet ebből a listából és szokás szerint a ProviderFlags property pfInKey értékének igazra állításával jelezzük, hogy a táblában ez a kulcs mező.
A most készülő web oldalainkon a következő lesz a feladat: az imént megnyitott vendors.db-ből az egyik web oldalon megjelenítünk egy listát oly módon, hogy a táblából a VendorName mező értékei legyenek felsorolva. Amikor a felhasználó választ egyet a listából, akkor jelenjen meg egy másik web oldal, ahol a választott tétel összes adata látható legyen, vagy a vendors.db teljes rekordja. Ezt úgy valósítjuk meg, hogy egy Query komponenst használunk fel a kiválasztott rekord adatainak lekérdezéséhez. Ezért vegyünk fel a WebDataModule4-ra egy Query komponenst is a BDE palettáról. Ennek a DatabaseName property-je legyen DBDEMOS szintén. Az SQL property-be a select * from vendors.db where vendorno=:vendorno lekérdezés jön, mivel paraméterként adjuk majd meg a választott VendorNo értékét. A Query1 Params property-jében megtaláljuk ezt az egyetlen paramétert. Ennek be kell állítanunk a típusát. DataType property ftFloat. Továbbá megadunk egy értéket is a Value property-nél. Erre igazából csupán azért van szükségünk, hogy ideiglenesen meg tudjuk nyitni a Query1-et az Active property-jével. Ezt pedig azért kell megtennünk, hogy itt is felvehessük a lekérdezés adathalmazának mezőit: Query1-en dupla kattintás, majd Ctrl + F. Itt is be kell állítanunk a VendorNo elemnél a ProviderFlags property pfInKey értékét igazra.
Ezzel az adatmodullal nincs is több tennivalónk, térjünk vissza a Unit3.pas-hoz.
Itt egyelőre csak az AdapterPageProducer komponens található. Tegyünk mellé egy DataSetValuesList1 komponenst. Ennél három property-t kell megadnunk. Az első a DataSet lesz, ahol azt az adattáblát kell kiválasztanunk, mely most nyilván a Table1 lesz. Mivel ez azonban egy másik modulban van, így itt nem látható, mivel még nem hivatkoztunk a megfelelő unit-ra. Tehát Alt + F11 és válasszuk a Unit4-et. Ezek után már megadhatjuk a DataSet property-t.
A ValueField property-ben azt a mezőt kell kiválasztanunk a Table1-ből, mely a kódot tartalmazza, míg a NameField-ben azt a mezőt, amiben a név található. Ez a VendorNo és VendorName mező lesz.
Szükség lesz még egy Adapter komponensre is. Itt a Data property-ben létrehozunk egy új adatmezőt, AdapterField1 névvel. Ebben tároljuk majd a megjelenítendő listát, ezért a ValuesList property-jéhez hozzárendeljük a DataSetValuesList1 komponenst.
Az Adapter1 komponens Actions property-ben létrehozunk egy új akciót AdapterAction1 névvel. Ennek lesz az a szerepe, hogy a web lapon megjelenített nyomógomb lenyomáskor futtatható kódot rendeljünk hozzá a programunkban.
Válasszuk most ki az AdapterPageProducer komponenst és hozzuk létre a web oldalunkat. Kattintsunk rajta duplán és hozzunk létre szokás szerint egy AdapterForm-ot. Ezt választva ismét a New Item gomb és most egy AdapterFieldGroup-ra lesz szükségünk. Ennél az Adapter property-nél ki kell választanunk az Adapter1 komponenst és már meg is jelenik a legördíthető lista.
Jelöljük ki az AdapterForm1-et, ismét New Item, méghozzá AdapterCommandGroup típus. Ezzel hozhatjuk létre a nyomógombot, ha az AdapterCommandGroup1 objektum DisplayComponent property-jénél megadjuk az AdapterFieldGroup1 objektumot.
Az AdapterCommandGroup1 és az AdapterFieldGroup1 esetén is adjuk hozzá az összes elérhető elemet, hogy azokat szabadon befolyásolhassuk, például átírhassuk a szövegüket a Caption property-n keresztül.
Most tehát adott egy web lap, melyen van egy legördíthető lista, benne az összes VendorName értékkel és egy nyomógomb melyet lenyomva fut a létrehozott akciónk OnExecute eseménye, amihez még nem rendeltünk kódot idáig. Keressük elő tehát az AdapterAction1-et és hozzuk létre az OnExecute eseményét.
Itt tárolnunk kell a listából kiválasztott elemhez tartozó kódot, melyet ugyanazzal a módszerrel olvashatunk ki, mint legutóbb a StringsValuesList komponens használatakor. Ezt a kódot rögtön át is adjuk a WebDataModule-ban lévő Query1 komponensnek.
procedure TAdapterPageProducerPage3.AdapterAction1Execute(Sender:
TObject; Params: TStrings);
begin
FVendorNo:=AdapterField1.ActionValue.Values[0];
with WebDataModule4 do begin
Query1.Close;
Query1.Params[0].Value:=FVendorNo;
Query1.Open;
end;
end;
Amikor tehát fut ez a kód, akkor kell megjelenítenünk egy másik web oldalon a Query1 által futtatott lekérdezés eredményét. Ehhez először is kell készítenünk egy másik web lapot. Hozzunk létre tehát egy új WebSnap Page Module-t. A megjelenő ablakban a Producer – Type legördíthető listában az alapértelmezett komponenst, a PageProducer-t változtassuk meg az AdapterPageProducer komponensre, mivel ismét erre lesz szükségünk. Az Ok gomb előtt tegyünk meg még egy lépést: a Page mezőben a Published CheckBox ne legyen megjelölve. Ezzel azt érjük el, hogy az újonnan létrejövő web lap nem lesz publikus, vagyis nem jelenik meg web lap a menüjében, tehát közvetlenül nem lesz elérhető. Most pont erre van szükségünk, hiszen ennek a lapnak csak akkor kell majd megjelennie, ha a felhasználó választott a listából és a Query1 lekérdezése lefutott.
Ennek a Published-nek a kikapcsolása a forráskódban az initialization részben lesz hatással. Itt a wpPublished konstans ekkor megjegyzésbe kerül. Ha a későbbiekben mégis publikussá szeretnénk tenni az oldalt, akkor egyszerűen csak vegyük ki a megjegyzésből ezt a konstanst.
initialization
if WebRequestHandler <> nil then
WebRequestHandler.AddWebModuleFactory(TWebPageModuleFactory.Create(
TAdapterPageProducerPage5, TWebPageInfo.Create([{wpPublished}
{wpLoginRequired}], '.htm'), crOnDemand, caCache));
Létrejött tehát az új modul, mely a mellékelt példában AdapterPageProducerPage5 névvel szerepel és a Unit5.pas-ban kapott helyet.
Tegyünk ebbe egy DataSetAdapter komponenst, hogy a Query eredménye megjeleníthető legyen. Hivatkozzunk a DataModule unit-jára, majd válasszuk ki a DataSet property-nél a WebDataModule4.Query1 komponenst, mint adatforrást.
Ezek után kattintsunk duplán az AdapterPageProducer komponensen és állítsuk össze a megjelenítendő web lapot.
Hozzunk létre egy AdapterForm-ot, majd erre egy AdapterFieldGroup-ot. Ez utóbbinál az Adapter property-nél be kell állítanunk a DataSetAdapter1 komponenst, mint adatforrást. Alapértelmezésben megjelenik ekkor az összes elérhető mező. Készíthetünk persze olyan listát is, ahol ez nem így van. Vegyünk fel még egy AdapterFieldGroup-ot. Ez lesz az AdapterFieldGroup2 objektum. Állítsuk be az Adapter property-jét, majd jobb gomb után válasszuk az Add Fields menüpontot. A megjelenő listából pedig csak a VendorName mezőt jelöljük ki.
Ahhoz, hogy programunk tökéletesen működjön, még egy lépést meg kell tennünk. Eddig nem rendelkeztünk arról, hogy amikor az első web oldalon megnyomja a felhasználó a gombot, akkor a most elkészített oldalra kell ugrani. E lépés nélkül pedig soha nem fogjuk látni az eredményt.
A megoldáshoz lépjünk vissza a Unit3.pas-ra. Az Object Inspector-ból keressük elő a CmdAdapterAction1 objektumot, majd a PageName property-hez írjuk be az AdapterPageProducerPage5 szöveget. Ezzel arra utasítottuk a nyomógombunkhoz tartozó akciót, hogy futása után ne a saját oldal jelenjen meg ismét, hanem az AdapterPageProducerPage5 oldal, amin a Query komponens lekérdezése látható.