Boa tarde Pessoal,
Tenho uma página que carrega um datatable e gostaria de ao clicar na linha abrir um modalpanel com os valores da linha pra edição, já tentei algumas coisas mas sem sucesso, alguém sabe como posso afazer isso???
Sou novo com jsf e estou com dificuldades, quem poder me ajudar, agradeço desde já.
segue código de apóio.
sexoList.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<head>
<script language="javascript">
function OpenModal(name){
Richfaces.showModalPanel(name,'{width:450, top:200}');
}
function LimpaCampo(){
window.document.getElementById('sexoModalForm:idSexo').value = '';
window.document.getElementById('sexoModalForm:descricao').value = '';
}
</script>
<link rel="stylesheet" type="text/css" href="css/css-Content.css"/>
<style>
.col {
width:100px;
}
</style>
<title>::: SGE - Sistema Gerenciador de Eventos :::</title>
</head>
<f:view>
<f:loadBundle basename="br.com.edcel.model.messages" var="msg"/>
<body>
<a4j:form id="formList">
<!--INFORMAÇÃO DO TOPO-->
<div id="top-information">
<div id="logo">
<a href="#"><h:outputLabel value="#{msg.titlePage}"/></a></div>
<div id="top-information-home">
<a href="Login.html"><h:outputLabel value="#{msg.home}"/></a></div>
<div id="top-information-phone">
<h:outputLabel value="#{msg.phone}"/></div>
</div>
<!--NAVEGAÇÃO DO TOPO-->
<div class="none"><a href="#maincontent"></a></div>
<div id="nav-main">
<h:commandLink action="menuOperacao.xhtml"><h:outputLabel rendered="true" value="#{msg.operations}"/></h:commandLink><rich:spacer/>
<h:commandLink action="menuFinanceiro.xhtml"><h:outputLabel rendered="true" value="#{msg.financial}"/></h:commandLink><rich:spacer/>
<h:commandLink action="menuRelatorios.xhtml"><h:outputLabel rendered="true" value="#{msg.report}"/></h:commandLink><rich:spacer/>
<h:commandLink action="menuAdministracao.xhtml"><h:outputLabel rendered="true" value="#{msg.administration}"/></h:commandLink>
<div> </div>
</div>
<a id="maincontent"></a>
<!--BOTOÕES DE AÇÃO-->
<div id="pagetitle">
<table width="100%" border="0">
<tr>
<td align="left" width="90%"><font class="label"><h:outputLabel value="#{msg.titlePageSexo}"/></font></td>
<td align="center"><font size="2pt"><a4j:commandLink action="#{sexoBean.Destroy}" onclick="OpenModal('SexoModalPanel');" reRender="formList"><h:graphicImage url="images/new.png" style="cursor:hand" styleClass="image-border-none"/><br/><h:outputLabel rendered="true" value="#{msg.new}"/></a4j:commandLink></font></td>
</tr>
</table>
</div>
<!--CONTEUDO-->
<div id="content-container-three-column">
<div id="content-main-three-column">
<rich:panel bodyClass="inpanelBody" width="100%">
<f:facet name="header">
<h:outputLabel rendered="true" value="#{msg.filter}:"/>
</f:facet>
<h:panelGrid columns="3">
<h:outputLabel rendered="true" value="#{msg.code}:"/>
<h:inputText id="searchIdSexo" value="" label="#{msg.code}" tabindex="0" styleClass="clsInputField" required="false"/>
<h:outputLabel value=""/>
<h:outputLabel rendered="true" value="#{msg.description}:" />
<h:inputText id="searchDescricao" value="" label="#{msg.description}" tabindex="1" styleClass="clsInputField" required="false"/>
<h:graphicImage url="/images/search16.png" alt="Pesquisar"/>
</h:panelGrid>
</rich:panel>
<br/>
<rich:separator height="1" lineType="dotted"/>
<br/>
<rich:panel style="text-align:center;" styleClass="image-border-none" id="painelDados">
<rich:datascroller align="center" for="sexoList" maxPages="20" />
<rich:spacer height="20" />
<rich:dataTable width="483" id="sexoList" rows="5" columnClasses="col"
value="#{sexoBean.listaSexo}" var="sexo" sortMode="single"
onRowMouseOver="this.style.backgroundColor='#F8F8F8'; this.style.cursor='pointer'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" onRowClick="">
<f:facet name="header">
<rich:columnGroup>
<rich:column>
<h:outputText styleClass="headerText" value="Id" />
</rich:column>
<rich:column>
<h:outputText styleClass="headerText" value="Descrição" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column id="idSexo" style="text-align:center;" >
<h:outputText value="#{sexo.idSexo}" />
</rich:column>
<rich:column id="descricao" style="text-align:center;">
<h:outputText value="#{sexo.descricao}" />
</rich:column>
</rich:dataTable>
</rich:panel>
</div>
<div class="clear"></div>
</div>
<!--RODAPÉ-->
<div id="footer">
<h:outputLabel rendered="true" value="#{msg.copyright}"/><a href="LegalNotice.html"><h:outputLabel rendered="true" value="#{msg.termsOfUse}"/></a>
<div>
<br/></div>
</div>
<div id="footer-sub"></div>
</a4j:form>
<ui:include src="sexoModalForm.xhtml" />
</body>
</f:view>
</html>
sexoModalForm.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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<script>
function getRightTop(ref) {
var position = new Object();
position.top = 0; //ref.offsetTop;
position.left =0; // ref.offsetLeft+ref.clientWidth+6;
return position;
}
</script>
<style type="text/css">
.col1 {text-align:right;}
.col2 {width:60px; text-align:right;}
.vRow {vertical-align:middle;}
.rich-message {color:red;}
</style>
<f:view>
<f:loadBundle basename="br.com.edcel.model.messages" var="msg"/>
<rich:modalPanel id="sexoModalPanel" minHeight="200" minWidth="450"
height="200" width="500" zindex="2000">
<f:facet name="header">
<h:outputText value="${msg.form}" />
</f:facet>
<f:facet name="controls">
<h:graphicImage value="/images/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('sexoModalPanel')" />
</f:facet>
<h:form id="ModalFormSexoForm">
<h:panelGrid columns="2">
<h:outputLabel rendered="true" value="#{msg.code}:"/>
<h:inputText id="idSexo" value="#{sexoBean.sexo.idSexo}" label="#{msg.code}" tabindex="0" styleClass="clsInputField" required="false"/>
<h:outputLabel rendered="true" value=""/>
<rich:message for="idSexo" />
<h:outputLabel rendered="true" value="#{msg.description}:" />
<h:inputText id="descricao" value="#{sexoBean.sexo.descricao}" label="#{msg.description}" tabindex="1" styleClass="clsInputField" required="true"/>
<h:outputLabel rendered="true" value=""/>
<rich:message for="descricao" />
</h:panelGrid>
<br/>
<rich:separator lineType="dotted" height="1"/>
<br/>
<h:panelGrid columns="1" width="100%" dir="RTL">
<h:commandLink action="#{sexoBean.Salvar}"><h:graphicImage url="/images/save.png" style="cursor:hand" styleClass="image-border-none" alt="#{msg.save}" /></h:commandLink>
</h:panelGrid>
</h:form>
</rich:modalPanel>
</f:view>
</ui:composition>
Bean
package br.com.edcel.managedBean;
import java.util.List;
import org.richfaces.model.selection.SimpleSelection;
import br.com.edcel.dao.DataAccessLayerException;
import br.com.edcel.facade.SexoFacade;
import br.com.edcel.model.Sexo;
public class SexoBean {
private Sexo sexo;
private SimpleSelection selection = new SimpleSelection();
public SexoBean(){
sexo = new Sexo();
}
public List<Sexo> getListaSexo()throws DataAccessLayerException{
return SexoFacade.getInstance().findAll();
}
public Sexo getSexo() {
return sexo;
}
public void setSexo(Sexo sexo) {
this.sexo = sexo;
}
public SimpleSelection getSelection() {
return selection;
}
public void setSelection(SimpleSelection selection) {
this.selection = selection;
}
public String Salvar() throws DataAccessLayerException {
SexoFacade.getInstance().save(sexo);
return "SUCCESS";
}
public String Excluir() throws DataAccessLayerException {
return "SUCCESS";
}
public void Destroy()throws DataAccessLayerException{
sexo = new Sexo();
}
}
abraço a todos.
