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 |
extKey: browser_tut_marker_en
Browser Tutorial Marker (en)¶
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
Table of Contents¶
Browser Tutorial Marker (en) 1
Schematic Work Flow without any own Marker 5
With Relevance for Your Design 13
This tutorial in PDF format 22
Introduction¶
What does it do?¶
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¶
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¶
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¶
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¶
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¶
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¶
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###
The news title is displayed with the piVar showUid (right hand).
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¶
Select the tab [Advanced]
Enable a configured performance
Enable "Look for markers with a $GLOBAL key like ###TSFE:fe_user|...###"
Screenshot¶
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.
- 1.2. Data typesLook for the string "gettext" http://typo3.org/documentation/document-library/extension- manuals/doc_core_tsref/4.2.1/view/1/2/#id4252676
- 1.13. PHP include scriptsExample with elements for some $GLOBALS http://typo3.org/documentation/document-library/extension- manuals/doc_core_tsref/4.2.1/view/1/13/#id4616950
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:
Templating¶
There is another tutorial for templating. See
Reference¶
See the section Reference in the Browsers manual.
Further Information¶
This tutorial in PDF format¶
You find this tutorial as a PDF file at
Browser Manual and Browser Tutorial Basics¶
Manual: The Browser has it's own manual (with the reference of course).
- HTML http://typo3.org/documentation/document-library/extension- manuals/browser/current/
- PDF: http://typo3.org/extensions/repository/view/browser/current/info /?tx_terfe_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf
Tutorial Basics: A lot of step-by-step introductions.
Forum¶
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