...
Configuración de componentes
A continuación se detallan los componentes que permiten algún tipo de configuración.
Diálogos
Cuando se usa el componente p:dialog, para que los botones de aceptar y cancelar del dialogo se vean correctamente deben estar dentro de un <f:facet name="footer"> o dentro de un div con la clase ui-dialog-buttonpane.
...
Inputs
p:inputText
La clase input-bg define una mayor altura al input.
Se pueden incluir iconos en el input con las clases um-input-icons y um-icon de la forma:
<div class="um-input-icons">
<i class="um-icon fa fa-pencil-square-o fa-lg" />
<p:inputText styleClass="input-bg" />
<span class="um-icon">$</span>
</div>
También se han tenido en cuenta las agrupaciones, ente caso la clase input-bg, si que quiere poner, hay que ponerla en el div para que se aplique también a los addon, por ejemplo:
<div class="ui-inputgroup input-bg">
<span class="ui-inputgroup-addon">
<i class="fa fa-shopping-cart"></i>
</span>
<span class="ui-inputgroup-addon">
<i class="fa fa-credit-card"></i>
</span>
<p:inputText placeholder="Price" />
<span class="ui-inputgroup-addon">$</span>
<span class="ui-inputgroup-addon">.00</span>
</div>
p:inputText con etiqueta flotante (solo primefaces 8)
<span class="ui-float-label">
<p:inputText />
<p:outputLabel for="@previous" value="ui-float-label" />
</span>
Botones
Se han probado con las configuraciones habituales, botón con solamente texto, texto e icono, solamente icono. En caso de botones que solamente tienen icono, se debe seguir las reglas de accesibilidad y proporcionarles una etiqueta de alguna forma.
Clases CSS aplicables:
btn: Esta clase es necesaria para aplicar el estilo al botón.
btn-primary, btn-secondary y btn-light: Estas clases definen la importancia del botón, btn-primary es el valor por defecto.
btn-sm, btn-md, btn-lg: definen el tamaño del botón, por defecto es btn-lg.
btn-round: redondea completamente el botón, si el botón solamente tiene icono tendrá forma de circulo.
Clave CSS botonera se puede poner en el div que incluye los botones para separarlos correctamente.
Ejemplos en diferentes componentes:
p:commandButton
<p:commandButton styleClass="btn btn-primary" value="Guardar" disabled="true"/>
<p:commandButton styleClass="btn btn-primary btn-md" value="Guardar" icon="fa fa-floppy-o" />
<p:commandButton styleClass="btn btn-secondary" icon="fa fa-floppy-o" />
p:conmmandlink
Al poner la clase btn este componente se dibujará como un botón pero seguirá generando un "tag a" en el HTML así que se recomienda usar como botón solamente si es imprescindible y en este caso es necesario añadir el atributo role="button".
Para usar este componente como botón tenemos que usar las clases css: ui-button-icon-left ui-button-text
<p:commandLink styleClass="btn" role="button">
<i class="ui-button-icon-left fa fa-floppy-o" />
<span class="ui-button-text">btn</span>
</p:commandLink>
<p:commandLink styleClass="btn btn-round" role="button">
<i class="ui-button-icon-left fa fa-floppy-o" />
</p:commandLink>
button (HTML)
Usaremos las clases ui-button-text ui-button-icon-left
<button class="btn btn-primary">
<i class="ui-button-icon-left fa fa-floppy-o"></i>
<span class="ui-button-text">texto</span>
</button>
p:splitButton
...
Grupo de botones
Para agrupar botones usaremos la clase um-button-group
<span class="um-button-group">
<p:commandButton styleClass="btn btn-light btn-sm" icon="fa fa-floppy-o" />
<p:commandButton styleClass="btn btn-light btn-sm" value="Accion" />
</span>
<span class="um-button-group">
<p:commandLink styleClass="btn btn-light btn-sm ui-button-icon-only" role="button">
<i class="ui-button-icon-left fa fa-floppy-o" />
</p:commandLink>
<p:commandLink styleClass="btn btn-light btn-sm" role="button">
<span class="ui-button-text">Accion</span>
</p:commandLink>
</span>
S:link como botón
<s:link class="ui-commandlink btn btn-secondary">
<i class="ui-button-icon-left fa fa-floppy-o" />
<span class="ui-button-text">s:link como botón secundario</span>
</s:link>
TabWiew
Tabs con pestañas subrayadas, clase ".tab-subrayado"
Tabs dentro de un panel
Si el elemento <p:tabView es el primero dentro de un panel, se adaptará para ocupar todo el contenido del panel y aparecerá subrayado.
Panel
Iconos de acción en el titulo del panel, ejemplo de posibles acciones y desplegable con opciones:
<p:panel header="Panel de pruebas" toggleable="true" closable="true">
<f:facet name="actions">
<h:form>
<p:commandLink styleClass="ui-panel-titlebar-icon">
<h:outputText styleClass="ui-icon fa fa-question"/>
</p:commandLink>
<p:commandLink styleClass="ui-panel-titlebar-icon">
<h:outputText styleClass="ui-icon fa fa-star"/>
</p:commandLink>
</h:form>
</f:facet>
<f:facet name="options">
<h:form>
<p:menu>
<p:menuitem value="Accion 1" />
<p:menuitem value="Accion 2" />
</p:menu>
</h:form>
</f:facet>
...
Clases para tipografía
Son clases con los estilos de la tipografía definida en Zeplin, por si se quieren usar para cambiar la tipografía por defecto.
Tamaño:
.text-size-big-1 .text-size-big-2 .text-size-big-3 .text-size-big-4 .text-size-big-5
.text-size-body .text-size-caption .text-size-small .text-size-tiny
Weight:
.font-weight-bold .font-weight-semi .font-weight-medium .font-weight-regular
Color:
.text-dark .text-grey .text-white .text-primary
En primeflex tenemos otras clases por ejemplo para justificación, "Primeflex text en Showcase" -> www.primefaces.org/showcase/primeflex/text.xhtml
Página de Bienvenida
La aplicación debería tener una página de Bienvenida, como se puede ver en zeplin o en la página de bienvenida de Apium. Para facilitar el trabajo la implementación de esta página se han definido las siguientes clases CSS.
- Introducción pantalla de inicio (umu-intro, umu-desc, umu-desc small)
- Enlaces pantalla inicio (enlaces-home)
- Tarjeta pantalla inicio (umu-card, umu-card-top, umu-card-link, umu-icon-red, umu-icon-purple, umu-icon-yellow, umu-icon-green, umu-icon-blue, umu-card-bottom, umu-card-label, umu-card-desc )
<div class="umu-intro">
<h1>Titulo</h1>
<div class="umu-desc">Descripcion</div>
<div class="umu-desc small">
<p>Linea 1</p>
<p>Linea 2</p>
</div>
</div>
<div class="enlaces-home">
<h2>Titulo de enlaces</h2>
<h:form>
<div class="umu-card">
<div class="umu-card-top">
<p:commandLink styleClass="umu-card-link" pt:aria-labelledby="tarjetaLabel" pt:aria-describedby="tarjetaDesc">
<i class="fa fa-list-alt umu-icon-purple" />
</p:commandLink>
</div>
<div class="umu-card-bottom">
<div id="tarjetaLabel" class="umu-card-label">Label</div>
<div id="tarjetaDesc" class="umu-card-desc">Descripcion de la acción de esta tarjeta</div>
</div>
</div>
...
</h:form>
</div>
Para ver como usar los componentes y sus distintas opciones de configuración, se puede consultar la aplicación FundeWeb ShowCase.
Notas de accesibilidad
En el arquetipo se ha puesto especial interés en cumplir las reglas de accesibilidad en las partes que vienen implementadas, además en el diseño de componentes se ha tenido en cuenta las reglas visuales de accesibilidad como las que hacen referencia al contraste del componente, pero muchas de estas reglas dependen de donde se coloca este componente, por ejemplo el criterio "1.4.11 Non-text Contrast" añadido nuevo en WCAG 2.1, que hace referencia al contraste del componente en relación a los elementos que hay alrededor, no se cumpliría sí colocamos un botón terciario (btn-light), que no tiene un borde con contraste alto, cerca de algún tipo texto, ya que no se distinguiría suficientemente de él, pero si se cumpliría si lo colocamos en una botonera.
...