Anonymous
Domino 2.0 Rich Internet Applications with IBM Lotus Notes/Domino
You are here: Today » Using Notes forms to manage CSS files, templates and components
« Quick update
Making a site builder in Domino »

Using Notes forms to manage CSS files, templates and components

The first decision to make: render all the HTML with a QueryOpen agent in a Notes RichText field and hiding all the rest of the form for browsers. Then you need a Notes form for the CSS and a Notes form for the templates. Here's how I've made the CSS form:

The CSS form

This is a simple Notes form, maintained in the Notes client (we don't want to give normal users access). The fields used:

Then there's a computed field that converts the image names in the CSS to their full URLs. This is the field that is actually rendered. 'FriendlyKey' and 'DbPath' are fields to hold the key value of the document in a 'pub' view and the path of the database:

a:=@Implode(Data_Raw; @NewLine);
b:=@AttachmentNames;
c:=DbPath+"pub/"+FriendlyKey+"/$file/"+@AttachmentNames;
@ReplaceSubstring(a; b; c)

The form itself is rendered with content type: other -> text/css.

Selecting the CSS

On the Site document, there is a combo box 'Stylesheet' which allows you to select the CSS document for this site. The options are taken from a computed for display field:

a:=@DbLookup("";""; "lookup"; "css"; 3);
@If(@IsError(a); @Text(a)+"|"; "(none)|":a)

Next, the HTML for the stylesheet is computed in a field:

a:=@If(StyleSheet=""; ""; "<link rel=\"stylesheet\" type=\"text/css\" href=\""+StyleSheet+"\" />");
@Implode(a:""; @NewLine)

The query-open agent can then just take this HTML and render it on the page.

The Template form

This forms stores both page templates as reusable HTML components. As in the CSS form, a similar computation is used to resolve the paths of the attached files. The same form is used both for reusable HTML components (header and footer) as page templates, because they are both just HTML texts. Again, on the Site document, you can select the header and footer components and the page templates to use for each page type:

Here's an example of how such a template looks like:

<div id="canvas">
[%header%]
<div id="main">[%content%]</div>
[%footer%]
</div>

Next

In a next post, I'll explain how I resolve the [%tags%] in LotusScript. As a reminder: this is part of the SiteBuilder I'm programming this weekend. Next thing to tackle for me is the creation of sections and the navigation.

Star rating

0%

Comments

  1. 06/22/2008 10:29:40 AM, Theo Heselmans

    I never understood why you would put the CSS into an attachment in a document. I always put the CSS text directly into a field. This way you/the user can edit the CSS easier. You set the content type of the form to text/css of course.

  2. 22/06/2008 20:38:54, Ben Poole

    I use "resource" documents on the web, with form formula to open them with the correct content-type. A rich-text field in the form is then used to render the relevant data (CSS, Javascript, HTML, whatever). As Theo says, this makes for easy editing. Comment #11 here covers the technique:

    benpoole.com/weblog/200602231126

  3. 06/23/2008 08:40:29 AM, Michel Van der Meiren

    @Ben: Yes, I used to use the view form formula as well. Now I make a separate form for each content type and set the mimetype on the form itself. I also use a regular text field so that I can resolve paths of attached images (for CSS). Too bad you cannot set the content type of a form from code. Or can you?

  4. 23/06/2008 14:14:34, Ben Poole

    @Michel I reckon this could be possible. There will no doubt be a $Flag attribute which controls this, so some code to get a handle on the relevant form element as a NotesDocument & then manipulate the $Flag note field might do the trick. I should take a look... ;o)

  5. 23/06/2008 14:28:41, Ben Poole

    OK, just tried it. You can access the $MImeType field in script (via NotesNoteCollection etc.) and you can change it. The design change is reflected in the form properties, but I had to close and re-open the database to see that. Interesting!

To add a comment, log in or register as new user. It's free and safe.