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.

Browser Tutorial Marker (en)

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed:2010-10-31T21:06:07
Classification:browser_tut_marker_en
Description:This is the Marker Tutorial for the Extension Browser - the Frontend Engine.
Keywords:forAdmins, forDevelopers, forBeginners, forIntermediates, forAdvanced, browser, tutorial, marker
Author:Dirk Wildt, Die Netzmacher
Email:wildt.at.die-netzmacher.de
Website:http://die-netzmacher.de
Language:en

img-1 img-2 extKey: browser_tut_marker_en img-3

Browser Tutorial Marker (en)

img-4

Version: 3.5.0, 2010-10-31

Extension Key: browser_tut_marker_en - Tutorials for the extension Browser (extkey: browser)

Language: en

Keywords: forAdmins, forDevelopers, forBeginners, forIntermediates, forAdvanced, browser, tutorial, marker

Copyright 2009-2010, Dirk Wildt, Die Netzmacher, <wildt.at.die- netzmacher.de>

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

Introduction

What does it do?

img-5 Illustration 1: Tutorial in PDF

This is a tutorial for the extension Browser (extkey: browser). It is

a step-by-step introduction for using markers in TypoScript

only.

Marker Overview

Definition

Every marker is wrapped in ###.

Markers are written in uppercase in the HTML template like: ###TT_NEWS.TITLE###

Markers are written in lowercase in TypoScript like: ###tt_news.title###

Only TYPO3 $GLOBAL markers are case sensitive.

Every marker is an object. It has the TypoScript stdWrap property. You can use every marker as COA object for example. You can every marker extend with other TypoScript objects like TEXT, IMAGE or COA among others.

The Browser will replace markers with their corresponding values at runtime.

The Browser provides five kinds of markers:

  • database marker
  • constant marker
  • system marker
  • piVars marker
  • TYPO3 $GLOBALS marker

Default

If you are interested in a list and single view without any configuration, you don't need to use any marker. You need some lines TypoScript only.

You need markers only

  • if you want to change or wrap values at runtime,
  • if you like your own layout.

Database Marker

You can place every value from the database of your extension into the HTML template with a database marker. Databse markers have the table- dot-field format like ###TT_NEWS.TITLE###.

Constant Marker

You can place every constant value in your HTML template as a constant marker. The constant marker has the stdWrap property.

System Marker

The Browser provides some system markers:

  • TITLE
  • TEXT
  • IMAGE
  • ITEM

They have special properties.

piVars Marker

You have access to the value of every piVar with a piVar marker at runtime.

TYPO3 $GLOBALS Marker

TYPO3 enables the access to hundreds and thousands of variables by the array $GLOBALS.

The Browser enables the access to this array with the TYPO3 $GLOBALS marker at runtime.

Default

The Browser is able to build default lists and default single views. You need one line TypoScript for generating a list only.

Schematic Work Flow without any own Marker

Below we have illustrated a schematic work flowfor a list with tt_news titles and categories.

Title

Frame1

The marker ###MY_TITLE### will be replaced with the value from the title field of the Browser plugin

The default HTML template (cutout) contains the marker ###MY_TITLE###.

The result: ###MY_TITLE### is replaced with "News"

Items

Frame1

tt_news.title and tt_news_cat.title in your TypoScript

The two ###item### markers in the subparts LISTHEADITEM and LISTBODYITEM.

The frontend with the two rows news title and category title.

Database Marker

img-7 Illustration 4: Individual desigend list view

If you like your own individual layout, you should use database markers in your HTML template. We like to call them TABLE.FIELD marker too, because of the format:

###TABLE.FIELD###

Example:

  • HTML: ###TT_NEWS.TITLE###
  • TypoScript: ###tt_news.title###

Screenshot

We like to display in our HTML template a list of news with

  • the title,
  • an image,
  • the short description and
  • the category.

See the illustration on the right hand.

Code

TypoScript

plugin.tx_browser_pi1 {

views {

list {

1 {

select (

tt_news.title,

tt_news.image,

tt_news.imagealttext,

tt_news.imagetitletext,

tt_news.short,

tt_news_cat.title

)

}

}

}

}

HTML

Cutout

<!-- ###TEMPLATE_LIST### begin -->

###MY_TITLE###

...

<!-- ###LISTVIEW### begin -->

<div class="###VIEW###view ###VIEW###view-###MODE###">

<!-- ###LISTHEAD### begin --><!-- ###LISTHEADITEM### begin -->

###ITEM###<!-- ###LISTHEADITEM### end --><!-- ###LISTHEAD### end -->

<!-- ###LISTBODY### begin --><!-- ###LISTBODYITEM### begin -->

<div>

<div style="float:left;">

###TT_NEWS.IMAGE###

</div>

<div style="padding-left:9em;">

<h2>###TT_NEWS.TITLE###</h2>

<ul>

<li>

###TT_NEWS_CAT.TITLE###

</li>

<li>

###TT_NEWS.SHORT###

</li>

</ul>

</div>

<div style="clear:both"></div>

</div> <!-- ###LISTBODYITEM### end --><!-- ###LISTBODY### end -->

</div><!-- ###LISTVIEW### end -->

<!-- ###TEMPLATE_LIST### end -->

Schematic Work Flow

Frame1

You have defined in the select property of your TypoScript all table.fields, you want to display in the frontend.

You have created your own HTML with the database markers in the section ###LISTBODYITEM###.

The result in the frontend.

Hint

If you want to display images and you use the fields imagealttext and imagetitletext in your select query like in the example above, the Browser will wrap them as the HTML image alt tag and title tag automatically.

Select Box for Ordering

Frame1

If you remove the ###ITEM### marker in the section ###LISTBODYITEM### in your HTML template, the Browser will replace the ###ITEM### marker in ###LISTHEADITEM### with a select box for ordering.

TypoScript Object Browser

Frame1

Cutout:

plugin.tx_browser_pi1 {

displayList {

selectBox_orderBy {

templateMarker = ###TEMPLATE_SELECTBOX###

selectbox = SELECTBOX

selectbox {

...

}

}

}

}

orderBy

If you like a individual order, please use this snippet (see Browser reference "orderBy"):

plugin.tx_browser_pi1.views.list {

1 {

select = ...

orderBy = tt_news.datetime desc, tt_news_cat.title

}

}

List View

The instructions above are for a list view. The principle for single views is similar. See the section below.

Single View

Default Design

Cutout for the default design. with the ###VALUE### marker:

...

<!-- ###SINGLEBODY### begin -->

<tbody><!-- ###SINGLEBODYROW### begin -->

<tr###CLASS###>

<th>###FIELD###</th>

<td>###VALUE###</td>

</tr><!-- ###SINGLEBODYROW### end -->

</tbody><!-- ###SINGLEBODY### end -->

...

Individual Design

Cutout for an individual design with database markers:

...

<!-- ###SINGLEBODYROW### begin -->

<div>

<h1>###TT_NEWS.TITLE###</h1>

<div style="float:left;">

###TT_NEWS.IMAGE###

</div>

<div style="padding-left:9em;">

<ul>

<li>

###TT_NEWS_CAT.TITLE###

</li>

<li>

###TT_NEWS.SHORT###

</li>

</ul>

</div>

<div style="clear:both"></div>

</div><!-- ###SINGLEBODYROW### end -->

...

Constant Marker

A constant marker may have any name, there is no precondition.

The name of a constant marker has to be unique.

And please don't use system markers like ###ACTION###, ###VIEW###.

And please don't confuse yourself: do not call a constant in the table.field syntax like ###TT_NEWS.TITLE###.

It is a good idea to use the prefix ###MY_... like ###MY_OWN_MARKER###.

Use your own constants

You can use your own constants in every HTML template.

Every constant marker is an object, it has the TypoScript stdWrap property.

Constant markers are very helpful, if you need a constant depending on other values or properties like the current language for example.

Default

HTML Template

The deafult HTML template uses three constant markers:

  • ###MY_TITLE###
  • ###MY_URL###
  • ###MY_RESET###

You find it in the file

res/default.tmpl

<!-- ###TEMPLATE_LIST### begin -->

###MY_TITLE###

<!-- ###SEARCHFORM### begin -->

<div class="searchbox searchbox-###VIEW###-###MODE###">

<form action="###ACTION###" method="post" >

<input type="hidden" name="no_cache" value="1" />

<input class="sword" type="text" name="tx_browser_pi1[sword]"onfocus="if(this.value =='###SWORD_DEFAULT###')this.value=''" value="###SWORD###" />

<input class="button" type="submit" value="###BUTTON###" />

<input class="button" type="button" onclick="location=' ###MY_URL### '"value=" ###MY_RESET### " />

</form>

...

TypoScript

You find three correspndending array in the TypoScript template.

Markers in TypoScript are only valid in lower case!

Global Array:

plugin.tx_browser_pi1 {

marker {

my_title {

value = Title

lang {

de = Titel

}

wrap = <h1>|</h1>

}

my_url {

typolink {

parameter = {page:uid}

parameter {

insertData = 1

}

returnLast = url

}

}

my_reset {

value = Reset

lang {

de = Zurücksetzen

}

}

}

}

If you like to use constant markers in one view only, you can define them local:

plugin.tx_browser_pi1.views.list.1 {

marker < plugin.tx_browser_pi1.marker

marker {

my_own_marker {

value = My Own Marker

lang {

de = Mein eigener Marker

}

wrap = <h1>|</h1>

}

}

}

If you like to copy the global array to the local array, please use this snippet:

plugin.tx_browser_pi1.views.list.1 {

marker < plugin.tx_browser_pi1.marker

}

System Marker

The Browser provides system markers - some are for both views list and single, some are for the list view only, others are for the single view only.

With Relevance for Your Design

This system markers have relevance in context with an individual design:

  • TITLE
  • TEXT
  • IMAGE
  • ITEM
  • VALUE

All have special properties.

With less Relevance

This system markers have not really relevance in context with your design:

  • SEARCHFORM
  • RESULTPHRASE
  • ACTION
  • SWORD_DEFAULT
  • SWORD
  • MODESELECTOR
  • AZSELECTOR
  • CLASS
  • VIEW
  • BUTTON
  • CHASH

The display of some of this markers are controlled with the Browser plugin like SEARCHFORM and RESULTPHRASE among others.

List View

###ITEM###: Will replaced with the list of all records. If you remove the ###ITEM### marker in the section###LISTBODYITEM### in your HTML template, the Browser will replace the ###ITEM### markerin ###LISTHEADITEM### with a select box for ordering. See "select box for ordering" above.And the Browser will process the replacement of database markers.

Single View

###TITLE###: Will becomes the value from the title field. The title field is detected by the browser. You cancontrol it with handleAs.

###IMAGE###: It is an image object. It will becomes the values from the fields image, imagecaption, imagealttext andimagetitletext. The fields are detected by the browser. You can control it with handleAs.

###TEXT###: Will becomes the value from the bodytext field. The bodytext field is detected by the browser. You cancontrol it with handleAs.

###VALUE###: Will replaced with the list of all elements of the current records. If you remove the ###VALUE### markerin the section ###SINGLEBODYROW### in your HTML template, the Browser will process thereplacement of database markers.

cHash

If you are using the marker &###CHASH### in a typolink, the browser tries to calculate the md5 value for the additional parameters.

Please take care of the '&' in front of the system marker!

TypoScript

plugin.tx_browser_pi1 {

marker {

my_more {

value = More

lang {

de = Mehr

}

typolink {

parameter = {page:uid}

parameter {

insertData = 1

}

additionalParams = &tx_browser_pi1[showUid]=###TX_WINE_MAIN.UID###&###CHASH###

wrap = <span class="more">|</span>

ATagBeforeWrap = 1

}

}

}

}

piVars Marker

You have access to the value of every piVar with a piVar marker.

Screenshots

  • We want display in a single view the current uid. The current uid is the piVar 'showUid'(tx_browser_pi1['showUid']).
  • We use the marker ###SHOWUID###

Frame1 Frame1

The news title is displayed with the piVar showUid (right hand).

Code

TypoScript

You find the TypoScript code for this step in res/tutorial_05/step_03.txt.

plugin.tx_browser_pi1 {

views {

list {

1 {

select = tt_news.title, tt_news_cat.title

}

}

single {

1 {

select = tt_news.title, tt_news_cat.title

tt_news {

title {

noTrimWrap = |###SHOWUID###: ||

}

}

}

}

}

}

TYPO3 $GLOBALS Marker

You have access to all values in the TYPO3 array $GLOBALS. You have to enable the access with the plugin.

Case Sensitive!

TYPO3 $GLOBAL markers are **case sensitive** ! This is an important difference to all other markers:

Plugin

Frame1

Select the tab [Advanced]

Enable a configured performance

Enable "Look for markers with a $GLOBAL key like ###TSFE:fe_user|...###"

Screenshot

Frame1

Code

TypoScript

Markers for the TYPO3 array $GLOBALS are case sensitive!

plugin.tx_browser_pi1 {

views {

list {

1 {

select = tt_news.title

tt_news {

title = COA

title {

10 = TEXT

10 {

value = ###TSFE:page|title###

wrap = |<br />

}

20 = TEXT

20 {

value = ###TSFE:TYPO3_CONF_VARS|SYS|sitename###

wrap = |<br />

}

30 = TEXT

30 {

value = ###TSFE:tmpl|setup|plugin.|tx_browser_pi1.|template.|file###

wrap = |<br />

}

40 = TEXT

40 {

value = ###TT_NEWS.TITLE###

}

}

}

}

}

}

}

HTML

You don't have correspondending markers in your HTML template. Please use a database marker like in the HTML code below or a constant marker as a COA like in the TypoSCript above.

Cutout

<!-- ###TEMPLATE_LIST### begin -->

###MY_TITLE###

...

<!-- ###LISTVIEW### begin -->

<div class="###VIEW###view ###VIEW###view-###MODE###">

...

<div>

<p>

###TT_NEWS.TITLE###

</p>

</div><!-- ###LISTBODYITEM### end --><!-- ###LISTBODY### end -->

</div><!-- ###LISTVIEW### end -->

<!-- ###TEMPLATE_LIST### end -->

More Information

If you aren't familiar with the TYPO3 array $GLOBALS, please take a look in the TSref.

Wrapping Fields

Every select item has the stdWrap property. If you want to use it, please take a look in the chapter "Wrapping Fields" of the Browser Tutorial Basics:

Further Information

Forum

  • img-8 Illustration 12: The TYPO3-Frontend-Engine Browser Forum

    The Browser has its own forum (leading language is German).

  • You are welcome to post any question, bug or snippet code at

  • TYPO3-Frontend-Engine Browser: Forum http://typo3-browser-forum.de/

Helpful suggestions

If you have helpful suggestions, feel free to publish any question, bug or code snippet on

http://typo3-browser-forum.de/

Posts are welcome in English and German.

To-Do List

Nothing to do.

Change Log

3.5.0 Maintenance - Update for the Browser version 3.5.0

3.0.1 Initial release- Publishing

Illustration Index

Illustration 1: Tutorial in PDF 3

Illustration 2: Schematic work flow of the default case without any own marker. 5

Illustration 3: Schematic work flow of the default case without any own marker. 5

Illustration 4: Individual desigend list view 6

Illustration 5: Schematic work flow with databse markers 7

Illustration 6: Select Box for Ordering 8

Illustration 7: TypoScript array for the select box 8

Illustration 8: News without the showUid in the default mode. 15

Illustration 9: News with the TypoScript above 15

Illustration 10: Plugin Configuration 16

Illustration 11: TYPO3 $GLOBALS marker and their result in the frontend 16

Illustration 12: The TYPO3-Frontend-Engine Browser Forum 22

26