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: HTML5 ViewHelper for Fluid

Created:2010-02-18T17:33:18
Changed by:Maximilian Kalus
Changed:2011-09-12T10:12:30
Classification:mak_html5_viewhelper
Description:The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ----
Keywords:html5, fluid, viewhelper, view helper
Author:Dr. Maximilian Kalus
Email:info@auxnet.de
Info 4:
Language:en

img-1 img-2 EXT: HTML5 ViewHelper for Fluid - mak_html5_viewhelper

EXT: HTML5 ViewHelper for Fluid

Extension Key: mak_html5_viewhelper

Language: en

Keywords: html5, fluid, viewhelper, view helper

Copyright 2000-2010, Dr. Maximilian Kalus, <info@auxnet.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

EXT: Readable name of your extension 1

`Introduction 3 <#1.1.Introduction|outline>`_

What does it do? 3

Screenshots 3

`Users manual 4 <#1.2.Users%20manual|outline>`_

FAQ 4

`Administration 5 <#1.3.Administration|outline>`_

FAQ 5

`Configuration 6 <#1.4.Configuration|outline>`_

FAQ 6

Reference 6

`Tutorial 7 <#1.5.Tutorial|outline>`_

`Known problems 8 <#1.6.Known%20problems|outline>`_

`To-Do list 9 <#1.7.To-Do%20list|outline>`_

`ChangeLog 10 <#1.8.ChangeLog|outline>`_

Important guidelines 11

`Issues with Open Office documentation for TYPO3 12 <#2.1.Issues%20w ith%20Open%20Office%20documentation%20for%20TYPO3|outline>`_

Inserting images 12

Paragraph styles 12

Linking 13

Meta data and updates 13

HowTo: Update a manual to the new layout 13

HowTo: (alternative) Import the styles from another document 14

`HowTo: Fix the Table Of Contents when it is empty 14 <#2.1.8.HowTo:%2 0Fix%20the%20Table%20Of%20Contents%20when%20it%20is%20empty%20|outline >`_

HowTo: Fix the Table Of Contents when a chapter is missing 14

Help by documentation.openoffice.org 14

Introduction

What does it do?

  • The extension defines four view helpers that help generate HTML5-compliant tags using data-attributes.
  • Link view helpers have an additonal attribute called “attributes” which takes an array of additional attrubutes.
  • Can be used for JQuery Mobile, for example.

Screenshots

img-3 This code becomes (in JQuery Mobile):

img-4

Users manual

  • The view helpers allow the addition of new attributes to the a-Tag based views of Fluid. This means you can add data-* attributes to an action tag, for example.
  • The view helpers are quite easy to use as explained in the following steps.
  • Define a namespace in your own view, e.g. {namespace x=Tx\_MakHtml5Viewhelper\_ViewHelpers}
  • Create a link action as you would in fluid. Instead of the “f:”-prefix take the one you choose above (e.g. “x:”).
  • Additional attributes can be added by adding an array “attributes”.

Examples

<x:link.action action="show" attributes="{data-role: 'button'}">Show stuff</x:link.action>

<x:link.email email="test@test.de" attributes="{data-role: 'button', data-theme: 'e'}">Mail me!</x:link.email>

<x:link.external uri="http://www.auxnet.de/" attributes="{data- role: 'button', data-icon: 'arrow-r', data-iconpos: 'right'}">Visit my homepage</x:link.external>

<x:link.page pageUid="1" attributes="{data-role: 'button', data-icon: 'home'}">HOME</x:link.page>

Administration

None really – just install the extension, it just contains the view helpers.

Configuration

None really – just install the extension, it just contains the view helpers.

Known problems

None up to date.

To-Do list

Maybe add other view helpers that contain HTML5 tags...

ChangeLog

0.1.0

Version

0.1.0

Changes

First implementation: link-ViewHelpers added

img-2 9