DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: Just an Efficient TYPO3 Templating System¶

Created:	2010-02-18T17:33:18
Changed:	2010-12-08T19:12:33.480000000
Classification:	jetts
Keywords:	Templating
Author:	Grégory Duchesnes (Duch)
Email:	contact@ilomedia.net
Info 4:
Language:	en

EXT: Just an Efficient TYPO3 Templating System - jetts

EXT: Just an Efficient TYPO3 Templating System¶

Extension Key: jetts

Language: en

Keywords: Templating

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents¶

EXT: Just an Efficient TYPO3 Templating System 1

`Introduction 3 <#__RefHeading__2167_1494835717>`_

`Users manual 5 <#__RefHeading__2177_1494835717>`_

Installation 5

`Administration 8 <#__RefHeading__2181_1494835717>`_

`Configuration 9 <#__RefHeading__6992_1186558437>`_

Reference 9

Cache configuration 10

`Tutorial 1 : Wizard based mapping 11 <#__RefHeading__2191_1494835717>`_

Creating a page tree 11

Naming Backend Columns 11

Creating a template record 12

Creating the Jetts mapping record 15

Mapping the template 17

Selecting the Jetts mapping for the pages 25

Adding the CSS files to the template 26

Preview the result 26

`Tutorial 2 : TypoScript based mapping 29 <#__RefHeading__7014_1186558437>`_

Introduction 29

Creating the TS template 30

Using tx_jetts_selector 35

`Known problems 38 <#__RefHeading__7024_1186558437>`_

`ChangeLog 40 <#__RefHeading__7030_1186558437>`_

Introduction¶

What does it do?¶

This plugin is aimed to be a smart replacement for “automaketemplate”. It does not pretend to be a "modern" nor "futuristic" templating system, it's just designed for efficiency. However, since version 2.2, this extension includes a new wizard mapping.

The main features are:

New Mapping wizard
A complete step by step tutorial with a HTML template provided
automatically insert markers (mapping a tag attribute is now a child play),
uses Xpath syntax for subparts and markers mapping,
the backend columns can be easily renamed, shown or hidden
auto-localisation of your template (thanks to an LLXML file),
handling of stdWrap (which means that any tag/attribute selected can be passed to an stdWrap Typoscript object),
if your template HTML includes links like index.php?id=x they will be automatically translated to nice URLs,
Everything is logged to extension devlog.

Requirements¶

PHP DOM extensions : http://php.net/manual/en/book.dom.php,
a Valid XHTML template.

Credits¶

This extension was developed by Grégory Duchesnes (Duch), <contact@ilomedia.net>.

Rachel Foucard (Rakel) < rfoucard@w-seils.com > added a tutorial section for the wizard based mapping (see tutorial 1).

Laurent Foulloy (Yolf) <yolf.typo3@orange.fr> improved “tx_jetts_selector” and added a tutorial section for the Typoscript based mapping (see tutorial 2).

This extension comes with a directory “examples/cool_web” which was downloaded from http://www.osskins.com/main/category/typo3/ and slightly modified for this tutorial.

Screenshots¶

Users manual¶

Installation¶

Just install this extension in “Ext Manager” module:

Click on the “make updates” button to finish the installation process:

You can configure the extension and make updates:

Number of columns in back-office

If you need more than 4 columns in the back-office, enter the total number of columns here (any figure below 5 will be ignored). Labels for all columns will be editable in typo3conf/ext/user_ll/locallang_db.xml (use llxmltranslate or lfeditor for this)

Localize default columns with LLXML

The names of the 4 default columns are partially localizable through core LLXML files. This feature makes it possible to rename the default columns thanks to a localization extension (such as llxmltranslate of lfeditor), labels will be stored in typo3conf/ext/user_jetts_ll/locallang_db.xml

Use "General record storage page"

By default you will be able to tie a mapping to a page wherever your jetts records are stored. If you activate this setting you will be able to use "General record storage page" or TSConfig to restrict where the template selector will look for jetts records.

Enable Typoscript template selector

If you upgraded from a version of jetts lower than 2.2 and use plugin.tx_jetts_selector in your Typoscript you need to enable this, otherwise you are safe with the default value. Please note that if you are using a version of TYPO3 lower than 4.3 this template selector will be enabled whatever your selection.

Jetts has automatically created the extension user_jetts_ll for you. This extension will allow you to the administrate the back-end column names (if this option is activated in Jetts) and your own labels for your templates using an extension such as llxmltranslate or lfeditor. You just have to install it in the “Install Extension” module:

If you want to use a translating extension like llxmltranslate to administrate tha backend columns titles, you have to install it. For example, if you choose llxmltranslate extension, you will manage backend colums title with this kind of module:

Administration¶

none

Configuration¶

The configuration of this extension is 100% made in Typoscript. There is now two different configuration methods:

Mapping based on TS configuration with only a template records : this way is recommended for automake-template users
Mapping based on the wizard : this way is recommended for the templavoilà users

Two tutorials are available in that manual, one for each method.

You can see in the following screenshot that, with the wizard based mapping method, all the Typoscript is stored in the “Mapping preview” field of the jetts mapping record, in order to be passed to Typoscript TEMPLATE object:

Reference¶

All TEMPLATE proper¶

Property

All TEMPLATE proper

Data type

Description

To

Default

locallangFile¶

Property

locallangFile

Data type

string

Description

Refer to the “TEMPLATE” section of the TSRef documentation .

Default

subparts¶

Property

subparts

Data type

Description

The subparts configuration defined as Xpath syntax

Example :

subparts {
  DOCUMENT_BODY = //body
  CONTENT = //div[@id='content']
}

This will insert the classic DOCUMENT_BODY subpart inside the BODY tag and a subparts marker named CONTENT inside the div whose attribute id equals content :

<body>
  <!-- ###DOCUMENT_BODY### -->
  <div id=”somediv”>
    <p>some content</p>
  </div>
  <div id=”content”>
    <!-- ###CONTENT### -->
    content to be replaced
    <!-- ###CONTENT### -->
  </div>
  <!-- ###DOCUMENT_BODY### -->
</body>

Default

marks¶

Property

marks

Data type

Description

The marks configuration defined with the Xpath syntax

Example :

marks {
  LOGO_ALT = //img[@id='logo']/alt
}

This will replace the alt attribute “###LOGO_ALT###” of the image whose id is “logo” :

<img id=”logo” src=”fileadmin/templates/” alt=”###LOGO_ALT###” />

Default

stdWraps¶

Property

stdWraps

Data type

Description

A collection of stdWrap objects to execute on found elements

Example :

stdWraps {
  MYTEXT = //p[@id='someid']
  MYTEXT.crop = 20 | ...
}

This will crop the text found in the p tag named “someid” to 20 characters.

<p id="someid"><img>cropped to 20 charact...</p>

Default

label¶

Property

label

Data type

string

Description

It defines the label which will appear in the selector when tx_jetts_selector is used.

You can use a simple string or a reference to a localization label.

Examples:

label = Default template
label = LLL:EXT:myext/mylocallang.xml:myLabel

Default

icon¶

Property

icon

Data type

string

Description

It defines the icon to be displayed with the selector. The string is the relative file name from the site root.

Example:

icon = typo3conf/ext/jetts/res/default_main.gif

Default

templateType¶

Property

templateType

Data type

string

Description

It defines whether the template will be in the main template selector or the sub template selector.

Examples:

templateType = main
templateType = sub
templateType = main, sub

Default

main

cache¶

Property

cache

Data type

boolean/cache configuration

Description

If set, the generated content is cached. In many cases, you would not unset this attribute.

Example:

cache = 0

You may add a cache configuration to this attribute.

Default

1

Cache configuration¶

addContentToHash¶

Property

addContentToHash

Data type

boolean

Description

If set, the content of the content template attribute is used to compute the hash key. It is the default behavior.

If unset, the hash key does not take into account the content attribute. Therefore, the computation is faster. However, you should clear manually the cache if you change the file associated with the content attribute.

Example:

cache.addContentToHash = 0

Default

1

Tutorial 1 : Wizard based mapping¶

Creating a page tree¶

The first thing to do now is to create a page tree to be used for this tutorial. Only a root page with few subpages to generate a navigation menu are needed:

Naming Backend Columns¶

This is not a required step, but if you want to personalize your backend column naming, you have to install a translating extension, and use the user_jetts_ll locallang file to translate your column names.

First, specify that you want to localize default columns with llxml and choose the number of columns you want to use in your project in the extension configuration module:

Then, use a translating extension (in this tutorial we use llxmltranslate) to rename the columns:

Creating a template record¶

Now, we will create a template record on the page "My Cool website". The most easy way is to use the "Template" module:

The template is created and can be edited. It will contain the basic instructions to the Frontend engine.

The following TypoScript code has to be edited in the setup field as show on the caption:

page = PAGE
page.typeNum = 0
page.10 < plugin.tx_jetts_pi

Then, include the good “css style content” static template for your project version:

More Typoscript code is necessary to generate a menu and the page title. So let's create a new sysfolder page named “Templating” and let's create this new template into this sysfolder:

The title of the template will be “Navigation”, and below is the TypoScript code to edit in the setup field:

mycool.menu_top = HMENU
mycool.menu_top {
    special = directory
    special.value = 1
    1 = TMENU
    1.NO.allWrap = <li>|</li>
    wrap = <ul>|</ul>
}
mycool.page_title = TEXT
mycool.page_title.data = page:title

Don't forget to include this template into your master template as shown below:

Creating the Jetts mapping record¶

Now you just have to create a new Jetts mapping record. This record will stored all the needed information for the page frontend rendering of your website.

You can store it wherever you want in your page tree. So let's create a new Jetts mapping record in the “Templating” sysfolder:

The Jetts mapping record need to be edited:

The “General” tab must be edited with the following fields:

The title of the template (required). Let's call our tutorial template “Cool Web”,
The thumbnail of the template: it will be displayed when the webmaster will choose a Jetts template for a page, we won't add any thumbnail for this tutorial,
The HTML template path : you can either use the link wizard button or just edit the field. For the tutorial, we will use the extension template : typo3conf/ext/jetts/examples/cool_web/index.html,
The LLXML file path :One of the nice features introduced in Jetts is the localization for makers. A special attribute “locallangFile” was introduced. When a marker is found in this file for the current language, the associated label is used to replace it. For the tutorial, we will use the extension locallangfile : typo3conf/ext/user_jetts_ll/locallang.xml.

The “mapping wizard” tab just have two fields:

The wizard field : Jetts acts as a wrapper for the standard TEMPLATE typoscript object. This field allows you to preview what will be passed to this object and learnt from it. Use the wizard to generate your mapping. Don't try to change anything in here, your changes will be overriden on your next save, if you need to add custom Typoscript, use the Override Typoscript field in the advanced tab.
A notes field: this field won't have any effect on your mapping but anything you write here will be available in the "Notes" Panel of the mapping wizard.

You just have to click on the wizard button to display the wizard:

You can see different zones at the bottom of the wizard HTML template preview:

The principle is very simple:

If you want to map a zone in your template, you just have to click on it in the HTML template preview, and then, the wizard will help you.

If you want to map a invisible zone, for example, empty tags, then, you just have to click it in the “Empty and self closing tags” listing.

All your mappings are stored and visible in the “Mapped tags” and “Mapped attributes” zones. You can edit or deleted them directly in that listings.

Mapping the template¶

For the tutorial, we are going to map 3 tags and 1 attribute :

First of all, we are going to map the top menu. Just click somewhere in the top menu, you don't need to be precise, the wizard will propose you all the tags that can be mapped in that zone :

Let's map the <div id=”menuOben”> tag.

The wizard proposes a quick form to map the object:

Let's fill the form with the following information:

Title : Menu Top
Map to : Typoscript Object (when you select “Typoscript Object” in the select box, nothing happens, you have to tab to the next field to get a new field named “Typoscript”)
Typoscript : mycool.menu_top
The field “xpath address” is already filled with the good xpath.

Click on the save button to confirm the mapping. You can see the mapped object in the mapped tags column:

Let's map the page content:

The wizard proposes a quick form to map the object:

Let's fill the form with the following information:

Title : Main content
Map to : Content Area (when you select “Typoscript Object” in the select box, nothing happens, you have to tab to the next field to get a new field named “Column id”)
Column id : we will keep the default value : 0
The field “xpath address” is already filled with the good xpath.

Click on the save button to confirm the mapping.

Let's map the logo img. We want to map the title attribute:

The wizard proposes a quick form to map the object:

Let's fill the form with the following information:

Title : Main Logo title
Map to : Language label (when you select “Typoscript Object” in the select box, nothing happens, you have to tab to the next field to get a new field named “key in LLXML file”).
key in LLXML file : you just have to select the good item in the select box, which is “LOGO_ALT” (the select box proposes all the key existing in the LLXML file).
The field “xpath address” is already filled with the good xpath.

Click on the save button to confirm the mapping. You can see the mapped object in the mapped attributes column:

Let's map the <h1> tag.

The wizard proposes a quick form to map the object:

Let's fill the form with the following information:

Title : Page title.
Map to : Typoscript Object (when you select “Typoscript Object” in the select box, nothing happens, you have to tab to the next field to get a new field named “Typoscript”)
Typoscript : mycool.page_title
The field “xpath address” is already filled with the good xpath.

Click on the save button to confirm the mapping.

Save and close the wizard with the “save and close” button :

You can see that all the TypoScript has been automatically generated in the “Mapping preview” field:

The following code is generated:

workOnSubpart = DOCUMENT_BODY

relPathPrefix = /
relPathPrefix.A =
relPathPrefix.IMG = typo3conf/ext/jetts/examples/cool_web/

template {
  content = FILE
  content.file = typo3conf/ext/jetts/examples/cool_web/index.html

  locallangFile = typo3conf/ext/user_jetts_ll/locallang.xml

  subparts {
    DOCUMENT_BODY = //body

    // Menu Top
    MENU_TOP_0 = //div[@id="menuOben"]
    // Main content
    MAIN_CONTENT_1 = //div[@id="main-content"]
    // Page title
    PAGE_TITLE_1 = //div[@id="leftPan"]/h1
  }

  marks {
    // Logo title
    LOGO_ALT = //div[@id="topHeaderPan"]/a/img/@title
  }
}
subparts {
  MENU_TOP_0 < mycool.menu_top
  MAIN_CONTENT_1 < lib.jetts.content.get
  MAIN_CONTENT_1.select.where = colPos=0
  PAGE_TITLE_1 < mycool.page_title
}

marks {
}


# My Typoscript
#
# Example to override generated Typoscript
#
# relPathPrefix.IMG = http://static.mysite.com/fileadmin/default/templates/
#

Now, in the “Advanced” tab, select the columns you want to use in your Backend page view:

Save and close the jetts mapping with the “save and close” button.

Selecting the Jetts mapping for the pages¶

Then, edit the home page of the website called “My cool website” and edit the “Jetts” tab:

Select “Cool web” for the template of the page and the subpages. Then, save and close the page form.

If you preview the home page you won't see the expected result:

Indeed, the CSS files are missing in the page header. You must edit the home page template to add this files in the header.

Adding the CSS files to the template¶

Open the home page template and edit the setup field:

Add the following TypoScript:

page.includeCSS {
  file1 = typo3conf/ext/jetts/examples/cool_web/style.css
}

Previewing the result¶

Now, if you preview the home page you will see a better result:

Now, you can try to add a new content in the “Main content” column using the page module:

It provides the expected result in the Front End:

Tutorial 2 : TypoScript based mapping¶

Introduction¶

Open the file index.html located in the “examples/cool_web” directory in your favorite browse. You should have the following output.

Now, open the file in your favorite editor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cool Web</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- ###DOKUMENT### Start-->

<div id="maintopPan">
  <div id="maintopPanOne">
    <div id="topHeaderPan">
      <a href="index.php"><img src="fileadmin/templates/cool_web/images/logo.jpg" title="Cool Web" alt="Cool Web" width="220" height="53" border="0" /></a>
      <div id="menuOben">
        Menu Oben
      </div>
    </div>
    <div id="topSidemenuPan">
      <ul>
        <li class="home"><a href="./index.php" title="Home" alt="Home">Home</a></li>
        <li class="contact"><a href="./index.php?id=6" title="Kontakt" alt="Kontakt">Kontakt</a></li>
      </ul>
    </div>
  </div>
</div>

<div id="bodyPan">
  <div id="leftPan">
    <!-- ###INHALT### Start-->

    <!-- ###INHALT### Stop-->
    <div id="leftPaninleftPan">
    </div>
    <div id="leftPaninrightPan">
    </div>
  </div>

  <div id="rightPan">
    <h2><span>new</span><br />service
overview </h2>
      <!-- ###INHALT_RECHTS### Start-->
        Inhalt Rechts
        <!-- ###INHALT_RECHTS### Stop-->
  <div id="rightbottomPan"><img src="fileadmin/templates/cool_web/images/blank.gif" alt="" /></div>
  </div>
</div>

<div id="footermainPan">
  <div id="footerPan">
    <a href="index.html"><img src="fileadmin/templates/cool_web/images/footerlogo.gif" title="Cool Web" alt="Cool Web" width="218" height="52" border="0" /></a>
    <div id="menuUnten">
        Menu Unten
    </div>
  <p class="copyright">©cool web. All rights reserved.</p>
  <div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">html</a></div>

   <div id="footerPancss"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
   <ul class="templateworld">
        <li>Design By:</li>
        <li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
  </ul>
  </div>
</div>
<!-- ###DOKUMENT### Stop-->
</body>
</html>

As it can be seen, this HTML template contains several items which are hard coded as, for example, the logo image and its title, the “Kontakt” message and the uid of the related page.

It contains also comments which defines “subparts” which can be replaced by the conventional TYPO3 templating system.

Creating the TS template¶

Create a page and associate a template with it as shown below.

Using tx_jetts_parser¶

Displaying the HTML template¶

Fill the Setup section of the template with the following TypoScript code which contains the minimal information to display the provided template and its CSS with tx_jetts_parser.

# Defines the PAGE object
page = PAGE
# Includes the CSS
page.includeCSS {
  file1 = typo3conf/ext/jetts/examples/cool_web/style.css
}
# Defines the TEMPLATE object and sets the Jetts Parser
page.10 = TEMPLATE
page.10.template < plugin.tx_jetts_parser

# Sets the Jetts template items
page.10.template {
  # Sets the HTML template file
  content = FILE
  content.file = typo3conf/ext/jetts/examples/cool_web/index.html

  # Defines the subparts
  subparts {
    DOCUMENT_BODY = //body
  }
}

# Defines the conventional items
page.10 {
  workOnSubpart = DOCUMENT_BODY
}

This TypoScript code creates the PAGE object, includes the CSS file. Then, it creates the TEMPLATE object, loads the Jetts Parser plugin (tx_jetts_parser), associates with it the HTML template.

The “subpart” DOCUMENT_BODY is defined as the HTML tag <body>. In Jetts subparts, markers, stdWraps, ... are defined by means of the Xpath syntax.

Finally, the conventional elements are defined in TypoScript. Here, only the “workOnSubpart” property is used.

Clear the cache and display the page in the Front End. You should obtain the following caption.

Two main differences with the index.html output can be observed. They are shown in red.

Defining markers¶

Now, we can use Jetts to define what should be replaced using Xpath queries. How, it will be replaced is just conventional TypoScript code.

For example, let us see how to display the logo image. As it can be seen in the “index.html” file, the logo image is created by means of an <img> tag.

<div id="topHeaderPan">
  <a href="index.php"><img src="fileadmin/templates/cool_web/images/logo.jpg" title="Cool Web" alt="Cool Web" width="220" height="53" border="0" /></a>

The “src” attribute is set to “ fileadmin/templates/cool_web/images/logo.jpg”. For now, the “logo.jpg” image is in the extension directory, that is “typo3conf/ext/jetts/examples/cool_web/images/logo.jpg”. To illustrate how Jetts works, we want to keep all files in the extension and not have them moved in the “fileadmin” directory. Therefore, the “src” attribute has to be replaced by the correct value.

For that, we need to get the “src” attribute of an <img> tag inside a <a> tag which is itself inside a <div> tag whose “id” is “topHeaderPan” as a marker. The translation in Xpath is just: //div[@id='topHeaderPan']/a/img/@src

The “Jetts template items” part in the TypoScript becomes:

# Sets the Jetts template items
page.10.template {
  # Sets the HTML template file
  content = FILE
  content.file = typo3conf/ext/jetts/examples/cool_web/index.html

  # Defines the subparts
  subparts {
    DOCUMENT_BODY = //body
  }

  # Defines the markers
  marks {
    LOGO = //div[@id='topHeaderPan']/a/img/@src
  }
}

Now, in the conventional TypoScript items we define the LOGO object in the “marks” property as a TEXT object whose value is the required file path.

# Defines the conventional items
page.10 {
  workOnSubpart = DOCUMENT_BODY

  # Defines the markers
  marks {
    LOGO = TEXT
    LOGO.value = typo3conf/ext/jetts/examples/cool_web/images/logo.jpg
  }
}

Save and clear the cache, then reload the page in the Front End. The logo is now correctly displayed.

Localization with markers¶

One of the nice features introduced in Jetts is the localization for makers. A special attribute “locallangFile” was introduced. When a marker is found in this file for the current language, the associated label is used to replace it.

For example, let us analyze the following lines of the HTML template:

<li class="home"><a href="./index.php" title="Home" alt="Home">Home</a></li>
<li class="contact"><a href="./index.php?id=6" title="Kontakt" alt="Kontakt">Kontakt</a></li>

The <a> tags contain attributes “title” and “alt” which, in many cases, are specific to the web site language. Therefore, these attributes will be defined as markers and introduced in the localization file.

# Sets the Jetts template items
page.10.template {
  # Sets the HTML template file
  content = FILE
  content.file = typo3conf/ext/jetts/examples/cool_web/index.html

  # Localization file
  locallangFile = typo3conf/ext/jetts/examples/cool_web/locallang/locallang.xml

  # Defines the subparts
  subparts {
    DOCUMENT_BODY = //body
  }

  # Defines the markers
  marks {
    LOGO = //div[@id='topHeaderPan']/a/img/@src
    HOME_TITLE = //li[@class='home']/a/@title
    HOME_ALT = //li[@class='home']/a/@alt
    CONTACT_TITLE = //li[@class='contact']/a/@title
    CONTACT_ALT = //li[@class='contact']/a/@alt
  }
}

The provided localization file provides the labels in English (default) and French (fr). To set the labels to the French language, change the page configuration to:

page.config.language = fr

Defining subparts¶

In conventional TYPO3 templating, subparts are identified by comments in the HTML template as, for example:

<div id="leftPan">
  <!-- ###INHALT### Start-->

  <!-- ###INHALT### Stop-->
  <div id="leftPaninleftPan">
  </div>

In Jetts, defining subparts by means of two comments is no more useful thanks to Xpath queries. For example, the following <div> can easily be dealt with Jetts.

<div id="menuOben">
  Menu Oben
</div>

We need to get the <div> tag whose “id” attribute is “menuOben”. The Xpath query is: //div[@id='menuOben'].

If comments already exist, the Xpath query depends on the HTML template. In the first example, the Xpath query must get the first text element inside the <div> tag whose “id” attribute is “leftPan” which leads to: //div[@id='leftPan']/text().

Once again, the conventional TypoScript items will define how it should be replaced. CSS Styled Content is assumed to be used. Do not forget to add it in the Includes section of the flexform as shown below:

Two lines are added to the “subparts” attribute of the “Jetts template items” which becomes:

# Sets the Jetts template items
page.10.template {
  # Sets the HTML template file
  content = FILE
  content.file = typo3conf/ext/jetts/examples/cool_web/index.html

  # Localization file
  locallangFile = typo3conf/ext/jetts/examples/cool_web/locallang/locallang.xml

  # Defines the subparts
  subparts {
    DOCUMENT_BODY = //body
    MENU_OBEN = //div[@id='menuOben']
    INHALT = //div[@id='leftPan']/text()
  }

  # Defines the markers
  marks {
    LOGO = //div[@id='topHeaderPan']/a/img/@src
    HOME_TITLE = //li[@class='home']/a/@title
    HOME_ALT = //li[@class='home']/a/@alt
    CONTACT_TITLE = //li[@class='contact']/a/@title
    CONTACT_ALT = //li[@class='contact']/a/@alt
  }
}

and the conventional TypoScript items part becomes:

# Defines the conventional items
page.10 {
  workOnSubpart = DOCUMENT_BODY

  # Defines the subparts
  subparts {
    MENU_OBEN = HMENU
    MENU_OBEN {
      special = directory
      special.value = {$menuOben}
      1 = TMENU
      1 {
        NO.linkWrap = | &nbsp;
        NO.doNotShowLink = 0
      }
    }
    INHALT = CONTENT
    INHALT < styles.content.get
  }

  # Defines the markers
  marks {
    LOGO = TEXT
    LOGO.value = typo3conf/ext/jetts/examples/cool_web/images/logo.jpg
  }
}

You can proceed exactly in the same manner with other subparts and markers. You can insert the content of the file “jetts_parser_setup.txt” located in the directory “typoscript” in the setup section. Do not forget to add constants as shown in the following caption.

Create pages for the menus and contents in the normal and right columns. Clear the cache and display the page in the Front End.

Other features¶

You can also use Xpath queries to apply “stdwrap” properties to the elements returned by the query. It may be useful in specific cases. The Xpath queries must be defined in the attributes “stdWraps” of the “template” attribute.

Using tx_jetts_selector¶

The plugin “tx_jetts_selector” makes it possible to define several “Jetts Tempate Parsers” and to have a template selector associated with pages. Basically, it works like Page Template Selector (rlmp_tmplselector).

As it can be seen below, when “Jetts Selector” is used, the template configuration is almost the same as with “Jetts Parser”. This configuration is available in the file “jetts_selector_setup.txt”. In fact, you may define as many parsers as you want. The “label” attribute defines the label used in the selector. The “templateType” attribute specifies whether the template will be in the main template selector or the sub template selector.

# Definition of the selectors
plugin.tx_jetts_selector {
  # Default template
  default {
    label = Default template
    templateType = main,sub

    content = FILE
    content.file = typo3conf/ext/jetts/examples/cool_web/index.html

    # Localization file
    locallangFile = typo3conf/ext/jetts/examples/cool_web/locallang/locallang.xml

    # Subparts
    subparts {
      DOCUMENT_BODY = //body
      MENU_OBEN = //div[@id='menuOben']
      MENU_UNTEN = //div[@id='menuUnten']
      INHALT = //div[@id ='leftPan']/text()
      INHALT_RECHTS = //div[@id ='rightPan']/text()
    }
    # Markers
    marks {
      LOGO = //div[@id='topHeaderPan']/a/img/@src
      FOOTER_LOGO = //div[@id='footerPan']/a/img/@src
      HOME_TITLE = //li[@class='home']/a/@title
      HOME_ALT = //li[@class='home']/a/@alt
      CONTACT_TITLE = //li[@class='contact']/a/@title
      CONTACT_ALT = //li[@class='contact']/a/@alt
    }
    # stdWraps
    stdWraps {
    }
  }

  # Alternative template
  alt < .default
  alt {
    label = Alternative template
    content.file = typo3conf/ext/jetts/examples/cool_web/alt.html
  }
}

page.10 = TEMPLATE
page.10.template < plugin.tx_jetts_selector

As it can be seen, the alternative template is defined from the default one. Just a few attributes are overloaded.

Note : a default template is always required when using tx_jetts_selector. If no page are selected, the default template is used.

Edit the page properties and select the folder Jetts as shown below. Use the selector to select your template.

Clear the cache and display the page in the Front end.

Finally, you may want to add icons to the selectors. Just use the “icon” property in the configuration of your template as shown below.

# Definition of the selectors
plugin.tx_jetts_selector {
  # Default template
  default {
    label = Default template
    templateType = main,sub
    icon = typo3conf/ext/jetts/res/default_main.gif
    ....
  }
  # Alternative template
  alt < .default
  alt {
    label = Alternative template
    content.file = typo3conf/ext/jetts/examples/cool_web/alt.html
    icon = typo3conf/ext/jetts/res/default_sub.gif
  }

Now, when you edit the page properties, icons are associated with their respective templates.

Known problems¶

None at the moment. If you find some, please use the bugtracker in the TYPO3 Forge.

To-Do list¶

Feedback welcome.

ChangeLog¶

1.0.0¶

Version

1.0.0

Changes

Initial version of this document.

2.0.0¶

Version

2.0.0

Changes

First public release

2.0.1¶

Version

2.0.1

Changes

Jetts selectors improved.

Tutorial section extended.

2.0.2¶

Version

2.0.2

Changes

Documentation updated.

2.0.3¶

Version

2.0.3

Changes

Small bug corrected.

HTML templates with conventional markers processing improved.

Icon added.

2.0.4¶

Version

2.0.4

Changes

Small bug corrected.

Processing of text nodes improved.

2.2.0¶

Version

2.2.0

Changes

New mapping wizard.

Backend columns rendering depending on the mapping.

Documentation updated and a new “Tutorial 1” section added for the wizard based mapping.

The previous tutorial section became “Tutorial 2”.

40