D Elementos Pantallas

Curso: Desarrollo de aplicaciones en Java EE 5 (antes J2EE)
parte D: Elementos JSF para construir pantallas

CincoSOFT Ltda.
ConsueloFranky@cincosoft.com http://www.cincosoft.com
1
Pantalla JSF simple
Pantalla editHotel de edicin de una entidad Hotel
Expone directamente los atributos de la entidad Hotel

... <div class="label">Name:</div> <div class="input"> <h:inputText id="name" value="#{hotel.name}" required="true" /> <br/> <span class="errors"><h:message for="name" /></span> </div>
Hay una zona para los mensajes FacesMessages

<div class="entry errors"> <h:messages globalOnly="true" /> </div>
Los botones invocan servicios

<div class="input"> <t:commandButton id="proceed" value="Proceed" action="#{hotelInscription.verifyNewHotel}" styleClass="button"/> <s:button value="Cancel" id="cancel" action="#{hotelInscription.cancel}" styleClass="button"/> </div>
4
Pantalla no editable que muestra una entidad Hotel
pantalla para ver datos de hotel sin editar: confirmHotel

x muestra cada campo de la entidad hotel, por ej name :
<div class="entry"> <div class="label">Name:</div> <div class="output">#{hotel.name}</div> </div>
x botones finales para invocar confirm(), cancel() o regresar a la pantalla anterior

<div class="input"> <t:commandButton id="confirm" value="Confirm" action="#{hotelInscription.confirm}" styleClass="button"/> <t:commandButton id="revise" value="Revise" action="backEditHotel" styleClass="button"/> <t:commandButton id="cancel" value="Cancel" action="#{hotelInscription.cancel}" styleClass="button"/> </div> x observar el alias "backEditHotel" definido en navigation.xml como /pages/hotels/hotelInscription/editHotel.xhtml o como accin en
pages.xml
Estructuracin de pantallas facelets mediante templates y <div>
Concepto de template
R
Concepto de template:
x pantalla base que define estructura comn de las pantallas reales x contiene partes fijas y partes que deben ser redefinidas por cada pantalla x ejemplo de estructura de pantalla:
banner
sidebar
content footer
8
Ejemplo de template: template.xhtml
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:t="http://myfaces.apache.org/tomahawk">  <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <title>Hotels reservation system</title> <link href="../css/screen.css" rel="stylesheet" type="text/css"/> </head>
<body>  <div id="document" >  <div id="headerMenu"> <div id="titleMenu"><h4>CincoSOFT framework</h4></div> <div id="statusMenu"> <t:jscookMenu layout="hbr" theme="ThemeIE"> <t:navigationMenuItems value="#{login.menu}" /> </t:jscookMenu> </div> </div>  <div id="container"> <div id="sidebar" style=" width : 150px;"> <ui:insert name="sidebar"/> </div> <div id="content" style="width : 500px;"> <ui:insert name="content"/> <ui:include src="footer.xhtml" /> </div> </div> </div> </body> </html>
10
facelet: Pantalla real que se basa en el template

x x x x etiqueta ms externa <ui:composition> indica que se usa un template la etiqueta <ui:define> redefine partes variables del template se disea con <div> que tienen estilos asociados ejemplo: password.xhtml :
 <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:t="http://myfaces.apache.org/tomahawk" xmlns:s="http://jboss.com/products/seam/taglib" template="../common/template.xhtml">  <ui:define name="content"> <div class="section"> <h1>Change Your Password</h1> </div> <div class="section"> ... </div> </ui:define>  <ui:define name="sidebar"> <h1>changePassword use case</h1> </ui:define> </ui:composition>
11
Estilos asociados a los <div>

x se definen en el archivo screen.css x algunos estilos:
/* para el div mas externo de una pantalla */ #document { padding: 0 1px; background: #fff url(../img/bg.gif) 0 0 repeat-y; float: left; border-bottom: 1px solid #C3BBB6; } /* para el banner con el menu */ #headerMenu { float: left; width: 758px; height: 40px; background: url(../img/hdr.bg.gif) 0 0 repeat-x; } /* para el contenido variable */ #container { float: left; width: 758px; background: url(../img/hdr.bar.jpg) 0 0 repeat-x; }
12
/* para la parte content dentro del contenido variable */ #content { float: left; width: 548px; margin-top: 75px; padding-top: 5px; background: #fff url(../img/cnt.bg.gif) 0 0 repeat-x; } /* para un div section dentro de content */ #content .section { float: left; width: 518px; padding: 15px 15px 0 15px; } /* redefine h1 dentro de div section dentro de content */ #content .section h1 { font-family: "Trebuchet MS", Arial, sans-serif; line-height: normal; font-weight: normal; font-size: large; } ...
13
La pantalla inicial antes de autenticacin no usa template

R
Ejemplo: pantalla home

x encierra sus elementos en: <f:view> ... </f:view>
x dentro de <f:view> utilizar: botones <h:commandButton action="main" value="Go Login" styleClass="button" /> enlaces <s:link id="register" action="register" value="Register new user" />
14
Libreras de elementos JSF
15
Mltiples libreras que pueden combinarse

R
elementos estndares h: y f:
x xmlns:h="http://java.sun.com/jsf/html x xmlns:f="http://java.sun.com/jsf/core"
elementos ui: para soportar facelets

x xmlns:ui="http://java.sun.com/jsf/facelets
elementos s: ofrecidos por Seam

x xmlns:s="http://jboss.com/products/seam/taglib"
elementos t: ofrecidos por Apache Myfaces (Tomahawk)

x xmlns:t="http://myfaces.apache.org/tomahawk"
elementos ajax (a: y rich:) ofrecidos por JBoss -RedHat

x xmlns:a="https://ajax4jsf.dev.java.net/ajax" x RichFaces (Exadel): xmlns:rich="http://richfaces.ajax4jsf.org/rich"
otras libreras: Oracle ADF, IceFaces, ...
16
Validacin, enlaces y botones
17
Validacin JSF antes de invocar servicios:
18
Validacin de datos en el nivel web mediante los elementos <s:validate> y <s:validateAll>

x <s:validate> y <s:validateAll> son elementos Seam y se utilizan en la pantalla de edicin de datos de una entidad x se engloban los elementos a validar con: <s:validateAll> ... </s:validateAll> o se aplica a un elemento particular con <s:validate/> ej: <h:inputSecret id="password" value="#{user.password}" required="true"> <s:validate/> </h:inputSecret> x la validacion se realiza a nivel Web como prerequisito previo a invocar cualquier accin (servicio) de los EJB x las validaciones realizadas son las correspondientes a la entidad (indicadas por anotaciones) x los elementos que se validan deben usar el atributo: required="true"
19
Invocar acciones con o sin validacin previa: elementos <t:commandButton>, <s:button> y <s:link>
Invocar una accin enviando en una forma los datos suministrados por el usuario, previa validacin
x usar botn <t:commandButton> <h:form> ... <t:commandButton value="Proceed" action="#{hotelInscription.verifyNewHotel}" styleClass="button /> </h:form>
20
Invocar una accin sin requerir validar ni enviar los datos suministrados por el usuario
x usar <s:button> que no requiere campos validados antes de invocar la accin, por ej:
<s:button value="Cancel" action="#{hotelBooking.cancel}" styleClass="button"/>
x <s:link> para invocar una accin (no enva datos) :

en forma de botn: <s:link value="delete" action="#{userGestion.deleteUser}" linkStyle="button" buttonClass="buttonSmall"/> en forma de imagen: <s:link action="#{userGestion.addProfile}" > <img src="../../public/img/rightArrow.gif" /> </s:link>
21
Validacin con facilidades Ajax

R
Validar un campo a medida que el usuario teclea

x ej: pantalla book.xhtml para registrarse en un hotel : mensajes AJAX de validacin ANTES de invocar la accin:
22
x mensajes JSF de validacin DESPUES de invocar la accin:
23
R elementos <s:decorate>, <a:support>, <a:outputPanel> <s:validateAll>  <f:facet name="beforeInvalidField" > <h:graphicImage value="../../public/img/error.gif" /> </f:facet>  <f:facet name="aroundInvalidField"> <s:span styleClass="errors"/> </f:facet> ... <div class="entry"> <div class="label">
<h:outputLabel for="creditCard">Credit Card #: </h:outputLabel>
</div> <div class="input"> <s:decorate> <h:inputText id="creditCard" value="#{booking.creditCard}" required="true"> <a:support event="onblur" reRender="creditCardErrors"/> </h:inputText> <br/> <a:outputPanel id="creditCardErrors"> <s:message/> </a:outputPanel> </s:decorate> </div> </div> ... </s:validateAll>
24
Fechas, horas y calendarios
25
Mostrar una fecha-hora con elementos <t:outputText> y <f:convertDateTime>

x Se muestra un elemento de texto de salida convirtindolo a una fecha
x Ejemplo: pantalla confirm.xhtml, mostrar campo checkoutDate : ... <div class="entry"> <div class="label">Check Out Date:</div> <div class="output"> <t:outputText value="#{booking.checkoutDate}"> <f:convertDateTime type="date"/> </t:outputText> </div> </div>
26
Edicin de una fecha-hora con elementos <t:inputText> y <f:convertDateTime>

x Se muestra elemento de texto de entrada con convertidor de fecha x Ejemplo: pantalla book.xhtml, edicin del campo checkoutDate con validacin y campo de error:
<s:validateAll> <f:subview> ... <div class="entry"> <div class="label">Check Out Date:</div> <div class="input"> <t:inputText id="checkoutDate" value="#{booking.checkoutDate}" required="true"> <f:convertDateTime timeZone="#{timeZone}" type="date"/> </t:inputText> <br/> <span class="errors"> <h:message for="checkoutDate" /> </span> </div> </div> ...
27
x Importante indicar atributo timeZone para fecha-hora:

Ejs valores para zona horaria: timeZone="Antarctica/South_Pole timeZone="UTC timeZone="GMT timeZone="PST tambin usando una variable de contexto (String o TimeZone): timeZone="#{timeZone}"
x Valores posibles para el atributo type:

type="date" type="time" type="both (date + time)
x Atributo de formato pattern:

pattern="dd.MM.yyyy" pattern="yyyy-MM-dd" pattern="hh:mm" pattern="hh:mm a" pattern="yyyy-MM-dd HH:mm:ss z"
x Atributo de estilo para date dateStyle :

dateStyle="short" dateStyle="medium" dateStyle="full
x Atributo de estilo para time timeStyle, ej: timeStyle="short"
28
x Para establecer en un EJB la zona horaria correspondiente al servidor

se le da valor a variable de contexto de sesion, por ej "timeZone ej: EJB Login: private java.util.TimeZone timeZone; ... timeZone = TimeZone.getDefault(); Contexts.getSessionContext().set("timeZone", timeZone);
29
Calendario con el elemento <t:inputCalendar>
30
x Ejemplo: pantalla book.xhtml, edicin del campo checkinDate con validacin y campo de error:
... <s:validateAll> <f:subview> ... <div class="entry"> <div class="label">Check In Date:</div> <div class="input"> <t:inputCalendar id="checkinDate" renderAsPopup="true" value="#{booking.checkinDate} popupDateFormat="dd-MM-yyyy" renderPopupButtonAsImage="true" popupWeekString="Semana" popupTodayString="Hoy es" /> <br/> <span class="errors"> <h:message for="checkinDate" /> </span> </div> </div> ...
31
x Pueden indicarse los estilos de los elementos del calendario:

<t:inputCalendar id="checkinDate" monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader" dayCellClass="dayCell" currentDayCellClass="currentDayCell renderAsPopup="true value="#{booking.checkinDate}" popupDateFormat="dd/MM/yyyy" />
32
Listas de Seleccin
33
Lista de seleccin esttica con elementos <h:selectOneMenu> y <f:selectItem>

R
Varios tipos de listas de seleccin

x <h:selectOneListbox> x <h:selectOneMenu>,
Lista de seleccin con items estticos

x el item seleccionado da valor a un atributo de una entidad o de EJB
<h:selectOneMenu id="beds" value="#{booking.beds}"> <f:selectItem itemLabel="One king-size bed itemValue="1"/> <f:selectItem itemLabel="Two double beds" itemValue="2"/> <f:selectItem itemLabel="Three beds" itemValue="3"/> </h:selectOneMenu>
34
Lista de seleccin dinmica con elementos <f:selectItems>

R
Los valores de los items son calculados por un EJB

x adems de los items dinmicos se pueden agregar item estticos mediante <f:selectItem> x ejemplo users.xhtml, lista systemProfiles
<h:form> ... <h:selectOneListbox id="systemProfiles" value="#{userGestion.systemProfile}" size="10" styleClass="selectOneListbox"> <f:selectItems value="#{userGestion.systemProfiles}"/> </h:selectOneListbox> </h:form>
35
EJB de sesin que soporta la lista de seleccin dinmica

x Mtodo getSystemProfiles() que calcula los items, invocado en
<f:selectItems value="#{userGestion.systemProfiles}"/>
public List<SelectItem> getSystemProfiles() { List<SelectItem> selectItems = new ArrayList<SelectItem>(); for (Profile p : systemProfiles){ . . . // value, display selectItems.add(new SelectItem(p.getId(), p.getName())); } return selectItems; }
36
Mtodo que establece el item inicialmente seleccionado en la lista:

x
invocado en value="#{userGestion.systemProfile}"
public Long getSystemProfile() { // return item value return ((Profile)systemProfiles.get(0)).getId(); }
Mtodo que reacciona a la seleccin de un item cuando hay submit de la forma:

x invocado en value="#{userGestion.systemProfile}"
public void setSystemProfile(Long s) { // s is the value of selected item profileToAdd = s; }
37
Tabla bsica asociada a una lista de entidades
38
Pantalla que muestra un elemento <t:dataTable> asociado a una variable lista

R
Ej. lista de atracciones de un hotel
39
Ej. pantalla hotel.xhtml: muestra detalles de un hotel

x Observar expresiones #{...} en lenguaje EL (Expression Language)
<div class="entry"> <div class="label">Atractions:</div> <div class="output"> <h:form> <t:outputText value="No atractions Found" rendered="#{atractions.rowCount==0}"/> <t:dataTable value="#{atractions}" var="atract" rendered="#{atractions.rowCount>0}"> <h:column> <f:facet name="header">Name of atraction </f:facet> #{atract.description} </h:column> </t:dataTable> </h:form> </div> </div>
40
EJB de sesin que soporta el dataTable
@In(required=false) @Out private Hotel hotel; @DataModel private List<Atraction> atractions; public void selectHotel(Hotel selectedHotel) { hotel = em.merge(selectedHotel); atractions = hotel.getAtractions(); }
41
Expresiones EL (Expression Language)
42
Operadores usados en las expresiones EL (Expression Language)

R
Operadores de comparacin:
> gt < lt >= ge <= le == eq != ne
Operadores lgicos:
and && or || not !
Operadores aritmticos:
+ * / div % mod ?
43
Ejemplos de Expresiones EL
R
Expresiones EL con valor booleano:

"#{someBooleanVariable}" "#{!someBooleanVariable}" "#{someVariable.someAttribute}" "#{varA.num1 > varB.num2}" "#{empty someList}" "#{not empty someList}" "#{someList.rowCount==0}" "#{someVariable!=null and someList.rowcount==0}" "#{someList['value1'] or someList['value2']]} "#{rule != null && rule.id != '{empty}'}"
Expresin EL con valor String (ej: valor de una propiedad):

"#{msgs.serviceManagement}" "#{userprofile.user.username}"
"#{var.attrib1==null ? var.attrib2 : var.attrib1}"
Expresin EL para invocar accin :

"#{someBean.someMethod}"
44
Tabla con scroll y ordenable por columnas
45
Pantalla que muestra una tabla ordenable y con scroll

R
elemento <t:dataTable>
46
R Pantalla main.xhtml: elemento <t:dataTable> <f:subview rendered="#{hotels.rowCount>0}"> <div id="scroll"> <h:form> <t:dataTable value="#{hotels}" var="hot" sortColumn="#{hotelSearching.column}" sortAscending="#{hotelSearching.ascending}" preserveSort="false" preserveDataModel="false" renderedIfEmpty="false">
<h:column> <f:facet name="header"> <t:commandSortHeader columnName="name" arrow="true"> <h:outputText value="Name" /> </t:commandSortHeader> </f:facet> <h:outputText value="#{hot.name}" /> </h:column> ... </t:dataTable> </h:form> </div> </f:subview>
47
Observar en la pantalla:
x el scroll es posible gracias al div que encierra el datatable: <div id="scroll">: est asociado al siguiente estilo en screen.css:
#scroll { height: 400px; overflow: auto; }
x para no ver el espacio en blanco del datatable cuando no hay datos:

debe ponerse dentro de un <f:subview> que se mostrar solo cuando s hay datos
x en el encabezado de <t:datatable> se indican acciones asociadas a ordenar una columna y cambiar el modo de ordenamiento (ascendente o descendente)
se invocan mtodos setColumn() y setAscending() del EJB hotelSearching
x para cada columna ordenable, se indica con elemento <t:commandSortHeader> el nombre de la columna
se tendr para esa columna un criterio de ordenamiento en el EJB hotelSearching
48
EJB que soporta la tabla ordenable

R
Nuevos atributos del EJB HotelSearching

private String column = "name"; private boolean ascending = true;
Mtodos set invocados como acciones de la pantalla:

public void setAscending(boolean ascending) { this.ascending = ascending; sort(hotels); } public void setColumn(String column) { this.column = column; sort(hotels); }
x invocan el mtodo privado sort

49
Metodo privado sort : define criterio de ordenamiento de cada columna ordenable :

private void sort(List data) { Collections.sort(data, new Comparator<Hotel>() { public int compare(Hotel o1, Hotel o2) { if (!ascending){ Hotel temp = o2; o2 = o1; o1 = temp; } if ("name".equals(column)){ return o1.getName().compareTo(o2.getName()); } else if ("address".equals(column)){ return o1.getAddress().compareTo(o2.getAddress()); } ... return 0; } }); }
50
Facilidades Ajax de bsqueda con una tabla como resultado
51
Entrega de resultados a medida que el usuario teclea el patrn de bsqueda

R
Reaccin a cada carcter tecleado
52
Pantalla main.xhtml: elementos <a:support>, <a:status>, <a:outputPanel>

x El campo patrn de bsqueda se habilita con ajax para que la bsqueda se active con cualquier carcter tecleado por el usuario:
<h:inputText id="searchString" value="#{hotelSearch.searchString}" style="width: 165px;"> <a:support event="onkeyup" actionListener="#{hotelSearch.find}" reRender="searchResults" /> </h:inputText>
x Se puede agregar una imagen "status" que se mueve mientras se completa una bsqueda:
<a:status> <f:facet name="start"> <h:graphicImage value="../../public/img/spinner.gif" /> </f:facet> </a:status>
53
x El panel de resultados "searchResults" debe englobar la tabla de resultados

<a:outputPanel id="searchResults"> <div class="section"> <h:outputText value="No Hotels Found" rendered="#{hotels != null and hotels.rowCount==0}" /> <t:dataTable id="hotels" value="#{hotels}" var="hot" rendered="#{hotels.rowCount>0}"> <h:column> <f:facet name="header">Name</f:facet> #{hot.name} </h:column> ... </t:dataTable> </div> </a:outputPanel>
54
Tabla de resultados que se muestra por pantallazos
55
Un enlace o botn lleva al siguiente pantallazo

R
El enlace "More results" se muestra solo si hay ms pantallazos
56
EJB con query para obtener los datos por lotes

R
EJB HotelSearching
x Servicio pblico find() invoca un query por lotes
public String find(){ page = 0; queryHotels(); return "main"; } private void queryHotels(){ String searchPattern = searchString==null ? "%" : '%' + searchString.toLowerCase().replace('*', '%') + '%'; hotels = em.createQuery ("select h from Hotel h where (lower(h.name) like :search " + " or lower(h.city) like :search " + " or lower(h.zip) like :search " + " or lower(h.address) like :search)" + " and h.status = :status " + " order by h.name ") .setParameter("search", searchPattern) .setParameter("status", Status.ACTIVE) .setMaxResults(pageSize) .setFirstResult( page * pageSize ) .getResultList(); }
57
x Servicios para obtener el siguiente lote (pantallazo) public boolean isNextPageAvailable(){ return hotels!=null && hotels.size()== pageSize; } public void nextPage() { page++; queryHotels(); }
x El enlace que lleva a la siguiente pantalla utiliza los anteriores servicios:

<s:link value="More results" action="#{hotelSearching.nextPage}" rendered="#{hotelSearching.nextPageAvailable}"/>
58
Tabla editable con validacin por celda
59
Pantalla que muestra tabla editable con validacin por celda

R R
elemento <t:dataTable> mensaje de validacin en la misma celda del error
60
Pantalla main.xhtml: elemento <t:dataTable>

x Se escogieron algunas columnas que eran <h:outputText> y se transformaron en <h:inputText> con validacion:
... <h:form> <t:dataTable value="#{bookings}" var="book" rendered="#{bookings.rowCount>0}"> ... <h:column> <f:facet name="header">Check in date</f:facet> <h:inputText id="checkinDate" value="#{book.checkinDate}" required="true"> <f:convertDateTime type="date"/> <s:validate/> </h:inputText> <br/><span class="errors"> <h:message for="checkinDate"/></span> </h:column> ...
61
x Se agregan 2 botones despues de las columnas de la tabla: Update y Cancel :

... <f:facet name="footer"> <h:panelGroup> <t:commandButton value="Update" action="#{bookingList.update}" styleClass="button"/> <s:link value="Cancel" action="#{bookingList.cancelUpdates}" linkStyle="button" buttonClass="button" /> </h:panelGroup> </f:facet> </t:dataTable> </h:form>
62
EJB que soporta la tabla editable con validacin por celda

R
EJB BookingList
x Nuevos servicios
update: para cada elemento booking de la lista que se muestra en la tabla, valida que la fecha checking sea anterior a checkout; si es correcto actualiza la BD con el nuevo valor del elemento:
public String update() { for (int i=0; i < bookings.size(); i++) { Booking b1 = (Booking)bookings.get(i); if (!b1.getCheckinDate().before( b1.getCheckoutDate() ) ) { FacesMessages.instance().add ("Check out date must be later than check in date for" + + " booking with number " + b1.getId()); return null; } Booking b2 = em.merge(b1); } getBookings(); return "main"; }
63
x cancelUpdates: vuelve a obtener la lista de bookings de la BD:

public String cancelUpdates() { getBookings(); return "main"; } @Factory public void getBookings() { bookings = em.createQuery ("select b from Booking b " + "where b.user.username = :username " + "order by b.checkinDate") .setParameter("username", user.getUsername()) .getResultList(); }
64
Tablas anidadas
65
Pantalla con 3 tablas anidadas

R
Ejemplo: mostrar mdulos - casos de uso - servicios
66
Pantalla profiles.xhtml: elemento <t:dataTable> asociado a modules
...  <t:dataTable value="#{modules}" var="module" styleClass="standardTable"
columnClasses="standardTable_Column,standardTable_ColumnCentered"
> <h:column> <f:facet name="header">module</f:facet> <t:outputText value="#{module.name}"

style="color:green; font-size: large; font-weight:bold; "
/> </h:column> <h:column> <f:facet name="header">use case</f:facet>  <t:dataTable value="#{module.usecases}" var="usecase" styleClass="standardTable_ColumnCentered" columnClasses="nestedColumn1,nestedColumn2" rowClasses="standardTable_Row1,standardTable_Row2" >
67
<h:column> <t:outputText value="#{usecase.display}" style="font-size: small; font-weight:bold;"/> </h:column> <h:column>


<t:dataTable value="#{usecase.services}" var="service" styleClass="nestedColumn2" columnClasses= "moreNestedColumn1,moreNestedColumn2"> <h:column> <t:outputText value="#{service.display}"/> </h:column> <h:column> <h:selectBooleanCheckbox value="#{service.activeInProfile}" /> </h:column> </t:dataTable> </h:column> </t:dataTable> </h:column> <f:facet name="footer"> <h:panelGroup> <t:commandButton value="Update" . . ./> </h:panelGroup> </f:facet> </t:dataTable>
68
Men jerrquico dinmico

[adaptacin de CincoSOFT]
69
Uso del menu jscookmenu en una pantalla

R
elemento <t:jscookMenu>
70
Pantalla template.xhtml: elemento t:jscookMenu

<div id="headerMenu"> <div id="titleMenu"> <h4>CincoSOFT framework</h4> </div> <div id="statusMenu"> <t:jscookMenu layout="hbr" theme="ThemeIE"> <t:navigationMenuItems value="#{login.menu}" /> </t:jscookMenu> </div> </div> x elemento definido y soportado por tomahawk.jar (contiene clases, javascript y estilos requeridos) x los elementos del menu son calculados por el servicio menu() del EJB de sesin login
71
Entidad Menu
R
Menu.java: representa elementos de un men jerrquico

@Entity @Name("menu") @Scope(SESSION) @Table(name="Menu") public class Menu implements Serializable { private Long id; private String action; private String icon; private String display; // if submenu // if not submenu private Usecase usecase; private Module module; private Menu parent; private List<Menu> submenus = new ArrayList<Menu>(); private int numChilds; ... // transient
72
Insercin de elementos en la tabla Menu:
/* elemento submenu */ insert into menu (id, display, icon, action, usecase_id, module_id, parent_id) values (nextval('hibernate_sequence'), 'Security actions', 'playBlue.jpg', NULL, NULL, (select id from module where name = 'security'),NULL ); /* elemento terminal correspondiente a un caso de uso */ insert into menu (id, display, icon, action, usecase_id, module_id, parent_id) values ( nextval('hibernate_sequence'), NULL, 'playOrange.jpg', 'password', (select id from usecase where name = 'changePassword'), (select id from module where name = 'security'), (select id from menu where display = 'Security actions') ); ...
73
Mtodos de un EJB de sesin para construir el men

R
EJB de sesin Login

x mtodo login() invocado solo 1 vez cuando el usuario inicia sesin: carga los menus de la base de datos:
mainMenus = em.createQuery ("select m from Menu m where m.parent is null " + "order by m.display") .getResultList(); systemMenus = em.createQuery ("select m from Menu m where m.parent is not null " + "order by m.parent.id, m.id") .getResultList();
obtiene los submenus de cada elemento para calcular nmero de hijos (numChilds) elimina cada elemento terminal correspondient a un caso de uso no permitido al usuario, actualizando numChilds de su elemento padre elimina elementos no terminales con 0 hijos (numChilds == 0) 74
x mtodo getMenu() invocado cada vez que una pantalla requiere el men (elemento <t:jscookmenu>): construye recursivamente la estructura del menu contruye un objeto NavigationMenuItem para cada elemento del men si un elemento tiene hijos, se le asocia un arreglo NavigationMenuItem[] donde cada elemento corresponde a un hijo
75
Internacionalizacin en JSF
76
Caractersticas de una aplicacin con internacionalizacin

R
Objetivos:
x x x x el usuario debe poder escoger el idioma de su preferencia existe idioma por defecto segn localizacin del usuario los letreros de las pantallas deben salir en el idioma vigente los mensajes de errores de validacin tambin deben salir en el idioma vigente
Letreros de pantallas deben registrarse en archivos de propiedades para los diferentes idiomas
x Archivo messages.properties: contiene el valor de los letreros de las pantallas en el idioma por defecto (ubicado bajo WEB-INF/classes) x Archivos messages_xx.properties:
c/u contiene el valor de los letreros en un determinado idioma valor de xx corresponde a un idioma ms opcionalmente un pas: en, en_US, en_AU, de, fr, es, es_CO, ja, it, ca, pt, ru, zh, ... cuando el usuario selecciona un idioma, se debe establecer cul es el archivo de propiedades vigente
77
Las pantallas no deben usar literales sino propiedades

x Ejemplo: el siguiente boton utiliza la propiedad GoLogin y aparecer como Go Login, Entrar, etc. segn el idioma vigente
<h:commandButton value="#{messages.GoLogin}" action="main" styleClass="button" /> x #{messages.GoLogin} es equivalente a #{messages['GoLogin']} donde messages es un componente interno de seam
x en los diferentes archivos de propiedades de idiomas debe existir el valor de la propiedad GoLogin, por ejemplo en el archivo messages_es.properties:
GoLogin=Entrar
78
Cmo JSF determina el idioma a utilizar en la sesin del usuario

R
JSF selecciona como idioma vigente (locale) el correspondiente al browser Si no se puede deducir del browser: se usa el idioma default indicado en faces-config.xml:
<application> ... <locale-config> <default-locale>en</default-locale> <supported-locale>fr</supported-locale> <supported-locale>es_CO</supported-locale> </locale-config> </application>
Si faces-config-xml no indica idioma default: se usa el idioma asociado al servidor Los letreros de las pantallas que usen propiedades messages extraern los valores del archivo messages_xx.properties asociado al idioma vigente xx
x si no existe el archivo messages_xx.properties : se utiliza el archivo messages.properties 79
Cmo permitir al usuario seleccionar el idioma de su sesin

R
En la pantalla de entrada (home) agregar lista de seleccin con los idiomas ofrecidos
x la lista de seleccin se apoya componente interno de seam localeSelector que captura el idioma seleccionado por el usuario y lo asigna como idioma de la sesin: <h:outputText value="#{messages.SelectLanguage}(select)" /> <h:selectOneMenu value="#{localeSelector.localeString}"> <f:selectItems value="#{localeSelector.supportedLocales}"/> </h:selectOneMenu> <h:commandButton value="#{messages.ChangeLanguage}(change)" action="#{localeSelector.select}" styleClass="button" />
80
Idiomas que se ofrecen en la lista de seleccin

x si faces-config.xml no tiene indicaciones de idiomas entonces la lista de seleccin ofrece todos los idiomas soportados por JSF:
en, en_US, en_AU, de, fr, es_CO, ja, it, ca, pt, ru, zh
x faces-config.xml debera restringir los idiomas soportados a solamente los que tienen archivo messages_xx.properties asociado, y solamente esos idiomas saldrn en la lista de seleccin x cuando el usuario selecciona un idioma, este se vuelve el vigente para la sesion
si no existe el archivo messages_xx.properties correspondiente, entonces se usar el archivo asociado al browser si tampoco existe ste, entonces se usara el archivo default messages.properties
81
Mensajes de errores de validacin en el idioma vigente

R
El atributo required="true" implica validacion JSF con mensaje de error traducido al idioma vigente:
<h:inputText id="name" value="#{hotel.name} required="true" > <s:validate /> </h:inputText> <br/> <span class="errors"> <h:message for="name" /> </span>
Cuando el usuario no suministra ningn valor, sale mensaje de error construido por JSF en el idioma vigente, ejemplo:
"name": Value is required. "name": Valor requerido. "name": Une donne est requise. "name": Il valore obbligatorio "name": Um valor requerido. "name": Eingabe erforderlich.
El atributo id debe usar una propiedad de idioma para mostrarse en el idioma vigente:
cambiar id="name" por id="#{messages.name}
82
Validacin de entidades asociada a anotaciones

@Entity @Name("parameter") @Table(name = "Parameter") public class Parameter ..... @Length(min = 1, max = 20) public String getName() { return name; } ... } x Notar que la anotacion @Length no indica ningn mensaje de error de validacin porque si lo hiciera lo tendra que expresar en un idioma concreto: @Length(min = 1, max = 20, message="longitud debe estar entre {min] y {max}") x Cuando el dato del usuario incumple la restriccin de longitud, JSF mostrar como mensaje de error el valor de la propiedad validator.length: busca la propiedad en el archivo messages_xx.properties asociado al idioma vigente si no la encuentra: buscar en messages.properties si no la encuentra: sale excepcion
83
x Se recomienda dar valor en los archivos messages_xx.properties a las propiedades asociadas a anotaciones de validacion de entidades:
por ej: en messages_en.properties # para anotaciones @AssertFalse y @AssertTrue validator.assertFalse=assertion failed validator.assertTrue=assertion failed # para anotaciones @Future y @Past validator.future=must be a future date validator.past=must be a past date # anotaciones @Length(min=, max=)y @Range(min=, max=) validator.length=length must be between {min} and {max} validator.range=must be between {min} and {max} # para anotacion @Max(value=) y @Min(value=) validator.max=must less than or equal to {value} validator.min=must greater than or equal to {value} # para anotacion @NotNull validator.notNull=may not be null # para anotacion @Pattern(regex="", flag=) validator.pattern=must match "{regex}" # para anotacion @Size(min=, max=) validator.size=size must be between {min} and {max} # para anotacion @Email validator.email=not a well-formed email address
84
Expresiones para dar valor a las propiedades

x Expresiones segn reglas de sintaxis de java.text.MessageFormat
ver http://java.sun.com/j2se/1.5.0/docs/api/java/text/MessageFormat.html pueden usar parmetros de las siguientes formas: {ArgumentIndex} {ArgumentIndex,FormatType} {ArgumentIndex,FormatType,FormatStyle} donde: FormatType es uno de los siguientes: number date time choice - FormatStyle es uno de los siguientes:
short medium long full integer currency percent
ejemplo de valor de propiedad con parmetros:

miPropiedad = At {1,time} on {1,date}, there was {2} on planet {0,number,integer}.
la clase que usa la propiedad le da valor a los parmetros, por ej:

String EvaluarPropiedad (String valorPropiedad) { int planet = 7; String event = "a disturbance in the Force"; String result = MessageFormat.format (valorPropiedad, planet, new Date(), event); return result; }
queda en result: "At 12:30 PM on Jul 3, 2053, there was a disturbance 85 in the Force on planet 7. "
x Propiedades usadas en la validacin de elementos Myfaces Tomahawk (como ej. de librera de elementos JSF):
vienen en el jar correspondiente a la librera: myfaces-impl-1.1.4.jar hay un archivo por cada idioma soportado usan en general parmetros, ej en Messages_fr.properties del jar: org.apache.myfaces.Date.INVALID_detail = The given value ({0}) is not a correct date se pueden redefinir y es recomendable agregar las propiedades faltantes, por ej en messages_fr.properties de la aplicacin: org.apache.myfaces.calendar.CONVERSION_detail = "{0}"\: La donn\u00E9e "{1}" ne peut pas etre convertie a une date.
x Expresiones EL en el valor de propiedades:

por ej en messages_en.properties WelcomeUser=Welcome #{user.name}
86
Consulta desde los EJBs a propiedades del archivo asociado al idioma vigente
R
Acceso a todas las propiedades del idioma vigente

@In(create=true) private Map<String,String> messages; . . . // ejemplo: dar valor a atributo transiente de entidad // mostrado en pantalla como // <t:outputText value="#{service.displayBis}" /> Service service = . . . service.setDisplayBis(messages.get(s.getDisplay()));
Acceso a una propiedad especifica:

@In("#{messages.Hello}") private String helloMessage;
Mensajes informativos o de validacion a travs de FacesMessages:

@In(create=true) FacesMessages facesMessages; ... facesMessages.addFromResourceBundle("Hello");
87

D Elementos Pantallas

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

D Elementos Pantallas

Enviado por

Direitos autorais:

Formatos disponíveis

Curso: Desarrollo de aplicaciones en Java EE 5 (antes J2EE)

parte D: Elementos JSF para construir pantallas

Pantalla JSF simple

Pantalla editHotel de edicin de una entidad Hotel

Expone directamente los atributos de la entidad Hotel

Hay una zona para los mensajes FacesMessages

Los botones invocan servicios

Pantalla no editable que muestra una entidad Hotel

pantalla para ver datos de hotel sin editar: confirmHotel

x botones finales para invocar confirm(), cancel() o regresar a la pantalla anterior

Estructuracin de pantallas facelets mediante templates y <div>

Ejemplo de template: template.xhtml

facelet: Pantalla real que se basa en el template

Estilos asociados a los <div>

La pantalla inicial antes de autenticacin no usa template

Ejemplo: pantalla home

Libreras de elementos JSF

Mltiples libreras que pueden combinarse

elementos ui: para soportar facelets

elementos s: ofrecidos por Seam

elementos t: ofrecidos por Apache Myfaces (Tomahawk)

elementos ajax (a: y rich:) ofrecidos por JBoss -RedHat

otras libreras: Oracle ADF, IceFaces, ...

Validacin, enlaces y botones

Validacin JSF antes de invocar servicios:

Validacin de datos en el nivel web mediante los elementos <s:validate> y <s:validateAll>

x <s:link> para invocar una accin (no enva datos) :

Validacin con facilidades Ajax

Validar un campo a medida que el usuario teclea

x mensajes JSF de validacin DESPUES de invocar la accin:

Fechas, horas y calendarios

Mostrar una fecha-hora con elementos <t:outputText> y <f:convertDateTime>

Edicin de una fecha-hora con elementos <t:inputText> y <f:convertDateTime>

x Importante indicar atributo timeZone para fecha-hora:

x Valores posibles para el atributo type:

x Atributo de formato pattern:

x Atributo de estilo para date dateStyle :

x Atributo de estilo para time timeStyle, ej: timeStyle="short"

x Para establecer en un EJB la zona horaria correspondiente al servidor

Calendario con el elemento <t:inputCalendar>

x Pueden indicarse los estilos de los elementos del calendario:

Lista de seleccin esttica con elementos <h:selectOneMenu> y <f:selectItem>

Varios tipos de listas de seleccin

Lista de seleccin con items estticos

Lista de seleccin dinmica con elementos <f:selectItems>

Los valores de los items son calculados por un EJB

EJB de sesin que soporta la lista de seleccin dinmica

Mtodo que establece el item inicialmente seleccionado en la lista:

Mtodo que reacciona a la seleccin de un item cuando hay submit de la forma:

Tabla bsica asociada a una lista de entidades

Pantalla que muestra un elemento <t:dataTable> asociado a una variable lista

Ej. lista de atracciones de un hotel

Ej. pantalla hotel.xhtml: muestra detalles de un hotel

EJB de sesin que soporta el dataTable

Expresiones EL (Expression Language)

Operadores usados en las expresiones EL (Expression Language)

Expresiones EL con valor booleano:

Expresin EL con valor String (ej: valor de una propiedad):

Expresin EL para invocar accin :

Tabla con scroll y ordenable por columnas

Pantalla que muestra una tabla ordenable y con scroll

x para no ver el espacio en blanco del datatable cuando no hay datos: