Introducing XWeb

Adding graphical buttons

The generic stylesheet supports images as buttons. Six types of buttons are distinguished, three for sections and three for the entries. Both groups have the same subtypes:

Normal buttons
The normal buttons are always used for inactive sections/entries, unless other buttons are given they will be used for all sections/entries. If the normal buttons are not given, text will be used -- even if other buttons would be available.
Active buttons
If active buttons are given they will be used instead of the normal buttons for the active sections/entries. They will be used for mouse-over effects unless separate buttons are given for mouse-over effects or JavaScript has been turned off.
Mouse-over buttons
These buttons will be used for the mouse-over effects if they are given. Usually it is a good idea to just use the active buttons for this (i.e. not to give these extra buttons), but sometimes not ;-)

There is no mouse-over for the active entries since they are not linked. The buttons are identified by their type names, i.e. the stylesheet tries to find buttons for the sections/entries by looking for the following image types attached to them:

  • normalEntryButton
  • activeEntryButton
  • mouseOverEntryButton
  • normalSectionButton
  • activeSectionButton
  • mouseOverSectionButton

More exact: the stylesheet looks for images where the types start with these names. This can be useful if you want different buttons for different sections/entries, e.g. you can create two sets of buttons to encode two different sections in colors by using one set of names like "normalEntryButtonDarkBlue" and another set with names like "normalEntryButtonLightBlue" -- both will be recognized by the stylesheet.

Here is a complete example rendering two different sets of buttons for two different sections:

  <?xml version="1.0" encoding="UTF-8"?>
    <website baseURL="http://my.domain.org" sourceDir="content" targetDir="output">
    <structure>
      <section name="Users" sourceDir="users" targetDir="users" type="users">
        <entry name="Welcome" sourceFile="welcome.xhtml" 
                          targetFile="../index.html" type="xhtml-users"/>
        <entry name="Features" sourceFile="features.xhtml"
                          targetFile="features.html" type="xhtml-users"/>
        <entry name="Download" sourceFile="download.xhtml" 
                          targetFile="download.html" type="xhtml-users"/>
      </section>
      <section name="Developers" sourceDir="dev" targetDir="dev" type="dev">
        <entry name="CVS Access" sourceFile="cvs.xhtml" 
                          targetFile="cvs.html" type="xhtml-dev"/>
        <entry name="Mailing Lists" sourceFile="lists.xhtml" 
                          targetFile="lists.html" type="xhtml-dev"/>
      </section>
      <file sourceFile="userStyle.css" targetFile="userStyle.css"
                          type="copy" id="userStyle"/>
      <file sourceFile="devStyle.css" targetFile="devStyle.css"
                          type="copy" id="devStyle"/>
    </structure>
    <layout>
      <sectionStyle type="users">
        <image type="normalSectionButtonUsers"/>
        <image type="activeSectionButtonUsers"/>
      <sectionStyle/>
      <sectionStyle type="dev">
        <image type="normalSectionButtonDev"/>
        <image type="activeSectionButtonDev"/>
      <sectionStyle/>
      <documentStyle type="xhtml-users">
        <xsl stylesheet="layout/generic.xsl" navigationElement="html">
          <parameter name="stylesheet.id" value="userStyle"/>
        </xsl>
        <image type="normalEntryButtonUsers"/>
        <image type="activeEntryButtonUsers"/>
      </documentStyle>
      <documentStyle type="xhtml-dev">
        <xsl stylesheet="layout/generic.xsl" navigationElement="html">
          <parameter name="stylesheet.id" value="devStyle"/>
        </xsl>
        <image type="normalEntryButtonDev"/>
        <image type="activeEntryButtonDev"/>
      </documentStyle>
      <!-- rendering information for eight buttons goes here:
           normal/active * entry/section * users/dev -->
    </layout>
  </website>

You can now create different looks for the two sections by adding slightly different buttons for the section and using a separate CSS stylesheet for each.