.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt .. role:: underline ============================ 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: 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, 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: Table of Contents ----------------- `Browser Tutorial Marker (en) 1 <#__RefHeading__32554_603351207>`_ `Introduction 3 <#__RefHeading__32556_603351207>`_ `What does it do? 3 <#__RefHeading__32558_603351207>`_ `Marker Overview 4 <#__RefHeading__32560_603351207>`_ `Definition 4 <#__RefHeading__32562_603351207>`_ `Default 4 <#__RefHeading__32564_603351207>`_ `Database Marker 4 <#__RefHeading__32566_603351207>`_ `Constant Marker 4 <#__RefHeading__32568_603351207>`_ `System Marker 4 <#__RefHeading__32570_603351207>`_ `piVars Marker 4 <#__RefHeading__32572_603351207>`_ `TYPO3 $GLOBALS Marker 4 <#__RefHeading__32574_603351207>`_ `Default 5 <#__RefHeading__32576_603351207>`_ `Schematic Work Flow without any own Marker 5 <#__RefHeading__32578_603351207>`_ `Database Marker 6 <#__RefHeading__32580_603351207>`_ `Screenshot 6 <#__RefHeading__32582_603351207>`_ `Code 6 <#__RefHeading__32584_603351207>`_ `Schematic Work Flow 7 <#__RefHeading__32586_603351207>`_ `Select Box for Ordering 8 <#__RefHeading__32588_603351207>`_ `List View 9 <#__RefHeading__32590_603351207>`_ `Single View 10 <#__RefHeading__32592_603351207>`_ `Constant Marker 11 <#__RefHeading__32594_603351207>`_ `Use your own constants 11 <#__RefHeading__32596_603351207>`_ `Default 11 <#__RefHeading__32598_603351207>`_ `System Marker 13 <#__RefHeading__32600_603351207>`_ `With Relevance for Your Design 13 <#__RefHeading__32602_603351207>`_ `With less Relevance 13 <#__RefHeading__32604_603351207>`_ `List View 13 <#__RefHeading__32606_603351207>`_ `Single View 13 <#__RefHeading__32608_603351207>`_ `cHash 14 <#__RefHeading__32610_603351207>`_ `piVars Marker 15 <#__RefHeading__32612_603351207>`_ `Screenshots 15 <#__RefHeading__32614_603351207>`_ `Code 15 <#__RefHeading__32616_603351207>`_ `TYPO3 $GLOBALS Marker 16 <#__RefHeading__32618_603351207>`_ `Case Sensitive! 16 <#__RefHeading__32620_603351207>`_ `Plugin 16 <#__RefHeading__32622_603351207>`_ `Screenshot 16 <#__RefHeading__32624_603351207>`_ `Code 17 <#__RefHeading__32626_603351207>`_ `More Information 18 <#__RefHeading__32628_603351207>`_ `Wrapping Fields 19 <#__RefHeading__32630_603351207>`_ `Templating 20 <#__RefHeading__7409_1650786976>`_ `Reference 21 <#__RefHeading__32632_603351207>`_ `Further Information 22 <#__RefHeading__32634_603351207>`_ `This tutorial in PDF format 22 <#__RefHeading__32636_603351207>`_ `Browser Manual and Browser Tutorial Basics 22 <#__RefHeading__32638_603351207>`_ `Forum 22 <#__RefHeading__32642_603351207>`_ `Helpful suggestions 23 <#__RefHeading__32646_603351207>`_ `To-Do List 24 <#__RefHeading__32648_603351207>`_ `Change Log 25 <#__RefHeading__32650_603351207>`_ `Illustration Index 26 <#__RefHeading__32652_603351207>`_ .. _Introduction: Introduction ------------ .. _What-does-it-do: 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: Marker Overview --------------- .. _Definition: 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: 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: 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: 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: System Marker ^^^^^^^^^^^^^ The Browser provides some system markers: - TITLE - TEXT - IMAGE - ITEM They have special properties. .. _piVars-Marker: piVars Marker ^^^^^^^^^^^^^ You have access to the value of every piVar with a piVar marker at runtime. .. _TYPO3-GLOBALS-Marker: 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: 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: Schematic Work Flow without any own Marker ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Below we have illustrated a schematic work flowfor a list with tt\_news titles and categories. .. _Title: Title """"" |img-6| 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: Items """"" |img-6| 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: 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: 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: Code ^^^^ .. _TypoScript: 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: HTML """" Cutout ###MY\_TITLE### ...
###ITEM### **
** **
** **###TT\_NEWS.IMAGE###** **
** **
** **

###TT\_NEWS.TITLE###

** **
    ** **
  • ** **###TT\_NEWS\_CAT.TITLE###** **
    • ** **
  • ** **###TT\_NEWS.SHORT###** **
    • ** **
** **
** **
** **
**
.. _Schematic-Work-Flow: Schematic Work Flow ^^^^^^^^^^^^^^^^^^^ |img-6| 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: Select Box for Ordering ^^^^^^^^^^^^^^^^^^^^^^^ |img-6| 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: TypoScript Object Browser """"""""""""""""""""""""" |img-6| Cutout: plugin.tx\_browser\_pi1 { displayList { selectBox\_orderBy { templateMarker = ###TEMPLATE\_SELECTBOX### selectbox = SELECTBOX selectbox { ... } } } } .. _orderBy: 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 } } .. _Labeling: Labeling """""""" If you like to label the field names, please take a look into Browser Tutorial Labeling - HTTP: `http://typo3.org/documentation/document-library/extension- manuals/browser\_tut\_labeling\_en/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/\_tut\_labeling\_en/ current/info/?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _List-View: List View ^^^^^^^^^ The instructions above are for a list view. The principle for single views is similar. See the section below. .. _Single-View: Single View ^^^^^^^^^^^ .. _Default-Design: Default Design """""""""""""" Cutout for the default design. with the ###VALUE### marker: ... ###FIELD### ###VALUE### ... .. _Individual-Design: Individual Design """"""""""""""""" Cutout for an individual design with database markers: ...

###TT\_NEWS.TITLE###

###TT\_NEWS.IMAGE###
  • ###TT\_NEWS\_CAT.TITLE###
  • ###TT\_NEWS.SHORT###
... .. _Constant-Marker: 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: 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: Default ^^^^^^^ .. _HTML-Template: 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 **###MY\_TITLE###**
... .. _TypoScript: 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 =

\|

} 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 =

\|

} } } 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: 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: 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: 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: 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: 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: 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: 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 = \| ATagBeforeWrap = 1 } } } } .. _piVars-Marker: piVars Marker ------------- You have access to the value of every piVar with a piVar marker. .. _Screenshots: 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### |img-6| |img-6| The news title is displayed with the piVar showUid (right hand). .. _Code: Code ^^^^ .. _TypoScript: 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: 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: Case Sensitive! ^^^^^^^^^^^^^^^ TYPO3 $GLOBAL markers are :underline:`**case sensitive**` ! This is an important difference to all other markers: .. _Plugin: Plugin ^^^^^^ |img-6| Select the tab [Advanced] Enable a configured performance Enable "Look for markers with a $GLOBAL key like ###TSFE:fe\_user\|...###" .. _Screenshot: Screenshot ^^^^^^^^^^ |img-6| .. _Code: Code ^^^^ .. _TypoScript: 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 = \|
} 20 = TEXT 20 { value = **###TSFE:TYPO3\_CONF\_VARS\|SYS\|sitename###** wrap = \|
} 30 = TEXT 30 { value = **###TSFE:tmpl\|setup\|plugin.\|tx\_browser\_pi1.\|template.\ |file###** wrap = \|
} 40 = TEXT 40 { value = **###TT\_NEWS.TITLE###** } } } } } } } .. _HTML: 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 ###MY\_TITLE### ...
...

**###TT\_NEWS.TITLE###**

.. _More-Information: 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: 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: - HTTP: `http://typo3.org/documentation/document-library/extension- manuals/browser\_tut\_basics\_en/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/\_tut\_basics\_en/cu rrent/info/?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Templating: Templating ---------- There is another tutorial for templating. See - HTTP: `http://typo3.org/documentation/document-library/extension- manuals/browser\_tut\_templating\_en/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/\_tut\_templating\_e n/current/info/?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Reference: Reference --------- See the section Reference in the Browsers manual. - 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 `_ .. _Further-Information: Further Information ------------------- .. _This-tutorial-in-PDF-format: This tutorial in PDF format ^^^^^^^^^^^^^^^^^^^^^^^^^^^ You find this tutorial as a PDF file at - doc/manual.pdf - `http://typo3.org/extensions/repository/view/browser\_tut\_marker\_en/ current/info/?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Browser-Manual-and-Browser-Tutorial-Basics: 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. - HTML: `http://typo3.org/documentation/document-library/extension- manuals/browser\_tut\_basics\_en/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/browser\_tut\_basics \_en/current/info/?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Forum: 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: 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: To-Do List ---------- Nothing to do. .. _Change-Log: Change Log ---------- 3.5.0 **Maintenance** - Update for the Browser version 3.5.0 3.0.1 **Initial release-** Publishing .. _Illustration-Index: 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 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 27 .. :hspace: 4 .. :id: Grafik2 .. :name: Grafik2 .. :width: 98 .. |img-3| image:: img-3.png .. :align: bottom .. :border: 0 .. :height: 27 .. :id: graphics25 .. :name: graphics25 .. :width: 30 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 268 .. :id: graphics5 .. :name: graphics5 .. :width: 302 .. |img-5| image:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 222 .. :id: graphics3 .. :name: graphics3 .. :width: 227 .. |img-6| image:: data: :alt: Frame1 .. :align: bottom .. :id: Frame1 .. :name: Frame1 .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :id: graphics9 .. :name: graphics9 .. :width: 100% .. |img-8| image:: img-8.jpeg .. :align: left .. :border: 0 .. :height: 161 .. :id: graphics7 .. :name: graphics7 .. :width: 302