Telemaco Manual

Telemaco Reference Manual

ver. 0.99

P. Merialdo, M. Magnante, G. Mecca

Telemaco is the software component of the Araneus Web-Base Management System (WBMS) that supports the design of the graphical layout of a site. Telemaco takes as input a .PL file, containing Penelope source code (see the Penelope user manual) and generates a page template for each page scheme. A page template can be seen as a HTML page with variables: each variable corresponds to a page attribute, as they are specified in the Penelope source code. The generation of page templates is based on style sheets. A style sheet describes the graphical layout to be associated with each type of page attribute in the template generation process. For instance it is possible to specify that attributes of type TEXT should appear in blue, with font face set to Arial, items of attributes of type LIST-OF should be organized as HTML tables, with a green background color, and so on.

Once Telemaco has generated page templates, it is possible to manipulate them, in order to reach the most appealing graphical layout. Page templates are text files: to manipulate them, it is possible to use any tool, from the simpler plain text editor to the most sophisticated WYSIWYG HTML editor.

Page templates allow to effectively design the presentation of a site. Once you are ready to generate the site, first you have to save your work (that is, the graphical layout of your pages) in an appropriate database, which will be used by the Penelope engine. Telemaco gives you support with a specific functionality to convert the presentation of the site, as it appears through page templates, in the database used by Penelope. The database consists in a set of files, one file for each page scheme, with extension ".ATS" (Attribute Styles). A ".ATS" file stores the graphical directives associated to the page attributes. For example, consider a page scheme ProfessorPage, dealing with information about professors; assume that such a page scheme has the attributes ProfName, E-Mail, and Room. In the ".ATS" file associated to that page scheme, Telemaco stores the graphical directives of the three attributes.

1. Style Sheets

Style sheets are used in Telemaco to associate graphical directives to attribute types. A .PL file contains several DEFINE-PAGE statements, each of which specifies the logical structure of a page scheme. A style sheet describes the graphical layout to be associated with each attribute type. In the .PL file there are two ways of associating styles with page-schemes:

a "default" style for the whole site can be specified in the file header, using the STYLE clause of the SCHEME statement, as follows; note that the file name must contain also the path of the file,:

SCHEME http://www.difa.unibas.it
STYLE ..\styles\difa.sty
ON department
...

this header identifies a style ..\styles\difa.sty as a default style to be applied to all page-schemes in the site; if the default style is not specified, Telemaco will use its own pre-defined style file;

the "default style" can be overridden by associating a different style with each single page-scheme; this is done by means of the STYLE clause of the DEFINE PAGE statemet; the argument of the STYLE clause is the file name of a style sheet, as follows:

DEFINE-PAGE Person : <Name>
STYLE ..\styles\other.sty
AS ...

in this case, style ..\styles\other.sty will be used by Telemaco for page-scheme Person, instead of the default style defined above.

Observe that paths can be absolute or relative. An example of absolute path may be: C:\programs\AraneusWBMS\styles\fancy.STY; if you prefer to define a relative path, remember that the root node is the folder containing the Penelope source code.

Figure 1 presents an example of Style Sheet.

/* this is the fancy.sty Araneus style sheet */

HEADER: [<HTML>

<HEAD>This is the HTML header</HEAD>

<TITLE>This is the page title</TITLE>

<HR>

]

TEXT: [] []

IMAGE: [] [] [ALT="Image"]

LINK: [] [] [ ]

/* first anchor of any link attribute */

ANCHOR 1: [] []

/* second anchor of any link attribute */

ANCHOR 2: [] []

/* first level list */

LIST 1: [<TABLE>] [</TABLE>]

ITEM LIST 1: [<TR>] [</TR>]

ITEM ELEMENT LIST 1: [<TD>] [</TD>]

/* second level list */

LIST 2:[<UL>] [</UL>]

ITEM LIST 2:[<LI>] []

ITEM ELEMENT LIST 2:[] []

FOOTER:[<HR>

This site was created by means of tools developed in the framework

of the <A HREF="http://poincare.dia.uniroma3.it:8080/Araneus>Araneus Project</A>

<A HREF="Mailto://Webmaster@www.aaa.com">WebMaster</A>

</CENTER>

</BODY>

</HTML>

]

Figure 1: an example of Style Sheet

The graphical layout of pages having the style sheet shown in Figure 1 begins and ends with the text strings associated to the HEADER and FOOTER clauses respectively; each TEXT attribute has the "Arial" font face; the first anchor of each attribute is written in Italics, and the second one is emphasized; first level lists are depicted as tables, whereas second level lists appear as unordered lists.

In essence, we can see an HTML page as composed by several elements, namely a header, a set of attributes and a footer. Header and footer are HTML constant text strings that represent the start and the end of a page, respectively; attributes correspond to those specified in the Penelope source code. A style sheet specifies the contents of header and footer and the presentation of the attributes as well.

Note that to define the graphical directive of an attribute of type LIST-OF, we need to exploit the structure of the list itself. A list is an ordered set of items; each item is a tuple, that is a set of element. Therefore, we have to specify the graphical directives for the list, for its items, and for the items’ elements.

Consider for example the following Penelope source code:

DEFINE PAGE DummyPage

STYLE .\styles\fancy.sty;

AS …

FirstLevelList : LIST-OF (

A: TEXT = <Aattr>;

B: IMAGE = <Battr>;

SecondLevelList: LIST-OF(

E: TEXT = <Eattr>;

);

…

END;

According to the graphical directives of the style sheet fancy.sty, the corresponding instance of that portion of page will appear as follows:

<TABLE>

<TR>

<UL>

<LI>e11

<LI>e12

<LI>…

</UL>

</TD>

</TR>

<TR>

<UL>

<LI>e21

<LI>e22

<LI>…

</UL>

</TD>

</TR>

<TR>

…

</TR>

[</TABLE>]

where a1, a2, b1, b2, e11, e12, … represent values of the database attributes Aattr, Battr, Eattr.

Figure 2 explains in details the elements of a style sheet.

/* This is a comment. Use a C-like style to include comments */

HEADER:[html text that starts a page]

TEXT:[bunch of HTML tags which precedes the value of a TEXT attribute]

[bunch of HTML tags which follows the value of a TEXT attribute]

IMAGE:[bunch of HTML tags which precedes the value of an IMG attribute]

[bunch of HTML tags which precedes the value of an IMG attribute]

[bunch of HTML attributes for the HTML <IMG> tag]

LINK:[bunch of HTML tags which precedes the value of a LINK attribute]

[bunch of HTML tags which follows the value of a LINK attribute]

[bunch of HTML attributes for the HTML <A> tag]

ANCHOR i:

[bunch of HTML tags which precedes the value of the i-th anchor of a LINK attribute]

[bunch of HTML tags which follows the value of the i-th anchor of a LINK attribute]

/* i-th level list */

LIST i:

[bunch of HTML tags which precedes a LIST-OF attribute, nested at the i-th level]

[bunch of HTML tags which follows a LIST-OF attribute, nested at the i-th level]

ITEM LIST i:

[bunch of HTML tags which precedes each item (tuple) of a LIST-OF attribute, nested at the i-th level]

[bunch of HTML tags which follows each item (tuple) of a LIST-OF attribute, nested at the i-th level]

ITEM ELEMENT LIST i:

[bunch of HTML tags which precedes the elements of each item (tuple) of a LIST-OF attribute, nested at the i-th level]

[bunch of HTML tags which follows the elements of each item (tuple) of a LIST-OF attribute, nested at the i-th level]

FOOTER:[html text that concludes a page]

Figure 2: style sheet details.

1.1 Style Sheets with parameters

In many applications it is effective to define parameters into style sheet. Consider again the style sheet shown in Figure 1. Suppose that you want to apply the same graphical layout to several page schemes, but with minor nuances. For example, you might be interested in having different background colors for different page schemes. It is not reasonable that you define several style sheets, one for each background color. In Telemaco, you can simply introduce parameters into your style sheet; when you specify the usage of a style sheet with parameters in the STYLE clause of the Penelope source code, you also define the actual value of the parameter. Figure 3 shows a style sheet with two parameters: the first one is used to describe the background color of a page scheme, the second one specifies the file name of an image to be included in the footer. Note that parameters are specified by the special symbol $VARi, where i is a progressive integer. Figure 4 shows (portions of) a Penelope source code: both page schemes ArtistPage and MuseumPage share the style of Figure 3. Observe that the actual parameters are enclosed in parenthesis.

/* ***************************************************************************************

This is the EASY.STY style sheet

It uses two parameters $var1 and $var2

$var1 indicates the bgcolor of the page

$var2 indicates the file name of an image to be included in the footer

**************************************************************************************** */

HEADER: [<HTML>

<HEAD>This is the HTML header</HEAD>

<TITLE>This is the page title</TITLE>

<HR>

]

TEXT: [] []

IMAGE: [] [] []

LINK: [] [] [ ]

/* first anchor of any link attribute */

ANCHOR 1: [] []

/* first level list */

LIST 1: [<TABLE>] [</TABLE>]

ITEM LIST 1: [<TR>] [</TR>]

ITEM ELEMENT LIST 1: [<TD>] [</TD>]

FOOTER:[<HR>

<A HREF="Mailto://Webmaster@www.aaa.com">WebMaster</A>

</CENTER>

</BODY>

</HTML>

]

Figure 3: an example of parameterized Style Sheet (easy.STY)

…

DEFINE PAGE ArtistPage

STYLE .\Styles\easy.STY(blue, Artist.jpg)

AS ...

…

END

DEFINE PAGE MuseumPage

STYLE .\Styles\easy.STY(red, Global.gif)

AS …

…

END

…

Figure 4: Penelope Source code using the easy.STY style sheet of Figure 3

2 Page Templates

A page template is a sample HTML page: it aims at showing how the actual pages described in the Penelope DEFINE-PAGE statement will appear. Telemaco creates page templates according (i) to the logical structure of the AS clause, and (ii) to the style sheet specified in the STYLE clause.

In a page template values of page attributes are replaced by placeholders. Each placeholder is build from the name of the corresponding page attribute. Placeholders are marked by the special symbol "$" (see below). Since it is supposed that the items (tuples) of a list attribute are repeated more than once, in page templates nested attributes’ placeholders are shown twice. Therefore, for nested attributes we have twin tuples as placeholders (see below). Moreover, image attributes are replaced by a sample image.

Page Template are text files with a ".TPL" extension, and they are stored in the folder named "TelemacoTemplate", which is automatically created by the system in the same folder containing your Penelope source code.

Figure 6 shows the page template CoursePage.TPL. It corresponds to the page scheme CoursePage, whose DEFINE PAGE statement appears in Figure 5.

2.1 Handling Templates

Page template are working tools, you can manipulate them in order to reach the most appealing graphical layout. Since page templates are text files, you can change their contents using your preferred editor: from the simpler plain text editor to the most sophisticated WYSIWYG HTML editor.

You can modify page template as you want: change HTML tags, introduce JAVA scripts, comments and constant string, images or any multimedia object you need to create the most appealing presentation of your pages. You have only to follow a few simple rules, which allow Telemaco to parse the page Template and save the presentation for the Penelope Engine.

In particular the following rules must be followed:

do not modify attribute placeholders;

do not change the order of attributes;

keep the twin tuples of a LIST-OF attribute identical.

2.1.1 Introducing constant strings

Note that, in handling page templates, you can also introduce constant strings, to improve the presentation of information in Web pages. Consider for example the page scheme ProfPage, as declared in the following Penelope source code:

DEFINE PAGE ProfPage <Name>

STYLE …

AS URL(<Name>);

Name: TEXT = <Name>;

E-mail: TEXT = <E-Mail>;

Room: TEXT = <Room>;

CourseList: LIST-OF (

CourseName : TEXT = <CourseName>;

);

USING Professor

END

Figure 5: DEFINE PAGE statement for the page scheme ProfPage

The page template generated by Telemaco would appear something like:

…

$Name$

$E-mail$

$Room$

<UL>

<LI>$a.CourseName$

</UL>

…

For a better presentation, you might desire that the values of the attributes e-mail and room are preceded by comments (not HTML comment, which are hidden to the end-user, but formatted text strings shown by the browser) that enrich the presentation of the page data. For example you can add to the page template text strings like "Room: " and "E-Mail: " before the values of the attributes Room and E-Mail, and a text string like "<H2>Courses: <H2>", before the attribute CourseList.

…

FONT FACE="Arial">$Name$

E-Mail: <$E-mail$

Room: <$Room$

<H2>Courses: </H2>

<UL>

<LI>$a.CourseName$

</UL>

…

There are no limitations to the introduction of text strings. Fell free to add any text (possibly including text strings, HTML comments, java scripts, etc.) to page templates.

2.1.2 Handling List attributes

To explain Rule 3, let us discuss a simple example. Consider again the page scheme ProfPage. In particular consider the list attribute "CourseList", which describes a list of TEXT attributes, "CourseName".

A portion of a possible page template might be as follows:

<UL>

<LI>$a.CourseName$

</UL>

Now, suppose we are interested in changing the list into an ordered list, and to increase the font face of each item. The following code would be valid:

<OL>

<LI>$a.CourseName$

</OL>

On the contrary, lists whose items are not identically repeated twice generate a Telemaco ERROR. For example, the following portion of template is wrong, since the two items are not identical:

<UL>

<LI>$a.CourseName$

<LI>$a.CourseName$

</UL>

Once you have obtained your preferred presentation, you can save the graphical layout in the Telemaco Attribute Style databases.

3 Attribute Styles

Telemaco creates an Attribute Styles database for each page scheme of the Penelope source code. Attribute Styles associate graphical directives to each attribute defined in the DEFINE-PAGE clause of the Penelope source code. Attribute style databases are files, which store attributes’ graphical directives. These files are placed in the folder named TelemacoTemplate, and have a ".ATS" extension.

Figure 5 presents the source code of the CoursePage page-scheme. Figure 6 shows an example of an Attribute Style database: it is the file (named CoursePage.ATS) that contains the presentation directives for the attributes of the CoursePage page-scheme. Note that, there is a couple of directives for each attribute declared in the DEFINE PAGE statement: the values of each attributes will be embedded between them.

DEFINE PAGE CoursePage : <CourseName>

STYLE sites\styles\Pop.STY(118,250,latodifa.jpg,Courses)

AS URL(<CourseName>);

Name : TEXT = <CourseName>;

Description : TEXT = <Description>;

ToInstructor : LINK-TO PersonPage(

URL (<Instructor>);

InstructorName : TEXT = <Instructor>;

);

USING Course

END

Figure 6: Penelope source code for CoursePage

Header:[<HTML>

<HEAD>

<TITLE>Department of Computer Science</TITLE>

</HEAD>

<TR>

<TD ROWSPAN="4" WIDTH="25%" VALIGN="top"><IMG WIDTH=118 HEIGHT=250

SRC="../icons/latodifa.jpg"></TD>

Home</A>

|

Research</A>

|

People</A>

|

Courses</A>

|

WebMaster</A>

</TD>

</TR>

<TR>

<H1>Courses</H1>

<HR>

]

Name :[]

[]

Description :[]

[]

ToInstructor :[]

[]

ToInstructor.InstructorName :[<A HREF="PersonPage.TPL" >]

[</A>]

Footer:[

</TD>

</TR>

<TR>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>]

Figure 7: attribute style for the page scheme CoursePage

3.1 Templates and Attribute Styles Alignment

Note that, the Penelope engine builds the actual HTML pages starting (i) from the logical structure of the page-scheme, as it is declared in the AS clause of the DEFINE-PAGE statement, and (ii) from the graphical directives stored in the Attribute Style databases. Therefore, whenever you modify the graphical layout of some page-scheme through its page template, you must remember to align page templates and Attribute Style databases, that is, to save your presentation.