Mostrando postagens com marcador mentawai. Mostrar todas as postagens
Mostrando postagens com marcador mentawai. Mostrar todas as postagens

quarta-feira, 18 de março de 2009

HTML: select (drop down) em cascata com MentaAjax

Finalmente acredito ter chegado a uma boa solução para controle de 3 campos select (drop down ou mesmo combobox) em cascatas. Para melhor ilustração aí vai o cenário da estrutura de dados. Tenho um catálogo de materiais, cada item deste catálogo faz parte de um subgrupo, cada subgrupo faz parte de um grupo e cada grupo faz parte de uma classe. Preciso selecionar o subgrupo a que pertence um item do catálogo e para tanto faz-se necessário: primeiro a seleção da classe, feita esta seleção o select com as grupos é preenchido; segundo faz-se a seleção do grupo e com isto o select dos subgrupos é preenchido para seleção final.
Estou desenvolvendo este catálogo em Java com mentawai para MVC. Tentei utilizar um cenário igual em que o cascateamento é feito com País, Estado e Cidade, desenvolvimento e relatado no fórum do mentawai, mas não obtive o resultado que desejava. Na verdade eu queria que ao ser feita uma nova seleção de classe, automaticamente os select com grupos e subgrupos fosse preenchidos automaticamente, sendo que o select dos grupos conteria os grupos da classe selecionada e o select dos subgrupos conteria os subgrupos do primeiro grupo da classe selecionada.
Chega de enrolação e vamos ao código!
Primeiro as configurações das actions no ApplicationManager:


action("/manager/FormMateriais", FormMateriais.class).on(SUCCESS, fwd("/manager/formMaterial.page"));
action("/manager/FormMateriais", FormMateriais.class, "add").on(SUCCESS, fwd("/manager/FormMateriais.mtw"));
action("/manager/FormMateriais", FormMateriais.class, "preencheComboGrupo").ajaxOk(new JSONGenericRenderer());
action("/manager/FormMateriais", FormMateriais.class, "preencheComboSubGrupo").ajaxOk(new JSONGenericRenderer());




Ao ser chamada URL /manager/FormMateriais.mtw, esta preenche a output com as classe, os grupos da primeira classe e os subgrupos do primeiro grupo da primeira classe. Como estou utilizando a tag html do mentawai (mtw:select) esta preenche automaticamente os select classe, grupo e subgrupo com os Maps da output.



@Override
public String execute() throws Exception {
Connection conn = (Connection) input.getValue("conn");

ClasseDAO classeDAO = new ClasseDAO(conn);
GrupoDAO grupoDAO = new GrupoDAO(conn);
SubGrupoDAO subGrupoDAO = new SubGrupoDAO(conn);

output.setValue("classe", classeDAO.getMap(classeDAO.list()));
output.setValue("grupo", grupoDAO.getMap(grupoDAO.list(classeDAO.list().get(0).getId())));
output.setValue("subgrupo", subGrupoDAO.getMap(subGrupoDAO.list(grupoDAO.list(classeDAO.list().get(0).getId()).get(0).getSeq())));
return SUCCESS;
}



Por fim, meu JSP com alguns recursos de Ajax disponibilizados pelo mentawai, permitem o preenchimento dinâmico dos selects grupo e subgrupo a cada evento onclick das selects classe e grupo.








< script type="text/javascript">
function getList(transport) {
var response = new mtw.response(transport);
response.replaceOptions("grupo");
}

function getList1(transport) {
var response = new mtw.response(transport);
response.replaceOptions("subgrupo");
}

function doRequest() {
var req = new mtw.request();
req.setUrl("FormMateriais.preencheComboGrupo.mtw");
req.addParameter("idClasse", $('classe').value);
mtw.removeOptions("grupo");
req.onSuccess(getList);
req.send();

doRequest1();
}

function doRequest1() {
var req1 = new mtw.request();
req1.setUrl("FormMateriais.preencheComboSubGrupo.mtw");
req1.addParameter("idClasse", $('classe').value);
req1.addParameter("idGrupo", $('grupo').value);
mtw.removeOptions("subgrupo");
req1.onSuccess(getList1);
req1.send();
}
< /script>




Bom, ainda não consegui resolver o problema de fazer os preenchimentos automáticos dos selects grupo e subgrupo para outros eventos que não o onclick, na verdade isto é um problema comigo ou com o mentawai, pois não consigo definir dois eventos diferentes nas tags mtw:select, assim resolvi usar onclick em detrimento a onchange ou mesmo onblur.

Era isto por enquanto. Abraços amigos.

terça-feira, 3 de março de 2009

Autocomplete com mentawai

Como podem ver pelos posts, estou tocando dois pequeninos projetos, um em asp.net e outro em j2ee e sem dúvida que prefiro muito mais j2ee, parece que o desenvolvimento flui melhor e acredito que seja pela vasta documentação sobre tudo que se possa pensar, além de parecer gerar uma aplicação bem mais responsiva que asp.net, exatamente no sentido tempo de acesso ao banco de dados oracle como geração da saída para o browser do cliente.

Pois bem, voltemos ao assunto, eu já havia tentado implementar autocomplete com ajaxtoolkit no asp.net através da implementação de um webservice (necessário, mas de implementação simples no visual studio), só que não gerou um bom resultado, sendo apresentados alguns bugs, principalmente quando precisava dar foco no textbox e selecionar o conteúdo através de código.

Já estava preparado para amargurar alguns percalços com mentawai e parti pro abraço, mas fui decepcionado pela simplicidade do processo, sendo o mais complicado incluir os jar do json-lib, ezmorph, json, commons-logging e ajaxtags, pois tentei com os mais atualizados e não consegui rodar a aplicação, então baixei o mentawai completo e copiei dele os jar destas bibliotecas e transcorreu tudo perfeitamente.

Em meu jsp, por exemplo, BuscaMaterial.jsp tenho:

<mtw:inputtext name="descricao" id="descricao" size="50"/>
<div id="completeHere" class="auto_complete"/>
<mtw:ajaxcompleter onsuccess="completeText" source="descricao" target="completeHere" url="Filtro.autoCompleter.mtw">


e no head do meu Template.jsp:

<script type="text/javascript">
function completeText(key, value) {
}
</script>
<mtw:ajaxconfig loadprototype="true"/>


Já o método autoCompleter da action Filtro retorna um Map com a lista que eu desejar:

Map map = new LinkedHashMap();

while (rset.next()) {
BigDecimal numero = rset.getBigDecimal("id");
map.put(numero.longValue(), rset.getString("nome"));
}

output.setValue(AjaxConsequence.KEY, map);


Era isto galera!