Diseño: plantillas y estilos con ADF

Normalmente en todos los proyectos web, queremos que todas las páginas tengan una apariencia coherente en todo nuestro sitio, para mejorar la usabilidad. Lo más habitual en web es poner como parte fija la cabecera (con el login por ejemplo), un menú en la parte superior o lateral, y un pié:

• Y que estas partes (que forman la plantilla) se incluyan en todas las páginas que desarrollemos sin necesidad de volver a repetir todo.
• Que cualquier modificación sobre la plantilla se refleje automaticamente en todo nuestro sitio, sin tocar el resto.
• Y, si es posible, en mi editor WYSIWYG se vea todo (esto en Eclipse no es posible de momento).

En el proyecto ViewController New > Web Tier > JSF Page Template, creamos /WEB-INF/templates/template.jspx:

• Escogeremos una plantilla de cabecera y pié fijas
• Selecionaremos “Create ADFm Page Definition” para definir un objeto que maneje la plantilla después.
• Añadimos un facet llamado content donde introduciremos las páginas que desarrollemos después.
•  Añadimos un atributo pageTitle para pasarle desde nuestras páginas el título de las mismas.

Nos genera un fichero llamado trinidad-config.xml donde podremos cambiar la configuación del skin, de fusion a blafplus-rich por ejemplo.

Con ADF podemos crear nuestras propias skins (apariencia an español), no es inmediato y siempre conviene contar con las habilidades de un diseñador web. No obstante trae una serie de skins por defecto que pueden ser suficientes para ti:

• simple: formato mínimo y muy ligero
• blafplus-medium: modestamente cargado.
• blafplus-rich: extiende el blafplus-medium, le da mejor apariencia con cosas como esquinas redondeadas.
• fusion: este es el actual por defecto, rico y moderno.
• fusion-projector: para mostrar demos a través de viejos proyectores.

Poner logos y títulos en la cabecera, y el copyright en el pié es muy intuitivo gracias a la paleta de componentes. Para poner el menú igual: primero añadir un Panel Menu Bar, luego un menu, y por ultimo los items de  menú.

Vamos a crear un menú Help > About con la ayuda del componente PopUp que se puede asociar a un item de menu. Dentro de él incluimos el componente Dialog, que nos crea una pequeña ventana ok/cancel, que debemos rellenar con un OutputText.

Ahora en el menuItem About, desde la paleta Operations le añadimos un “Show Popup Behaviour” al que informamos con el identificador del popup que queremos abrir aboutPopup.

Para probar la plantilla tenemos que crear una New > Web Tier >JSF Page (templateTest.jspx) eligiendo como plantilla la que hemos creado.

Y lo probamos con botón derecho > Run, arrancará Weblogic e iniciara tu navegador para ver el resultado: