I have an XHTML page which describes the following user composite component
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui_component="http://java.sun.com/jsf/composite/ui_component" >
<h:body>
<h:form id="mergeform">
<p:separator/>
<p:panelGrid styleClass="tableEdit" style="width: 100%">
<f:facet name="header">
<p:row>
<p:column colspan="2">
<h:outputLabel style="font-size: 20px;" value="1-ое застрахованное лицо" />
</p:column>
<p:column style="text-align: right; width: 20em;">
<p:commandButton style="font-size: 14px;" value="Общий поиск" immediate="true"
onclick="dialogPersonList.show();document.getElementById('mergeform:personNumber').value = '1';dlg22Search.show();"
action="#{mergeBean.updateListPerson}"
oncomplete="dlg22Search.hide();"
update=":mergeform:enpsearchtable mergeform:checkSearch"/>
</p:column>
</p:row>
</f:facet>
<p:row>
<p:column colspan="3">
<ui_component:personTable id="First" form="mergeform" id_link="Second" bean="#{mergeBean}" val="#{mergeBean.merge}" smoChanger="true" >
<f:validator validatorId="FIOValidator" for="FIOValid" />
</ui_component:personTable>
</p:column>
</p:row>
</p:panelGrid>
<p:panelGrid styleClass="tableEdit" style="width: 100%">
<f:facet name="header">
<p:row>
<p:column colspan="2">
<h:outputLabel style="font-size: 20px;" value="2-ое застрахованное лицо" />
</p:column>
<p:column style="text-align: right; width: 20em;">
<p:commandButton style="font-size: 14px;" value="Общий поиск" immediate="true"
onclick="dialogPersonList.show();document.getElementById('mergeform:personNumber').value = '2';dlg22Search.show();"
action="#{mergeBean.updateListPerson}"
oncomplete="dlg22Search.hide();"
update=":mergeform:enpsearchtable mergeform:checkSearch" />
</p:column>
</p:row>
</f:facet>
<p:row>
<p:column colspan="3">
<ui_component:personTable id="Second" bean="#{mergeBean}" val="#{mergeBean.merge.inputData}" smoChanger="true" >
<f:validator validatorId="FIOValidator" for="FIOValid" />
</ui_component:personTable>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</h:body>
</html>
Component itself is a panelGrid with multiple row. For example, I led the line where the problem occurs. Description validators I also lowered.
<?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:cc="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<cc:interface>
<cc:attribute name="id" />
<cc:attribute name="bean" />
<cc:attribute name="val" />
<cc:attribute name="id_link" />
<cc:attribute name="form" />
<cc:attribute name="readonly" default="false" />
<cc:attribute name="smoChanger" default="false" />
<cc:editableValueHolder name="FIOValid" targets="Secondname#{cc.attrs.id}" />
<cc:editableValueHolder name="DocValid" targets="DocNum#{cc.attrs.id}" />
<cc:editableValueHolder name="PolValid" targets="PolNum#{cc.attrs.id}" />
<cc:editableValueHolder name="PlaceBirthValid" targets="PlaceBirth#{cc.attrs.id}" />
<cc:editableValueHolder name="EnpValid" targets="Enp#{cc.attrs.id}" />
<cc:editableValueHolder name="OgrnValid" targets="Ogrn#{cc.attrs.id}" />
</cc:interface>
<cc:implementation>
<p:panelGrid id="#{cc.attrs.id}Person" style="font-size: 14px; width: 100%" styleClass="tableEdit" >
<p:row>
<p:column style="width: 180px">
<h:outputLabel for="Secondname#{cc.attrs.id}" value="Фамилия: " />
</p:column>
<p:column>
<p:inputText id="Secondname#{cc.attrs.id}" value="#{cc.attrs.val.secondname}"
readonly="#{cc.attrs.readonly}" >
<p:ajax event="blur" process="#this" update="Secondname#{cc.attrs.id} ErrorsSecondname#{cc.attrs.id}" />
<p:ajax event="blur" listener="#{cc.attrs.bean.changeField}"
update="Secondname#{cc.attrs.id} ErrorsSecondname#{cc.attrs.id}
:#{cc.attrs.form}:#{cc.attrs.id_link}:Secondname#{cc.attrs.id_link}
:#{cc.attrs.form}:#{cc.attrs.id_link}:ErrorsSecondname#{cc.attrs.id_link}"
disabled="#{empty cc.attrs.id_link}" />
</p:inputText>
</p:column>
<p:column>
<h:message showSummary="false" showDetail="true"
style="color: red; font-size: 15px;
text-decoration: underline;"
id="ErrorsSecondname#{cc.attrs.id}"
for="Secondname#{cc.attrs.id}"/>
</p:column>
</p:row>
</p:panelGrid>
</cc:implementation>
</html>
In the bean MergeBean, I describe the listener, which is just an error occurs.
#ManagedBean
#SessionScoped
public class MergeBean implements Serializable {
private Person selectedPerson;
public MergeBean() {
}
public Message getMerge() {
if (this.merge == null) {
this.merge = new Message();
this.merge.setInputData(new Message());
}
return this.merge;
}
public void setMerge(Message merge) {
this.merge = merge;
}
public void changeField(AjaxBehaviorEvent event) {
String id = event.getComponent().getId();
String valStr = ((HtmlInputText) event.getComponent()).getValue().toString();
if (valStr != null && !valStr.isEmpty()) {
String idChange = id.substring(0, id.length() - 5);
UIInput input = (UIInput) UtilsUIXhtml.findComponent(idChange + "Second");
//TODO
Object objTemp = input.getSubmittedValue();
//String tempStr = objTemp.toString();
String cngStr = input.getValue().toString();
if (cngStr == null || cngStr.isEmpty()) {
input.setValue(valStr);
}
}
}
}
I'm trying to bind to the first text input in the first custom component and the method to find the associated text input in the second custom component and check its value to empty and null. But when I insert a row in pery input, the second input into the debugger input.getValue (). ToString () is equal to the value that the user entered, and not the fact that it really is. Why is this happening and how can I get the real value programmatly in the listener?
PS And so I'm looking for the components in the DOM-tree:
public static UIComponent findComponent(final String id) {
FacesContext context = FacesContext.getCurrentInstance();
UIViewRoot root = context.getViewRoot();
final UIComponent[] found = new UIComponent[1];
root.visitTree(new FullVisitContext(context), new VisitCallback() {
#Override
public VisitResult visit(VisitContext context, UIComponent component) {
if (component.getId().equals(id)) {
found[0] = component;
return VisitResult.COMPLETE;
}
return VisitResult.ACCEPT;
}
});
return found[0];
}
Related
i'm trying to make a selection datatable inside a dialog. But that not worked. I spent hours searching for the solution and I did not found anywhere.
I just want to make a table that when the user select a row and click in the Selecionar button, the object project is sent to the main bean. But it does not call the set method. I've tryied many methods to solve this problem. None of them worked.
Here is my 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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:dialog widgetVar="selecionar_produto_WV" modal="true"
showEffect="clip">
<form id="form_selecionar_produto">
<p:dataTable var="produto" paginator="true" rows="5"
emptyMessage="Não existem produtos cadastrados!"
selectionMode="single" rowKey="#{produto.id}"
selection="#{selecionarProdutoMBean.produto}"
value="#{selecionarProdutoMBean.produtos}" id="table"
style="width:900px">
<p:column styleClass="l" headerText="Nome" sortBy="#{planta.nome}">
<p:outputLabel value="#{produto.nome}" />
</p:column>
<p:column styleClass="l" headerText="Descrição"
sortBy="#{produto.descricao}">
<p:outputLabel value="#{produto.descricao}" />
</p:column>
<p:column styleClass="l" headerText="Valor"
sortBy="#{produto.valor}">
<p:outputLabel value="R$#{produto.valor}" />
</p:column>
<p:column styleClass="l" headerText="Produtor"
sortBy="#{produto.produtor.nome}">
<p:outputLabel value="#{produto.produtor.nome}" />
</p:column>
<p:column styleClass="l" headerText="Entrada"
sortBy="#{produto.entrada}">
<p:outputLabel value="#{produto.entrada}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:outputLabel>
</p:column>
<f:facet name="footer">
<p:commandButton process="table" icon="ui-icon-circle-check"
value="Selecionar" oncomplete="PF('selecionar_produto_WV').hide();" />
</f:facet>
</p:dataTable>
</form>
</p:dialog>
</h:body>
</html>
And here is my bean:
#ManagedBean(name = "selecionarProdutoMBean")
#SessionScoped
public class SelecionarProdutoMBean {
private Produto produto;
private List<Produto> produtos;
#EJB
private IManterProdutoSBean<Produto> bean = new ManterProdutoSBean();
public SelecionarProdutoMBean() {
produtos = new ArrayList<>();
produto = new Produto();
}
public void onRowSelect(SelectEvent event) {
Produto p = (Produto) event.getObject();
System.out.println(p.getNome());
}
public List<Produto> getProdutos() {
produtos = bean.listar();
return produtos;
}
public void setProdutos(List<Produto> produtos) {
this.produtos = produtos;
}
public Produto getProduto() {
return produto;
}
public void atualizar() {
System.out.println("789123");
}
public void setProduto(Produto produto) {
this.produto = produto;
}
}
Here is the dialog that calls the dialog that has the table
<!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://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:dialog widgetVar="iu01_13_01" modal="true" showEffect="clip">
<p:ajax event="close" update="iu01_13_form"
listener="#{iu01_13MBean.limpar()}" />
<div id="template">
<h:form id="iu01_13_01_form">
<p:panelGrid columns="2">
<p:outputLabel value="Nome:" />
<p:inputText id="Nome" value="#{iu01_13MBean.venda.nome}" />
<p:outputLabel value="Data de venda:" />
<p:calendar id="Registro" value="#{iu01_13MBean.venda.data}" />
<p:outputLabel value="Valor:" />
<p:inputText id="Valor" value="#{iu01_13MBean.venda.valor}" />
<p:outputLabel value="Detalhes:" />
<p:inputText id="Detalhes" value="#{iu01_13MBean.venda.detalhes}" />
<p:outputLabel value="Produto:" />
<p:panelGrid columns="2">
<p:commandButton actionListener="#{iu01_08MBean.updateList()}"
value="Selecionar produto" onclick="PF('selecionar_produto_WV').show();" />
<p:inputText id="Produto" value="#{iu01_08MBean.produto.nome}" />
</p:panelGrid>
<p:commandButton value="FINALIZAR" action="#{iu01_13MBean.salvar}"
update="iu01_13_01_form, iu01_13_form"
onclick="PF('iu01_13_01').close();" />
<p:outputLabel />
</p:panelGrid>
</h:form>
</div>
</p:dialog>
<ui:include src="selecionar_produto.xhtml" />
</h:body>
</html>
try this:
your xhtml should be like this:
<!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://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form id="form_selecionar_produto">
<p:dialog widgetVar="selecionar_produto_WV" modal="true"
showEffect="clip">
<p:dataTable var="produto" paginator="true" rows="5"
emptyMessage="Não existem produtos cadastrados!"
selectionMode="single" rowKey="#{produto.id}"
selection="#{selecionarProdutoMBean.produto}"
value="#{selecionarProdutoMBean.produtos}" id="table"
style="width:900px">
<p:column styleClass="l" headerText="Nome" sortBy="#{planta.nome}">
<p:outputLabel value="#{produto.nome}" />
</p:column>
<p:column styleClass="l" headerText="Descrição"
sortBy="#{produto.descricao}">
<p:outputLabel value="#{produto.descricao}" />
</p:column>
<p:column styleClass="l" headerText="Valor"
sortBy="#{produto.valor}">
<p:outputLabel value="R$#{produto.valor}" />
</p:column>
<p:column styleClass="l" headerText="Produtor"
sortBy="#{produto.produtor.nome}">
<p:outputLabel value="#{produto.produtor.nome}" />
</p:column>
<p:column styleClass="l" headerText="Entrada"
sortBy="#{produto.entrada}">
<p:outputLabel value="#{produto.entrada}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:outputLabel>
</p:column>
<f:facet name="footer">
<p:commandButton process="table" icon="ui-icon-circle-check"
value="Selecionar" oncomplete="PF('selecionar_produto_WV').hide();" />
</f:facet>
</p:dataTable>
</p:dialog>
</h:form>
</h:body>
</html>
the dialog that calls the dialog that has the table should be like this:
<!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://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form id="iu01_13_01_form">
<p:dialog widgetVar="iu01_13_01" modal="true" showEffect="clip">
<p:ajax event="close" update="iu01_13_form"
listener="#{iu01_13MBean.limpar}" />
<p:panelGrid columns="2">
<p:outputLabel value="Nome:" />
<p:inputText id="Nome" value="#{iu01_13MBean.venda.nome}" />
<p:outputLabel value="Data de venda:" />
<p:calendar id="Registro" value="#{iu01_13MBean.venda.data}" />
<p:outputLabel value="Valor:" />
<p:inputText id="Valor" value="#{iu01_13MBean.venda.valor}" />
<p:outputLabel value="Detalhes:" />
<p:inputText id="Detalhes" value="#{iu01_13MBean.venda.detalhes}" />
<p:outputLabel value="Produto:" />
<p:panelGrid columns="2">
<p:commandButton actionListener="#{iu01_08MBean.updateList}"
value="Selecionar produto" onclick="PF('selecionar_produto_WV').show();" />
<p:inputText id="Produto" value="#{iu01_08MBean.produto.nome}" />
</p:panelGrid>
<p:commandButton value="FINALIZAR" actionListener="#{iu01_13MBean.salvar}"
update="iu01_13_01_form, iu01_13_form"
onclick="PF('iu01_13_01').close();" />
<p:outputLabel />
</p:panelGrid>
</p:dialog>
<ui:include src="selecionar_produto.xhtml" />
</h:form>
</h:body>
</html>
I'm trying to open a dialog from the backing bean, but I got this: Uncaught TypeError: Can not read property 'show' of undefined
this is my code to call the dialog from the bean:
RequestContext.getCurrentInstance().update("someForm:confirmDialog");
context.execute("PF('confirmDialog').show()");
This is part if my backing bean:
#SuppressWarnings("serial")
#ManagedBean
#ViewScoped
public class SomeBean implements Serializable{
private String something = "";
private ObjectCast newDefault = null;
private List<SomeObject> list = null;
public void onEdit(RowEditEvent event) {
newDefault = (ObjectCast)event.getObject();
if( newDefault.getDefault().equals("X") ){
RequestContext context = RequestContext.getCurrentInstance();
RequestContext.getCurrentInstance().update("someForm:confirmDialog");
context.execute("PF('confirmDialog').show()");
}
public void updateNewDefault(){
... do something...
}
.... getters and setters ...
}
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:p="http://primefaces.org/ui"
template="/commonTemplate.xhtml">
<ui:define name="content">
<h:form id="someForm">
<p:growl id="msg" showDetail="true" life="3000" autoUpdate="true"/>
<p:panelGrid width="100%">
<p:row>
<p:column colspan="4">
<p:dataTable id="search" var="result" value="#{someBean.list}" editable="true">
<!-- ajax -->
<p:ajax event="rowEdit" listener="#{someBean.onEdit}" update=":someForm:msg" />
<p:ajax event="rowEditCancel" listener="#{someBean.onCancel}" update=":someForm:msg" />
<p:column headerText="title" sortBy="#{result.somePropertie}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{result.somePropertie}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{result.somePropertie}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Edit" style="width:50px;" >
<p:rowEditor />
</p:column>
</p:dataTable>
</p:column>
</p:row>
<p:row>
<p:column colspan="4"> </p:column>
</p:row>
<p:confirmDialog id="confirmDialog"
widgetVar="confirmDialog"
message="Message ......................"
header="Warning"
severity="alert"
closeOnEscape="true"
width="600"
showEffect="slide"
hideEffect="fold"
closable="true">
<p:commandButton id="btnYes"
value="Yes"
process="#this"
oncomplete="PF('confirmDialog').hide()"
actionListener="#{someBean.updateNewDefault}"
/>
<p:commandButton id="btnNo"
value="No"
onclick="PF('confirmDialog').hide()"
type="button" />
</p:confirmDialog>
</p:panelGrid>
</h:form>
</ui:define>
</ui:composition>
I have a barChart where I use extend to modify datapoint, when I put that and the following js code, my dialog stops working ... why ??
<!DOCTYPE html>
<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"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:head>
<title>Chart</title>
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/default.css"/>
<script type="text/javascript">
function chartExtender() {
this.cfg.seriesDefaults = {
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
};
this.cfg.highlighter = { show: false };
}
</script>
</h:head>
<h:body style="background-color: #E1E1E1;">
<p:panelGrid columns="1" columnClasses="left" style="width:100%">
<p:barChart id="basic" value="#{someBean.categoryModel}" legendPosition="ne"
title="some Title" min="0" max="#{someBean.max}" style="height:400px"
shadow="true" barPadding="60" animate="true" extender="chartExtender"
/>
</p:panelGrid>
</h:body>
</html>
Thanks!!
When I click on the button New <p:commandButton actionListener="#{ecritureCtrl.newLine}" value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()" ajax="true"/>, a new row is added to my dataTable on only the first click and the page is refreshed. Several cliques except the first were not refreshes the dataTable. So to see my newly added rows, I use the F5 key to refresh my page. Certainly my update="dataTableSaisiePiece" not work or only works rather the first click.
Here is my page home.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: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">
<script type="text/javascript">
function addRowOnComplete() {
jQuery('#supercoolnewrow').trigger('click');
}
</script>
<ui:composition template="/resources/template/all.xhtml">
<ui:define name="titre">Saisie</ui:define>
<ui:define name="content">
<p:tabView id="ViewPlan">
<p:tab id="tab2" title="Saisie 1">
<h:outputScript library="js" name="frenchLocale.js" />
<h:form id="formPiece">
<p:panel id="panelSaisie" header="Saisir" style="color: brown;font-size: 15px">
<h:panelGrid columns="3" >
<p:outputLabel for="description" value="Description:" ></p:outputLabel>
<p:inputText id="description" value="#{ecritureCtrl.description}" required="true" label="Description" maxlength="100" size="75">
<f:validateLength maximum="100" />
</p:inputText>
<p:message for="description" />
<p:outputLabel for="date" value="Date:" ></p:outputLabel>
<p:calendar locale="fr" id="date" required="true" label="Date" value="#{ecritureCtrl.date}" />
<p:message for="date" />
<p:outputLabel for="code" value="Code Avant" ></p:outputLabel>
<p:inputText id="code" value="#{ecritureCtrl.code}" required="true" >
</p:inputText>
<p:message for="code" />
</h:panelGrid>
<br/>
<p:dataTable var="line" value="#{ecritureCtrl.lignes}" id="dataTableSaisiePiece" >
<p:column headerText="First Name" style="width:150px">
<p:inputText value="#{line.intituleCompte}" style="width:100%"/>
</p:column>
<p:column headerText="Last Name" style="width:150px">
<p:inputText value="#{line.code}" style="width:100%"/>
</p:column>
</p:dataTable>
</p:panel>
<p:commandButton actionListener="#{ecritureCtrl.newLine}" value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()" ajax="true"/>
</h:form>
</p:tab>
<p:tab id="tab3" title="Saisie 2">
</p:tab>
</p:tabView>
</ui:define>
</ui:composition>
</html>
My ManagedBean:
#ManagedBean (name = "ecritureCtrl")
#SessionScoped
public class EcritureCtrl {
private List<Avant> lignes = new ArrayList<Avant>();
Avant unUser;
private String description;
private Date date;
private String code;
public EcritureCtrl() {
lignes.add(new Avant());
}
public void newLine(ActionEvent actionEvent){
lignes.add(new Avant());
}
}
Could you please help me ?
Thanks in advance.
this seems to work for me
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;
#ManagedBean
#SessionScoped
public class EcritureCtrl implements Serializable {
private static final long serialVersionUID = 1L;
private String code;
private Date date;
private String description;
private List<Avant> lignes = new ArrayList<Avant>();
private Avant unUser;
public String getCode() {
return this.code;
}
public Date getDate() {
return this.date;
}
public String getDescription() {
return this.description;
}
public List<Avant> getLignes() {
return this.lignes;
}
public Avant getUnUser() {
return this.unUser;
}
#PostConstruct
private void init(){
this.lignes.add(new Avant());
}
public void newLine(ActionEvent actionEvent) {
this.lignes.add(new Avant());
}
public void setCode(String code) {
this.code = code;
}
public void setDate(Date date) {
this.date = date;
}
public void setDescription(String description) {
this.description = description;
}
public void setLignes(List<Avant> lignes) {
this.lignes = lignes;
}
public void setUnUser(Avant unUser) {
this.unUser = unUser;
}
}
and
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sorry</title>
</h:head>
<h:body>
<script type="text/javascript">
function addRowOnComplete() {
alert();
}
</script>
<h:form id="formPiece">
<p:messages id="messages" showDetail="true" autoUpdate="true"
closable="true" />
<p:tabView id="ViewPlan">
<p:tab id="tab2" title="Saisie 1">
<p:panel id="panelSaisie" header="Saisir"
style="color: brown;font-size: 15px">
<h:panelGrid columns="3">
<p:outputLabel for="description" value="Description:"></p:outputLabel>
<p:inputText id="description" value="#{ecritureCtrl.description}"
required="true" label="Description" maxlength="100" size="75">
<f:validateLength maximum="100" />
</p:inputText>
<p:message for="description" />
<p:outputLabel for="date" value="Date:"></p:outputLabel>
<p:calendar locale="fr" id="date" required="true" label="Date"
value="#{ecritureCtrl.date}" />
<p:message for="date" />
<p:outputLabel for="code" value="Code Avant"></p:outputLabel>
<p:inputText id="code" value="#{ecritureCtrl.code}"
required="true">
</p:inputText>
<p:message for="code" />
</h:panelGrid>
<br />
<p:dataTable var="line" value="#{ecritureCtrl.lignes}"
id="dataTableSaisiePiece">
<p:column headerText="First Name" style="width:150px">
<p:inputText value="#{line.intituleCompte}" style="width:100%" />
</p:column>
<p:column headerText="Last Name" style="width:150px">
<p:inputText value="#{line.code}" style="width:100%" />
</p:column>
</p:dataTable>
</p:panel>
<p:commandButton actionListener="#{ecritureCtrl.newLine}"
value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()"
ajax="true" />
</p:tab>
<p:tab id="tab3" title="Saisie 2">
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
I have trouble displaying my property details on the dialog, after generating the table. Results are shown, but the selected row is not shown on dialog. I have taken over the example from primefaces show case.
<!DOCTYPE html>
<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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>TODO supply a title</title>
<h:outputStylesheet library="css" name="styles.css" />
</h:head>
<h:body>
Dear customer!
<li>#{userDataManager.displayHotelTypeChoice(userDataManager.hotelChoice)}
</li>
<li>#{userDataManager.displayPaxChoice(userDataManager.pax)}
</li>
<li>You have chosen to check in : #{userDataManager.displayCheckinDate(userDataManager.checkinDate)}
</li>
<li>You have chosen to check out : #{userDataManager.displayCheckoutDate(userDataManager.checkoutDate)}
</li>
<li>Total Days of Stay : #{userDataManager.countNightsBetween(userDataManager.checkinDate,userDataManager.checkoutDate)}
</li>
<li>Total Nights of Stay : #{userDataManager.nights}
</li>
<br>
</br>
<h:form id="form">
<p:dataTable id="hotels" var="room" value="#{propertyDataTable.searchByHotelType
(userDataManager.hotelChoice, userDataManager.pax)}"
rowKey="#{room.propertyID}"
selection="#{propertyDataTable.selectedProperty}"
selectionMode="single"
resizableColumns="true">
<f:facet name="header">
#{userDataManager.displayHotelTypeChoice(userDataManager.hotelChoice)}<br></br>
Please select only one choice
</f:facet>
<p:column headerText="Property ID" >
#{room.propertyID}
</p:column>
<p:column headerText="Accommodation" >
#{room.accommodation}
</p:column>
<p:column headerText="Pax" >
#{room.pax}
</p:column>
<p:column headerText="Stars" >
#{room.stars}
</p:column>
<p:column headerText="Type" >
#{room.type}
</p:column>
<f:facet name="footer">
In total there are #{propertyDataTable.listSize(propertyDataTable.
searchByHotelType(userDataManager.hotelChoice,
userDataManager.pax))} hotels.
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:display" oncomplete="hotelDialog.show()">
</p:commandButton>
</f:facet>
</p:dataTable>
<p:dialog id="dialog" header="Hotel Detail" widgetVar="hotelDialog" resizable="false"
width="200" showEffect="clip" hideEffect="fold">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header">
<!--<p:graphicImage value="/resources/images/#{propertyDataTable.selectedProperty.type}.jpg"/>-->
<p:graphicImage value="/resources/images/Grand.jpg"/>
</f:facet>
<h:outputText value="Accommodation:" />
<h:outputText value="#{propertyDataTable.selectedProperty.accommodation }" />
<h:outputText value="Feature:" />
<h:outputText value="#{propertyDataTable.selectedProperty.feature}" />
<h:outputText value="Stars:" />
<h:outputText value="#{propertyDataTable.selectedProperty.stars}" />
</h:panelGrid>
</p:dialog>
</h:form>
<br></br>
<br></br>
<h:commandButton value="Book"
action="#{navigationController.showPage()}" >
<f:param name="page" value="book" />
</h:commandButton>
<br></br>
<h:commandButton value="HOME"
action="#{navigationController.showPage()}" >
<f:param name="page" value="home" />
</h:commandButton>
</h:body>
</html>
package dataTable;
import irms.entity.accommodation.Property;
import irms.entity.accommodation.Room;
import irms.session.accommodation.PropertySession;
import irms.session.accommodation.ReservationSession;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
/**
*
* #author Lawrence
*/
#ManagedBean(name = "propertyDataTable")
#ViewScoped
public class PropertyDataTable implements Serializable{
#EJB
private ReservationSession reservationSession;
#EJB
private PropertySession propertySession;
private List<Property> propertyList;
private int choice;
private Property selectedProperty;
private List<Room> list = new ArrayList();
public PropertyDataTable() {
}
public List<Property> getAllRooms() {
return reservationSession.getAllRooms();
}
public List<Property> searchByHotelType(String hotelType, Integer pax) {
this.propertyList = propertySession.searchByHotelType(hotelType, pax);
return propertyList;
}
public int listSize(List<Property> list){
return list.size();
}
public Room getRoom(String propertyID, Integer roomID) {
return propertySession.findRoom(propertyID, roomID);
}
public List<Room> getRoomList(String propertyID){
return propertySession.getRoomList(propertyID);
}
public ReservationSession getReservationSession() {
return reservationSession;
}
public void setReservationSession(ReservationSession reservationSession) {
this.reservationSession = reservationSession;
}
public PropertySession getPropertySession() {
return propertySession;
}
public void setPropertySession(PropertySession propertySession) {
this.propertySession = propertySession;
}
public List<Property> getPropertyList() {
return propertyList;
}
public void setPropertyList(List<Property> propertyList) {
this.propertyList = propertyList;
}
public int getChoice() {
return choice;
}
public void setChoice(int choice) {
this.choice = choice;
}
public Property getSelectedProperty() {
return selectedProperty;
}
public void setSelectedProperty(Property selectedProperty) {
this.selectedProperty = selectedProperty;
}
public List<Room> getList() {
return list;
}
public void setList(List<Room> list) {
this.list = list;
}
}
You Must add ActionListener in your viewButton commandButton
change your xhtml page like this:
<!DOCTYPE html>
<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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>TODO supply a title</title>
<h:outputStylesheet library="css" name="styles.css" />
</h:head>
<h:body>
Dear customer!
<li>#{userDataManager.displayHotelTypeChoice(userDataManager.hotelChoice)}
</li>
<li>#{userDataManager.displayPaxChoice(userDataManager.pax)}
</li>
<li>You have chosen to check in : #{userDataManager.displayCheckinDate(userDataManager.checkinDate)}
</li>
<li>You have chosen to check out : #{userDataManager.displayCheckoutDate(userDataManager.checkoutDate)}
</li>
<li>Total Days of Stay : #{userDataManager.countNightsBetween(userDataManager.checkinDate,userDataManager.checkoutDate)}
</li>
<li>Total Nights of Stay : #{userDataManager.nights}
</li>
<br>
</br>
<h:form id="form">
<p:dataTable id="hotels" var="room" value="#{propertyDataTable.searchByHotelType
(userDataManager.hotelChoice, userDataManager.pax)}"
rowKey="#{room.propertyID}"
resizableColumns="true">
<f:facet name="header">
#{userDataManager.displayHotelTypeChoice(userDataManager.hotelChoice)}<br></br>
Please select only one choice
</f:facet>
<p:column headerText="Property ID" >
#{room.propertyID}
</p:column>
<p:column headerText="Accommodation" >
#{room.accommodation}
</p:column>
<p:column headerText="Pax" >
#{room.pax}
</p:column>
<p:column headerText="Stars" >
#{room.stars}
</p:column>
<p:column headerText="Type" >
#{room.type}
</p:column>
<f:facet name="footer">
In total there are #{propertyDataTable.listSize(propertyDataTable.
searchByHotelType(userDataManager.hotelChoice,
userDataManager.pax))} hotels.
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:display" oncomplete="hotelDialog.show()">
<f:setPropertyActionListener value="#{room}" target="#{propertyDataTable.selectedProperty}" />
</p:commandButton>
</f:facet>
</p:dataTable>
<p:dialog id="dialog" header="Hotel Detail" widgetVar="hotelDialog" resizable="false"
width="200" showEffect="clip" hideEffect="fold">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header">
<!--<p:graphicImage value="/resources/images/#{propertyDataTable.selectedProperty.type}.jpg"/>-->
<p:graphicImage value="/resources/images/Grand.jpg"/>
</f:facet>
<h:outputText value="Accommodation:" />
<h:outputText value="#{propertyDataTable.selectedProperty.accommodation }" />
<h:outputText value="Feature:" />
<h:outputText value="#{propertyDataTable.selectedProperty.feature}" />
<h:outputText value="Stars:" />
<h:outputText value="#{propertyDataTable.selectedProperty.stars}" />
</h:panelGrid>
</p:dialog>
</h:form>
<br></br>
<br></br>
<h:commandButton value="Book"
action="#{navigationController.showPage()}" >
<f:param name="page" value="book" />
</h:commandButton>
<br></br>
<h:commandButton value="HOME"
action="#{navigationController.showPage()}" >
<f:param name="page" value="home" />
</h:commandButton>
</h:body>
</html>
I'm having a problem when I include dynamically a page with <ui:include>, the action and actionlistener associated with the <p:commandButton> component is not being invoked.
I've tried to remove the tag <h:form> from the included page but the problem persists.What can I do to solve this problem?
The source code:
hello.xhtm (Main Page)
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view>
<h:head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<f:view contentType="text/html" />
</h:head>
<h:body>
<h:form id="helloForm">
<p:growl id="messages" />
<p:panelGrid id="panelGridPrincipal" styleClass="panelGridPrincipal">
<p:row>
<p:column colspan="2">
<div style="width: 100%; height: 25px; padding-left: 230px;">
<p:commandButton id="botao1" value="Bookmark" styleClass="button"/>
<p:commandButton id="botao2" value="Bookmark2" styleClass="button"
actionListener="#{mainBean.renderMenuVendas}" update="panel" >
<f:setPropertyActionListener value="2" target="#{mainBean.menuType}" />
</p:commandButton>
</div>
</p:column>
</p:row>
<p:row>
<p:column id="column2" style="width:200px;background-color: #5A5858;">
<h:panelGrid id="panel" styleClass="panelGridMenu" columns="1">
<p:menu id="dynamicMenu" model="#{mainBean.sideMenu}" rendered="#{mainBean.showMenuVendas}" style="width:189px;margin-right:100%;"/>
<p:spacer width="50px" height="700px" />
</h:panelGrid>
</p:column>
<p:column style="background-color: white">
<p:panelGrid style="border:1px;">
<p:row>
<p:column>
<p:outputPanel id="outputPanelConteudo">
<ui:include src="#{mainBean.paginaAtual}" />
</p:outputPanel>
</p:column>
</p:row>
<p:row/>
</p:panelGrid>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
pagina1.xhtml (Included Page)
<?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: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">
<p:dataTable id="avioes" var="aviao" value="#{listaAvioesBean.aviao}"
rowKey="#{aviao.numeroSerie}"
selection="#{listaAvioesBean.selectedAviao}" selectionMode="single"
style="width:500px">
<p:column style="width:75px">
<f:facet name="header">
<h:outputText value="Numero de Serie" />
</f:facet>
<h:outputText value="#{aviao.numeroSerie}" />
</p:column>
<p:column style="width:100px">
<f:facet name="header">
<h:outputText value="Marca" />
</f:facet>
<h:outputText value="#{aviao.marca}" />
</p:column>
<p:column style="width:75px">
<f:facet name="header">
<h:outputText value="Modelo" />
</f:facet>
<h:outputText value="#{aviao.modelo}" />
</p:column>
<p:column style="width:75px">
<p:commandButton id="insertAviao" value="Inserir" title="Visualizar">
<f:setPropertyActionListener value="#{aviao}"
target="#{listaAvioesBean.selectedAviao}" />
</p:commandButton>
<!--THESE ACTION DOESN'T CALL THE BEAN METHOD!!! -->
<p:commandButton id="removerAviao" style="width:50px" value="P"
title="Deletar" action="#{listaAvioesBean.removerAviao}"
update=":helloForm:outputPanelConteudo">
<f:setPropertyActionListener value="#{aviao}"
target="#{listaAvioesBean.selectedAviao}" />
</p:commandButton>
</p:column>
</p:dataTable>
</ui:composition>
Managed bean (ListaAvioesBean.java)
package br.com.erp.beans;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
import br.com.erp.object.Aviao;
#ManagedBean(name="listaAvioesBean")
#ViewScoped
public class ListaAvioesBean implements Serializable{
/**
*
*/
private static final long serialVersionUID = 8076960891132613195L;
private Aviao selectedAviao;
private List<Aviao> aviao;
public ListaAvioesBean(){
aviao = new ArrayList<Aviao>();
System.out.println("ListaAvioesBean Criado!");
}
#PostConstruct
public void init(){
System.out.println("Iniciando o bean!");
populateListAvioes();
}
public void executa(){
System.out.println("Executou");
}
private void populateListAvioes(){
Aviao av1 = new Aviao();
av1.setMarca("Marca1");
av1.setModelo("M1");
av1.setNumeroSerie("1234");
aviao.add(av1);
av1 = new Aviao();
av1.setMarca("Marca2");
av1.setModelo("M2");
av1.setNumeroSerie("1111");
aviao.add(av1);
av1 = new Aviao();
av1.setMarca("Marca3");
av1.setModelo("M3");
av1.setNumeroSerie("4321");
aviao.add(av1);
}
public Aviao getSelectedAviao() {
return selectedAviao;
}
public void setSelectedAviao(Aviao selectedAviao) {
this.selectedAviao = selectedAviao;
}
public List<Aviao> getAviao() {
return aviao;
}
public void setAviao(List<Aviao> aviao) {
this.aviao = aviao;
}
public void removerAviao(){
boolean removeu = aviao.remove(selectedAviao);
if(removeu)
System.out.println("Avião removido com sucesso");
}
public void executa(ActionEvent e){
System.out.println();
}
}