Szokásunkhoz híven készítünk egy új Web App Debugger executable típusú alkalmazást, melynek Project5 nevet és Step05 CoClass nevet választottunk a mellékelt példában.
Az így létrejött programban rögtön felveszünk egy új lapot (WebSnap Page Module), melyhez a Unit3.pas és Unit3.htm tartozik. Tegyünk ebbe a modulba egy TAdapter komponenst. Vegyünk fel a Data property-n keresztül egy új adatmezot, mely AdapterField típusú és AdapterField1 nevű legyen. A DisplayLabel property-hez írjuk be a "Számláló" szöveget.
Hozzunk létre a forráskódban egy globális változót, mondjuk FCounter névvel.
Ez lesz az a változó, melynek értékét az AdapterField1 adatmező szolgáltatja. Ehhez hozzuk létre az AdapterField1 OnGetValue eseményét és itt egyszerűen adjuk visszatérési értékként az FCount változó értékét.
procedure TPageProducerPage3.AdapterField1GetValue(Sender: TObject; var Value: Variant);
begin
Value:=FCounter;
end;
Ha már itt tartunk, akkor rögtön helyezzünk is el a Unit3.htm-ben egy kis scriptet, mely megjeleníti e mező nevét és aktuális értékét:
<b><%=Adapter1.AdapterField1.DisplayLabel %>:</b>
<%=Adapter1.AdapterField1.DisplayText %>
Ezek után a következő lenne a feladat: hozzunk létre a web lapon három nyomógombot. Az egyikkel növelni, a másikkal csökkenteni kellene e számlálónak értékét, míg a harmadikkal nullázni azt.
Mivel ehhez már olyan műveleteket kell végeznünk, melyhez kód is tartozik, így szükségessé válik, hogy ún. akciókat hozzunk létre, minden egyes megvalósítandó funkciónkhoz.
Ezt szintén az Adapter1 komponensnél tehetjük meg, annak Actions nevű property-jénél. Erre kattintva megnyílik egy ablak, ahol felvehetünk új akciókat a New Item gombba. Vegyünk fel rögtön hármat, majd a DisplayLabel property-jüknél írjuk be a következő szövegeket: Növelés, Csökkentés, Nullázás.
Egy ilyen akció a következőképpen működik: amikor a web lapon valamilyen módon aktiválásra kerül, akkor lesz meghívva az OnExecute eseménye. Itt tetszőleges kódot futtathatunk, majd ezután a böngésző ismételten megkapja ugyanazt a web oldalt. A web lapon történt változást nyilván nekünk kell előidézni az OnExecute-ben. Jelen példánál a belső FCounter változó értékét módosítjuk, így amikor az akció végén ugyanazt a web lapot (a unit3.htm) küldjük vissza a böngészőnek, akkor ott már az új érték kerül megjelenítésre.
Mivel a weben böngésző kliens és szerverünkön futó alkalmazás között csak akkor van kapcsolat, amikor egy kérés kiszolgálása fut, így felmerül az a probléma, hogy két kérés között miként maradhat fenn az FCounter változó aktuális értéke. Az a megoldás nyilván nem járható út, hogy a programunk állandóan fut, méghozzá annyi példányban ahány felhasználó járt web oldalunkon. Hiszen nem is tudhatjuk, hogy egy azonos felhasználó két kérése között mennyi idő telik el. Két perc, két nap, vagy talán soha többé nem jár felénk. Ezért a megoldás az lesz, hogy a visszaküldött weblapon elhelyezünk egy rejtett mezőt, melyben eltároljuk az aktuális értékét az FCounter-nek, így ha lesz következő kérés, akkor megkapjuk, hogy az utolsó kérésnél mennyi volt az FCounter értéke. Ettől kezdve a fenti problémákkal nem is kell foglalkoznunk.
Ilyen paraméterek elhelyezéséhez, melyek egy adott akcióhoz kötöttek, az adott akció OnGetParams eseményét használhatjuk fel. Itt paraméterként kapunk egy TStrings típust, melybe felvehetjük szükséges paramétereinket, a szokásos paraméter=érték formában. Jelen példánál maradva, az AdapterAction1-nél egy Counter nevu paramétert adunk át, melynek értéke az FCounter változó aktuális értéke lesz.
procedure TPageProducerPage3.AdapterAction1GetParams(Sender: TObject; Params: TStrings);
begin
Params.Add('Counter='+IntToStr(FCounter));
end;
Ezt tehát minden web oldal generálásánál figyelembe kell venni és elhelyezni rajta, így amikor majd fut az akció, akkor visszakapjuk az eltárolt változónkat.
Ez következik be az OnExecute eseménynél. Amikor AdapterAction1 aktiválva lesz, akkor szintén kapunk egy TStrings paramétert és ebben megtaláljuk a Counter nevű paraméterünket, melynek lekérdezhetjük értékét, amit most el is tárolunk az FCounter változónkban.
procedure TPageProducerPage3.AdapterAction1Execute(Sender: TObject; Params: TStrings);
begin
FCounter:=StrToInt(Params.Values['Counter']);
Ha már megvan az FCounter értéke, akkor elvégezhetjük a szükséges műveletet, például a növelést.
A másik akciónál, az AdapterAction2-nél hasonló a helyzet. Az OnGetParams-nál ugyanarra a kódra van szükségünk mint az elobb, így annak eseménykezelő eljárását felhasználjuk itt is. Az OnExecute-hoz egy új eseménykezelőt hozunk létre, melynek kódja csak abban tér el az előzőtől, hogy most csökkenteni kell változónk értékét és nem növelni.
procedure TPageProducerPage3.AdapterAction2Execute(Sender: TObject; Params: TStrings);
begin
FCounter:=StrToInt(Params.Values['Counter']);
dec(FCounter);
end;
A harmadik akcióhoz paraméter átadásra nincs szükség az adott funkciónál fogva, így itt csak az OnExecute eseményt kell felhasználnunk, ahol egyszerűen nullázzuk az FCount változó értékét.
procedure TPageProducerPage3.AdapterAction3Execute(Sender: TObject; Params: TStrings);
begin
FCounter:=0;
end;
Ezzel programunk kész is, nézzük milyen scriptet kell tennünk a web lapunkra, hogy ezeket a funkciókat el is érhessük.
A három funkcióhoz célszerű lenne három nyomógombot létrehozni, melyekre való kattintáskor aktivizálódna az adott funkció. Nézzük az első gombot, mellyel növelhetjük a számlálónk értékét. Ehhez készítünk egy Web Form-ot.
<form name="Form1" method=post>
Ezen belül elhelyezzük a rejtett mezőt, mely tartalmazza, hogy a programunknak mit kell tennie, milyen akciót kell aktivizálnia a gombra történő kattintáskor. Itt kerül eltárolásra az FCounter változónk értéke is. Ehhez egy hidden típus mezőt hozunk létre, melynek neve __action, értékét pedig az Adapter1 komponens AdapterAction1 objektumának AsFieldValue property-je szolgáltatja. Hogy ez pontosan mit is ad vissza, arra hamarosan visszatérünk.
<input type=hidden name="__action" value="<%=Adapter1.AdapterAction1.AsFieldValue%>">
Következhet a nyomógomb létrehozása. Ennek típusa submit, értékét, vagyis a gomb feliratát az Adapter1 komponens AdapterAction1 objektumának DisplayLabel property-je adja, melynek a "Növelés" sztringet adtuk.
<input type=submit value="<%=Adapter1.AdapterAction1.DisplayLabel%>" style="border: 1 outset #FFF8DC;
background-color: #00BFFF; width=100">
</form>
Ha megnézzük a web oldalunk kódját, akkor ott a következőt láthatjuk a scriptek feldolgozása után:
<form name="Form1" method=post>
A value értékhez elég varázslatos kód került elhelyezésre, melyben látható a Counter nevű paraméterünk és értéke, meg még egy-két kód, mellyel nem is kell foglalkoznunk, hiszen ezt a WebSnap automatikusan létrehozza és kezeli is a jövőben.
<input type=hidden name="__action" value="Counter.1.0__id.41.PageProducerPage3.Adapter1
.AdapterAction1">
A nyomógombnál látható, hogy a felirathoz, a script helyére bekerült a "Növelés" felirat.
<input type=submit value="Növelés" style="border: 1 outset #FFF8DC; background-color: #00BFFF; width
=100">
</form>
A másik két gomb elhelyezéséhez ugyanígy kell eljárnunk, annyi különbséggel, hogy ott a scripteknél nem az AdapterAction1-et, hanem az AdapterAction2-t és AdapterAction3-t kell használnunk.
Ezzel a mellékelt példát be is fejeztük, jöhet az egyszeri futtatás, majd a szokásos módon a Web App Debugger és a teszt.