Diseño: plantillas y estilos con ADF
Aug 22, 10 by Juan Lebrijo about Web, Java, JDeveloper, blog
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:
create_template.png 108 KB
  • 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ú.
design_template.png 214 KB
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.
design_page.png 208 KB
Y lo probamos con botón derecho > Run, arrancará Weblogic e iniciara tu navegador para ver el resultado:
testing_template.png 120 KB
JDeveloper Data Controls
Aug 20, 10 by Juan Lebrijo about JDeveloper, blog
Los Data Controls son objetos que actúan como una capa intermedia entre la capa de vista y la de negocio en la arquitectura de JDeveloper. Estos dan una forma consistente de manejar las colecciones de datos para mostrarse en la vista. Manejan el modelo, y los servicios de negocio, capturando los datos, manejando la transaccionalidad a través de la vista. Esta parte, que le da más potencialidad sobre todo a la hora de desarrollar la vista, me gusta menos en cuanto a que se sale del estandar JSF/EJB .... y te genera una serie de ficheros automaticamente, que no se encuentra en otras arquitecturas. Nos basaremos en posts anteriores donde hemos construido hasta la capa de negocio de una aplicación. Con el botón derecho sobre cada una de las clases de servicio desarrolladas > Create Data Control. Te riega el proyecto con los siguientes ficheros:
files_created.png 26.3 KB
Todos son ficheros XML que lo que hacen es mapear los métodos y beans involucrados en los servicios que quieras consumir desde la vista. Sirve para que el IDE fije los elementos que tiene en la lógica de negocio, y el desarrollador simplemente arrastrando desde la ventana "Data Controls" cree los componentes de la vista sobre el lienzo:
data_control_window.png 30.1 KB
Esto es una acción automática y se repetirátantas veces como cambiemos modelo, o añadamos métodos de negocio.
JDeveloper Data Controls
Aug 20, 10 by Juan Lebrijo about JDeveloper, blog
Data Controls are objects which acts as an intermediate layer between the view layer and business layer on JDeveloper Architecture. These takes a consistent way to manipulate data collection to show at the view in programming time. They maps the model, and business services, binding, and managing the data transactionality, keeping the view coherent. This part which empower the view programming time, I do not like because goes out from the estandards JSF/EJB ... and generate some automatic files which we cannot find in other architectures. We will base in other posts where we have construct until an example application business layer. Right button over every service classes > Create Data Control. It creates the following files in your Model project:
files_created.png 26.3 KB
All are XML files which maps the methods and beans evolved on the services that you want to construct in the view. It makes that the IDE fix the elements in the business logic, and the developer dragging and dropping from "Data Controls" window creates the view components over the layout:
data_control_window.png 30.1 KB
This is an automatic action that must be repeated every times we change the model, or we add business methods.