Typo3 Formidable > Reference > elements > renderlet:BOX

renderlet:BOX

Reference

Go to Top
path data type req default uobj description
all     This control has applied all the common properties of renderlet.

See renderlet:* section for the complete list of common properties to use.
modestring div  The renderlet:BOX renders any HTML tag. The tag-name is defined by /mode.

By default, it will be a <div> tag, but it can be whatever you need, like a <span>, <p>, etc.

Example, with no /mode specified:
  1. <renderlet:BOX
  2.     name="mybox"
  3.     html="Hi! I'm a DIV."
  4. />

This will be rendered as:
  1. <div name="myformid[mybox]" id="myformid.mybox">Hi! I'm a DIV</div>


Example, with /mode=span:
  1. <renderlet:BOX
  2.     name="mybox"
  3.     html="And I'm a SPAN."
  4.     mode="span"
  5. />

This will be rendered as:
  1. <span name="myformid[mybox]" id="myformid.mybox">And I'm a SPAN.</span>


/mode=inline: If you need a BOX that renders only it's content, you have to define the special mode inline.
Please note that, in that case, Formidable is not able to manipulate the generated HTML at javascript-level, as no HTML tag surrounds your content.
htmlstring  
  
 Value that will be displayed inside the box.
If you define /childs on the renderlet:BOX, you don't have to provide any /html content.
childscollection of renderlets    The BOX may be considered as a container of other renderlets.
When that's the case, these renderlets are the childs of the box.

Childs on renderlet:BOX allow for nesting elements inside your application. The need to nest elements might reflect a HTML-design concern, or an application-logic-concern, or whatsoever. You decide.

Example:
  1. <renderlet:BOX name="mybox">
  2.     <childs>
  3.         <renderlet:TEXT name="mytitle" label="My title" />
  4.         <renderlet:TEXT name="mycomment" label="My comment" />
  5.     </childs>
  6. </renderlet:BOX>


When defining childs, a BOX may also be templated to layout the display of it's childs.
Example:
  1. <renderlet:BOX name="mybox">
  2.     <childs>
  3.         <template
  4.             path="EXT:myext/pi1/template.html"
  5.             subpart="###mybox###"
  6.         />
  7.         <renderlet:TEXT name="mytitle" label="My title" />
  8.         <renderlet:TEXT name="mycomment" label="My comment" />
  9.     </childs>
  10. </renderlet:BOX>
hasDataboolean false
  
 Deprecated.
Informs Formidable that your BOX may carry a postable value.
draggable/
draggable/useboolean false  If TRUE, the BOX will be draggable.
To enable the drag'n'drop features, you have to declare /meta/libs=dragdrop.

Example of draggable BOX:
  1. <renderlet:BOX name="mybox" html="Hello World !">
  2.     <draggable use="true" />
  3. </renderlet:BOX>
draggable/constraintstring    One of
  • vertical,
  • horizontal.

If horizontal is given, the BOX will be draggable only on the x axis.
If vertical, it will be draggable only on the y axis.

If none given, the dragging will not be constrained.
draggable/revertboolean false  If TRUE, the BOX will return to it's initial position when dragging is over.
draggable/handlestring; renderlet name    The absolute name of another renderlet within the current application.
If given, the BOX will be draggable, but only by this handle.

Example:
  1. <renderlet:BOX name="mybox" style="border: 2px solid black;">
  2.     <draggable
  3.         use="true"
  4.         handle="mybox.myhandle"
  5.     />
  6.     <childs>
  7.         <renderlet:BOX
  8.             name="myhandle"
  9.             html="--Click and drag me--"
  10.             style="text-align: center;"
  11.         />
  12.         <renderlet:BOX name="mycontent">
  13.             <html><![CDATA[
  14.  
  15.                 <hr />
  16.                 This is the content of the big black-bordered BOX.<br />
  17.                 This box can be dragged, but only by it's handle.
  18.  
  19.             ]]></html>
  20.         </renderlet:BOX>
  21.     </childs>
  22. </renderlet:BOX>
droppable/
droppable/useboolean false  If TRUE, the other draggable BOX renderlets will be able to drop on this one.
To enable the drag'n'drop features, you have to declare /meta/libs=dragdrop.

Example of droppable BOX:
  1. <renderlet:BOX name="mydropbox" html="I'm droppable">
  2.     <droppable use="true" />
  3. </renderlet:BOX>
droppable/acceptstring; css-class    Set accept to a string describing a CSS class.
The droppable will only accept draggables that has this CSS class.
droppable/hoverClassstring; css-class    The name of a CSS class that will be added to element while the droppable is active (has an acceptable draggable hovering over it).
onDragDropevent    An event that will be fired when an acceptable draggable is dropped on this box.
onDragHoverevent    An event that will be fired when an acceptable draggable is hovered on this box.

Examples

Go to Top