Olá, desculpa a demora, bem vou tentar passar isso pra vc…
Você cria uma tabela.
Trecho do HTML
<form id="formulario" name="formulario" action="">
<table border="1" align="center" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>Id</td>
<td>Nome</td>
<td>Login</td>
<td>A&ccedil;&otilde;es</td>
</tr>
</thead>
<tbody id="tbodyUsuarios"></tbody>
<tbody id="tformulario"></tbody>
</table>
</form>
Agora você gera o seu list.
Trecho do JS
function renderListUsuarios(list){
DWRUtil.removeAllRows("tbodyUsuarios");
var cellFuncs = [
function(bean) { return bean.id; },
function(bean) { return bean.nome; },
function(bean) { return bean.login; },
function(bean) { return '<a href="javascript:abrirFormulario('+ bean.id +');"><img src="img/ico_edit.gif" border="0"/></a> / <a href="javascript:excluirUsuario('+ bean.id +');"><img src="img/bt_excluir.gif" border="0"/></a>'; }
];
DWRUtil.addRows("tbodyUsuarios", list, cellFuncs, {
rowCreator:function(optionss){
var row = document.createElement("tr");
row.id = optionss.rowData.id;
row.bgColor = "#cccc99";
row.style.cursor = "pointer";
if(validateBrowser()){
row.attachEvent("onclick", function(e){abrirFormulario(this.id)});
}else{
row.addEventListener("click",function(e){abrirFormulario(this.id)},true);
}
return row;
},
escapeHtml:false
});
}
Bem para carregar o formulario vc poderá deixar ele criado e apenas exibir ele ou se preferir…fazer um insert na página que esse dependendo do caso seria bem mais interessante e fácil manutenção como tbm migração ou alteração.
JAVA(No seu FacadeAjax do DWR)
public String setFormulario(String arquivo) throws ServletException, IOException{
return WebContextFactory.get().forwardToString("/" + arquivo);
}
Trecho do JS(Função abriFormulário e inserir página)
var beanUserGlobal;
function abrirFormulario(idUsuario){
var beanUser = {id:idUsuario};
FacadeAjax.getUsuario(beanUser, {
callback:function(bean){
FacadeAjax.setFormulario('formulario.html',{
callback:function(data){
DWRUtil.setValue("tformulario", data,{escapeHtml:false});
DWRUtil.setValues(bean,{idPrefix:"usuario"});
beanUserGlobal = DWRUtil.getValues(bean,{idPrefix:"usuario"});
},
errorHandler:function(errorString, exception) {alert(errorString);},
timeout:50000
,async:false
});
},
errorHandler:function(errorString, exception) {alert(errorString);},
timeout:50000
,async:false
});
}
Sua página que vc deseja inserir(formulario.html) poderia ser um JSP tanto faz.
formulario.html(código COMPLETO)
<tr>
<td colspan="2"><div align="center">Alterar Usuário</div></td>
</tr>
<tr>
<td>Nome:</td>
<td><input type="text" id="usuario.nome" value="" /></td>
</tr>
<tr>
<td>Login:</td>
<td> <input type="text" id="usuario.login" value=""/></td>
</tr>
<tr>
<td>Senha:</td>
<td><input type="password" id="usuario.senha" value="" /></td>
</tr>
<tr>
<td>Caracteristicas:</td>
<td><input type="text" id="usuario.beanCaracteristicas.caracteristica" value="" /></td>
</tr>
<tr>
<td>Permiss&otilde;es:</td>
<td>
<ol id="olPermissoes"></ol>
</td>
</tr>
<tr>
<td align="center"><a href="javascript:alterarUsuario();"><img src="img/bt_salvar.gif" border="0"/></a></td>
<td align="center"><a href="javascript:limparTBody();"><img src="img/bt_excluir.gif" border="0"/>Cancelar</a></td>
</tr>
Observe que esta página so contem tr nada mais, e se voce observar o primeiro código é o tbody onde vc irá inserir esse trecho acima.
<tbody id="tbodyUsuarios"></tbody> --> Onde será carregada a Grid
<tbody id="tformulario"></tbody> --> Onde será carregado o trecho do formulario.html
Bem é isso qualquer dúvida posta ai…espero ter ajudado.
Esses códigos são de um projeto que estou fazendo para apresentar agora no Sun Tech Day 2007 em Fortaleza, assim que ficar completo vou colocar no meu Blog em Artigos, esse projeto para download.
Abraços
