I put this problem in a simple example, a composite component that calculates the sum of 2 inputs and prints the result in an outputText
Main JSF page:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ez="http://java.sun.com/jsf/composite/ezcomp/">
<h:head></h:head>
<h:body>
<ez:Calculator />
<br/>
<br/>
<ez:Calculator />
<br/>
<br/>
<ez:Calculator />
</h:body>
</html>
Composite component XHTML:
<!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:composite="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>This content will not be displayed</title>
</h:head>
<h:body>
<composite:interface componentType="calculator">
</composite:interface>
<composite:implementation>
<h:form>
<h:inputText id="first" value="#{cc.firstNumber}" />
<h:commandButton value="+" action="#{cc.sum}"/>
<h:inputText id="second" value="#{cc.secondNumber}" />
</h:form>
<h:outputText id="result" value="#{cc.result}" />
</composite:implementation>
</h:body>
</html>
Composite component backing bean:
package ez;
import javax.faces.component.FacesComponent;
import javax.faces.component.UINamingContainer;
#FacesComponent("calculator")
public class Calculator extends UINamingContainer {
private Long firstNumber;
private Long secondNumber;
private Long result;
public Calculator() {
}
#Override
public String getFamily() {
return "javax.faces.NamingContainer";
}
public void setFirstNumber(String firstNumber) {
this.firstNumber = Long.parseLong(firstNumber);
}
public String getFirstNumber() {
if(firstNumber == null) {
return null;
}
return firstNumber.toString();
}
public void setSecondNumber(String secondNumber) {
this.secondNumber = Long.parseLong(secondNumber);
}
public String getSecondNumber() {
if(secondNumber == null) {
return null;
}
return secondNumber.toString();
}
public String getResult() {
if(result == null) {
return null;
}
return result.toString();
}
public void setResult(String result) {
this.result = Long.parseLong(result);
}
public void sum() {
this.result = this.firstNumber + this.secondNumber;
}
}
So, I have 3 Composite Components that all should do the same thing, but when I press a SUM button, after the server processes the request, the result is printed out on the page, but the other 2 components are cleared of their values.
How can I prevent this? How can I force it to retain those values?
UIComponent instances are recreated on every request, hereby losing all instance variables everytime. They basically act like request scoped managed beans, while you intend to have them in the view scope. You need to take view state saving into account on a per-attribute basis. This is normally by default already done for all attributes of #{cc.attrs}. So, if you can, just make use of it:
<cc:interface componentType="calculator">
<cc:attribute name="firstNumber" type="java.lang.Long" />
<cc:attribute name="secondNumber" type="java.lang.Long" />
</cc:interface>
<cc:implementation>
<h:form>
<h:inputText id="first" value="#{cc.attrs.firstNumber}" />
<h:commandButton value="+" action="#{cc.sum}"/>
<h:inputText id="second" value="#{cc.attrs.secondNumber}" />
</h:form>
<h:outputText id="result" value="#{cc.attrs.result}" />
</cc:implementation>
with just this (nullchecks omitted; I recommend to make use of required="true" on the inputs)
#FacesComponent("calculator")
public class Calculator extends UINamingContainer {
public void sum() {
Long firstNumber = (Long) getAttributes().get("firstNumber");
Long secondNumber = (Long) getAttributes().get("secondNumber");
getAttributes().put("result", firstNumber + secondNumber);
}
}
Otherwise, you'd have to take state saving into account yourself by delegating all attribute getters/setters to UIComponent#getStateHelper(). Based on the very same Facelets code as you have, the entire backing component would look like this:
#FacesComponent("calculator")
public class Calculator extends UINamingContainer {
public void sum() {
setResult(getFirstNumber() + getSecondNumber());
}
public void setFirstNumber(Long firstNumber) {
getStateHelper().put("firstNumber", firstNumber);
}
public Long getFirstNumber() {
return (Long) getStateHelper().eval("firstNumber");
}
public void setSecondNumber(Long secondNumber) {
getStateHelper().put("secondNumber", secondNumber);
}
public Long getSecondNumber() {
return (Long) getStateHelper().eval("secondNumber");
}
public void setResult(Long result) {
getStateHelper().put("result", result);
}
public Long getResult() {
return (Long) getStateHelper().eval("result");
}
}
See, no local variables anymore. Note that I also removed the need for those ugly manual String-Long conversions by just declaring the right getter return type and setter argument type. JSF/EL will do the conversion automagically based on default converters or custom Converters. As there's already a default one for Long, you don't need to provide a custom Converter.
Unrelated to the concrete problem, you can safely remove the getFamily() method. The UINamingContainer already provides exactly this. If you were implementing NamingContainer interface instead, then you'd indeed need to provide it yourself, but this is thus not the case here. The above backing component examples have it already removed.
Related
i have a simple file.xhtml in a JSF2.2 application, that's its code:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ez="http://xmlns.jcp.org/jsf/composite/ezcomp">
<head>
<title>Insert title here</title>
</head>
<body>
<f:view>
<h:form id="greeting">
<h:inputText id="num1" value="#{jSFeatBean.num1}" />
<h:inputText id="num2" value="#{jSFeatBean.num2}"/>
<h:commandButton type="submit"
value="Submit"
action="#{jSFeatBean.addNumbers()}"/>
<h:outputText value="#{jSFeatBean.result}"/>!
</h:form>
</f:view>
</body>
</html>
and this is my #ManagedBean:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean(name = "jSFeatBean", eager = true)
#SessionScoped
public class JSFeatursBean {
private String result;
public int num1 = 1;
int num2;
public int getNum1() {
return num1;
}
public void setNum1(int num1) {
this.num1 = num1;
}
public int getNum2() {
return num2;
}
public void setNum2(int num2) {
this.num2 = num2;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public Object addNumbers() {
setResult("il risultato e': "+ Integer.toString(num1+num2));
return null;
}
}
after i start jboss from Eclipse the browser display all elements of my file.xhtml properly but the values in the first (id = num1) inputText is 0 and not 1. Why this happens? If i put new values in the inputText boxes everything works fine, so i think that the Mbean is instantiated and working.
I have the same problem with a h:SelectOneListbox element, that doesn't show the list i create when i call the MBean constructor.
It looks like the MBean gets instatiated right after the display of html page.
The code looks fine to me with just one thing that might cause the problem.
Try remove "eager = true" attribute in your ManagedBean annotation. "eager = true" only works with ApplicationScoped Beans.
i want use Primefaces BlockUI's widgetvar (at the moment i use a modal dialog for it). The application should block only when i select something (a long method will call) and unblock after complete. But it blocks the full side on first side access. Make i something wrong?
When i block the table specific it works. (block="table") But i want block the whole page.
Use Primefaces 5.1 & Mojarra 2.2.8
Short example:
xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>test</title>
</h:head>
<h:body>
<h:form>
<p:blockUI widgetVar="block" blocked="false"/>
<p:dataTable id="table" value="#{myController.tableItems}" rowKey="#{data}"
selection="#{myController.selectedItem}" selectionMode="Single"
var="data">
<p:ajax event="rowSelect" onstart="PF('block').show()"
listener="#{myController.doSomething}"
oncomplete="PF('block').hide()" />
<p:column>#{data}</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
Bean:
#ManagedBean
#ViewScoped
public final class MyController implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
private List<String> tableItems;
private String selectedItem;
#PostConstruct
public void init() {
tableItems = new ArrayList<String>();
tableItems.add("test1");
tableItems.add("test2");
}
public void doSomething(SelectEvent event){
System.out.println("DO Something");
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public String getSelectedItem() {
return selectedItem;
}
public void setSelectedItem(String selectedItem) {
this.selectedItem = selectedItem;
}
public List<String> getTableItems() {
return tableItems;
}
public void setTableItems(List<String> tableItems) {
this.tableItems = tableItems;
}
}
Add an id attribute the body and use that in the block= attribute on the blockui component
My JSF 2.0 page is contains some data, which is dynamic hence needs automatic refresh in some predefined time interval(say every 10 seconds).
I am using PrimeFaces 3.5 as a powerful component suite. Below is the managed bean-
#ManagedBean
#ViewScoped
public Monitor implements Serializable {
//max,min,avg,stdDev,reason are caluclated based on some dynamic data
private int max;
private int min;
private double avg;
private double stdDev;
private String reason;
public int getMax() {
//Here before returning I am calling some methods to get the max from dynamic data
return max;
}
public int getMin() {
//Here before returning I am calling some methods to get the min from dynamic data
return min;
}
public double getAvg() {
//Here before returning I am calling some methods to get the avg from dynamic data
return avg;
}
public String getReason() {
//Here before returning I am calling some methods to get the reason from dynamic data
return reason;
}
public double getStdDev() {
//Here before returning I am calling some methods to get the stdDev from dynamic data
return stdDev;
}
public void setMax(int max) {
this.max = max;
}
public void setMin(int min) {
this.min = min;
}
public void setAvg(double avg) {
this.avg = avg;
}
public void setStdDev(double stdDev) {
this.stdDev = stdDev;
}
public void setReason(String reason) {
this.reason = reason;
}
}
I haven't finalize the layout till now however i would be like this-
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Insert title here</title>
</h:head>
<h:body>
<p:panel>
<h:outputLabel value="#{monitor.min}" />
<h:outputLabel value="#{monitor.max}" />
<h:outputLabel value="#{monitor.avg}" />
<h:outputLabel value="#{monitor.stdDev}" />
<h:outputLabel value="#{monitor.reason}" />
</p:panel>
</h:body>
</html>
How can I update the page regularly in JSF 2.0?
You can use Poll to auto refresh your page, Poll can start stop via javascript:
for example, poll will stop when count(bean variable) >=10:
You can use stop like #Ravi post, my example demo you can start stop(via: pol.stop() and pol.start()).
Facelets:
<h:form id="form">
<p:panel id="pntest">
// content here
</p:panel>
<h:outputText id="txt_count" value="#{tabview.count}" />
<p:poll interval="1" listener="#{tabview.increment}" update="txt_count" widgetVar="pol" oncomplete="test(xhr, status, args);"/>
<script type="text/javascript">
//<![CDATA[
function test(xhr, status, args){
if(args.sotest >= 10){
pol.stop();
}else{
location.reload(); // refresh page
}
}
//]]>
</script>
</h:form>
Bean:
private int count = 0;
public void increment() {
count++;
RequestContext reqCtx = RequestContext.getCurrentInstance();
reqCtx.addCallbackParam("sotest", count);
//1. update by using PrimeFaces specific API, use [RequestContext#update()][3].
RequestContext.getCurrentInstance().update("form:pntest");
//2. update by using standard JSF API, add the client ID to [PartialViewContext#getRenderIds()][4].
FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds().add("form:pntest");
}
public int getCount() {
return this.count;
}
public void setCount(int count) {
this.count = count;
}
i have a datatable with one row , i need to edit the fields of this row so i have a few inputText with the values, but when i edit them and click on the commandbutton(that calls the method "actualizarUsuario" the values are passed as null.
this is my bean code:
#ManagedBean(name = "user")
#ViewScoped
public class userDetalles implements Serializable {
private Usuario u;
private usuarioController controlador;
Rol rol;
private long selection;
private long selectionrol;
Agrupacion agrupacion;
private Privilegio privilegio;
private RolController controladorRol;
private ControladorAgrupaciones controladorAgrup;
private String nombres;
private String apellidoP;
private String apellidoM;
private Boolean check;
#PostConstruct
public void init() {
rol= new Rol() ;
u=new Usuario();
agrupacion=new Agrupacion();
privilegio=new Privilegio();
controlador= new usuarioController();
controladorRol=new RolController();
controladorAgrup=new ControladorAgrupaciones();
Usuario u=new Usuario();
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
//Obtener parametros del request
Map<String, String> parameterMap = (Map<String, String>) externalContext.getRequestParameterMap();
long iduser = Long.valueOf(parameterMap.get("id_usuario"));
this.u=controlador.getUser(iduser);
}
public Usuario getU() {
return u;
}
public void setU(Usuario u) {
this.u = u;
}
public long getSelection() {
System.out.println("selection value----------->"+selection);
return selection;
}
public void setSelection(long selection) {
this.selection = selection;
}
public long getSelectionrol() {
return selectionrol;
}
public void setSelectionrol(long selectionrol) {
this.selectionrol = selectionrol;
}
public String getNombres() {
return nombres;
}
public void setNombres(String nombres) {
this.nombres = nombres;
}
public String getApellidoP() {
return apellidoP;
}
public void setApellidoP(String apellidoP) {
this.apellidoP = apellidoP;
}
public String getApellidoM() {
return apellidoM;
}
public void setApellidoM(String apellidoM) {
this.apellidoM = apellidoM;
}
public Boolean getCheck() {
return check;
}
public void setCheck(Boolean check) {
this.check = check;
}
public void actualizarUsuario(){
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
Map<String, String> parameterMap = (Map<String, String>) externalContext.getRequestParameterMap();
nombres=parameterMap.get("nombres");
apellidoP=parameterMap.get("apellidoP");
apellidoM=parameterMap.get("apellidoM");
check=Boolean.parseBoolean(parameterMap.get("check"));
//test
System.out.println(nombres+" "+apellidoP+" "+apellidoM+" "+check);
u.setNombres(nombres);
u.setApellidoPaterno(apellidoP);
u.setApellidoMaterno(apellidoM);
u.setActive(check);
controlador.saveUsuario(u);
}
}
and this is my view:
<?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">
<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">
<div class="container">
<h:panelGroup id="Users">
<h:form id="Form">
<h2>Detalles Usuario</h2>
<h:dataTable id="users" value="#{user.u}" styleClass="table table-striped table-bordered" headerClass="sorting_asc"
rowClasses="odd,even">
<h:column>
<f:facet name="header">#</f:facet>
#{user.u.id}
</h:column>
<h:column>
<f:facet name="header">Identificador</f:facet>
<h:inputText id="identificador" value="#{user.u.identificador}" />
</h:column>
<h:column>
<f:facet name="header">Nombre</f:facet>
<h:inputText id="nombres" value="#{user.u.nombres}"/>
<h:inputText id="apellidoP" value="#{user.u.apellidoPaterno}"/>
<h:inputText id="apellidoM" value="#{user.u.apellidoMaterno}"/>
</h:column>
<h:column>
<f:facet name="header">Active</f:facet>
<h:selectBooleanCheckbox id="check" value="#{user.u.active}"></h:selectBooleanCheckbox>
</h:column>
</h:dataTable>
<h:commandButton value="Actualizar" type="submit" styleClass="btn-primary" actionListener="#{user.actualizarUsuario}">
</h:commandButton>
</h:form>
<script type="text/javascript" src="js/paging-bootstrap.js"></script>
<script type="text/javascript" src="js/contenidoc.datatable.init.js"></script>
</h:panelGroup>
</div>
</ui:composition>
Your concrete problem is caused because you used the wrong parameter names. Look in the generated HTML output and the HTTP traffic monitor for the right parameter names.
However, your actual problem is bigger: your view/model approach is completely wrong. You shouldn't be using a <h:dataTable> at all. It is intented for a collection of entities like List<User>, not for a single entity like User. You should be using <h:panelGrid>. You don't need to explode/flatten model properties in controller at all. You have those properties already in the model itself. You don't need to manually traverse the request parameter map. JSF will already do all the job for you.
I won't rewrite this mess for you, but to the point you should follow the following kickoff example:
Model:
public class User {
private Long id;
private String username;
private String firstname;
private String lastname;
// ...
// Autogenerate standard getters/setters.
}
Controller:
#ManagedBean
#ViewScoped
public class EditUser {
private User user; // Initialize it in postconstruct or as viewparam.
private UserService service; // Initialize it as #EJB or in postconstruct.
public void save() {
service.save(user); // That's all. Really.
}
public User getUser() {
return user;
}
// No other getters/setters! They are all already in User class.
}
View:
<h:panelGrid>
<h:inputText value="#{editUser.user.username}" />
<h:inputText value="#{editUser.user.firstname}" />
<h:inputText value="#{editUser.user.lastname}" />
<h:commandButton value="save" action="#{editUser.save}" />
</h:panelGrid>
That's all. See also among others this JSF 2.0 tutorial. As to your attempt to get the user by ID, you should rather use <f:viewParam>, see also What can <f:metadata>, <f:viewParam> and <f:viewAction> be used for? and communication in JSF 2.0.
I use this questions to create a composite component with the behaviour of a time selector.
This is my composite xhtml
<ui:composition xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:rich="http://richfaces.org/rich">
<cc:interface componentType="customTimeBean">
<cc:attribute name="date" type="java.util.Date" required="true" />
</cc:interface>
<cc:implementation>
<rich:inputNumberSpinner value="#{cc.hours}" minValue="0"
maxValue="23" />
<h:outputLabel value=":" />
<rich:inputNumberSpinner value="#{cc.minutes}" minValue="0"
maxValue="59" />
</cc:implementation>
</ui:composition>
This is my Faces Component
#FacesComponent(value = "customTimeBean")
public class CustomTimeBean extends UINamingContainer {
private Date getDate() {
Date d = (Date) getAttributes().get("date");
if (d == null) {
//throw new RuntimeException("Date no debe ser nulo");
d = new date();
}
return d;
}
public void setMinutes(int value) {
getDate().setMinutes(value);
}
public void setHours(int value) {
getDate().setHours(value);
}
public int getMinutes() {
return getDate().getMinutes();
}
public int getHours() {
return getDate().getHours();
}
public void setSeconds(int value) {
getDate().setHours(value);
}
public int getSeconds() {
return getDate().getSeconds();
}
}
And the usage
<sigh:time date="#{bean.date}" hasSeconds="false"/>
My test case:
<h:outputLabel value="#{controller.date}" id="date" />
<sigh:time date="#{controller.date}" />
<a4j:commandButton render="date" />
The "controller":
#ManagedBean
public class Controller {
Date date;
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
}
This works well, but, this doesn't work when I pass a null Date as attribute, how can I update the value in the Bean (controller.date)?
In my test case, when I press the a4j:commandButton and date in the controller is null, the outputlabel dont show nothing (date is null), when the date is not null, the date is update everytime I click the Button.
Sorry for my bad english.
Thanks!
Just replace
throw new RuntimeException("Date no debe ser nulo");
by
d = new Date();
Unrelated to the concrete problem, the Date methods which you're using there are deprecated. See also the javadoc. The main reason is that it doesn't deal with timezones/DST properly. You should internally in the composite be using java.util.Calendar instead.