Toast

Toasts represent a type of notification message, commonly associated with push notifications on mobile devices. The value attribute of the <tc:toasts/> tag contains a list of toasts objects, each representing a single toast. A toast object MUST implement the org.apache.myfaces.tobago.application.Toast interface. If a toast has been closed, the corresponding object is removed from the list. The content of the toasts is fully customizable.

Tag Library Documentation: <tc:toasts/>

ToastFacesMessage

FacesMessage but as a toast.

<tc:toasts id="toastFacesMessages" value="#{toastsController.toastFacesMessages}"
           var="toastFacesMessage" placement="bottomLeft">
  <f:facet name="header">
    <tc:panel>
      <tc:style customClass="rounded me-2 #{toastFacesMessage.severityColor}"
                width="1.25rem" height="1.25rem"/>
    </tc:panel>
    <strong>
      <tc:out value="#{toastFacesMessage.severityText}" plain="true"/>
    </strong>
  </f:facet>
  <tc:out value="#{toastFacesMessage.text}" plain="true"/>
</tc:toasts>

Severity

Progress bar

Create a toast with a progress bar. Automatic dispose after a specific time is disabled ( disposeDelay="-1"). The close button is hidden ( markup="hideCloseButton"). The component is refreshed every 100ms. After the progress bar has reached 100%, the progress bar object is removed from the list ( value="#{toastsController.progressBars}". After the next refresh the related toast will also be removed from the page.

<tc:toasts id="progressBarToasts" value="#{toastsController.progressBars}"
           var="progress" disposeDelay="-1" markup="hideCloseButton">
  <f:facet name="reload">
    <tc:reload frequency="100"/>
  </f:facet>
  <f:facet name="header">
    <tc:out value="Progress" plain="true"/>
  </f:facet>
  <tc:progress value="#{progress.value}" max="#{progress.max}"/>
</tc:toasts>

Custom CSS class

To put a custom CSS class on a toast, use <tc:style customClass="..."/>.

<tc:toasts id="customToasts" value="#{toastsController.customCssToasts}" var="customToast">
  <tc:style customClass="#{customToast.cssClass}"/>
  <f:facet name="header">
    <tc:out value="Custom toast" plain="true"/>
  </f:facet>
  <tc:out value="The used CSS class is: #{customToast.cssClass}" plain="true"/>
</tc:toasts>

Menu

Toast

ToastFacesMessage

Progress bar

Custom CSS class