JSF + Menu CSS

Front-end
#1

Seguinte pessoal,

To desenvolvendo um projeto em JSF e preciso de um menu dropdown simples, com submenus.

Achei alguns exemplos de menus em CSS e desenvolvi um próprio. E funciona que é uma beleza! Tanto no Firefox 2.x quando no IE6 e IE7. Até aí tudo bem. O problema é quando eu incluo esse menu no projeto JSF. Apartir daí, o menu funciona SÓ no Firefox.

Agora não sei o porque disso, sendo que quando tiro o código do menu do projeto JSF, funciona beleza.

Espero que alguém possa me ajudar.
Valeu!

#2

Olá,

Bom, como é que você está fazendo este menu, usando método get? No IE ele faz um controle de cache que não atualiza as páginas. A sugestão é que você utilize o componente do Tomahawk o t:jscookMenu

:okok:

#3

Pessoal, to exatamente com esse problema, gostaria de uma explicação pra isso pra continuar o meu projeto.

É o seguinte.
Meu menu drop-down funciona bem até eu colocar um formulário no JSP!!!

Coloquei todo o menu no seguinte JSP:

Tranquilão … ae o meu código tá assim …

[color=red]1) Maneira que funciona! (sem o form)[/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>

<head>
<link rel="stylesheet" type="text/css" media="all" href="<%=request.getContextPath()%>/css/global.css" />
<link rel="stylesheet" type="text/css" media="all" href="<%=request.getContextPath()%>/css/frontend1.css" />
<link rel="stylesheet" type="text/css" media="all" href="<%=request.getContextPath()%>/css/menu.css" />
</head>

<body>
<div class="gridScreen">
<div class="gridBody" cellspadding="5">
<jsp:include page="/jsf/menu/viewMenu.jsp"/>

<f:view>

</f:view>
</div></div>
</body>
</html>

Dessa forma, funciona beleza. Ele gera um HTML onde o meu menu funciona.

HTML gerado …

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link class="component" href="/MileniaWeb/a4j/s/3_3_2.SR1org/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__.faces" rel="stylesheet" type="text/css" />
<link class="component" href="/MileniaWeb/a4j/s/3_3_2.SR1org/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__.faces" media="rich-extended-skinning" rel="stylesheet" type="text/css" />
<script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script>
<script src="/MileniaWeb/a4j/g/3_3_2.SR1org/richfaces/renderkit/html/scripts/skinning.js.faces" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" media="all" href="/MileniaWeb/css/global.css" />
<link rel="stylesheet" type="text/css" media="all" href="/MileniaWeb/css/frontend1.css" />
<link rel="stylesheet" type="text/css" media="all" href="/MileniaWeb/css/menu.css" />

</head>

<body>
<div class="gridScreen">
<div class="gridBody" cellspadding="5">

<div class="menu1" style="position:absolute; top:10px; left:330px; " >
<ul>
	<li><a  href="http://isso">Cadastros</a>
		&lt;table&gt;&lt;tr&gt;&lt;td&gt;
		<ul>	
			<li><a  href="http://isso">Lojas</a>
			</li>
			<li><a  href="http://isso">Produtos</a>
			</li>
			<li><a  href="http://isso">Segmentos e Atividades</a>
			</li>
		</ul>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
	</li>
	<li><a  href="http://isso">Movimentações</a>
		&lt;table&gt;&lt;tr&gt;&lt;td&gt;
		<ul>	
			<li><a  href="http://isso">Registrar Orçamento</a>
			</li>
			<li><a  href="http://isso">Registrar Visita</a>
                        </li>
                </ul>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</ul>
&lt;/div&gt;

&lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Ae eu coloco um formulário no JSP, vazião mesmo, só pra começar a trabalhar …

[color=red]2) Maneira que NÃO funciona! (com o form)[/color]

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%&gt;
&lt;%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%&gt;

&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" media="all" href="&lt;%=request.getContextPath()%&gt;/css/global.css" /&gt;
&lt;link rel="stylesheet" type="text/css" media="all" href="&lt;%=request.getContextPath()%&gt;/css/frontend1.css" /&gt;
&lt;link rel="stylesheet" type="text/css" media="all" href="&lt;%=request.getContextPath()%&gt;/css/menu.css" /&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="gridScreen"&gt;
&lt;div class="gridBody" cellspadding="5"&gt;
&lt;jsp:include page="/jsf/menu/viewMenu.jsp"/&gt;

&lt;f:view&gt;
         &lt;h:form&gt;&lt;/h:form&gt;  &lt;!--  Trecho Adicionado --&gt;[/b]
&lt;/f:view&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Reparem no código do form adicionado na linha 20 acima.
Pronto!! É o suficiente pra babar e meu menu drop-down não funcionar mais.

HTML gerado …

[b]&lt;html  xmlns="http://www.w3.org/1999/xhtml"&gt;[/b]

&lt;head&gt;

&lt;link class="component" href="/MileniaWeb/a4j/s/3_3_2.SR1org/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__.faces" rel="stylesheet" type="text/css" /&gt;
&lt;link class="component" href="/MileniaWeb/a4j/s/3_3_2.SR1org/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__.faces" media="rich-extended-skinning" rel="stylesheet" type="text/css" /&gt;
&lt;script type="text/javascript"&gt;window.RICH_FACES_EXTENDED_SKINNING_ON=true;&lt;/script&gt;
&lt;script src="/MileniaWeb/a4j/g/3_3_2.SR1org/richfaces/renderkit/html/scripts/skinning.js.faces" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;form id="j_id_jsp_372845050_1" name="j_id_jsp_372845050_1" method="post" action="/MileniaWeb/jsf/menu/pgLoadModulo.faces" enctype="application/x-www-form-urlencoded"&gt;&lt;input type="hidden" name="j_id_jsp_372845050_1_SUBMIT" value="1" /&gt;&lt;input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="FfsoypEWj15A1GTilRDXuhqGamre0QiPah0qoawmNzjMz16Fahi5IHHBwoG1JpX5frqgtNLALhtJDf/7HeQ8QFwBTYB6sslHNLE46HQJhxcT96InfDk2yQ==" /&gt;
&lt;/form&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

&lt;link rel="stylesheet" type="text/css" media="all" href="/MileniaWeb/css/global.css" /&gt;
&lt;link rel="stylesheet" type="text/css" media="all" href="/MileniaWeb/css/frontend1.css" /&gt;
&lt;link rel="stylesheet" type="text/css" media="all" href="/MileniaWeb/css/menu.css" /&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div class="gridScreen"&gt;
&lt;div class="gridBody" cellspadding="5"&gt;

&lt;div class="menu1" style="position:absolute; top:10px; left:330px; " &gt;
<ul>
	<li><a  href="http://isso">Cadastros</a>
		&lt;table&gt;&lt;tr&gt;&lt;td&gt;
		<ul>	
			<li><a  href="http://isso">Lojas</a>
			</li>
			<li><a  href="http://isso">Produtos</a>
			</li>
			<li><a  href="http://isso">Segmentos e Atividades</a>
			</li>
		</ul>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
	</li>
	<li><a  href="http://isso">Movimentações</a>
		&lt;table&gt;&lt;tr&gt;&lt;td&gt;
		<ul>	
			<li><a  href="http://isso">Registrar Orçamento</a>
			</li>
			<li><a  href="http://isso">Registrar Visita</a>
                        </li>
                </ul>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</ul>
&lt;/div&gt;

&lt;/div&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
&lt;/html&gt;

Se vocês repararem ele gerou um HTML com duas tags html, por exemplo, zoneou totalmente a minha página só porque eu adicionei o form. Não sei como ele chega a essa página html, mas ela saconeu pesadamente o meu menu drop-down.

Tem algum jeito de corrigir, ou usar outra técnica?? Pois naturalmente eu vou precisar utilizar formulários na aplicação.

#4