Tobago

A continuación pasamos a mostrar el código necesario para visualizar en nuestra aplicación algunos de los componentes que aporta Tobago:

Comandos (Botones y Links)

Para que en nuestra página se nos renderice un botón, no tenemos más que definir el siguiente fuente:

<tc:button label="Borrar" action="#{controller.delete}" 
    image="imagenes/borrar.png" defaultCommand="false">
  <f:facet name="confirmation">
    <tc:out value="¿Realmente me quieres borrar?" />
  </f:facet>
</tc:button>

Al agregar al código del botón la etiqueta f:facet se obliga a que, al pulsar sobre el botón, el navegador pida confirmación de la acción que se va a ejecutar. Si se pulsa el botón "Ok" se ejecutará la acción demandada.

Esta estructura es equivalente para los enlaces.

Se puede utilizar un control genérico tc:command para capturar eventos en los controles tc:selectBooleanCheckbox, tc:selectOneRadio, tc:selectManyCheckbox, y tc:selectOneChoice. A continuación se muestra un ejemplo para que vaya al servidor tras la pulsación de los temas disponibles:

<tx:selectOneChoice label="#{bundle.footerTheme}" value="#{controller.theme}">
  <f:selectItems value="#{controller.themeItems}" />
  <f:facet name="change">
    <tc:command action="#{controller.themeChanged}"/>
  </f:facet>
</tx:selectOneChoice>

Tablas

El componente tc:sheet permite mostrar datos de forma tabular. Podemos ver un ejemplo en el que se muestra como almacenar una agenda:

<tc:sheet columns="1*;1*;1*" value="#{controller.currentAddressList}"
    var="address" state="#{controller.selectedAddresses}"
    sortActionListener="#{controller.sheetSorter}" rows="25"
    showRowRange="left" showPageRange="right" showDirectLinks="center">
  <tc:column id="firstName" label="#{bundle.listFirstName}" sortable="true"
      rendered="#{controller.renderFirstName}">
    <tc:out value="#{address.firstName}" />
  </tc:column>
  <tc:column id="lastName" label="#{bundle.listLastName}" sortable="true"
      rendered="#{controller.renderLastName}">
    <tc:out value="#{address.lastName}" />
  </tc:column>
  <tc:column id="dayOfBirth" label="Birthday" sortable="true"
      rendered="#{controller.renderDayOfBirth}">
    <tc:out value="#{address.dayOfBirth}">
      <f:convertDateTime pattern="#{bundle.editorDatePattern}" />
    </tc:out>
  </tc:column>
</tc:sheet>

El atributo value nos devuelve una lista desde el controlador utilizado que contiene la lista con los datos. El tag usado tc:sheet es la raíz de un árbol con tres columnas identificadas por tc:column.

• En el tag sheet se define una variable local address la cual identificará cada una de las filas que nos ha devuelto la lista con los resultados.
• En cada columna se mostrará en la cabecera el valor de la etiqueta label de cada columna.

Pestañas

El control tc:tabGroup renderiza lo que conocemos como pestañas, es decir, vistas de distintos paneles en la misma página. Para la implementación de este control, el proyecto Tobago ha utilizado Ajax para cambiar el contenido interno de los paneles.

<tc:tabGroup switchType="reloadTab" immediate="true">
  <tc:tab label="#{bundle.editorTabPersonal}">
    <jsp:include page="tab/personal.jsp"/>
  </tc:tab>

  <tc:tab label="#{bundle.editorTabBusiness}" rendered="#{!controller.simple}">
    <jsp:include page="tab/business.jsp"/>
  </tc:tab>

  <tc:tab label="#{bundle.editorTabMisc}" rendered="#{!controller.simple}">
    <jsp:include page="tab/misc.jsp"/>
  </tc:tab>
</tc:tabGroup>

En este ejemplo se han introducido unas condiciones para la visualización de la segunda y tercera pestaña, utilizando para ello el atributo rendered.

Otros controles

• Para que la aplicación desarrollada con Tobago tenga la apariencia de una aplicación de escritorio se puede usar el control denominado tc:menu, con este control y otros que mostramos a continuación conseguimos la visualización de un menú.

<tc:menuBar id="menuBar">

  <tc:menu label="_File">
    <tc:menuItem label="_New" action="#{controller.createAddress}" image="image/org/tango-project/tango-icon-theme/16x16/actions/contact-new.png"/>
    <tc:menuItem label="_Add Dummy Addresses"
        action="#{controller.addDummyAddresses}"/>
    <tc:menuSeparator/>
    <tc:menuItem label="_Logout" image
        ="image/org/tango-project/tango-icon-theme/16x16/actions/system-log-out.png"/>
  </tc:menu>

  <tc:menu label="_Settings">
    ...
    <tc:menu label="_Theme">
      <tx:menuRadio action="#{controller.themeChanged}"
          value="#{controller.theme}">
        <f:selectItems value="#{controller.themeItems}"/>
      </tx:menuRadio>
    </tc:menu>
    <tc:menuCheckbox label="Simple _Mode" value="#{controller.simple}"/>
  </tc:menu>
  ...
</tc:menuBar>

• Si queremos implementar en nuestra página una especie de grupo de botones a modo de barra de herramientas, lo conseguimos con el control tc:toolbar

<tc:toolBar iconSize="big">
  <tc:toolBarCommand label="#{bundle.toolbarAddressList}" 
      action="#{controller.search}" immediate="true" image=
 "image/org/tango-project/tango-icon-theme/32x32/mimetypes/x-office-address-book.png"
      disabled="#{facesContext.viewRoot.viewId == '/application/list.jsp'}"/>
  ...
</tc:toolBar>

• Si tenemos la necesidad de subir algún fichero, usaremos el control tc:file. El archivo que se va a subir será alojado dentro de un atributo de tipo FileItem dentro del paquete commons-fileupload

<tc:file value="#{controller.uploadedFile}" required="true">
  <tc:validateFileItem contentType="image/*"/>
</tc:file>

Con el controlador tc:validateFileItem se establece un filtro para que el usuario no pueda subir un fichero que no sea imagen.