About One Simple Page

The following is the simplest page class in our current build. This might be of interest only to SnupNow team members getting started with coding in Zen, but I figured I would put it out here for anyone else interested too. First I’ll show the source code for the class, then show an altered picture of the page (where you can see what has been grayed out), then add a few comments regarding the code.

This page is not in its final form. [What software is?] One of our open tickets is to swap the tabs, adding a tab so a user can submit comments or questions. Before we do any of the pending enhancements, this should be good for showing a minimalist page. This page was written using the Cache’ Zen framework.

There are links to each of the tabs on this page on every page, including this one. You can see them at the bottom in the screenshot. While it might be nice to remove those when on this page, I’m not planning to do that. Sloppy? I don’t think so. Consistency has its charm too. I do see that I put copyright information on this tab and have it at the bottom of the page. That would be OK, I guess, since that is About information, but having two different dates–now THAT is sloppy. Details, details.

With apologies for some of the format here, particularly the loss of indents, if you review the code below, you will get an idea of the structure of a page class.

/// About Page, Keep build number accurate here
Class About.StartPage Extends Util.Template.Page [ Language = mvbasic ]
{

/*
* About.StartPage
* ******************
* Change History *
* Name…… Date…… Summary of Change…..
* dawnw 2008/09/16 Created [other change comments have been removed]
* ******************
*/
Parameter APPLICATION = “About.App”;

Parameter PAGENAME = “SnupNow, About”;

Parameter CSSINCLUDES = “../../dev/page-template.css,../../dev/page-about.css”;

Property ClipboardTitle As %ZEN.Datatype.string [ InitialExpression = “About” ];

Property ClipboardInstructionsName As %ZEN.Datatype.string [ InitialExpression = “About” ];

Property tabby As %ZEN.Datatype.integer(ZENURL = “tabby”) [ InitialExpression = 1 ];

XData vcontentPane
{
<pane xmlns=http://www.intersystems.com/zen&#8221; cellSize=“stretch”>
<tabGroup id=“tabGroup” showTabBar=“true” onshowTab=“zenPage.updatebuttons” remember=“true” cellStyle=“padding:20px”>
<tab id=“tab1” title=“tab1” caption=“About”>
<pane paneName=“Tab1Pane”/>
</tab>
<tab id=“tab2” title=“tab2” caption=“Contact”>
<pane paneName=“Tab2Pane”/>
</tab>
</tabGroup>
</pane>
}

XData Tab1Pane
{
<pane xmlns=http://www.intersystems.com/zen&#8221; xmlns:s=http://www.snupnow.com/component&#8221; >
<s:form id=“bform” name=“bform” groupClass=“snupform” enclosingClass=“snupencform”
width=“570px” labelPosition=“top” hidden=“false”>
<label controlClass=“componentTitle” enclosingClass=“componentHeader”
value=“SnupNow is brought to you by the Snupnow LLC team” />
<s:fieldSet id=“bfieldset” groupClass=“snupfs” enclosingClass=“snupencfl”
labelPosition=“top”>
<label controlClass=“componentSubtitle”
enclosingClass=“componentSubheader” value=“SnupNow 0.1.22” />
<hgroup height=“1” />
<label value=“SnupNow Version 0.1 Build 22” />
<hgroup height=“1” />
<label value=“Copyright©2009 Snupnow LLC” />
</s:fieldSet>
</s:form>

</pane>
}

XData Tab2Pane
{
<pane xmlns=http://www.intersystems.com/zen&#8221; xmlns:s=http://www.snupnow.com/component&#8221; >
<s:form id=“aform” name=“aform” groupClass=“snupform” enclosingClass=“snupencform”
width=“570px” labelPosition=“top” hidden=“false”>
<label controlClass=“componentTitle” enclosingClass=“componentHeader” value=“Contact Us” />
<s:fieldSet id=“afieldset” groupClass=“snupfs” enclosingClass=“snupencfl” labelPosition=“top”>
<label controlClass=“componentSubtitle” enclosingClass=“componentSubheader” value=“Contact Information” />
<hgroup height=“1” />
<label value=“Send questions or comments to snupnow at gmail dot com” />
<hgroup height=“1” />
<label value=“Or feel free to contact:” />
<hgroup height=“1” />
<label value=“Dawn Wolthuis, Managing Partner of Snupnow LLC” />
<hgroup height=“1” />
<label value=“Mobile: 616.901.6293” />
<hgroup height=“1” />
<label value=“Email: dwolt at tincat-group dot com” />
</s:fieldSet>
</s:form>
</pane>
}

Method %OnDrawHTMLHead() As %Status
{
print ‘<meta name=”description” content=”About SnupNow”>’
print ‘<script src=”http://www.google-analytics.com/urchin.js&#8221; type=”text/javascript”>’
print ‘</script>’
print ‘<script type=”text/javascript”>’
print ‘ _uacct = “UA-removed;’
print ‘ urchinTracker();’
print ‘</script>’
return 1
}

Method onloadHandler() [ Language = javascript ]
{
gotab = zenPage.tabby;
if (gotab != 1)
{
zen(‘tabGroup’).showTab(gotab);
}
return
}

}

A Screenshot

This is an unrefined page, but it looks pretty enough with our new look, designed by an actual graphic designer. As I knew most, perhaps every, web page designer would, he objected to having objects on the far left and others on the far right, with the white space between them, but this girl has her reasons, which we can discuss sometime.

About Page

About Page


Comments:
/// About Page, Keep build number accurate here
The three-slash comments show up in the DocBook view of the page. While this might be ho-hum for some, and I took it for granted when writing Java classes, I am delighted to have DocBook included in this platform with no work from us. We can view the doc for classes in libraries delivered by InterSystems the same way we can view doc about our own classes.

The class declaration: Class About.StartPage Extends Util.Template.Page [ Language = mvbasic ]
About.StartPage.cls is the “fully qualified” name of the class, with About being the package name. The “.cls” is used in the name in the URL to this page, where in many other places the page is referred to as simply About.StartPage.

You might wonder where the upper right hand menu and the footer are in the code since they are not specified in this class. They are specified in a superclass of this one. The hierarchy is that this class extends (aka subclasses) the Util.Template.Page. Every page in our current build subclasses Util.Template.Page, either directly or by subclassing Util.Template.SecurePage, which is a subclass of Util.Template.Page.

The template includes a bunch of possible clipboard links along the right hand side so that the css for this page “turns on” the ones that will show on this page. Everything above the tabs, the right hand side of the page, and the footer are all specified in the superclass. Every page in our current build is all about the tabs, with forms, tables, and various user interactions going on within that tabbed pane.

There are some methods in the template to do common functions, such as putting instructions on the page. You might wonder about having the javascript logic in this page for showing the second tab instead of the first based on a URL parameter, rather than putting that in the template for all pages to use. This is the only page we currently have where we link into something other than the first tab (by adding ?tabby=2 after the URL), however, so there has been no need to abstract this logic to date.

The class declaration includes [ Language = mvbasic ]. Unless otherwise specified, every method in this class will be written in MultiValue BASIC, aka DataBASIC.

The change history comment block:
/*
* About.StartPage
* ******************
* Change History * etc
This block can go into any source code — any class, external stylesheets, external javascript documents, and MVBASIC subroutines, for example. The latter is the reason for the asterisks at the start of each line, with the outer /*   */ comment block lines removed in that case.

One thing to get accustomed to with these Zen pages is that there are so many ways to put a comment in the code, and how you can specify a comment depends on where you are in the code. If you are in the XData section, written in XML, you use those funky XML comments <!– comment here –> while if you are in the class structure you have three-slash, two-slash, and /* comment here */ style comments. In a JavaScript method you have typical js comments and in an mvbasic method you have typical mvbasic comments.

Everything else:
You can see how much I can write about the class declaration and the comments above and below it, so I’ll stop here with the explanations except to indicate the outline for the rest of the class. We have a block of Parameters (for the compiler) and Properties for the class. Following that is a section of XML, specifying our tabs and what is on each tab. Following that are any methods we have, typically with mvbasic methods first, followed by javascript methods. Most of our classes have far more of these than this one has.

This tour of a Zen page might not have been very entertaining, but should give a hint at the framework we are using for building our software. [Hey Dawn, why do you call it software when it is just a web site?]
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s