[RESOLVIDO]vRaptor + sitemesh + bootstrap collapse problemas na navegação

Assuntos Gerais
#1

Bem, estou usando um menu lateral com o efeito em javascript do collapse, o problema é que quando ocorre um request, ele volta ao normal, o que eu queria era manter ele aberto ao mudar de pagina, só que se eu fizer isso tenho que atualizar somente a div, e isso teria que ocorrer para toda navegação, queria saber se isso “mataria” o desempenho do vRaptor, e se tem como fazer isso com sitemesh visto que o sitemesh “decora” um template e replica modificando somente o body, header… enfim as partes que foram pedidas para serem modificadas, só que esse menu está sendo decorado de forma que toda vez que mudo de pagina ele volta ao estado inicial que se encontra no decorator.

é possivel fazer com que esse menu seja carregado somente uma unica vez durante toda a aplicação? evitando assim que ele se modifique?

#2

Pesquise sobre Ajax, assim você fará requisição retornando parte do HTML para atualizar somente o elemento desejado.

#3

o problema que o html que ele retorna para a div, retorna tbm com toda a pagina decorada, lembre-se que o decorator é um “filtro” que vem junto a estrutura decorada.

#4

você pode configurar no sitemesh uma regra para não decorar determinadas páginas. É tipo um exclude no decorator, vc pode colocar a URL do método que retorna o seu menu.

#5

Mais tem um problema que é pq tenho no template main.jsp do decorator o jsp:import leftmenu.jsp do meu Menu, e o css está no main.jsp e nao no leftmenu, só que esse menu está em toda pagina, o meu problema é que mesmo que eu faça o exclude do /leftmenu.jsp ou seja la como for, ela vai estar decorada atraves do import no main.jsp

o problema que estou tentando resolver atraves de jQuery Cookie, mais ainda nao tenho a menor ideia como, mais pesquisando vi que era uma maneira possivel ou seja, alterando o estado e salvando no cookie e quando mudar de pagina restaurar o estado.

estava com a ideia de criar uma unica pagina template e trabalhar com javascript atualizando somente uma div, mais isso é muito trabalhoso e se o sistema crescer é um tiro no pé.

#6

tem como fazer uma parte do site ser carregada somente uma unica vez?

#7

Por ajax sim, o controle cada elemento é seu, sem mistérios. Muito complicado esse sitemesh. Seu objetivo diretamente é com o menu não sair do ponto que foi aberto, correto? Usar ajax seria o ideal, mas se não quiser usar pra simplificar também poderia na volta do request setar de volta a classe CSS que diz que o menu ficará ativado no determinado item de menu, assim voltaria aberto no ponto que estava, conforme a página que abrir. Tem um exemplo na Internet desse menu que está usando?

#8

mais infelizmente o sitemesh me ajuda de maneira que eu diminuo e muito os códigos, até pq se isso crescer, terei que fazer para cara ação nova, ocorra o ajax para aquela açao atualizar somente determinado canto.

quanto ao exemplo, eu uso o menu do Twitter bootstrap collapse:

segue o link: http://twitter.github.io/bootstrap/javascript.html#collapse

é exatamente da mesma forma que está lá, id’s com mesmo nome e class tambem.

obs: nao é questão de deixar aberto, é questao de se abrir, ao mudar de pagina, ele continue aberto, e se o usuario fechar, ele continue fechado. basicamente isso. mais digitar é facil ruim é de implementar quando se é novato nessa area ;/

#9

[quote=maaarkin]mais infelizmente o sitemesh me ajuda de maneira que eu diminuo e muito os códigos, até pq se isso crescer, terei que fazer para cara ação nova, ocorra o ajax para aquela açao atualizar somente determinado canto.

quanto ao exemplo, eu uso o menu do Twitter bootstrap collapse:

segue o link: http://twitter.github.io/bootstrap/javascript.html#collapse

é exatamente da mesma forma que está lá, id’s com mesmo nome e class tambem.

obs: nao é questão de deixar aberto, é questao de se abrir, ao mudar de pagina, ele continue aberto, e se o usuario fechar, ele continue fechado. basicamente isso. mais digitar é facil ruim é de implementar quando se é novato nessa area ;/[/quote]
Seu problema é bem simples então. Observe o elemento “a”, na class quando colocado collapsed o item de menu aparecerá fechado, do contrário, se não colocar aparece aberto.

Item de menu fechado: class=“accordion-toggle collapsed”

<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a>Item de menu aberto: class="accordion-toggle"<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a>
Então na volta, no response do request você poe collapsed na class para os itens de menu que não sejam da página que está abrindo, ou seja, somente o item de menu da página correspondente ficará sem collapsed na class.

#10

só que nao é um unico sao vários, o problema é saber qual que ficou aberto e qual que ficou fechado. precisaria manter algo entre uma requisição e outra, ou salvar todos os estados em um unico lugar e quando a nova pagina aparecer setar novamente.

#11

Sim são vários, só ilustrei como ficar aberto ou não um dos itens, então a verificação é para cada um mesmo.

Isso ai já vai depender da sua lógica e as implementações existentes. Se cada item de menu corresponde unicamente a uma action diferente, então a action poderia retornar qual item de menu correspondente. Se não há correspondência única, teria que passar por parâmetro na URL qual item, pra saber retornar o correspondente. Lembrando que isso é uma alternativa, o ideal seria usar Ajax.

#12

como seria para esse exemplo, usando ajax?

#13

Dá uma olhada aqui: http://www.guj.com.br/java/245076-resolvidoretornar-parte-de-htmldiv-com-vraptor-com-metodo-via-ajax
O exemplo mais simples que mostraram foi usando load do jquery, que faz uma requisição ajax para retornar html da forma mais simples possível. Então caso queira simplesmente requisitar uma página sem precisar passar parâmetros dinâmicos load pode ser usado. Senão fale melhor como é seu caso nesse ponto.

#14

olha, vi esse exemplo aqui:
http://www.snyderplace.com/demos/collapsible.html

se vc prestar atençao você pode navegar pelas paginas e abrir o accordion e se quiser pode ir direto no browser e efetuar o request pra pagina inicial que ele mantem o ultimo estado que você deixou, fui inspecionar o elemento da pagina e ele usa jquery.cookie.min.js vou dar uma olhada sobre.

#15

[quote=maaarkin]olha, vi esse exemplo aqui:
http://www.snyderplace.com/demos/collapsible.html

se vc prestar atençao você pode navegar pelas paginas e abrir o accordion e se quiser pode ir direto no browser e efetuar o request pra pagina inicial que ele mantem o ultimo estado que você deixou, fui inspecionar o elemento da pagina e ele usa jquery.cookie.min.js vou dar uma olhada sobre.[/quote]
Entendi, usar cookie também pode ser uma alternativa, mas nunca usei pra isso.

Mesmo que não queira agora, quando um dia precisar usar o load do jquery pode seguir este exemplo:

HTML:

<a id="linkTeste" href="javascript:void(0)">HTML na div</a>
<div id="divTeste"><div/>

JavaScript:

$(document).ready(function () {
    $("#linkTeste").click(function () {
        $("#divTeste").load("Home/Index");
    });
});
#16

Bem só pra quem se interessar, consegui resolver esse problema de Sitemesh + collapse ( accordion ).

segue o link do material que eu utilizei.

Obs: foi atraves de JQuery Cookie.

http://www.snyderplace.com/demos/collapsible.html

#17