Hozzunk létre egy új Web App Debugger executable alkalmazást, CoClass névnél adjuk meg a Step07 sztringet, a projekt neve pedig Project7 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ó.
Tegyünk fel tehát egy StringsValuesList komponenst az új modulra. A Strings property-n keresztül írjuk be az alábbi sorokat úgy, hogy az első sor egy üres sor legyen, majd a továbbiak:
alma=1
körte=2
banán=3
szilva=4
Ezzel felvettünk négy elemet a listába, melyekhez rendeltünk egy-egy kódot is. A web oldalon a legördíthető listában természetesen csak a szövegek jelennek majd meg, de a programunk a választott elem kódját fogja visszakapni.
Nézzük most, miként készíthetjük el ezt a web oldalt. Szükségünk lesz egy Adapter komponensre. A Data property-n keresztül vegyünk fel egy új adatmezőt AdapterField1 névvel, melynél a ValuesList property-ben hozzákötjük a StringsValuesList1 komponenst. Ebből az adatmezőből készíthetjük majd a web lapra a legördíthető listát.
Szükség lesz még az Adapter1 komponensnél egy akcióra is. Ez akkor kerül majd aktivizálásra, mikor a web oldalon a választás után megnyomja a felhasználó az Ok gombot.
Vegyünk fel tehát egy új akciót az Actions property-n keresztül AdapterAction1 névvel. Ennek OnExecute eseményéhez hozzunk létre egy kezelő eljárást, mely az Ok gomb lenyomása esetén fut le. Ez lesz az a pont, amikor kiolvashatjuk, hogy melyik elemet választotta a felhasználó a listából. A kiválasztott elem kódját el is kell tárolnunk valahol, így létrehozunk egy FStr nevű sztring típusú globális változót. A választott elem kódja az AdapterField1 objektumon keresztül érhető el. Ennek ActionValue property-jében találunk egy Values tömb property-t, melynek első eleme a választott elemünkhöz tartozó kódot tartalmazza az OnExecute futásának idején.
procedure TAdapterPageProducerPage3.AdapterAction1Execute(Sender: TObject; Params: TStrings);
begin
FStr:=AdapterField1.ActionValue.Values[0];
Amennyiben ismert a kód, úgy képesek vagyunk a hozzá tartozó szöveget is visszakeresni. AdapterField1 objektum ValuesList property-jéből megtudjuk, hogy aktuálisan melyik lista van az adatmezőnkhöz kapcsolva, majd ebből a GetListNameOfValue függvény hívásával - melynek paraméterként átadjuk a kódot - meghatározhatjuk a hozzá tartozó szöveget is.
FStr:=FStr+' ['+AdapterField1.ValuesList.GetListNameOfValue(FStr)+']';
end;
Ha ezzel megvagyunk, akkor jöhet a web oldal készítése. Ehhez felhasználjuk a már meglévő AdapterPageProducer komponensünket. Kattintsunk rá duplán. Az AdapterPageProducer elemet kijelölve kattintsunk a New Item gombra és vegyünk fel egy AdapterForm típusú objektumot. Majd ezt választva ismét a New Item gomb és most egy AdapterFieldGroup elemet válasszunk ki. Ekkor létrejön az AdapterFieldGroup1 objektum, melynek Adapter property-jénél meg kell adnunk az Adapter1 komponenst, mint adatforrást. Ekkor már megjelenik a web lapon a legördíthető listánk. Ahhoz, hogy a hozzá tartozó feliratát átírhassuk angolról, jelöljük ki az AdapterFieldGroup1 objektumot, majd jobb gombbal történő kattintás után válasszuk az Add All Fields menüpontot. Ekkor kapunk egy új objektumot FldAdapterField1 névvel, melynek tetszőlegesen átírhatjuk a Caption property-jét a többi tulajdonságával együtt.
Szükségünk lesz még egy nyomógombra is a web oldalon, így most válasszuk az AdapterForm1 objektumot, majd New Item gomb és AdapterCommandGroup típus választásával létrehozhatunk egy új objektumot AdapterCommandGroup1 névvel. Ennél a DisplayComponent property-t kell beállítanunk a helyes működés érdekében, így ott válasszuk az AdapterFieldGroup1 objektumot.
Ehhez a nyomógombhoz is vegyünk fel új objektumot, amelynek segítségével befolyásolhatjuk annak tulajdonságait, például a feliratát. Válasszuk tehát az AdapterCommandGroup1 objektumot, majd jobb gomb és Add All Commands menüpont után létrejön egy új, CmdAdapterAction1 névre hallgató objektum.
Ezzel készen is lennénk, legalábbis az adatbeviteli résszel, mely mostantól kezdve működőképes. Egyetlen feladatunk maradt csak: a kiválasztott eredményt meg is kellene jelenítenünk web oldalunkon ellenőrzésképpen.
Ehhez hozzunk létre egy egyszerű adatmezőt egy Adapter komponensbe és rövid kis script segítségével jelenítsük azt meg a web lapunkon.
Tegyünk fel tehát egy Adapter komponenst, a Data property-jébe hozzunk létre egy új adatmezőt AdapterField2 névvel. Hozzunk létre egy OnGetValue eseményt, hogy ennek a mezőnek értéket is tudjunk adni. Ez az érték a kiválasztott kód lesz, melyet az FStr globális változóban tároltunk, így csak ki kell onnan olvasnunk.
procedure TAdapterPageProducerPage3.AdapterField2GetValue(Sender: TObject; var Value: Variant);
begin
if FStr=' []' then begin
Value:='még nem történt választás';
end else begin
Value:=FStr;
end;
end;
Most már csak két egyszerű hivatkozást kell beillesztenünk a Unit3.htm állományba. Az első kis script-tel kiírjuk az adatmezőnk címkéjét, vagyis a DisplayLabel property-jének értékét. A második script-tel pedig kiírjuk az FStr változó aktuális értékét.
<b><%= Adapter2.AdapterField2.DisplayLabel %>:</b>
<%= Adapter2.AdapterField2.DisplayText %>