Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Out

The <tc:out/> display an outputtext combined with a label.

Tag Library Documentation

Basics

To put a label in front of an outputtext, use the label attribute.

<tc:out label="Output" value="Some Text"/> Some Text Output without a label

Skip with compact

If using labelLayout="skip" there is still a tag surrounding the output text.

This text is rendered by tc:out with labelLayout=skip.

Set compact="true" to remove the surrounding tag as well.

This text is rendered by tc:out with labelLayout=skip and compact=true.

Markups

thin
normal
bold
italic
primary
secondary
success
danger
warning
info
light
dark
muted
deleted
number
large
small
combination: deleted danger italic

Message Format

Using message formatting for i18n strings. <tc:out value="#{demoBundle.message_format_example}" messageFormat="true"> <f:param value="Mrs"/> <f:param value="Smith"/> </tc:out> Welcome Mrs Smith!

Escape

If the given string to the output field is HTML/XML code, it will be escaped by default. But you can turn it off with the escape attribute.

Escape on (default)

<tc:out label="Escape on (default)" escape="true" value="#{outController.html}"/> Text in <span style='color:#FF0000'>red</span>, <span style='color:#00FF00'>green</span> and <span style='color:#0000FF'>blue</span>.

Escape off

Although the HTML code is not escaped, you can see, that the text is not colored. This is, because the code is sanitized (see next section).

<tc:out label="Escape off" escape="false" value="#{outController.html}"/> Text in red, green and blue.

Sanitize

Sanitize remove HTML/XML-Tags from a given string if not escaped. It can be configured in the tobago-config.xml. If you want to write your own sanitizer, you have to implement org.apache.myfaces.tobago.sanitizer.Sanitizer.

Sanitizing can be deactivated for a component using the sanitize attribute. But be careful, because of XSS vulnerability.

<tc:out label="Sanitize off" escape="false" sanitize="never" value="#{outController.html}"/> Text in red, green and blue.

Probably you will find no colors here. In that case, the CSP in the browser protects against inline style. Further information about CSP in Tobago can be found in the security section.

© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.