2007 Marty Hall

JSF: Manipulando Eventos

Customized J2EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces, Hibernate, Ajax, GWT, Java 5, Java 6, etc. Ruby/Rails coming soon. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Topicos
Comparando action controllers com event listeners Action listeners Mudana de valores com listeners Usando JavaScript para enviar form
Browser incompatibilidade

Combinando action listeners e action controllers no mesmo elemento GUI

J2EE training: http://courses.coreservlets.com

Motivao
H duas variaes que iniciam evento
Eventos do processamento back-end Eventos que afetam somente o formato da interface do usurio interface

JSF categoriza cdigo que manipula essas aes como action controllers e event listeners
Action controllers manipula a submisso do form
Depois que o bean foi preenchido Retorna strings que afeta a navegao

Event listeners manipula eventos UI

Geralmente antes dos beans serem preenchidos Nunca direciona a navegao
J2EE training: http://courses.coreservlets.com

JSF Fluxo de controle (Atualizado)

faces-config.xml Blah.jsp
s (Runs bean getter methods) ce fa h. Redisplay la B form st ue Efeito de eq

- beans declared in managed-bean sect - mapping of return conditions declared in navigation-rule section

T GE

apresentao

Button or other control referred to event listener

Busines s Logic

submit form POST request Blah.faces

Instanti ate Bean Button referred to

action controller

Run Action return conditio Controller Store results of n Method

business logic in bean

result s

Choose JSP

forward

Run Setter Res ult Methods of

sub m is s io n

result1.jsp result2.jsp ... resultN.jsp

(Use h:outputText to display bean properties)

J2EE training: http://courses.coreservlets.com

Tipos de Event Listeners

ActionListener
Disparado pelo boto
<h:commandButton value="..." .../> <h:commandButton image="..." .../> <h:commandLink .../>

Automatically submit the form

ValueChangeListener

Disparado por combo boxes, checkboxes, radio buttons, textfields, e outros

<h:selectOneMenu .../> <h:selectBooleanCheckbox.../> <h:selectOneRadio .../> <h:inputText .../>
J2EE training: http://courses.coreservlets.com

No envia o form

 2007 Marty Hall

Action Listeners
Customized J2EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces, Hibernate, Ajax, GWT, Java 5, Java 6, etc. Ruby/Rails coming soon. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Usando ActionListener no JSF

Botes enviam um form e iniciam o processamento no lado servidor
Use <h:commandButton action="..." ...>

Alguns podem somente afetar a GUI

Use <h:commandButton actionListener="..." .../> Quando quer que um processo ocorra antes do preenchimento de beans e das validaes necessrias.

<h:commandButton actionListener="..."

J2EE training: http://courses.coreservlets.com

Implementado ActionListener em Java

Listener ficam geralmente nas classes do bean Tem um ActionEvent como argumento
Retorna Void (no uma String como em action controllers) ActionEvent est no javax.faces.event ActionEvent tem um mtodo getComponent que permite obter uma referencia ao UIComponent Exemplo
Do UIComponent, chega-se ao ID, renderer, e outras informaes

public void someMethod(ActionEvent event) { doSomeSideEffects(); } J2EE training: http://courses.coreservlets.com

Exemplo: Deixando o usurio desabilitar controles UI

Todos controles UI tem uma propriedade a "disabled" que falsa por default Usando um button com um ActionListener para desabilitar/habilitar um UI Exemplo especfico
Coletar o nome e o trabalho para exibir um CV Criar comboboxes que deixa o usuario selecionar a cores para foreground e background
<h:selectOneMenu value="..." disabled="..." ...> <f:selectItems value="..."/> </h:selectOneMenu>

Valores f:selectItems devem ser um array SelectItem

Tem botes que habilitam/desabilitam os comboboxes

J2EE training: http://courses.coreservlets.com

Passos criando o JSF

1) Criar o bean
A) Propriedade para os dados do forma B) Metodos para Action controller e event listener C) Placeholders para exibir os resultados

2) Criar o form de entrada

A) Campos de entrada relacionado com o bean B) Boto para o mtodo action controllerque retorna a condio C) Boto ou outro controle GUI especifica o mtodo event listener

3) Editar faces-config.xml
A) Declarar the bean B) Especificar navigation rules

4) Criar pginas resultados

J2EE training: http://courses.coreservlets.com

Passo 1: Criar Bean

(A) Propriedade para o form
package coreservlets; import javax.faces.model.*; import javax.faces.event.*; public class ResumeBean implements Serializable { ... private String fgColor = "BLACK"; private String bgColor = "WHITE"; private SelectItem[] availableColorNames = { new SelectItem("BLACK"), new SelectItem("WHITE"), new SelectItem("SILVER"), new SelectItem("RED"), new SelectItem("GREEN"), new SelectItem("BLUE") }; public String getFgColor() { return(fgColor); } public void setFgColor(String fgColor) { this.fgColor = fgColor; } ... public SelectItem[] getAvailableColors() {...} J2EE training: http://courses.coreservlets.com

Passo 1: Criar Bean

(A) Propriedade para o form
... private String name = ""; private String jobTitle = ""; ... public String getName() { return(name); } public void setName(String name) { this.name = name; } public String getJobTitle() { return(jobTitle); } public void setJobTitle(String jobTitle) { this.jobTitle = jobTitle; }
J2EE training: http://courses.coreservlets.com

Passo 1: Criar Bean

(B) Event listener e action controller
public boolean isColorSupported() { return(isColorSupported); } public void toggleColorSupport(ActionEvent event) { isColorSupported = !isColorSupported; } Action listener
Action controller public String showPreview() { if (isColorSupported && fgColor.equals(bgColor)) { return("same-color"); } else { return("success"); } } J2EE training: http://courses.coreservlets.com

Passo 2: Criar Form de entrada

Novidades
Use h:selectOneMenu para criar combobox Use f:selectItems para preencher a lista Use h:commandButton
com actionListener e immediate
Faz com que o event listener seja disparado quando clicado

Mude o label (valor) do boto dependendo do que ele faz

Neste caso, boto toggle

Exemplo
<h:commandButton value="#{someBean.buttonLabel}" actionListener="#{someBean.doSideEffect}" immediate="true"/>
J2EE training: http://courses.coreservlets.com

Passo 2: Criar Form de entrada

(A)Campos de entrada
<h:form> ... Foreground color: <h:selectOneMenu value="#{resumeBean.fgColor}" disabled="#{!resumeBean.colorSupported}"> <f:selectItems value="#{resumeBean.availableColors}"/> </h:selectOneMenu> <BR> Background color: <h:selectOneMenu value="#{resumeBean.bgColor}" disabled="#{!resumeBean.colorSupported}"> <f:selectItems value="#{resumeBean.availableColors}"/> </h:selectOneMenu><BR> ... Name: <h:inputText value="#{resumeBean.name}"/><BR> Job Title: <h:inputText value="#{resumeBean.jobTitle}"/><P> </h:form> J2EE training: http://courses.coreservlets.com

Passo 2: Criar Form de entrada

(B) Action controller
Mesmo quando se tem event listeners, deve ter sempre action controllers
Como antes, estes invocam a lgica de negocio e participam do fluxo de navegao (via navigation-rule)
<h:form> ... <h:commandButton value="Show Preview" action="#{resumeBean.showPreview}"/> </h:form>

J2EE training: http://courses.coreservlets.com

Passo 2: Criar Form de entrada

(C) Event listener
Event listeners executam efeitos do lado cliente, side effects, e o form reapresentado
No invocam lgica de negocios, se nunca participam do fluxo de navegao (navigation-rule ) Normalmente usa "immediate" para informar que os mtodos setter no sero disparados
<h:form> ... <h:commandButton value="#{resumeBean.colorSupportLabel}" actionListener="#{resumeBean.toggleColorSupport}" immediate="true"/> </h:form>
J2EE training: http://courses.coreservlets.com

Passo 2-4: Resultado inicial

J2EE training: http://courses.coreservlets.com

Passo 2: Resultado do boto Button (Independente do Action Controller)

J2EE training: http://courses.coreservlets.com

Passo 3: Editar facesconfig.xml

(A) Declarando bean
Note o escopo de sesso, ento as mudanas persistem
<faces-config> <managed-bean> <managed-bean-name>resumeBean</managed-bean-name> <managed-bean-class> coreservlets.ResumeBean </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> </faces-config>

J2EE training: http://courses.coreservlets.com

Step 3: Editar faces-config.xml

(B) navigation rules
<faces-config> <navigation-rule> <from-view-id>/customize.jsp</from-view-id> <navigation-case> <from-outcome>same-color</from-outcome> <to-view-id>/WEB-INF/results/same-color.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/WEB-INF/results/show-preview.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>
J2EE training: http://courses.coreservlets.com

Passo 4: Criar pginas resutados

WEB-INF/results/same-color.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> <!DOCTYPE > <HTML> You chose "<h:outputText value="#{resumeBean.fgColor}"/>" as both the foreground and background color. <P> You don't deserve to get a job, but I suppose we will let you <A HREF="customize.faces">try again</A>. </HTML> </f:view>
J2EE training: http://courses.coreservlets.com

Passo 4: Criar pginas resutados

WEB-INF/results/show-preview.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> <!DOCTYPE > <HTML> <BODY TEXT="<h:outputText value="#{resumeBean.fgColor}"/>" BGCOLOR="<h:outputText value="#{resumeBean.bgColor}"/>"> <H1 ALIGN="CENTER"> <h:outputText value="#{resumeBean.name}"/><BR> <SMALL><h:outputText value="#{resumeBean.jobTitle}"/> </SMALL></H1> Experienced <h:outputText value="#{resumeBean.jobTitle}"/> seeks challenging position doing something. <H2>Employment History</H2> Blah, blah, blah, blah. Yadda, yadda, yadda, yadda. </HTML> </f:view> J2EE training: http://courses.coreservlets.com

Passo 4: resutados

J2EE training: http://courses.coreservlets.com

Passo 4: resutados

J2EE training: http://courses.coreservlets.com

 2007 Marty Hall

Mudana de valores Listeners

Customized J2EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces, Hibernate, Ajax, GWT, Java 5, Java 6, etc. Ruby/Rails coming soon. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Usando ValueChangeListener em JSP

ActionListener associado a um boto ValueChangeListener associado a combobox, listbox, radio button, checkbox, textfield, etc.
Form no so submetidos automaticamente Necessrio JavaScript para submeter o form Evento incompatibilidade entre Firefox e IE
onclick="submit()" ou onchange="submit()"

Form automaticamente enviado

Firefox, Netscape, and Operapercebem a mudana Internet Explorer s percebe depois que outro controle recebe o foco

J2EE training: http://courses.coreservlets.com

Implementando ValueChangeListener
Listener est na classe do bean Tem um ValueChangeEvent como argumento
Metodos uteis do ValueChangeEvent
getComponent getOldValue getNewValue

Sample code
public void someMethod(ValueChangeEvent event) { boolean flag = ((Boolean)event.getNewValue()).booleanValue(); takeActionBasedOn(flag); } J2EE training: http://courses.coreservlets.com

Exemplo: Mudando as cores listadas para FG e BG

h:selectOneMenu usa f:selectItems Use checkbox para chamar ValueChangeListener Definies das listas
Color names RGB values

J2EE training: http://courses.coreservlets.com

Passos criando o JSF

1) Criar o bean
A) Propriedade para os dados do forma B) Metodos para Action controller e event listener C) Placeholders para exibir os resultados

2) Criar o form de entrada

A) Campos de entrada relacionado com o bean B) Buto para o mtodo action controllerque retorna a condio C) Boto ou outro controle GUI especifica o mtodo event listener

3) Editar faces-config.xml
A) Declarar the bean B) Especificar navigation rules

4) Criar pginas resultados

J2EE training: http://courses.coreservlets.com

Passo 1: Criar Bean

(A) Escolha de cores
private SelectItem[] availableColorNames = { new SelectItem("BLACK"), new SelectItem("WHITE"), new SelectItem("SILVER"), new SelectItem("RED"), new SelectItem("GREEN"), new SelectItem("BLUE") }; private SelectItem[] availableColorValues = { new SelectItem("#000000"), new SelectItem("#FFFFFF"), new SelectItem("#C0C0C0"), new SelectItem("#FF0000"), new SelectItem("#00FF00"), new SelectItem("#0000FF") }; private boolean isUsingColorNames = true; public SelectItem[] getAvailableColors() { if (isUsingColorNames) { return(availableColorNames); } else { return(availableColorValues); } } J2EE training: http://courses.coreservlets.com

Passo 1: Criar Bean

(B) Event listener
Quand checkbox selecionada, muda as cores para retornar RGB ao inves do nome return RGB values instead of color names Action controller, action listener, e outros dados do form iguais o exemplo anterior
public void changeColorMode(ValueChangeEvent event) { boolean flag = ((Boolean)event.getNewValue()).booleanValue(); setUsingColorNames(!flag); }

J2EE training: http://courses.coreservlets.com

Passo 2:Criar o Form (e especificar o Event Listener)

Novidades
Use h:selectBooleanCheckbox para checkbox Use valueChangeListener para associar event listener Use onclick para submeter quando checkbox, mudar

Exemplo
<h:selectBooleanCheckbox valueChangeListener="#{resumeBean.changeColorMode}" onclick="submit()" immediate="true"/>
Client-side JavaScript code

J2EE training: http://courses.coreservlets.com

Passo 2: Resultado

J2EE training: http://courses.coreservlets.com

Passo 2: Resultado da mudana do Checkbox

J2EE training: http://courses.coreservlets.com

Passo 3-5
Iguais o exemplo anterior

J2EE training: http://courses.coreservlets.com

 2007 Marty Hall

Combinando Action Listeners e Action Controllers no mesmo boto

Customized J2EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces, Hibernate, Ajax, GWT, Java 5, Java 6, etc. Ruby/Rails coming soon. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Motivao
Normalmente, action listeners e action controllers so associados a botes diferentes As vezes, necessrio ambos
Listeners tem acesso a detalhes do GUI
Renderer, client ID, etc.

Exemplo: mapas server-side

h:commandButton com uma imagem ao invs do valor resultado de um mapa
J2EE training: http://courses.coreservlets.com

 Mostra uma barra grayscale para o usuario Deixa ele clicar numa posio para escolher background Constri o valor RGB
le clientID.x valor Normaliza para 0-256 baseado na largura Gera uma saida em hex #RRGGBB string Vai pro action listener

Exemplo: escolhendo cor Background Color para uma imagem MAp

Forward para o JSP

Feito pelo action controller

J2EE training: http://courses.coreservlets.com

Passos criando o JSF

1) Criar o bean
A) Propriedade para os dados do forma B) Metodos para Action controller e event listener C) Placeholders para exibir os resultados

2) Criar o form de entrada

A) Campos de entrada relacionado com o bean B) Buto para o mtodo action controllerque retorna a condio C) Boto ou outro controle GUI especifica o mtodo event listener

3) Editar faces-config.xml
A) Declarar the bean B) Especificar navigation rules

4) Criar pginas resultados

J2EE training: http://courses.coreservlets.com

Passo 1: Criar Bean

(A) Form
package coreservlets; ... public class ColorBean { private String bgColor = "WHITE"; public String getBgColor() { return(bgColor); } public void setBgColor(String bgColor) { this.bgColor = bgColor; }

J2EE training: http://courses.coreservlets.com

Passo 1: Criar Bean

Listener procura valor x e cria uma cor
public void selectGrayLevel(ActionEvent event) { FacesContext context = FacesContext.getCurrentInstance(); String clientId = event.getComponent().getClientId(context); HttpServletRequest request = (HttpServletRequest)context.getExternalContext().getRequest(); String grayLevelString = request.getParameter(clientId + ".x"); int grayLevel = 220; try { grayLevel = Integer.parseInt(grayLevelString); } catch(NumberFormatException nfe) {} // Image is 440 pixels, so scale. grayLevel = (256 * grayLevel) / 440; String rVal = Integer.toString(grayLevel, 16); setBgColor("#" + rVal + rVal + rVal); }

Controller designa a pagina de saida

public String showPreview() { return("success"); }

J2EE training: http://courses.coreservlets.com

Passp 2: criar o Form de entrada

Especificar ambos o action and actionListener
Listener exeutam primeiro e tem acesso a detalhes internos use h:commandButton com uma imagem
Resultado em um imagem do lado servidor

Code
<h:form> ... <h:commandButton image="images/GrayBar.gif" actionListener="#{colorBean.selectGrayLevel}" action="#{colorBean.showPreview}"/>

J2EE training: http://courses.coreservlets.com

Passo 2: Resultado

J2EE training: http://courses.coreservlets.com

Passo 3: Editar facesconfig.xml

Declarando o bean
<faces-config> ... <managed-bean> <managed-bean-name>colorBean</managed-bean-name> <managed-bean-class> coreservlets.ColorBean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> </faces-config>

J2EE training: http://courses.coreservlets.com

Passo 3: Editar facesconfig.xml

navigation rules

<faces-config> <navigation-rule> <from-view-id>/customize-bg.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id> /WEB-INF/results/show-preview2.jsp </to-view-id> </navigation-case> </navigation-rule> </faces-config>
J2EE training: http://courses.coreservlets.com

passo 4: Resultados
WEB-INF/results/show-preview2.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> <!DOCTYPE ...> <HTML> <HEAD><TITLE>Preview of Background Color</TITLE></HEAD> <BODY BGCOLOR="<h:outputText value="#{colorBean.bgColor}"/>"> <H1 ALIGN="CENTER">Preview of Background Color</H1> Experienced employee seeks challenging position doing something. <H2>Employment History</H2> Blah, blah, blah, blah. Yadda, yadda, yadda, yadda. </HTML> </f:view>

J2EE training: http://courses.coreservlets.com

passo 4: Resultados

J2EE training: http://courses.coreservlets.com

 2010 Marty Hall

Alterando o Locale Dinamicamente

Customized Java EE Training: http://courses.coreservlets.com/

Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.

Configurar Locale baseado no usurio

Duas Maneiras de configurar Locale

chamar setLocale no view

<f:view locale="#{formSettings.currentLocale}"> Na aula anterior, configuramo a lingua baseado no browser do usurio <f:view locale="#{facesContext.externalContext.request.locale} "> FacesContext.getCurrentInstance().getViewRoot() .setLocale(currentLocale);

Setar o Locale do UIViewRoot

I18N

Aula anterior

5050

<f:view locale="#{facesContext.externalContext.request.locale}"> J2EE training: http://courses.coreservlets.com

Configurar Locale baseado no usurio

Problema

Chamar o setLocale no view

Disparado quando a pgina recarregado No disparado aps executar um action listener (ou submeter um form) Disparado aps executar um action listener (ou submeter um form) No mostrado quando a pgina recarregada Locale volta para o Deafult

Setar o Locale direto UIViewRoot

Soluo

Fazer ambos!
J2EE training: http://courses.coreservlets.com

5151

Exemplo

Idia

Prover um pushbutton para alternar entre ingls e espanhol Criar dois arquivos de propriedades

Abordagem

messages.properties and messages_es.properties

Prover um pushbutton que executa um action listener que i mudar o Locale

Diretamente setar o UIViewRoot Settar um flag que determina o que o getLocale retorna <f:view locale="#{formSettings.locale}">
J2EE training: http://courses.coreservlets.com

No f:view,

5252

Input Form (register2.xhtml)

<!DOCTYPE > <html > <f:view locale="#{formSettings.locale}"> <!-- Igual o customize.jsp. Exceto pelo view e pelo button --> <h:commandButton value="#{msgs.switchLanguage}" actionListener="#{formSettings.swapLocale1}" immediate="true"/> </f:view></html>

5353
J2EE training: http://courses.coreservlets.com

Bean para Action Listener (Parte chamada pelo f:view)

public class FormSettings implements Serializable { //codigo do bean anterior private boolean isEnglish = true; private final Locale ENGLISH = Locale.ENGLISH; private final Locale SPANISH = new Locale("es"); public Locale getLocale() { if (isEnglish) { return(ENGLISH); } else { return(SPANISH); } }
5454
J2EE training: http://courses.coreservlets.com

Bean para Action Listener ( chamada pelo ActionListener)

public void swapLocale1(ActionEvent event) { switchLocale(); } private void switchLocale() { isEnglish = !isEnglish; Locale newLocale; if (isEnglish) { newLocale = ENGLISH; } else { newLocale = SPANISH; } FacesContext.getCurrentInstance().getViewRoot() .setLocale(newLocale); }
5555
J2EE training: http://courses.coreservlets.com

O restante igual

Sem mudanas do exemplo anterior

Pginas de resultado

Tambm usam <f:view locale="#{formSettings.locale}"/>

5656
J2EE training: http://courses.coreservlets.com

Spanish Properties File (messages_es.properties)

registrationTitle=Registro firstName=Primer Nombre lastName=Apellido emailAddress=Direccin de Email registrationText=Incorpore Por Favor su {0}, {1}, y {2}. prompt=Incorpore {0} buttonLabel=Coloqeme successTitle=xito successText=Se Registr con xito. switchLanguage=In English normalFont=Fuente Normal largeFont=Fuente Grande errorTitle=Error! missingData=Falta de input. Por favor, intntelo de nuevo.
5757
J2EE training: http://courses.coreservlets.com

Resultado: Form

5858

Resultado: Sucesso

6060

 2007 Marty Hall

perguntas?
Customized J2EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces, Hibernate, Ajax, GWT, Java 5, Java 6, etc. Ruby/Rails coming soon. Developed and taught by well-known author and developer. At public venues or onsite at your location.