f:be.container

The first question you should ask yourself is whether you want to build something using the existing TYPO3 interface, or build something completely bespoke. If you're making a bespoke interface, then you don't need this ViewHelper at all. In this event, bind your own JavaScript and CSS assets yourself.

However, if you want to build something using the standard TYPO3 interface, thereby providing a close integration and compatibility with other modules, then use this ViewHelper. In essence, you only need to use two rows of code and around ten properties.

Properties

pageTitle

| Condition: optional | Type: string | Default: empty string |

Backend modules are loaded in an HTML frame, so it's not essential to define an HTML page title. If you want to, then this is the property to use.

enableJumpToUrl

| Condition: optional | Type: boolean | Default: true |

Activate this parameter if you want to use the ActionMenu ViewHelper. This loads the necessary JavaScript assets.

This property has been marked as deprecated in TYPO3 6.2 and was removed in TYPO3 7.0.

enableClickMenu

| Condition: optional | Type: boolean | Default: true |

When active, this property loads the JavaScript for context menu functionality.

loadPrototype

| Condition: optional | Type: boolean | Default: true |

When active, the Prototype JS framework will be loaded.

loadScriptaculous

| Condition: optional | Type: boolean | Default: false |

When active, the Scriptaculous extension to Prototype JS will be loaded.

scriptaculousModule

| Condition: optional | Type: string | Default: empty string |

Using this option, you can load additional JavaScript modules for Scriptaculous.

loadExtJs

| Condition: optional | Type: boolean | Default: false |

When active, the ExtJS framework will be loaded.

loadExtJsTheme

| Condition: optional | Type: boolean | Default: true |

When active, templates for the graphical elements of the ExtJs framework will be loaded.

extJsAdapter

| Condition: optional | Type: string | Default: empty string |

You can use this property to define a different adaptor instead of the standard, Extbase.

enableExtJsDebug

| Condition: optional | Type: boolean | Default: false |

This property should only be activated during a development process involving ExtJS.

addCssFile

| Condition: optional | Type: string | Default: null |

Bind a specific CSS asset file to the view.

This property has been marked as deprecated in TYPO3 6.2 and was removed in TYPO3 7.0. Please use the includeCssFiles instead.

addJsFile

| Condition: optional | Type: string | Default: null |

Bind a specific JavaScript asset file to the view.

This property has been marked as deprecated in TYPO3 6.2 and was removed in TYPO3 7.0. Please use the includeJsFiles instead.

loadJQuery

| Condition: optional | Type: boolean | Default: false |

When active, jQuery will be loaded.

includeCssFiles

| Condition: optional | Type: array | Default: null |

Using addCssFile will only allow you to bind in a single CSS asset file. Using includeCssFiles allows you to bind multiple files.

includeJsFiles

| Condition: optional | Type: array | Default: null |

Using addJsFile will only allow you to bind in a single JavaScript asset file. Using includeJsFiles allows you to bind multiple files.

addJsInlineLabels

| Condition: optional | Type: array | Default: null |

Each value must correspond to a key from the locallang.xml/xlf file. The matching translation will then be available in the backend.

Examples

Simple

"your module content" wrapped with proper head & body tags. Default backend CSS styles and JavaScript will be included.

<f:be.container>your module content</f:be.container>

All options

"your module content" wrapped with proper head & body tags. Custom CSS file EXT:your_extension/Resources/Public/Css/styles.css and JavaScript files EXT:your_extension/Resources/Public/JavaScript/Library1.js and EXT:your_extension/Resources/Public/JavaScript/Library2.js will be loaded, plus ExtJS and jQuery and some inline labels for usage in JS code.

<f:be.container pageTitle="foo"
                enableClickMenu="false"
                loadExtJs="true"
                loadExtJsTheme="false"
                enableExtJsDebug="true"
                loadJQuery="true"
                includeCssFiles="{0: '{f:uri.resource(path:\'Css/Styles.css\')}'}"
                includeJsFiles="{
                   0: '{f:uri.resource(path:\'JavaScript/Library1.js\')}',
                   1: '{f:uri.resource(path:\'JavaScript/Library2.js\')}'}"
                addJsInlineLabels="{
                   0: 'label1',
                   1: 'label2'}"
>
   your module content
</f:be.container>