I wrote a ViewScoped Managed-Bean and every time I refresh the page in my webbrowser, the Managed-Bean seems to be recreated, article is null, it loads a new article-object and so on. For me it looks like the same behaviour as RequestScoped.
I use Eclipse IDE for Java EE Developers, the newest JDK, Apache Tomcat 7.0.8 and Mojarra 2.0.3.
What is wrong?
Managed-Bean:
...
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
...
#ManagedBean
#ViewScoped
public class CreateArticle {
#ManagedProperty(value = "#{index.facade}")
private PersistenceFacade facade;
private Article article;
private Vector<ArtCategory> artcat;
public CreateArticle() {
artcat = ArtCategory.listArtCat();
}
#PostConstruct
public void postCreateArticle() {
if (article == null) {
try {
article = facade.createArticle();
} catch (DAOException e) {
e.printStackTrace();
}
}
}
public void setFacade(PersistenceFacade facade) {
this.facade = facade;
}
public Vector<ArtCategory> getArtcat() {
return artcat;
}
public Article getArticle() {
return article;
}
public String save() {
try {
facade.save(article);
facade.commit();
} catch (DAOException e) {
e.printStackTrace();
}
FacesMessage message = new FacesMessage(
"Successful!");
FacesContext.getCurrentInstance().addMessage(null, message);
return "/testpage.xhtml";
}
}
createArticle.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Create article</title>
</h:head>
<h:body>
<h1>
<h:outputText value="System" />
</h1>
<h2>
<h:outputText value="Test1" />
</h2>
<h3>
<h:outputText value="Test2" />
</h3>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="artname">Articlename</h:outputLabel>
<h:inputText id="artname" value="#{createArticle.article.artname}"
required="true">
<f:ajax event="blur" render="artnameMessage" />
</h:inputText>
<h:message id="artnameMessage" for="artname" />
<h:outputLabel for="briefdesc">Brief description</h:outputLabel>
<h:inputTextarea id="briefdesc"
value="#{createArticle.article.briefdesc}" required="false">
<f:ajax event="blur" render="briefdescMessage" />
</h:inputTextarea>
<h:message id="briefdescMessage" for="briefdesc" />
<h:outputLabel for="price">Price</h:outputLabel>
<h:inputText id="price" value="#{createArticle.article.price}"
required="true">
<f:ajax event="blur" render="priceMessage" />
</h:inputText>
<h:message id="priceMessage" for="price" />
<h:outputLabel for="selectartcat">Article Category</h:outputLabel>
<h:selectOneMenu id="selectartcat"
value="#{createArticle.article.artcatnr}" required="true">
<f:selectItems value="#{createArticle.artcat}" var="artcat"
itemLabel="#{artcat.name}" itemValue="#{artcat.artcatnr}" />
<f:ajax event="blur" render="selectartcatMessage" />
</h:selectOneMenu>
<h:message id="selectartcatMessage" for="selectartcat" />
<h:panelGroup />
<h:commandButton value="Save"
action="#{createArticle.save}">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
<h:messages globalOnly="true" layout="table" />
</h:panelGrid>
</h:form>
</h:body>
</html>
That's expected behaviour. Surely it will be recreated when you fire brand new HTTP GET requests by refreshing the page in the browser. Otherwise it would act like a session scoped bean and it would make the view scope useless (think about new GET requests in different browser tabs!). It will however not be recreated when you invoke any ajax requests or submit the form in the same view. A request scoped one would be recreated everytime. That's the core point/advantage of a view scoped bean.
Also make sure your implementing Serializable on your ViewScoped beans, just as you would with a SessionScoped bean.
Related
first of all, I am writing this because I am desperate. The thing is I was doing a simple Spring Boot CRUD with Primefaces. I used a bean called "carBean" to access the data in the index.xhtml file. Until there everything ok, things started to turn weird from now on. I tried to use a simple inputText to bind a text given in the UI to a property in the bean.
But I was constantly getting error 500, telling me that the property "marca" was not found in the bean, and I have checked 10000 times and everything is OK in there. So I started testing, and eventually I figured out that, the property that was working fine "carBean.cars" if I change the name to whatever I change (and obviously the methods liked to the property), It stop working. Is like the only property that works has to be named "cars". What I am missing here? Is driving me crazy, I promise this was my last resource. Thanks in advance .
carBean
package com.example.bean;
import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.inject.Named;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import com.example.controller.CarController;
import com.example.dto.CarDTO;
import lombok.Data;
#Data
#Named("carBean")
#Scope(value = "session")
public class CarBean implements Serializable {
private static final long serialVersionUID = -8338541378806874723L;
#Autowired
CarController carController;
private List<CarDTO> cars;
private Integer id;
private String marca;
private String modelo;
private String precio;
private String bastidor;
private String potencia;
public String getMarca() {
return marca;
}
public void setMarca(String marca) {
this.marca = marca;
}
public List<CarDTO> getCars() {
cars = carController.getAllCars();
return cars;
}
public void delete(CarDTO car) {
carController.deleteCar(car.id);
cars = carController.getAllCars();
}
public void add() {
CarDTO newCar = new CarDTO();
newCar.marca = this.marca;
newCar.modelo = this.modelo;
newCar.precio = this.precio;
newCar.bastidor = this.bastidor;
newCar.potencia = this.potencia;
carController.create(newCar);
}
public String redirect() {
return "index.xhtml?faces-redirect=true";
}
}
index.xhtml
<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:rich="http://richfaces.org/rich"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<h3> REGISTRO DE COCHES </h3>
<h:form id = "tabla">
<div class="card">
<p:dataTable var="car" value="#{carBean.cars}">
<p:column sortBy="#{car.marca}" headerText="Marca">
<h:outputText value="#{car.marca}" />
</p:column>
<p:column sortBy="#{car.modelo}" headerText="Modelo">
<h:outputText value="#{car.modelo}" />
</p:column>
<p:column sortBy="#{car.precio}" headerText="Precio">
<h:outputText value="#{car.precio}" />
</p:column>
<p:column sortBy="#{car.bastidor}" headerText="Bastidor">
<h:outputText value="#{car.bastidor}" />
</p:column>
<p:column sortBy="#{car.potencia}" headerText="Potencia">
<h:outputText value="#{car.potencia}" />
</p:column>
<p:column>
<p:commandButton type="submit" value="Eliminar" actionListener="#{carBean.delete(car)}"
update=":tabla" />
<p:commandButton type="button" value="Editar"/>
</p:column>
</p:dataTable>
<p:commandButton value="Nuevo Coche" type="submit" oncomplete="PF('createModal').show();"/>
</div>
</h:form>
<p:dialog header="Agregar" widgetVar="createModal" id="createModal">
<h:form id="createDialog">
<p:panel header="Detalles del coche">
<h:panelGrid columns="1">
<h:outputLabel value="Marca:"/>
<h:inputText id="marca" value="#{carBean.marca}" required="true"> </h:inputText>
<h:outputLabel value="Modelo"/>
<h:inputText id="modelo"> </h:inputText>
<h:outputLabel value="Precio"/>
<h:inputText id="precio"> </h:inputText>
<h:outputLabel value="Bastidor"/>
<h:inputText id="bastidor"> </h:inputText>
<h:outputLabel value="Potencia"/>
<h:inputText id="potencia"> </h:inputText>
</h:panelGrid>
</p:panel>
</h:form>
</p:dialog>
</h:head>
</html>
Why I cannot used other property that isn´t called "cars"?
Don't mess Lombok #Data autogenerated getters and setters with the one you've declared in the Bean.
You have used a getter as a method, which is not a good thing to do because it can be called multiple times, see: Why JSF calls getters multiple times
public List<CarDTO> getCars() {
cars = carController.getAllCars(); // remove business logic from getter
return cars;
}
Better initialize your private List<CarDTO> cars variable in a method annotated with #PostContruct
#PostConstruct
public void init() {
cars = carController.getAllCars();
}
For more check this example: PrimeFaces DataTable CRUD
I have a huge problem with my jsf page. I have to pass a Parameter in Post request to a request scoped Bean. All works fine except one little bug. The button to update my information reacts only from second click on.
This Page has to be request scope.
Everytime i push the button it first runs the #PostConstruct and is then ready for a click. I tried to delete the PostConstruct method but my program than stops. I tried nearly everything. Any ideas please?
Here is my Code: I enter this page by calling the Methode "showEditEvent" from another Bean.
package model.backingBean.event;
import java.io.IOException;
import java.io.InputStream;
import java.io.Serializable;
import java.util.ResourceBundle;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
import javax.faces.component.UIComponent;
//import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.servlet.http.Part;
import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import model.backingBean.system.SessionBean;
import model.bean.event.Event;
import model.database.EventManager;
import model.enums.EColorTheme;
import model.exceptions.DatabaseException;
import model.utility.Cryptography;
import model.utility.system.ConfigurationReader;
/**
* Bean for is responsible for the edit actions, which are performed with an
* event. That means you can change eventdetails.
*
* #author 101 Computing
*
*/
#ManagedBean
#RequestScoped
public class EditEventBean implements Serializable {
private static final long serialVersionUID = 1L;
private Event event;
private UIComponent generateVerCode;
private UIComponent updateButton;
private Part uploadedImage;
private static Logger logger = LogManager.getLogger(EditEventBean.class
.getName());
private String color;
private ResourceBundle rb = FacesContext.getCurrentInstance().getApplication().
getResourceBundle(FacesContext.getCurrentInstance(),"msgs");
#ManagedProperty("#{param.eventID}")
private int eventID;
/**
* Injects SessionBean.
*/
#ManagedProperty("#{sessionBean}")
private SessionBean sb;
public String showEditEvent(int eventID) {
FacesContext fcxt = FacesContext.getCurrentInstance();
this.setEventID(eventID);
try {
this.event = EventManager.getEvent(eventID);
} catch (DatabaseException e) {
FacesMessage msgs = new FacesMessage(FacesMessage.SEVERITY_ERROR,
rb.getString("exceptions_database"), null);
fcxt.addMessage(null, msgs);
}
return "/facelets/eventAdmin/editEvent.xhtml";
}
public int getEventID() {
return eventID;
}
public void setEventID(int eventID) {
this.eventID = eventID;
}
/**
* Method initializes the event.
*
* #throws IOException
*/
#PostConstruct
public void init() {
FacesContext fcxt = FacesContext.getCurrentInstance();
String id = FacesContext.getCurrentInstance().getExternalContext()
.getRequestParameterMap().get("eventID");
if (id != null) {
this.eventID = Integer.parseInt(id);
try {
this.event = EventManager.getEvent(this.eventID);
} catch (DatabaseException e) {
FacesMessage msgs = new FacesMessage(
FacesMessage.SEVERITY_ERROR,
rb.getString("exception_database"), null);
fcxt.addMessage(null, msgs);
}
}
}
/**
*
* #param eventID
* #return
*/
public void update(int eventID) {
FacesContext fcxt = FacesContext.getCurrentInstance();
if (this.event.getEndOfEvent().after(this.event.getStartOfEvent())
&& this.event.getEntireTicketamount() > 0) {
if (this.uploadedImage != null) {
upload();
}
if (this.color.equals(EColorTheme.THEME_PINK.toString())) {
this.event.setColorTheme(EColorTheme.THEME_PINK);
} else if (this.color.equals(EColorTheme.THEME_BLUE.toString())) {
this.event.setColorTheme(EColorTheme.THEME_BLUE);
}
EventManager.updateEvent(this.event);
try {
this.event = EventManager.getEvent(this.eventID);
} catch (DatabaseException e) {
FacesMessage msgs = new FacesMessage(
FacesMessage.SEVERITY_ERROR,
rb.getString("exception_database"), null);
fcxt.addMessage(null, msgs);
}
// Message for updating
FacesMessage msgs = new FacesMessage(FacesMessage.SEVERITY_INFO,
rb.getString("editEvent_successUpdate"), null);
fcxt.addMessage(null, msgs);
} else {
// Message for updating
FacesMessage message = new FacesMessage("Not updated "
+ "- ends before it starts!");
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(updateButton.getClientId(context), message);
}
}
/**
* Method generates a new verification code and saves it in the database.
*/
public void generateNewVerificationCode(int eventID) {
FacesContext fcxt = FacesContext.getCurrentInstance();
String newCode = verificationGenerator();
this.event.setVerificationCode(newCode);
try {
EventManager.setNewVerificationCode(this.event.getEventID(),
newCode);
} catch (DatabaseException e) {
FacesMessage msgs = new FacesMessage(FacesMessage.SEVERITY_ERROR,
rb.getString("exception_database"), null);
fcxt.addMessage(null, msgs);
}
FacesMessage message = new FacesMessage("New VC generated.");
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(generateVerCode.getClientId(context), message);
logger.info("Generated a new verification code for event with id="
+ this.event.getEventID() + ".");
}
And here is my Facelet
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="../../templates/basicTemplate.xhtml">
<ui:define name="metadata">
<f:metadata>
<f:viewParam name="eventID" value="#{editEventBean.eventID}" />
<f:viewAction action="#{editEventBean.init}" />
</f:metadata>
</ui:define>
<ui:define name="content">
<h1 style="color: #808080; font-size: large">#{msgs.event_editEvent_h1}
</h1>
<br />
<h:form enctype="multipart/form-data">
<f:view>
<input type="hidden" name="eventID"
value="#{editEventBean.eventID}" />
<h:outputText value="#{msgs.editEvent_pictureSize}" /> <br/>
<h:panelGrid columns="3">
<h:outputLabel for="eventPic" value="#{msgs.event_picture}" />
<h:inputFile id="eventPic" value="#{editEventBean.uploadedImage}" sizeLimit="20480"/>
<h:message for="eventPic" errorStyle="color:red" />
<h:outputLabel for="title" value="#{msgs.event_title}" />
<h:inputText id="title" value="#{editEventBean.event.title}"
required="true" requiredMessage="#{msgs.event_reqTitle}"
label="#{msgs.event_title}" size="74">
<f:validateLength minimum="2" maximum="70" />
</h:inputText>
<h:message for="title" errorStyle="color:red" />
<h:outputLabel for="description" value="#{msgs.event_description}" />
<h:inputTextarea id="description"
value="#{editEventBean.event.description}" required="true"
requiredMessage="#{msgs.event_reqDescription}"
label="#{msgs.event_description}" cols="60">
<f:validateLength minimum="2" maximum="500" />
</h:inputTextarea>
<h:message for="description" errorStyle="color:red" />
<h:outputLabel for="location" value="#{msgs.event_location}" />
<h:inputText id="location" value="#{editEventBean.event.location}"
required="true" requiredMessage="#{msgs.event_reqLocation}"
label="#{msgs.event_location}" size="50">
<f:validateLength minimum="2" maximum="50" />
</h:inputText>
<h:message for="location" errorStyle="color:red" />
<h:outputLabel for="startOfEvent"
value="#{msgs.event_editStartDate}" />
<h:inputText id="startOfEvent"
value="#{editEventBean.event.startOfEvent}" required="true"
requiredMessage="#{msgs.event_reqStartDate}"
label="#{msgs.event_startDate}" size="50">
<f:convertDateTime pattern="#{msgs.longDate}" />
</h:inputText>
<h:message for="startOfEvent" errorClass="error" />
<h:outputLabel for="endOfEvent" value="#{msgs.event_editEndDate}" />
<h:inputText id="endOfEvent"
value="#{editEventBean.event.endOfEvent}" required="true"
requiredMessage="#{msgs.event_reqEndDate}"
label="#{msgs.event_endDate}" size="50">
<f:convertDateTime pattern="#{msgs.longDate}" />
</h:inputText>
<h:message for="endOfEvent" errorClass="error" />
<h:outputLabel for="ticketAmount"
value="#{msgs.event_ticketAmount}" />
<h:inputText id="ticketAmount"
value="#{editEventBean.event.entireTicketamount}" required="true"
requiredMessage="#{msgs.event_reqTicketAmount}"
label="#{msgs.event_ticketAmount}" size="50">
<f:convertNumber integerOnly="true" />
</h:inputText>
<h:message for="ticketAmount" errorStyle="color:red" />
<h:outputLabel for="ticketPrice" value="#{msgs.event_ticketPrice}" />
<h:inputText id="ticketPrice"
value="#{editEventBean.event.ticketPrice}" required="true"
requiredMessage="#{msgs.event_reqTicketPrice}"
label="#{msgs.event_ticketPrice}" size="50">
<f:convertNumber type="currency" currencySymbol="€"
maxFractionDigits="2" />
</h:inputText>
<h:message for="ticketPrice" errorStyle="color:red" />
<h:outputLabel for="accountNumber"
value="#{msgs.event_accountNumber}" />
<h:inputText id="accountNumber"
value="#{editEventBean.event.accountNumber}" required="true"
requiredMessage="#{msgs.event_reqAccountNumber}"
label="#{msgs.event_accountNumber}" size="50">
<f:convertNumber integerOnly="true" />
</h:inputText>
<h:message for="accountNumber" errorStyle="color:red" />
<h:outputLabel for="cashPayment" value="#{msgs.event_cashPayment}" />
<h:selectBooleanCheckbox id="cashPayment"
value="#{editEventBean.event.cashPayment}" />
<h:outputLabel></h:outputLabel>
<h:outputLabel for="creditPayment"
value="#{msgs.event_creditPayment}" />
<h:selectBooleanCheckbox id="creditPayment"
value="#{editEventBean.event.creditPayment}" />
<h:outputLabel></h:outputLabel>
<h:outputLabel for="isActive" value="#{msgs.event_isActive}" />
<h:selectBooleanCheckbox id="isActive"
value="#{editEventBean.event.isActive}" />
<h:outputLabel></h:outputLabel>
<h:outputLabel for="isActive"
value="#{msgs.event_chooseTicketColor}" />
<h:selectOneMenu value="#{editEventBean.color}">
<f:selectItem itemValue="PINK" itemLabel="Pink" />
<f:selectItem itemValue="BLUE" itemLabel="Blue" />
</h:selectOneMenu>
<h:outputLabel></h:outputLabel>
<h:commandButton id="updateButton" value="#{msgs.event_update}"
action="#{editEventBean.update(editEventBean.eventID)}"
binding="#{editEventBean.updateButton}" />
<h:message for="updateButton" infoClass="info" />
</h:panelGrid>
<h:panelGrid columns="4">
<h:outputLabel for="verificationCode" value="#{msgs.event_vc}" />
<h:inputText id="verificationCode"
value="#{editEventBean.event.verificationCode}" readonly="true">
</h:inputText>
<h:commandButton id="generateVerCode"
value="#{msgs.event_generateVC}"
action="#{editEventBean.generateNewVerificationCode(editEventBean.eventID)}"
binding="#{editEventBean.generateVerCode}" />
<h:message for="generateVerCode"
infoStyle="color:darkgreen; font-weight: bold;" />
</h:panelGrid>
</f:view>
</h:form>
<br />
</ui:define>
</ui:composition>
Found my error. And it was as easy as frustrating…
the
h:form enctype="multipart/form-data"
needs an id. I need the enctype for uploading files. And then the form has to have an id…
Two pages helped me finding this bug:
"7. If a parent of the with the UICommand button is been rendered/updated by an ajax request beforehand, then the first action will always fail."
(commandButton/commandLink/ajax action/listener method not invoked or input value not updated)
and this example of using file upload:
http://jsflive.wordpress.com/2013/04/23/jsf22-file-upload/
It's difficult find such tiny errors if the code is not your own…
I got some issue regarding Primefaces. There is a requirement that when we change language in my top panel from Engish to Arabic the entire layout should be displayed in right to left position (Like mirror image applying to all inner pages).please help me out.
i am including english version layout,top panel and controller beans.
1.layout
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.ui-growl{
left:20px;
}
</style>
</h:head>
<body>
<ui:composition template="/home/template/common/commonLayout.xhtml">
<ui:define name="content">
<h:form enctype="multipart/form-data" dir="#{localeControllerBean.direction}" id="form1">
<div id="add">
<p:growl id="msgs" autoUpdate="true" display="icon" style="left:20px"></p:growl>
</div>
<p:panel header="#{msg['sponsor_detail']}">
<h:panelGrid columns="2">
<f:event listener="#{localeControllerBean.islang}" type="preRenderView" />
<p:outputLabel for="sname" value="#{msg['sponsor_name']}"
styleClass="label" />
<p:inputText id="sname" value="#{sponsorBean.sponsor_name}"
required="true" requiredMessage="#{msg['sponsor_name_msg']}"
styleClass="input">
<f:validator validatorId="sponsorValidator" />
</p:inputText>
<p:outputLabel for="sadd" value="#{msg['sponsoraddress']}:"
styleClass="label" />
<p:inputText id="sadd" value="#{sponsorBean.s_address}"
required="true" requiredMessage="#{msg['Sponsor_address_msg']}"
styleClass="input" />
<p:outputLabel for="smb" value="#{msg['sponsor_mbno']}:"
styleClass="label" />
<p:inputText id="smb" value="#{sponsorBean.s_mobile_no}"
required="true" requiredMessage="#{msg['sponsor_mbno_msg']}"
styleClass="input" />
<p:outputLabel for="ss" value="#{msg['sponsor_status']}:" styleClass="label" />
<p:inputText id="ss" value="#{sponsorBean.status}" required="true"
requiredMessage="#{msg['sponsor_mbno_msg']}" styleClass="input" />
</h:panelGrid>
<p:commandButton id="submit" value="#{msg['save']}" ajax="false"
action="#{sponsorBean.save}" style="margin-bottom:50px;"
update="msgs" />
<p:commandButton type="reset" value="#{msg['reset']}"
style="margin-bottom:50px;margin-left:30px;" ajax="false" />
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
2.toppanel Here i change language..
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<body>
<ui:composition>
<h:form>
<p:growl id="messages" >
<p:toolbar style="Font-size:small;">
<p:toolbarGroup align="left">
<h:outputText value="User : " style=" margin-left:15px;" />
<h:outputText value="#{loginBean.username}">
</h:outputText>
<p:commandButton value="Logout" action="#{loginBean.doLogout}" icon="ui-icon-extlink" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:commandButton value="#{loginBean.toggleButton}" action="#{loginBean.goHome}" icon="ui-icon-home"/>
<p:inputText id="firstname" value="#{manageEmployee.search}" dir="ltr" styleClass="input" style="margin-right:15px" />
<h:selectOneMenu
value="#{manageEmployee.searchFilter}" style="FONT-STYLE: plain; FONT-SIZE:small;margin-right:10px">
<f:selectItem itemLabel="All" itemValue="All" />
<f:selectItem itemLabel="Search by company" itemValue="company" />
<f:selectItem itemLabel="Search by sponsor" itemValue="sponsor" />
</h:selectOneMenu>
<p:commandButton id="submit" value="Search" ajax="false"
action="#{manageEmployee.searchRecords}" update="msgs" style="margin-left:10px" icon="ui-icon-search" />
<h:selectOneMenu value="#{localeBean.language}" onchange="submit()" style="margin-left:10px" >
<f:selectItem itemValue="en" itemLabel="English" />
<f:selectItem itemValue="ar" itemLabel="Arabic" />
</h:selectOneMenu>
</p:toolbarGroup>
</p:toolbar></p:growl>
</h:form>
</ui:composition>
</body>
</html>
3.Local Bean contoller:
import java.util.Locale;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpSession;
#ManagedBean
#SessionScoped
public class LocaleBean {
private Locale locale = FacesContext.getCurrentInstance().getViewRoot().getLocale();
public Locale getLocale() {
return locale;
}
public String getLanguage() {
return locale.getLanguage();
}
public void setLanguage(String language) {
locale = new Locale(language);
FacesContext.getCurrentInstance().getViewRoot().setLocale(locale);
FacesContext facesContext = FacesContext.getCurrentInstance();
HttpSession session = (HttpSession) facesContext.getExternalContext().getSession(true);
session.setAttribute("user", locale);
// session.setAttribute("language", language);
}
public String save()
{
return "homePage";
}
}
4.Language controller:
import java.util.Locale;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ComponentSystemEvent;
import javax.servlet.http.HttpSession;
#ManagedBean
#SessionScoped
public class LocaleControllerBean {
public static String dir="";
private String direction="";
public String getDirection() {
return direction;
}
public void setDirection(String direction) {
this.direction = direction;
}
public void islang(ComponentSystemEvent event)
{
FacesContext facesContext = FacesContext.getCurrentInstance();
HttpSession session = (HttpSession) facesContext.getExternalContext().getSession(true);
Locale l=(Locale) session.getAttribute("user");
if(l.toString().equals("ar"))
{
// dir="rtl";
setDirection("rtl");
}
else
{
setDirection("ltr");
// dir="ltr";
}
System.out.println("locale"+l);
facesContext.getViewRoot().setLocale(l);
}
}
The RTL support is something new in primefaces. I think it is not possible, just to have the whole page looking like a mirror image without actually recreating the page. The css itself probably will not do it, so you will need to create a separate page (or set of pages) to which you will be redirected after changing your locale.
More about RTL support in primefaces can be found here: http://code.google.com/p/primefaces/issues/detail?id=3890 and as you can see- it is component, by component, rather than global.
I have a managed bean placed in view scope. Here is the bean:
#ManagedBean(name = "adminController")
#ViewScoped
public class AdminController extends BaseWebController implements Serializable {
private static final long serialVersionUID = 1019716974557397635L;
private transient CustomerDTO customerDTO;
#PostConstruct
public void init() {
customerDTO = new CustomerDTO();
}
public void saveCustomer(ActionEvent event) {
System.out.println(customerDTO.isActive());
try {
getServiceProvider().getCustomerService().addNewCustomer(customerDTO);
getFacesContext().addMessage(null, FacesMessageUtils.getMessageForCustomerAddSuccess(getFacesContext()));
} catch (Throwable throwable) {
getFacesContext().addMessage(null, FacesMessageUtils.getMessageForCustomerAddError(getFacesContext()));
printStackTrace(throwable);
}
}
public CustomerDTO getCustomerDTO() {
return customerDTO;
}
public void setCustomerDTO(CustomerDTO customerDTO) {
this.customerDTO = customerDTO;
}
}
The view is:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<p:panel header="#{adbBundle['admin.addCustomerPanel.header']}"
id="addCustomerPanel" toggleable="true">
<p:panelGrid columns="2" id="addCustomerTable"
styleClass="addCustomerTable">
<f:facet name="header">
<p:outputLabel id="header"
value="#{adbBundle['admin.addCustomerPanel.addCustomerTable.header']}" />
</f:facet>
<p:outputLabel for="customerName"
value="#{adbBundle['admin.addCustomerPanel.addCustomerTable.customerName']}" />
<h:panelGroup layout="block">
<p:inputText id="customerName" styleClass="customerName"
autocomplete="off"
label="#{adbBundle['admin.addCustomerPanel.addCustomerTable.customerName']}"
value="#{adminController.customerDTO.customerName}" required="true" />
<pe:tooltip for="customerName"
value="#{adbBundle['admin.addCustomerPanel.addCustomerTable.customerName.tooltip']}"
showEffect="slideToggle" hideEffect="slideToggle" showDelay="0"
myPosition="left center" atPosition="right center" />
</h:panelGroup>
<p:outputLabel for="customerId"
value="#{adbBundle['admin.addCustomerPanel.addCustomerTable.customerId']}" />
<h:panelGroup layout="block">
<p:inputText id="customerId" autocomplete="off"
label="#{adbBundle['admin.addCustomerPanel.addCustomerTable.customerId']}"
value="#{adminController.customerDTO.customerId}" required="true">
<f:validator validatorId="customerIDValidator" />
</p:inputText>
<pe:tooltip for="customerId"
value="#{adbBundle['admin.addCustomerPanel.addCustomerTable.customerId.tooltip']}"
showEffect="slideToggle" hideEffect="slideToggle" showDelay="0"
myPosition="left center" atPosition="right center" />
</h:panelGroup>
<p:outputLabel for="activeStatus"
value="#{adbBundle['admin.addCustomerPanel.addCustomerTable.activeStatus']}" />
<h:panelGroup layout="block">
<p:selectBooleanCheckbox id="activeStatus" value="#{adminController.customerDTO.active}" />
</h:panelGroup>
<f:facet name="footer">
<p:commandButton value="#{adbBundle['saveButton']}"
actionListener="#{adminController.saveCustomer}"
icon="ui-icon-check" update=":growl, #form" />
</f:facet>
</p:panelGrid>
</p:panel>
</ui:composition>
The problem that I am facing is, after the actionListener successfully executed the input fields are holding the values.
The h:form is not visible in the aforementioned xhtml, it is placed in the parent page as:
<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:p="http://primefaces.org/ui"
template="/WEB-INF/templates/globalTemplate.xhtml">
<ui:define name="title">#{adbBundle['home']}</ui:define>
<ui:define name="content">
<p:growl id="growl" showDetail="true" />
<h:form id="form">
<ui:include src="/WEB-INF/includes/addCustomer.xhtml" />
</h:form>
</ui:define>
</ui:composition>
However if I add customerDTO = new CustomerDTO(); at the end of the actionListener saveCustomer, the inputs are reset.
Is it the way to clear the form? Or there is a better way to achieve this?
To clear form data using ActionEvent on button
public void clear(){
customerDTO = new CustomerDTO();
}
In this page I,m going to let the user to make the password visible by clicking a checkbox. Actually two Inputs (password, conPassword) should hide and another input (passwordV) should be displayed. All these 3 inputs have the same value and needs to keep their values as user switches between these 2 states: (having two secret fields visible or having one plain text field)
I put the page and bean code here:
JSF Page:
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="./templates/main_template.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns="http://www.w3.org/1999/xhtml">
<ui:define name="subTitle">
:: #{lbls.newEntry} </ui:define>
<ui:define name="content">
<p:panel rendered="#{current.loggedIn}" header="#{lbls.newEntry}" >
<h:form id="frmEntry">
<h:panelGrid columns="3">
<h:panelGroup>
<h:outputLabel for="title" value="#{lbls.title}:"/>
<p:focus for="title"/>
</h:panelGroup>
<p:inputText id="title" value="#{entry.passwordEntry.title}" maxlength="100" label="#{lbls.title}" required="true"/>
<p:message for="title"/>
<h:outputLabel for="description" value="#{lbls.description}:"/>
<p:inputTextarea id="description" value="#{entry.passwordEntry.description}" maxlength="500" rows="3" cols="40" label="#{lbls.description}"/>
<p:message for="description"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<h:outputLabel for="username" value="#{lbls.username}:"/>
<p:inputText id="username" value="#{entry.passwordEntry.username}" maxlength="100" label="#{lbls.username}"/>
<p:message for="username"/>
<h:outputLabel for="password" id="lblPassword" value="#{lbls.password}:" styleClass="#{entry.showPasswords ? 'none' : ''}" />
<p:password id="password" feedback="true" value="#{entry.passwordEntry.password}" match="conPassword" maxlength="100"
label="#{lbls.password}" promptLabel="#{lbls.strengthPromp}" weakLabel="#{lbls.weakPassword}"
goodLabel="#{lbls.goodPassword}" strongLabel="#{lbls.strongPassword}" styleClass="#{entry.showPasswords ? 'none' : ''}"
/>
<p:message id="msgPassword" for="password" class="#{entry.showPasswords ? 'none' : ''}"/>
<h:outputLabel id="lblConPassword" for="conPassword" value="#{lbls.conPassword}:"
styleClass="#{entry.showPasswords ? 'none' : ''}"/>
<p:password id="conPassword" value="#{entry.passwordEntry.password}" label="#{lbls.conPassword}" maxlength="100"
styleClass="#{entry.showPasswords ? 'none' : ''}"/>
<p:message id="msgConPassword" for="conPassword" class="display: #{!entry.showPasswords ? 'none' : ''}"/>
<h:outputLabel id="lblPasswordV" for="passwordV" value="#{lbls.password}:"
styleClass="#{!entry.showPasswords ? 'none' : ''}"/>
<p:inputText id="passwordV" value="#{entry.passwordEntry.password}" maxlength="100"
label="#{lbls.password}"
styleClass="#{!entry.showPasswords ? 'none' : ''}"/>
<p:message id="msgPasswordV" for="passwordV"
class="#{!entry.showPasswords ? 'none' : ''}"/>
<h:outputLabel for="showPasswords" value="#{lbls.showPasswords}:"/>
<p:selectBooleanCheckbox id="showPasswords" label="#{lbls.showPasswords}" value="#{entry.showPasswords}">
<p:ajax process="password passwordV conPassword" update="password passwordV conPassword lblPassword lblPasswordV lblConPassword msgPassword msgConPassword msgPasswordV"/>
</p:selectBooleanCheckbox>
<h:outputText/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<h:outputLabel for="url" value="#{lbls.url}:"/>
<p:inputText id="url" value="#{entry.passwordEntry.url}" maxlength="255" label="#{lbls.url}"/>
<p:message for="url"/>
<h:outputLabel for="ip" value="#{lbls.ip}:"/>
<p:inputText id="ip" value="#{entry.passwordEntry.ip}" maxlength="255" label="#{lbls.ip}"/>
<p:message for="ip"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<h:outputLabel for="tags" value="#{lbls.tags}:"/>
<p:autoComplete id="tags" value="#{entry.selectedTags}"
completeMethod="#{entry.selectTag}" converter="PasswordEntry" multiple="true"
var="tag" itemLabel="#{tag.title}" itemValue="#{tag}" />
<p:message for="tags"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<h:outputText/>
<h:panelGroup layout="block" styleClass="right-align">
<p:commandButton value="#{lbls.save}" actionListener="#{entry.save(event)}"
update=":growl messages"/>
</h:panelGroup>
<f:facet name="footer">
<p:messages id="messages"/>
</f:facet>
</h:panelGrid>
</h:form>
</p:panel>
<ui:include src="/templates/not_logged_in.xhtml" rendered="!#{current.loggedIn}"/> </ui:define>
</ui:composition>
and Bean:
package package;
#ManagedBean(name = "entry")
#ViewScoped
public class PasswordEntryBean implements Serializable {
//<editor-fold defaultstate="collapsed" desc="FIELDS">
private static final Logger logger = LogUtil.getLogger(PasswordEntryBean.class);
private PasswordEntry passwordEntry;
#ManagedProperty(value = "#{current}")
private CurrentSessionBean current;
private Database database;
private List<PasswordTag> selectedTags = new ArrayList<PasswordTag>();
private Set<PasswordTag> tags;
private boolean showPasswords;
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="CONSTRUCTORS">
public PasswordEntryBean() {
passwordEntry = new PasswordEntry();
}
#PostConstruct
public void init() {
}
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="PROPERTIES">
public PasswordEntry getPasswordEntry() {
return passwordEntry;
}
public Database getDatabase() {
return database;
}
public boolean getShowPasswords() {
return showPasswords;
}
public void setShowPasswords(boolean showPasswords) {
this.showPasswords = showPasswords;
}
public void setDatabase(Database database) {
this.database = database;
}
public Set<PasswordTag> getTags() {
return tags;
}
public void setTags(Set<PasswordTag> tags) {
this.tags = tags;
}
public List<PasswordTag> getSelectedTags() {
return selectedTags;
}
public void setSelectedTags(List<PasswordTag> selectedTags) {
this.selectedTags = selectedTags;
}
public void setPasswordEntry(PasswordEntry passwordEntry) {
this.passwordEntry = passwordEntry;
}
public CurrentSessionBean getCurrent() {
return current;
}
public void setCurrent(CurrentSessionBean current) {
this.current = current;
}
//</editor-fold>
}
UPDATED CODE
I just wrote a simpler code in order to make it easier for you to understand my problem:
JSF:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.none {
display: none;
}
</style>
</h:head>
<h:body>
<h1>Register</h1>
<h:form id="frmRegistration">
<h:panelGrid columns="3">
<h:outputLabel value="Username:" for="username"/>
<p:inputText label="username" id="username" value="#{testBean.username}" required="true"/>
<p:message for="username"/>
<h:outputLabel value="Password:" id="lblPassword" for="password" styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
<p:password label="password" id="password" value="#{testBean.password}"
styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
<p:message for="password" id="msgPassword" class="#{!testBean.visiblePassword ? '' : 'none'}"/>
<h:outputLabel value="Confirm Password:" id="lblCpassword" for="cpassword" styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
<p:password label="confirm password" id="cpassword" value="#{testBean.password}"
styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
<p:message for="cpassword" id="msgCpassword" class="#{!testBean.visiblePassword ? '' : 'none'}"/>
<h:outputLabel value="Password:" id="lblVpassword" for="vpassword" styleClass="#{testBean.visiblePassword ? '' : 'none'}"/>
<p:inputText label="password" id="vpassword" value="#{testBean.password}"
styleClass="#{testBean.visiblePassword ? '' : 'none'}"/>
<p:message for="vpassword" id="msgVpassword" class="#{testBean.visiblePassword ? '' : 'none'}"/>
<h:outputLabel value="Show password"/>
<p:selectBooleanButton value="#{testBean.visiblePassword}"
onLabel="Yes" offLabel="No">
<p:ajax update="messages password cpassword vpassword lblPassword lblCpassword lblVpassword msgPassword msgCpassword msgVpassword"
process="messages password cpassword vpassword" listener="#{testBean.addMessage}" />
</p:selectBooleanButton>
<f:facet name="footer">
<p:commandButton actionListener="#{testBean.save(event)}" value="Save" update="messages"/>
<p:messages id="messages"/>
</f:facet>
</h:panelGrid>
</h:form>
</h:body>
</html>
AND BEAN:
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
#ManagedBean
#ViewScoped
public class TestBean {
private String username;
private String password;
private boolean visiblePassword;
public void addMessage() {
String summary = visiblePassword ? "Checked" : "Unchecked";
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(summary));
}
public TestBean() {
}
public void save(ActionEvent event) {
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public boolean isVisiblePassword() {
return visiblePassword;
}
public void setVisiblePassword(boolean visiblePassword) {
this.visiblePassword = visiblePassword;
}
}
This code can hide two fields and show the third field properly if I do not add process attribute to the <p:ajax tag. But this attribute is needed in order to these fields keep their values when the user switches between two modes (2 secret fields / 1 plain text field)
But it fails!
==========================================================
SECOND UPDATE
I used redisplay and the problem of empty values solved but still the inputs don't hide/show unless I set the update and process to #form which is not good for my case.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.none {
display: none;
}
</style>
</h:head>
<h:body>
<h1>Register</h1>
<h:form id="frmRegistration">
<h:panelGrid columns="3">
<h:outputLabel value="Username:" for="username"/>
<p:inputText label="username" id="username" value="#{testBean.username}" required="true"/>
<p:message for="username"/>
<h:outputLabel value="Password:" id="lblPassword" for="password" rendered="#{!testBean.visiblePassword}"/>
<p:password redisplay="true" label="password" id="password" value="#{testBean.password}"
rendered="#{!testBean.visiblePassword}"/>
<p:message for="password" id="msgPassword" rendered="#{!testBean.visiblePassword}"/>
<h:outputLabel value="Confirm Password:" id="lblCpassword" for="cpassword" rendered="#{!testBean.visiblePassword}"/>
<p:password redisplay="true" label="confirm password" id="cpassword" value="#{testBean.password}"
rendered="#{!testBean.visiblePassword}"/>
<p:message for="cpassword" id="msgCpassword" rendered="#{!testBean.visiblePassword}"/>
<h:outputLabel value="Password:" id="lblVpassword" for="vpassword" rendered="#{testBean.visiblePassword}"/>
<p:inputText label="password" id="vpassword" value="#{testBean.password}"
rendered="#{testBean.visiblePassword}"/>
<p:message for="vpassword" id="msgVpassword" rendered="#{testBean.visiblePassword}"/>
<h:outputLabel value="Show password"/>
<p:selectBooleanButton value="#{testBean.visiblePassword}"
onLabel="Yes" offLabel="No">
<p:ajax update="messages password cpassword vpassword lblPassword lblCpassword lblVpassword msgPassword msgCpassword msgVpassword"
process="password cpassword vpassword" listener="#{testBean.addMessage}" />
</p:selectBooleanButton>
<f:facet name="footer">
<p:commandButton actionListener="#{testBean.save(event)}" value="Save" update="messages"/>
<p:messages id="messages"/>
</f:facet>
</h:panelGrid>
</h:form>
</h:body>
</html>
Your main mistake is that you're toggling visibility of the input fields using CSS in the client side, not using JSF in the server side. So JSF basically never knows which one is shown/hidden. All it knows is that both fields are shown. So it will process the both fields. As you've bound the value of the both fields to the one and same property, it will always end up getting the value of the last processed field.
You need to show/hide the input fields using JSF in the server side instead. You can use the therefor provided rendered attribute.
rendered="#{testBean.visiblePassword}"
The problem is that you're binding the same variable entry.passwordEntry.password to 2 or more fields, so when submitting the <h:form> only one of the values in those fields will be set to entry.passwordEntry.password, the other values will be discarded.
The best way to solve this will be to have different variables for every field you have/need on the form. By looking at your code, it looks like that can be achieved by having 3 PasswordEntry attributes in your bean:
#ManagedBean(name = "entry")
#ViewScoped
public class PasswordEntryBean implements Serializable {
//other attributes...
private PasswordEntry passwordEntry;
private PasswordEntry passwordEntryV;
private PasswordEntry conPasswordEntry;
//<editor-fold defaultstate="collapsed" desc="CONSTRUCTORS">
public PasswordEntryBean() {
passwordEntry = new PasswordEntry();
passwordEntryV = new PasswordEntry();
conPasswordEntry = new PasswordEntry();
}
//getters and setters...
}
JSF Code:
<p:password id="password" feedback="true" value="#{entry.passwordEntry.password}"
match="conPassword" maxlength="100" label="#{lbls.password}"
promptLabel="#{lbls.strengthPromp}" weakLabel="#{lbls.weakPassword}"
goodLabel="#{lbls.goodPassword}" strongLabel="#{lbls.strongPassword}"
styleClass="#{entry.showPasswords ? 'none' : ''}" />
<p:password id="conPassword" value="#{entry.conPasswordEntry.password}"
label="#{lbls.conPassword}" maxlength="100"
styleClass="#{entry.showPasswords ? 'none' : ''}"/>
<p:inputText id="passwordV" value="#{entry.passwordEntryV.password}"
maxlength="100" label="#{lbls.password}"
styleClass="#{!entry.showPasswords ? 'none' : ''}"/>
If you want/need to have the same value in 2 or 3 places, you have to take into account that the bindings should not be in the same <h:form>, otherwise you will have the same problem. You can synchronize the variable values using plain JavaScript (after all, the <p:password> will be <input type="password"> and <p:input> will be <input type="text">) or in the server side when executing an action i.e. the listener that should be executed when selecting a value in your <p:selectBooleanCheckbox>.