171 lines
9.6 KiB
HTML
171 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Foundry Documentation - Layout templates</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
</head>
|
|
<body>
|
|
<h1>Layout templates</h1>
|
|
<main>
|
|
<p>
|
|
The layout templates are used by the web designer to create the HTML of the web
|
|
page. With Foundry the designer has almost complete control over the HTML. Despite
|
|
the elements which correspond to HTML 5 elements most other elements which can
|
|
be used in the templates do not create HTML. A complete list of the elements which
|
|
can be used in the layout templates can be found in the
|
|
<a href="#template-tags-reference">Template Tags Reference</a>.
|
|
</p>
|
|
<p>
|
|
Which template is used is decided by Foundry using the definitions in the
|
|
<code>conf/templates</code> file. The top layer of templates which are parsed first
|
|
are the application layouts. Which layout is used for a application is decided by
|
|
Foundry using the <code>application</code> and <code>class</code> attributes of
|
|
of <code>bebop:page</code> element in the data tree. The values of these attributes
|
|
a set in the Java code or in the JSP templates used.
|
|
|
|
</p>
|
|
|
|
<h2>Application layout templates</h2>
|
|
<h3>How Foundry determines which application layout template to use</h3>
|
|
<p>
|
|
Which template is used for which application is determined using the
|
|
<code>applications</code> section in the <code>conf/templates.xml</code> file.
|
|
The <code>applications</code> element may contain any number of
|
|
<code>application</code> elements. Each application element can have three
|
|
attributes:
|
|
</p>
|
|
<dl>
|
|
<dt><code>name</code> (mandatatory)</dt>
|
|
<dd>
|
|
The name of the application which is the value of the <code>application</code>
|
|
attribute from the data tree. To associate applications which do not set the
|
|
<code>application</code> attribute in the data tree the value <code>none</code>
|
|
can be used.
|
|
</dd>
|
|
<dt><code>class</code> (optional)</dt>
|
|
<dd>
|
|
The class of the application page shown. This is the value of the
|
|
<code>class</code> attribute from the data tree.
|
|
</dd>
|
|
<dt><code>origin</code> (optional)</dt>
|
|
<dd>
|
|
The origin of the template. In the default theme this is used to associate
|
|
the backend applications which like the content center with the
|
|
internal <code>admin-layout.xml</code> template provided by Foundry. It can also
|
|
be used to associate an application with an layout template from the parent
|
|
theme.
|
|
</dd>
|
|
</dl>
|
|
<p>
|
|
The <code>applications</code> element in the <code>conf/templates.xml</code> file
|
|
should also contain a <em>single</em> single default element which defines which
|
|
layout template should be used when no other matches.
|
|
</p>
|
|
<p>
|
|
Foundry tries to find the layout template to use as follows:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
If there an <code>application</code> element where both <code>name</code> and
|
|
<code>class</code> match the values from the data tree this template is used.
|
|
</li>
|
|
<li>
|
|
Otherwise Foundry checks if there is an <code>application</code> element
|
|
without a <code>class</code> attribute where value of the <code>name</code>
|
|
attribute matches the value from the data tree.
|
|
</li>
|
|
<li>
|
|
If this also fails and there is a <code>default</code> element the template
|
|
from the <code>default</code> element is used.
|
|
</li>
|
|
<li>
|
|
If there is no <code>default</code> element the internal default layout template
|
|
is used.
|
|
</li>
|
|
</ul>
|
|
<h3>The structure of a application layout template</h3>
|
|
<p>
|
|
An layout template is a normal XML file. The root element is the
|
|
<a href="#page-layout"><code>page-layout</code></a> element.
|
|
The first child should be a <a href="#head">head</a> element. The <code>head</code>
|
|
element is equivalent of the HTML head element. Inside the <code>head</code>
|
|
element the title of (the string shown as title of the browser window) can
|
|
be determined using the <a href="#title"><code>title</code></a> element. Also
|
|
the <code>head</code> is the place to load the CSS and JavaScript files and where
|
|
to put meta informations.
|
|
</p>
|
|
<p>
|
|
After the <code>head</code> there should be a <a href="#body"><code>body</code></a>
|
|
element. Inside the <code>body</code> element the HTML structure is defined.
|
|
At some point you may want to insert the content of a content item or of a Portlet.
|
|
This is done using elements like <a href="#content-item"><code>content-item</code></a> element
|
|
or
|
|
<a href="#portal-grid-workspace-column-portlets"><code>portal-grid-workspace-column-portlets</code></a>.
|
|
The layout of the individual content item or Portlet is defined in separate
|
|
templates.
|
|
</p>
|
|
|
|
<h2>Content Item layout templates</h2>
|
|
<p>
|
|
The content layout templates which are found in the
|
|
<code>templates/content-items</code> folder are used to create the HTML for
|
|
content items in the list, link and detail views. Which template is used for which
|
|
content item is determined using the <code>content-items</code> section in the
|
|
<code>conf/templates.xml</code> file.
|
|
</p>
|
|
<h3>Selecting the Content Item layout template to use</h3>
|
|
<p>
|
|
The <code>content-items</code> element in the <code>conf/templates.xml</code> file
|
|
has three sub elements: <code>detail</code>, <code>link</code> and
|
|
<code>list</code>. The <code>content-item</code> elements in these elements are
|
|
determining which template is used for which content type. There are several
|
|
attributes for selecting the template. For a description of the available attributes
|
|
please refer to the documentation of the
|
|
<a href="#content-item"><code>content-item</code></a> tag.
|
|
</p>
|
|
<h3>Structure of a Content Item layout template</h3>
|
|
<p>
|
|
Like the application layout templates a content item layout template is a XML file.
|
|
The root element is the <code>content-item-layout</code> element. Inside this
|
|
element all HTML producing elements can be used. For some content types there are
|
|
special elements for outputting special properties. For example the for news item
|
|
there is an elements <a href="#news-date"><code>news-date</code></a> which outputs
|
|
the date of a news. This element also provides an interface for designer to
|
|
customise the format in which the date is shown. There is is also an general tag
|
|
<a href="#show-property"><code>show-property</code></a> which can be used to
|
|
create a basic template for an unsupported content type.
|
|
</p>
|
|
|
|
<h2>Portlet templates</h2>
|
|
<p>
|
|
For Portlets the system is similar to the system for content items. Which template
|
|
is used for a specific Portlet is determined using the child elements of the
|
|
<code>portlets</code> element in the <code>conf/templates.xml</code> file. The
|
|
<code>portlet</code> elements which contain the path of the template to use can have
|
|
two child elements:
|
|
</p>
|
|
<dl>
|
|
<dt>class</dt>
|
|
<dd>
|
|
The class name of the Portlet.
|
|
</dd>
|
|
<dt>workspace</dt>
|
|
<dd>
|
|
The name of the workspace in which the Portlet is shown.
|
|
</dd>
|
|
</dl>
|
|
<p>
|
|
Foundry first tries to find a match for both <code>class</code> and
|
|
<code>workspace</code>. If there is no matching <code>portlet</code> element in
|
|
<code>conf/templates.xml</code> Foundry tries to find a match for the class name
|
|
only. If this also fails it used the templates defined in
|
|
<code>portlets/default</code> in the <code>conf/templates.xml</code> file.
|
|
</p>
|
|
<p>
|
|
The root element of a Portlet layout template is the <code>portlet-layout</code>
|
|
element. Inside this element all HTML elements can be used. For each Portlet type
|
|
there will be least on specific element which outputs the content of the Portlet.
|
|
</p>
|
|
</main>
|
|
</body>
|
|
</html> |