[Cocoon Lenya Wiki] New: ModifyingHTMLStructureHowto

[le...@cocoon.apache.org]

   Date: 2004-07-06T15:05:53
   Editor: JohannesJander <su...@jandermail.de>
   Wiki: Cocoon Lenya Wiki
   Page: ModifyingHTMLStructureHowto
   URL: http://wiki.apache.org/cocoon-lenya/ModifyingHTMLStructureHowto

   no comment

New Page:

===  Overview ===
This Howto describes how you can influence the logical structure of the pages in your Lenya application. If you are looking for ways to merely change their look from the default publication, please read the [:ApplicationLookandFeelHowto Application Look and Feel Howto] first - it describes much easier ways to reach your goal.

The default Lenya application lays out pages with a pretty straightforward table-based structure which is defined in {{{lenya/pubs/your-pub-name/xslt/page2xhtml.xsl}}}.

This pre-defined HTML-structure is sufficient for normal sites, but may not fit if you:

   * are moving an existing site gradually to Lenya and wish to keep your HTML-structure,

   * are a CSS-freak and do not wish to use tables for layout,

   * have advanced layout requirements.

There are two ways in which you can influence the page structure:

   1) by modifying to change the overall pages layout, ie. tables, divs and their ids/classes. This is defined in {{{lenya/pubs/publication-name/xslt/page2xhtml.xsl}}} which acts as a template page similar to JSP-based sites. By hacking page2xhtml.xsl, you can arrange the predefined navigational components like tabs, menus and search fields, you can introduce new divisions, and add images,

   2) changing the inner markup of the navigational components. This is slightly more complex since you need to edit {{{lenya/pubs/publication-name/xslt/page2xhtml.xsl}}}, {{{lenya/pubs/publication-name/publication-sitemap.xmap}}}, and one or more of the components'XSL files.

If you are new to Cocoon and/or Lenya, it is advisable to read 
[http://cocoon.apache.org/lenya/docs/components/layout/navigation.html Lenya Documentation >> The Navigation Framework] to get an idea on the way HTML chunks are produced and aggregated to yield the final output.

===  Modifying page2xhtml ===

page2xhtml contains one template which is invoked by the pipeline in {{{lenya/pubs/publication-name/xslt/page2xhtml.xsl}}}. It matches {{{<cmsbody>}}} and produces the overall HTML page by defining head- and body and applying templates for the navigation, tabs, bread-crumbs, search, and body-content.

You are free to replace the table-structure with any valid XHTML construct, but you should not re-use the ids assigned to the divs that produce the navigation, tabs, and search. Do not rename the parameters of {{{<xsl:apply-templates select="xhtml:foo[@bar = 'baz']"/>.
}}}

page2xhtml gets called with three parameters you can use to include resources:

   1) $root. This is the current servlet context and will resolve to /lenya/ by default,

   2) $document-id. This is the document id Lenya uses to identify the current page,

   3) $url. This is the request URL pointing to the current page.

For example, if you want to add the current URL to printouts of you page, can insert:

{{{
   <div class="printonly"><xsl:value-of select="$url"/></div>
}}}

and define .printonly to be invisible on screen in your CSS-files.

===  Modifying navigational components ===

Lenya cascades navigational component definitions in a way described in [http://cocoon.apache.org/lenya/docs/components/layout/navigation.html Lenya Documentation >> The Navigation Framework] and the [:ApplicationLookandFeelHowto Application Look and Feel Howto]. In short, local versions take precedence over installation-wide versions.

To edit components, copy them to your publication as described in the look and feel howto. To ensure long-time maintainability, it might be useful to rename them to create a clear distinction between the Lenya default components and your modified versions. To do this, open {{{lenya/pubs/publication-name/publication-sitemap.xmap}}} in your text editor and look for the following pipeline:

{{{
<!-- This is the pipeline that builds the page. It aggregates all
    the navigational elements (breadcrumb, tabs, menu) with the actual
    content of the document. -->
    <map:pipeline>
      <!-- /lenyabody-{rendertype}/{publication-id}/{area}/{doctype}/{url} -->
      <map:match pattern="lenyabody-*/*/*/*/**">
        <map:aggregate element="cmsbody">
          <map:part src="cocoon://navigation/{2}/{3}/breadcrumb/{5}.xml"/>
          <map:part src="cocoon://navigation/{2}/{3}/tabs/{5}.xml"/>
          <map:part src="cocoon://navigation/{2}/{3}/menu/{5}.xml"/>
          <map:part src="cocoon://navigation/{2}/{3}/search/{5}.xml"/>
          <map:part src="cocoon:/lenya-document-{1}/{3}/{4}/{page-envelope:document-path}"/>
        </map:aggregate>
}}}

The aggregate-part lists all components that should be called prior to assembling the pages. If you intend to change the tabs component and your local file is {{{lenya/pubs/your-pub-name/lenya/xslt/navigation/mytabs.xsl}}} then change 
{{{
          <map:part src="cocoon://navigation/{2}/{3}/tabs/{5}.xml"/>
}}}

to 

{{{
          <map:part src="cocoon://navigation/{2}/{3}/mytabs/{5}.xml"/>
}}}

---------------------------------------------------------------------
To unsubscribe, e-mail: lenya-dev-unsubscribe@cocoon.apache.org
For additional commands, e-mail: lenya-dev-help@cocoon.apache.org