JSF 2 e JQuery

Front-end
#1

Boa noite a todos(as),

Preciso de uma grande ajuda. Tenho uma aplicação JSF 2 c/ facelets e gostaria de usar o JQuery para formatar alguns inputs.
Bom, eu inclui em meu template.xhtml os .js necessários:

    <h:head>

        <title>
            <ui:insert name="pageTitle">
            </ui:insert>
        </title>

        <h:outputStylesheet library="css" name="template.css"/>
        <h:outputScript library="js" name="jquery.maskedinput-1.3.min.js" />
        <h:outputScript library="js" name="jquery-1.7.1.min.js" />

    </h:head>

na pagina “composition” inclui no head a seguinte função:

		<script type="text/javascript">
			jQuery(function($) {  
				$(".cnpj").mask("99.999.999/9999-99");  
				$(".cpf").mask("999.999.999-99");  
				$(".cep").mask("99999-999");  
				$(".telefone").mask("(99) 9999-9999");  
				$(".hora").mask("99:99");
				$(".data").mask("99/99/9999");
			} )
		</script>

dai tentei aplicar assim:

		<h:outputLabel for="cpf"  value="#{rotulo.cpf}" />
		<h:inputText id="cpf" value="#{usuarioBean.usuario.cpf}" class="cpf" validatorMessage="#{rotulo.cpf_required}" required="true" />
		<h:message for="cpf" />

mas a mascara não é aplicada, e fora isso, para oo Eclipse, o arquivo jQuery v1.7.1.js está com erro.

Resumindo, o problema é apenas isso, mas estou tendo grande dificuldade para resolver.

Desde já agradeço.

#2

a função que você executa no head, tem que ser executadas ao final de carregar os elementos da página. Você pode colocar esse script no final do body ou pode colocar no onload do document.

Sugestão: se é JSF 2, dá uma olhada no p:inputMask do primefaces

#3