LotusScript functions to generate valid XHTML forms
I could have combined them in a class, but I noticed that working with classes in script libraries has a number of downsides. Typeahead does not work with classes and it is not so easy to change/add public variables. For the time being, I just make simple functions in my "WebProcessing" script library. The global doc is the current document.
Getting a Query_String parameter
Function getQuery(Byval key As String)As String
Dim tmp As String
tmp=Strright(doc.Query_String_Decoded(0), "&" & key & "=")
tmp=Strleft(tmp & "&", "&")
getQuery=tmp
End Function
Valid XHTML forms
Instead of tables, I use unordered lists. In fact, a form is nothing more than a list of labels and fields. I use functions for each type of field. Remember that doc is the current document, body is an instance of the StringBuffer class. The CREATEPOSTOPTIONS contains the options for the radio buttons.
Const CREATEPOSTOPTIONS="Owner only|owner~All members|all"
body.add |<form method="post" action="">|
body.add |<ul>|
body.add getField("Title: ", "Subject")
body.add getArea("Description: ", "Description")
body.add getRadio("Create posts: ", "CreatePosts", Split(CREATEPOSTOPTIONS, "~"))
body.add |</ul>|
body.add |</form>|
A text field
Function getField(Byval label As String, Byval fieldName As String)As String
Dim tmp As New Stringbuffer(5)
Dim value As String
value= Join(doc.GetItemValue(fieldName), "")
tmp.add |<li>|
tmp.add |<label for="f| & fieldName & |">| & label & |</label>|
tmp.add |<input id="f| & fieldName &|" name="| & fieldName & |" value="| & value & |" />|
tmp.add |</li>|
getField=tmp.collapse("")
End Function
A text area
Function getArea(Byval label As String, Byval fieldName As String)As String
Dim tmp As New Stringbuffer(5)
Dim value As String
value= Join(doc.GetItemValue(fieldName), "")
tmp.add |<li>|
tmp.add |<label for="f| & fieldName & |">| & label & |</label>|
tmp.add |<textarea id="f| & fieldName &|" name="| & fieldName & |" cols="80" rows="5">| & value & |</textarea>|
tmp.add |</li>|
getArea=tmp.collapse("")
End Function
Radio buttons
Function getRadio(Byval label As String, Byval fieldName As String, options As Variant)As String
Dim tmp As New Stringbuffer(50)
Dim value As String
Dim i As Integer
Dim opt As Variant
Dim id As String
Dim sel As String
value=doc.GetItemValue(fieldName)(0)
tmp.add |<li>|
tmp.add |<span class="label">| & label & |</span>|
tmp.add |<span class="radio">|
For i=0 To Ubound(options)
opt=Split(options(i), "|")
id="f" & fieldName & "-" & opt(1)
If opt(1)=value Then
sel=| checked="checked"|
Else
sel=""
End If
tmp.add |<input type="radio" name="| & fieldName & |" id="| & id & |" value="| & opt(1) & |"| & sel & | />|
tmp.add |<label for="| & id & |">| & opt(0) & |</label> |
Next
tmp.add |</span>|
tmp.add |</li>|
getRadio=tmp.collapse("")
End Function
The CSS
form{margin:0;padding:0}
form ul{list-style:none;margin:20px 0;padding:0;border-top:solid 1px #ccc}
form li{padding:1px 0;border-bottom:solid 1px #ccc}
label,span.label{display:block;float:left;width:100px}
li input,textarea{width:400px}
.radio label,.radio input{width:auto;display:inline;float:none}
The HTML output
<form method="post" action="">
<ul>
<li><label for="fSubject">Title: </label><input id="fSubject" name="Subject" value="" /></li>
<li><label for="fDescription">Description: </label><textarea id="fDescription" name="Description" cols="80" rows="5"></textarea></li>
<li><span class="label">Create posts: </span><span class="radio"><input type="radio" name="CreatePosts" id="fCreatePosts-owner" value="owner" checked="checked" /><label for="fCreatePosts-owner">Owner only</label> <input type="radio" name="CreatePosts" id="fCreatePosts-all" value="all" /><label for="fCreatePosts-all">All members</label> </span></li>
</ul>
</form>
The result
Next steps
Check boxes, rich text areas, date/time pickers... these are all candidates for additional LotusScript functions. As soon as I find time, I will post a sample database.
Comments
19/09/2007 23:41:31, Jan Schulz
Without testing: I think the getQuery(key) needs to replace %20 (or was it '+'?) with space, if you have text areas and so on with more then one word.
What is the usecase here? If you want proper HTML, why not use your template methods instead of coding it? This way you need to change the design if you want to add a new field, otherwise just the template. Ok, you might need to change design anyway, if you want to store or mail the form values. On the other hand I found it better to have the design as much seperated from the code as possible.
20/09/2007 08:56:49, Michel Van der Meiren
I use Query_String_Decoded, and only to pass commands, parentIds etc. The use case: I intend to build all the forms from QueryOpen agents in order to get full control over the HTML rendering. A more advanced method would be: doing everything with XML and XSLT transformations, but I find that XML and XSLT knowledge is not that widespread. And simple is the best in most cases.
20/09/2007 16:23:12, Jan Schulz
Ok, for a generic 'Change this value to that' (maybe in ajax style: click it, get a popup to change the value, write it back to the doc, reload) it seems a really good idea...
For a complete page, I still would use a template to get full control: One differences between client and web seems to be, that the design of the web needs to change more often than in the client (CD and "face to the costumer" or adding some "nice small thing") and I found it a pain to let users do that in the designer client. So for me, everything which decouples design and 'logic' seems to be a good thing. Adding the fields is in this case another 'coupling': you add the visual structure (order, way to represent it (<li>)) of the page in the code.
Thats why I so like a template system: you get to define the structure/design in one place and do the code in a complete differnt place. In a way it bcomes a MVC design: you have the model (Notes part, Documents), a view part (HTML Template) and a controler (agents, like the "one change to a value" or bigger ones).
What I'm not yet sure about is performance: it seems to do ok with a basic for i in 'seq 1 1000'; do wget <page> & ; done but I need to try this performance tool you had some time ago...
20/09/2007 16:38:39, Jan Schulz
damn :-) , the li tag got replaced: "(order, way to represent it (list item tag))"
02.10.2007 15:30:42, Fabian Robok
Just from the top of my head: I think that type-ahead does work in classes, just not when using the Me keyword. That's why I finally adopted the m_ prefix notation for member variables, often used in other languages (despite my deep dislike of underscores in variable names).
Having said that, it is still true, that not everything HAS to go into a class. While LotusScript often limits us with not supporting all concepts of OO programming on one hand, it gives us the flexibility to choose between different programming concepts on the other hand.
Personally, I'm not (yet) a friend of having agents create all the markup (for whatever valid reason), but I find the current discussion (or is it already a change of paradigm?) quite interesting. When I started Domino programming in 4.5/4.6, this very same approach has been very popular amongst my more exprerienced colleagues. With all the performance issues we had back then with web agents never being executed concurrently. I'm really excited to see, how this debate will turn out and if it will lead to a definite conclusion.
08/08/2008 06:26:49 PM, Tom Barty
Hi Michel, I'm just wondering how does it exactly work? I would like to see under the hood. Have you got any sample database, which you can provide out? I will really appreciate if you can send me a link or the web application.
08/11/2008 04:52:59 PM, Tom Barty
Hi Michel, I'd like to ask one question. As I understand from your blog entries, in your form you fill field Body by webQueryOpen agent to create the HTML on the page. It seams to me as good technique when create web page, but what if you want to make web application? Then you have to delete the body field after every Save, or delete it in WebQuerySave? Isn't then better to write the html in the form or subform? It might be even easier for handling the read mode and the edit mode. Or what are your experiences?
08/12/2008 08:39:15 AM, Michel Van der Meiren
Hi Tom. I don't use the Body field for this, since it is already used to store the rich text of the document. I use a separate rich text field for it and fill it with LotusScript. Usually called PageHtml or something like that. And this is the only thing that is visible for web browsers. I hide all the rest. And I do make web applications that way: I have made a class that generates HTML forms for editing as well. I'll try to find time to make a few blog entries that explain the process step by step.
08/12/2008 09:25:09 AM, Tom Barty
Hi Michel, I'm sorry, but I still don't understand. Don't you have to delete the PageHtml field after every document save? To be honest, I don't want to bother you with creating blog post about your technique. Instead, would it be possible that you put sample application somewhere on your webpage or somewhere else? I'm really eager to see how does it work in your code. Thank you in advance.
08/15/2008 10:32:48 AM, Tom Barty
Hi Michel, I wanted to ask you for a sample database of the features which you talk here about. The thing is that me and my colleagues are working on a web application project and our customer requires that the applications are going to be xhtml standardized. But the thing is that every way we try, we find a hack. We tried OutputFormat=xhtml, which is w3c invalid if you write some javascript into JSHeader. We tried content-type html and form made of subforms, but again some things didn't go very well (for example nested subforms sometimes makes additional paragraph tag). Your idea of creating forms by lotus script appeals us most, but we still didn't get how does it work. To make right decision is very important for us, as all the applications are going to use the same application style. So, I am really urgently asking you, if you could please send me a sample database with your code or put it somewhere on your blog? I don't want something for nothing, if you are interested, then we can share some knowledge about Jquery, JSON or other Lotus Notes and web development methods with you, if you like. Best regards, Tom
To add a comment, log in or register as new user. It's free and safe.