Title: WebSnap III: use of Adapter instead of Html-Transparent-Tags
Question: On this article I will show you the use of adapters to manage content in your web pages
Answer:
So far in my 2 articles of websnap I showed you the way websnap "interacts" with the html
WebSnapI: The unknown powerful
WebSnap II: Interacting with the user
that is using "html transparent tags", where you put in the html files, tags like:
and so on... then on your websnap application pageproducer OnHTMLTag you replace those with
the content you want... well, there are other ways to achieve the same thing, I'll show you how easy it is
The AdapterFields are going to do this for us, look at them as... a replacement for the html transparent tags or
an interface between our variables and the html jscript
I'm not going to get into detail about how to create a websnap application this time, so
here we go
Create a new websnap application (Web App Debbuger executable), you get one form and another "form" (WebAppPageModule)
with 5 components on it:
PageProducer, WebAppComponents, ApplicationAdapter, PageDispatcher and AdapterDispatcher.
Ok, this time we are going to make use of ApplicationAdapter, this component can hold variables and actions
which we can use in our html code (using jscript), let's see how
right click on the applicationadapter: click on fields editor, then a little window comes up
right click on that box and select new component, then AdapterField, that new component gets added to the right
side of that window, click on the AdapterField and let's see the properties
Name: obviously the Delphi Name for that variable (I called TheTimeAF)
FieldName: the name by which we will access this variable from our html script (I called it TheTime)
that's all we need from here for now
now let's see the events of this object
OnGetValue is the one we are interested in right now
doble click there and write this code:
procedure Ttutorial2.TimeAFGetValue(Sender: TObject;
var Value: Variant);
begin
Value:=FormatDateTime('mm/dd/yy HH:MM:SS', Now)
end;
you see where we are going? I will use this variable to show the server time in my webpage
ok, let's add another AdapterField, repeat the same steps to add another AdapterField, I put these
properties for this one
Name: HitsAF
FieldName: Hits
we will use this variable to show the number of hits in our page since the page has been up (cool!)
For this we will also need a variable (Integer or LongInt) to hold the number of hits
the OnGetValue code looks like this:
procedure Ttutorial2.HitsAFGetValue(Sender: TObject; var Value: Variant);
begin
Hits:=Hits+1;
Value:=Hits
end;
looks pretty easy huh?... it is that easy
let's see now how we would add a random image to our page!
Add another AdapterField, properties:
Name: RandomImageAF
FieldName: RandomImage
and on the OnGetValue we put something like this:
procedure Ttutorial2.RandomImageAFGetValue(Sender: TObject;
var Value: Variant);
begin
Value:=ImagesPath+Images[Random(Images.Count)]
end;
where did I get ImagesPath and Images?
ImagesPath is a string variable and Images is a tstringlist which I created on the WebAppPageModule OnCreateEvent
something like this:
procedure Ttutorial2.WebAppPageModuleCreate(Sender: TObject);
Var S:TSearchRec;
begin
Images:=TStringList.Create;
ImagesPath:=ExtractFilePath(ParamStr(0))+'images\';
If (FindFirst(ImagesPath+'*.jpg', faAnyFile-faDirectory, S)=0) Then
Repeat
Images.Add(S.Name)
Until (FindNext(S)0);
FindClose(S)
end;
This code is pretty simple and self explanatory I think... anyway... just created the images variable and loaded it
with the names of images found in the images folder, I also save the path
Note that this would work only when using the Web App Debugger, because I'm saving an absolute path to
the location of my .exe... to make it work for the actual web isapi you would change that to something like:
ImagesPath:='/images/'
where 'images' would be a virtual directory on your server
don't forget to free the images stringlist on the OnDestroy of WebAppPageModule
procedure Ttutorial2.WebAppPageModuleDestroy(Sender: TObject);
begin
Images.Free
end;
Now... that was the Delphi part... that's easy... what about the html part?
well, is not that hard... it looks like this:
Current time at server:
Hits (since page has been up):
A Random image:
"
pretty simple huh??
you can see how you can directly access the variables you just created
ApplicationAdapter is the name of the component in the WebAppPageModule (one of the 5 default components)
the TheTime, Hits and RandomImage are the variables we created... that easy
Run The Web App Debugger (Delphi menu Tools, Web App Debugger), start your server
run your application and look at your cool new page that shows the server time, the number of hits
and show a random image every time you reload the page
Final notes:
I showed you 3 examples of the use of AdapterField and I only showed small data, but nothing
should stop you from loading entire html files and puthing them on the value of your variables
(html formatted)
even something like:
Value := MyPageProducer.Value;
you get the picture? pretty much you can do with them the same thing as with the html transparent tags
but this is maybe more organized, as you have each variable separated
That's it for now... you can download the source code along with the images here:
have fun
salu2
EberSys