Problemas ao referenciar JavaScript com Facelets JSF2

6 de abril de 2012 4 respostas

Gabriel_Garcia 6 de abril de 2012

Boa tarde a todos, tenho um projeto utilizando JSF2 + Facelets + JavaScript (com Jquery) e estou tentando fazer a referência de um JavaScript em um para poder utiliza o MaskMoney.js nele. Já tentei criar no do meu template

<ui:insert name="adicionais"></ui:define>

e então referenciar nas demais páginas

<ui:composition template="/paginas/principais/principal.xhtml">
<ui:include name="adicionais"><script type="text/javascript src="../script/MaskMoney.js"/></ui:include>
...

também já tentei utilizar a tag para incluir no header do html no template os javascript que preciso porém não tive resultados. Detalhe que, eu já testei a forma de referenciar o diretório do JavaScript de várias formas tentando "acertar" o diretório correto e até mesmo criei a pasta resources, não tinha no meu projeto (li em um exemplo do site stackoverflow que a tag h:outputScript busca as pastas resources dentro do WebContent) porém não acredito que o problema seja a forma de referenciar os diretórios corretos. A estrutura do meu projeto era WebContent > script > MaskMoney.js e mais recentemente WebContent > resources > script > MaskMoney.js

Espero ter sido claro em relatar o meu problema e conto com a ajuda de vocês! Qualquer dúvida com relação ao meu problema estou a disposição e segue os códigos relevantes:

principal.xhtml

<!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:p="http://primefaces.prime.com.tr/ui">

<f:view contentType="text/html">	
	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/principal.css"/>
		<title>Sistema de Pedidos Agrícolas</title>
	</h:head>
	<h:body>
		<p:layout id="paginaToda" fullPage="true" styleClass="paginatoda">		
			<!--  TOPO DA PÁGINA -->
			<p:layoutUnit id="cabecalho" position="top" height="75" styleClass="header">
				<ui:insert name="cabecalho" >
					<ui:include src="cabecalho.xhtml"/>
				</ui:insert>
			</p:layoutUnit>
			
			<!--   CONTEÚDO -->
			<p:layoutUnit id="conteudo" position="center" scrollable="true">
				<ui:insert name="menuPrincipal"> 
					<ui:include src="menuPrincipal.xhtml" />
				</ui:insert>
				<ui:insert name="conteudo" />
			</p:layoutUnit>
			
					
			<!-- RODAPÉ --> 
			<p:layoutUnit position="bottom" height="60" styleClass="footer">
				<h:outputText id="labelRodape" value="texto rodapé" styleClass="textosRodape"/>
			</p:layoutUnit>
			
		</p:layout>
	</h:body>
</f:view>
</html>

novaCotacao.xhtml

<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:p="http://primefaces.prime.com.tr/ui">
	
	<ui:composition template="/paginas/principais/principal.xhtml">	
		<ui:define name="conteudo">
                        <h:outputScript library="script" name="../script/MaskMoney.js" target="head"/>	
			<h:outputScript library="script" name="../script/novaCotacao.js" target="head"/>	<!-- este também da o mesmo problema -->		
			<!-- INÍCIO DO FORM DE COTAÇÃO -->
			<h:form id="formCotacao">...

4 Respostas

Gabriel_Garcia 6 de abr. de 2012

Não sei se ajuda também mas, qualquer uma das formas que eu tento referenciar, vendo o html gerado pelo firebug tenho o seguinte problema:

Hebert_Coelho 6 de abr. de 2012

Crie uma pasta:
WebContet
|resources
|javascript

Aqui tem o mesmo modelo mas com css: http://uaihebert.com/?p=836&page=9

Com isso, coloque seu arquivo lá dentro (vamos supor que chama uaiscript.js).

Agora, basta chamar assim:
<h:outputScript library=“javascript” name=“uaiscript.js” />

Gabriel_Garcia 6 de abr. de 2012

Vlw pela ajuda cara, fiz aqui e funcionou! O negócio é a pasta resources mesmo.

Agora estou com outro problema, as minhas ações com os componentes do formulário não estão pegando, por exemplo, tanto o maskmoney quanto o click no input de valor do pedido não estão sendo executados!

// Configuração para campos de Real (máscara monetária)
jQuery.noConflict(); 
jQuery(document).ready(function(){
	
	jQuery("#formCotacao:valorPedido").maskMoney({
		showSymbol:true, 
		symbol:"R$", 
		decimal:",", 
		thousands:"."
	});
	
	jQuery("#formCotacao:valorPedido").click(function(){
		alert(1);
	});
	
});

<h:form id="formCotacao">
	<p:outputPanel id="panelCotacao">
		<p:fieldset legend="Pedidos">		
			<h:panelGrid columns="8" cellpadding="2" id="gridPedido"  rendered="#{cotacaoMB.exibeResultado ne true}">
				<h:outputLabel value="Valor"/>
				<h:outputLabel value="Quantidade"/>
				<p:inputText id="valorPedido" value="#{cotacaoMB.pedidoCotacao.valor}" styleClass="camposMoterarios">
				<p:inputText id="valorPedido" value="#{cotacaoMB.pedidoCotacao.valor}" styleClass="camposMoterarios">
					<p:ajax event="blur" listener="#{cotacaoMB.calcularTotal}" update="totalPedido"/>
				</p:inputText>								
				<p:inputText value="#{cotacaoMB.pedidoCotacao.quantidade}" styleClass="camposMoterarios">
					<p:ajax event="blur" listener="#{cotacaoMB.calcularTotal}" update="totalPedido"/>
				</p:inputText>
				...

Gabriel_Garcia 7 de abr. de 2012

alguém sabe o porquê desse segundo problema?

Criado 6 de abril de 2012

Ultima resposta 7 de abr. de 2012

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados