Creating a Datadictionary Term

CCC Tags for Designers

Civic Content Control 4.0

Tags for Designers

Draft :Version 1.0

Date5thFebruary 2004

Maurice Franceschi

This guide contains proprietary information, which is protected by copyright. The information in this guide is subject to change without notice and does not represent a commitment on the part of Civic Computing. The software described in this guide is furnished under a license or non-disclosure agreement. This software may be used or copied only in accordance with the terms of this agreement. No part of this guide may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying and recording, for any purpose other than the purchaser’s personal use without the written permission of Civic Computing Limited.

Civic Computing

12 South Charlotte Street

Edinburgh, EH2 4AW

Tel: 0131-624-9830 / Fax: 0131-624-9831

Index

Introduction.

Example.

Dreamweaver

Tag Description Library

Mandatory Definitions for Templates

Snippets

Not Dreamweaver

Template Development.

Display Template Tags

Some Key Attributes

Display Page Element Tags:

CCC v 4 Update for displayPageElement

Display Named Page Element:

Display Index Tag

Display Named Index

Ordered Navigation

Display Flagged Pages Tag:

Display Related Content Tag:

IAm Related

Category Items

Display User Categorized

New Versions of Flagged and Related Tags

XML

Count Pages

Search Form

Search Results

Parents (breadcrumbs)

Homepage Url

Content Url

Current Content Url

Content Drop Down

Current Date

Content ID

Parent ID

Named Content Url

Creation Date

Published Date

Editor

Editor HTML

Menu Tags

Content Templates

General Overview

Creating Content templates

Validation

Introduction.

When building Display Templates within Content Control, the web designer will be coding using the usual HTML or XHTML, as entered manually or produced by a design tool such as Dreamweaver. However, in addition to the use X/HTML code the Designer will have at his or her disposal a number of Civic Content Control (CCC) ‘Tags’ that are inserted into the rest of the code.

When a Page is requested by the Web Server, each of these tags is detected by the CCC system which will then access information from the Oracle/SQL Server database and generate X/HTML code that always reflects the latest content and navigation on the website.

Each Tag can have a number of elements and attributes which allows flexibility in design.

This document will describe all the Tags available to the web designer and assumes that the reader has a reasonable knowledge of HTML, CSS and a web design package such as Dreamweaver.

It is strongly recommended that web designers receive training from Civic.

Example.

The idea become clear if we examine extracts from an existing Display Template.

<div id="breadcrumbarea"<ccctl:Parents showType="NAME" separator=" | "/<img src="images/spacer.gif" alt=""</div>

<div id="container">

This is an instance of the Tag ‘Parents’ that generates ‘breadcrumbs’. It has the attribute Separator defined as space-bar-space. The tag is then followed by HTML code defining an image.

If we now look at the generated code that is processed by the browser we can see that the system has generated HTML that defines a hyperlink (to ‘About Us’ Page with id 37) followed by a space-bar-space followed by the last part of the Breadcrumbs which is not a hyperlink itself.

<div id="breadcrumbarea">

<ahref="servlet/controller?p_service=Content.show&p_applic=CCC&

pContentID=37" >About Us</a | Recruitment<img src="images/spacer.gif" alt=""</div>

===

<div id="middle">

<h1<ccctl:displayPageElement element="HEADER" /</h1>

</div>

Here, the designer wants to extract the text from field ‘Header’ which is filled in when a new Page is added in Content Control and is then held in the database when the Page is saved. The text will be used as the actual main Header of the Page. It will then be followed by the actual Content of the Page, which is extracted from the database.

<p>The role of NHS Quality Improvement Scotland (NHS QIS) is to improve the quality of healthcare across Scotland. We are achieving this by working with NHS professionals and the public in developing and putting into practice a national strategy.</p>

Dreamweaver

Tag Description Library

The CCC Tags can be imported as a Tag Description Library into Dreamweaver so that they are available to the designer just as the usual X/HTML tags are.

If ‘ccctl’ is typed in during an edit using Dreamweaver then the list of CCC Tags will be prompted as per the usual X/HTML code.

Civic will provide the TDL.

Note that the TDL will also include ‘Back-End’ Tags that are used by Content Control itself – these will not work on the Website. Any tag not mentiond in this document will be a back-end Tag.

Mandatory Definitions for Templates

You must add the following lines at the very top of every template you create.

Dreamweaver can be configured to have these lines as part of the default template.

Tag Library Definition

<%@ taglib uri="/WEB-INF/Communicata-Taglib.tld" prefix="ctl" %>

<%@ taglib uri="/WEB-INF/CCC-Taglib.tld" prefix="ccctl" %>

then any other TLD’s in use.

Error Page

<%@ page errorPage="error.jsp" %>

No Cache Tag

<ctl:pageNotCachedTag />

Check Content Tag

<ccctl:CheckContent />

then the template proper …

e.g.

<%@ taglib uri="/WEB-INF/Communicata-Taglib.tld" prefix="ctl" %>

<%@ taglib uri="/WEB-INF/CCC-Taglib.tld" prefix="ccctl" %>

<%@ taglib uri="/WEB-INF/Menu-Taglib.tld" prefix="mtl" %>

<%@ page errorPage="error.jsp" %>

<ctl:pageNotCachedTag />

<ccctl:CheckContent />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>

Civic will provide a template.

Snippets

Civic may provide code Snippets that canbe imported into Dreamweaver for further use.

Not Dreamweaver

You will find that other packages such as Sun Studio have equivalent features to Dreamweaver.

Template Development.

Although it is possible to change the JSP directly within CCC, it is preferable to create the JSP once via the system, and from then on develop in Dreamweaver and then FTP the resulting templates to the CCC templates directory.

Display Template Tags

The following sections describe the tags that you can use to show the content of your Pages and define the Design and Navigation of your Pages and the Website.

Some Key Attributes

There are many attributes associated with the Tags described in this section.

We draw your attention to some of the most common or important.

startText, endText

allows you to define text or html to appear before, after a list or individual items

displayStartTextIfEmpty, displayEndTextIfEmpty

whether ror not to show something or nothing if not content is retrieved

pageID, folderID

tell the Tag to retrieve content from another Page or Folder

separator

some tags assume a default <br/> between items, use separator=”” or alternative

useTable

some tags will generate a table by default, set useTable=”N” to suppress this

displayElementOnly

some content will be retrieved with associated HTML, set to “Y” to strip all such HTML and just return the pure text or image name.

Display Page Element Tags:

Displays an element of aPage or its Parent Folder.

Only one Element can be nominated per Tag, but there can be as many instances of the Tag as wanted in the same template.

<ccctl:displayPageElement element="Element Name"/>

Element Name Options:

These Elements relate to the information about a Page as entered by the users when the create or update a Page in CCC.

NAME – Page Name

HEADER – Page header

INDEX_TITLE – Page Index Title

SUMMARY – Page Summary

CONTENT – Page Content

PUBLISHED_DATE – Page Published Date

AUTHOR – Page Author

STYLESHEET – Stylesheet associated with the page ( to be put in header tag )

JSCRIPT– JavaScript associated with the page ( to be put in header tag )

These Elements correspond to the following Page fields entered when by the CCC user.

JSCRIPTBODY – Javascript calls associated with the page ( to be put in body tag )

These Elements relate to the information about the Folder a Page is in.

Finally, we also have these two Elements.

ID – Content id

PARENT_ID – Parent content id

The displayPageElement can have any of the following attributes.

All attributes are optional unless otherwise indicated.

elementOnly

if “Y” in the cases where extra html is added, such as parentbgcolour, parentbgimage and parentmainimage, all the extra html will be stripped and only the element itself will be displayed

startText

text, image or html tag that should appear before the element

displayStartTextIfEmpty

if “Y” when startText is included, the startText will be displayed even if the element is empty

endText

text,image or html tag that should appear after the element

displayEndTextIfEmpty

if “Y” when endText is included, the endText will be displayed even if the element is empty

pageID

set to a page id different from the one being displayed, to display the page elements from that page.

Will not work for the elements that come from the parent folder.

stylesheetID

set to a stylesheet id different from the one set for the current content, to display that stylesheet.

Will only work for the stylesheet element.

CCC v 4 Update for displayPageElement

To display content on display templates the displayPageElementtag is used in exactly the same way as in the CCC v 3 by simply passing the content element name and removing the pPageElement or pPageElementParent prefix from the content template fieldname.

For example to display the content element pPageElement FOOTER:

<ccctl:displayPageElement element="FOOTER"/>

Additional Attributes.

contentType
The values are PAGE or FOLDER, which will retrieve an element from either the Page or Folder.

separator
If the content element is a multi-select list then in order to separate the values selected the tag is extended to include a separator attribute while maintaining the formatting attributes of the tag.

For example:

<ccctl:displayPageElement element="PRODUCTTYPE" startText="<b>Product Type:</b<br/>" displayStartTextIfEmpty="Y" separator=" / "/>

replace

replaces found html or text with comma delimited replacement string.

For example:

<ccctl:displayPageElement element="PRODUCTTYPE" replace=”&, &”/>

Note that the displayPageElement tag can still be used to display non-custom content elements such as name, background image, etc.

Display Named Page Element:

Works like the page element tag except that it has the option of setting a page name that it searches for in the top-level folder structure of the current content. If it finds a page with that name, it uses the page id for that page as the page id parameter in the page element tag. If not, it functions with the current page.

<ccctl:displayNamedPageElement element="Element Name" pageName=”name” />

It has all the attributes as associated with the displayPageEement tag above.

Plus its own attribute.

pageName

optional

the name of the Page

Display Index Tag

Displays the index for the parent folder. Normally, the ‘index’ is a generated list of links to all the other Pages and Sub-Folders of the Folder that the current Page is in.

<ccctl:displayIndex showParentLink="Y" />

Tag can be displayed with any combination of the following attributes.

All attributes are optional unless otherwise indicated.

folderID

can be set to a folder id different from the one being displayed, to display the folder index for that folder.

indexTitleIsLink

if “N” the index title will not be a link to the content

indexTitleInclude

text that will be included in the index title link or span tag for the pages that are not currently being displayed, can have class, onClick, etc.

currentIndexTitleInclude

text that will be included in the index title span tag for the index title for the page that is currently displayed, can have class, onClick, etc.

showSummary

if "Y" it will display the page summary for each of the pages in the index

summaryIsLink

if "Y" it will make the page summary a link to the page for each of the pages in the index

summaryStartTag

text, image or html tag that should appear before the summary of each page in the index

summaryCloseTag

text, image or html tag that should appear after the summary of each page in the index

summaryInclude

text that will be included in the summary link or span tag, can have class, onClick, etc.

endLink

text or image that should appear at the end of each index item as a link to the index item

endLinkStartTag

text, image or html tag that should appear before the endLink of each item

endLinkCloseTag

text, image or html tag that should appear after the endLink of each item

endLinkInclude

optional

text that will be included in the end link tag, can have class, onClick, etc.

startText

text, image or html tag that should appear before the index

displayStartTextIfEmpty

if “Y” when startText is included, the startText will be displayed even if the index is empty

endText

text, image or html tag that should appear after the index

displayEndTextIfEmpty

if “Y” when endText is included, the endText will be displayed even if the index is empty

showPages

optional

if “N” the index will not display any pages, including pages linked to by index links

showFolders

if “N” the index will not display any folders, including folders linked to by index links

showExternalLinks

if “N” the index will display any external links that are linked to by index links

rightItem

text, image or html tag that should appear after the index title

rightItemIsLink

if “Y” the right item will be a link to the content

leftItem

text, image or html tag that should appear before the index title

leftItemIsLink

if “Y” the left item will be a link to the content

displayLimit

maximum number of items that can be displayed in the index, otherwise all the items will be shown in the index

moreLink

text or image that will be a link to the rest of the index items if number of items in index is limited, default is “more”

backLink

text or image that will be a link back to the previous index items if number of items in index is limited, default is “back”

beforeNavigation

text, image or html tag that will appear before the more and back links if number of items in index is limited

betweenNavigation

text, image or html tag that will appear between the more and back links if number of items in index is limited

afterNavigation

text, image or html tag that will appear after the more and back links if number of items in index is limited

useTable

optional – but recommendation is to always add this attribute as ‘N’

if “N” the index will not be in a table

trInclude

text that will be included in the row(<tr>) tag for each row for the pages that are not currently being displayed if tables are being used, can have bgcolor, color, class, etc.

currentTrInclude

text that will be included in the row(<tr>) tag for the index title for the page that is currently displayed if tables are being used, can have bgcolor, color, class, etc.

separator

text, image or html tag that will be displayed between the index links if tables are not being used, default is <br>

showSitePublish

if “Y’ the last date the item was published on the site will be included after each index title

showParentLink

if "Y" the index will include a link to the folder parent

beforeParentLink

text or image that will appear before the text of the link to the parent folder and will part of the link

includeArchivedItems

if “Y” the index will include archived items

Examples of the displayIndex Tag and attributes from above

<ccctl:displayIndex useTable="Y"

displayLimit="5"

beforeNavigation=

"<table width=\"100%\" cellspacing=0 cellpadding=0>

<tr>

<td align=left>" betweenNavigation="</td>

td align=right>" afterNavigation="</td>

</tr>

</table>"/>

Will display five index items in a table with the more and back links below so that the back is left aligned and the more is right aligned. To use this example in a display template it must be between open and close table tags.

<ccctl:displayIndex showParentLink="Y" useTable="N"

includeArchivedItems="Y" separator=" | " />

Will display the index items with “ | “ between them. It will include the link to the folder parent and archived items.

Display Named Index

Works like the display index tag except that it has the option of setting a folder name that it searches for in the top-level folder structure of the current content. If it finds a folder with that name, it uses the folder id for that folder as the folder id parameter in the index tag. If not, it functions with the current folder.

<ccctl:displayNamedIndex showParentLink="Y" folderName=”name”/>

It has all the attributes in the page element tag.

Also has attribute

folderName

optional

OrderedNavigation

Generates a link to the next object by the index order (including items that are set to “Do Not Use In Index”)

<ccctl:orderedNavigation innerText=”next page” direction =”forward”/>