Richfaces 4 - mask não funciona

Front-end
#1

Senhores,

Estou tendo problemas com o Richfaces 4 e mask. Quero utilizar uma mascara para um calendar, mas a mascara não funciona e apresenta a seguinte mensagem de erro: arguments[1].mask is not a function. A página tem o seguinte código:

<!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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<meta http-equiv="content-language" content="en" />
	<meta content="Developer - Techsage Tecnologia e Informatica Ltda" name="author" />
	<meta http-equiv="Reply-to" content="developer@techsage.com.br" />
	<meta http-equiv="expires" content="Tue, 23 Jun 1998 01:46:05 GMT" />
	<title>..::FERIADOS::..</title>
	<script language="javascript" type="text/javascript" src="../Scripts/Feriado.js" charset="iso-8859-1"></script>	
	<link rel="shortcut icon" href="../Images/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="../App_Themes/tabelas.css" />
</h:head>
<h:body>
<div id="geral">
<f:view>
	
	<f:loadBundle basename="messages" var="msgs" />
	
	<div>
		<ui:include src="../Util/menu.xhtml"/>
	</div>
		
		
	<h:form id="feriado">
		<h:outputScript library="javascript" name="../Scripts/jquery.maskedinput-1.2.2.js" target="head"/>
		<rich:jQuery id="mskData" selector=".rf-cal-inp" timing="domready" query="mask('99/99/9999',{placeholder:' '})" />
		 
		<fieldset>
			<legend>
				<h:outputFormat value="#{msgs['feriado']}:"></h:outputFormat>
			</legend>
						
			<h:panelGroup id="formulario">							
				<div>
					<h:outputLabel for="txtData" value="#{msgs['dia']}:"></h:outputLabel>
					<rich:calendar value="#{feriadoHandler.feriado.dia.time}" datePattern="dd/MM/yyyy" id="txtData" popup="true" enableManualInput="true" />
				</div>
			
				<p>
					<h:outputLabel for="txtDescricao" value="#{msgs['descricao']}:"></h:outputLabel>
					<h:inputText id="txtDescricao" maxlength="50" value="#{feriadoHandler.feriado.descricao}" size="50"></h:inputText>
				</p>
			
				<h:inputHidden id="txtId" value="#{feriadoHandler.feriado.id}"></h:inputHidden>
			</h:panelGroup>																																																		
			<p align="center">
				<h:commandButton value="#{msgs['salvar']}" action="#{feriadoHandler.salvar}" onclick="javascript:return salvar();"></h:commandButton>
				<h:commandButton value="#{msgs['buscar']}" action="#{feriadoHandler.buscar}"></h:commandButton>
				<h:commandButton value="#{msgs['cancelar']}" action="#{feriadoHandler.cancelar}"></h:commandButton>
				<h:commandButton value="#{msgs['excluir']}"	action="#{feriadoHandler.deletar}" onclick="javascript:return excluir();"></h:commandButton>
			</p>
					
		</fieldset>
	</h:form>
	<div id="listagem">
		<ui:include src="/Tabelas/feriadolista.xhtml"/>
	</div>
					
</f:view>
</div>
</h:body>
</html>

Agradeço qualquer ajuda.
Abraços.

#2

Olá Amigo,

Tb estou com o mesmo problema que você descreveu, estou migrando um sistema que utiliza essa tecnologia mal feita, pois o richfaces 3.3.3 final não funciona no IE 9 e quando fazem a versão mais nova, as funcionalidades antigas não funcionan, não se se é pq é gratuito, fazem de qualquer jeito.

Se alguém tiver uma solução para o problema agradeço

Abraços a todos,

Zenas

#3

Zenas,

Sim, resolvi este quesito. Fiz o seguinte:
Segundo a documentação do Richfaces 4 recursos como scripts (javascript), imagens, stylesheets devem ser alocados em uma pasta denomina “resources”. Dentro desta pasta podem ser criadas subpastas, por exemplo:

resources
-----ui
-----scripts
-----imagens
-----css

No código da página escrevi o seguinte:

Na tag “outputScript” o valor do atributo “library” é o nome da subpasta onde está o recurso.
Na tag “jQuery” o valor do atributo “selector” é a classe do calendar gerada pelo Richfaces 4. O atributo “timing” é novo.
Veja mais detalhes na documentação.
Abraços,

Riquelme

#4

Boa tarde senhores, Riquelme eu tbm pesquisei bastante e achei solução apenas com o teu post. Muito obrigado por compartilhar o conhecimento conosco. Cara eu gostaria de saber onde tu leu na documentação do richfaces 4, pois eu li e nao encontrei nada a respeito. Pode me dar uma luz, tenho interesse em aprofundar um pouco mais neste assunto. vlw

#5

Foi no seguinte endereço: http://docs.jboss.org/richfaces/latest_4_0_X/Developer_Guide/en-US/html/index.html.

#6

Achei! Desatenção minha! vlw

#7

Descordo de quem mencionou que a tecnologia do Richfaces é mal feita. É incrível como ainda existe preconceito com software livre… Quem é mal feito é o Internet Explorer, que vem deixando nós desenvolvedores loucos a mais de uma década. Agora eles meio que resolveram seguir o padrão normal da Internet então tudo que foi feito pra funcionar nas versões bizarras anteriores, naturalmente não vai funcionar mais.

Pra quem quiser manter a compatibilidade nesse momento de “transição” sugiro usar o seguinte código como PRIMEIRO código no <head> de cada documento principal (que contenha a estrutura inicial do html) JSF:

&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /&gt;

Venho usando assim sem problemas no novo navegador Internet Explorer 9 e Richfaces 3.3.3

#8

Aproveitando o tópico, estou migrando um projeto do Richfaces 3.3.2 para o 4.2.1 e o mask não funciona

Tenho a seguinte implementação:

<h:inputText id="numero" required="true" size="12" maxlength="12" value="#{cadastroLinhaTelefoneBean.bean.numero}" label="Número:" /> <rich:jQuery selector="#persist\:numero" query="mask('99 9999-9999')" timing="domready" />

Conferi o código renderizado e o plugin está sendo carregado corretamente na tag head.

Alguma idéia?

Obrigado

#9

O mask estava sendo carregado antes do jQuery.

Resolvi com o seguinte:

<h:outputScript library="js" name="jquery.maskedinput-1.2.2.min.js" target="body" />
#10

Olá,
acessei essa página ontem (8/1/13), estava com a mesma dúvida.
Gostaria de compartilhar uma solução possível:

&lt;rich:calendar id="textDataInicial" cellWidth="24px" cellHeight="22px" value="#{chamadoManagedBean.chamado.dataInicial}" datePattern="#{msg.date_pattern}" todayControlMode="hidden" optionalFooter="hidden" style="width:73px;" styleClass="richCalendar" inputClass="richCalendar textDataInicial" label="#{msg.global_data_inicial}" enableManualInput="true"&gt; &lt;/rich:calendar&gt; &lt;rich:jQuery id="mskTextDataInicial" selector=".textDataInicial" timing="onload" query="mask('99/99/9999',{placeholder:' '})"&gt;&lt;/rich:jQuery&gt;
Testei aqui e está ok.
Qualquer dúvida fiquem à vontade para perguntar.

#11