Table of Contents

  1. RAPPTOR
  1. RAPPTOR Components
  1. RAPPTOR Features
  1. Get the Source Code
    1. Release Notes
  1. How To
    1. Create a Basic Application
    1. Creating a Domain
    1. Create a Theme
    1. Writing PageParts
    1. Gluing
  1. Media
  1. News
  1. Contact
  1. FAQ

Create a Theme

A Theme is basically a predefined HTML page layout in XSLT form, with styling provided by a CSS file. The purpose being to replace the standard look and feel of an application with user defined styles, images and layouts.

Before you start writing your own theme I recommend having a look at the Standard Theme for an idea of whats involved. Knowledge of HTML, XSLT and CSS is recommended but the basics can be picked up fairly easily.

First of all, we need to create a few directories in our project folder. On the same level as the RAPPTOR directory, create the directory:

  • root
    • Under root , create the directories:
    • domains
    • themes
      • Under the themes folder, I like to have the following directory structure:
      • <dir> my_theme
      • <dir> images - any images you use can be placed here
      • <dir> styles
      • + my_theme.css
      • + theme.xslt



Templating

The theming process in RAPPTOR works by taking HTML produced by PageElements and pumping it into an XML stream. This XML stream is then passed to an XSLT processor where the XML tags and tag attributes are analysed. During the analysis, the XSLT is trying to match XSL Templates.

Here, RAPPTOR produces a template called page. 

<xsl:template match="p:page">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head></head>
      <body></body>
    </html>
</xsl:template>

As you can see, our HTML code is encapsulated in this template. Now we must write a HTML structure for our page.

This head tag contains a link to our .css file. the path is relative where "~theme" automatically represents the path to the my_theme directory. 

<head>
   <title>
      <xsl:value-of select="@title"/>
   </title>

   <link rel="stylesheet" href="~theme/styles/my_theme.css" type="text/css"/>

</head>


If you have looked in the standard theme.xslt, starting around line 145 there are some more templates. These templates are used to produce HTML for specific PageElements defined in RAPPTOR. 

<!--Default box template-->
  <xsl:template match="p:box">
    <xsl:if test="@displaytype = 'default'">
      <fieldset class="box">
        <legend class="stdboxheader">
          <xsl:comment> placeholder:header </xsl:comment>
        </legend>
        <div class="stdboxbody">
          <xsl:comment> placeholder:body </xsl:comment>
        </div>
        <div class="stdboxfooter">
          <xsl:comment> placeholder:footer </xsl:comment>
        </div>
      </fieldset>
    </xsl:if>
  </xsl:template>

by creating PageElements in this way, we can define several different types of boxes with different layouts and styles. We can differentiate between types by setting the displayType property in the PEBox class.



Placeholders Next comes the body tag. Here, we introduce the concept of placeholders. 

<body>
<div id="wrapper">
   <div id="header">
      <xsl:comment> placeholder:top </xsl:comment>
   </div>

   <div id="container">
     <div id="center" class="column">
        <xsl:comment> placeholder:center </xsl:comment>
     </div>
     <div id="left" class="column">
        <xsl:comment> placeholder:left </xsl:comment>
     </div>
     <div id="right" class="column">
        <xsl:comment> placeholder:right </xsl:comment>
     </div>
   </div>

   <div id="footer">
      <xsl:comment> placeholder:bottom </xsl:comment>
   </div>
</div>
</body>

These placeholders represent sections of the page where we would like to place content. e.g placeholder:center, has the name: center, meaning PageParts with the PagePosition center will be displayed in the central column of this HTML layout.

Note make sure there is a space between "<xsl:comment>" tags and "placeholder:xxxxx". It won't be read correctly otherwise.