[Tutorial] Como importar arquivos JavaScript usando JSF

Se você é um viajante de primeira viagem e está tentando usar JSF com suas páginas HTML pode estar tendo muitas dúvidas. Mas não se preocupe, dúvidas são comuns, mas com o tempo e a experiência elas vão diminuindo progressivamente.

Durante a conversão das suas tags HTML4 ou HTML5 para JSF podem acontecer alguns problemas e para prevenir isso é bom utilizar as tags JSF sempre que possível. Neste tutorial vamos aprender a importar os nossos arquivos JavaScript utilizando o JSF 2.0 (versões posteriores também deve funcionar).

Atualmente o seu projeto deve se parecer com algo como:

|-- WebContent
   |-- images
   |-- js
   |-- web-inf
   |-- meta-inf

Crie uma pasta "resources" dentro da pasta "WebContent". Após isso, jogue os seus arquivos JavaScript (.js) dentro da pasta "resources". Assim o JSF vai conseguir localizar os arquivos sem chiar. 

Seu projeto deverá estar similar a isso agora:

|-- WebContent
   |-- images
   |-- resources
      |--js
   |-- web-inf
   |-- meta-inf

Esse é o código padrão para chamar um arquivo JavaScript externo em HTML:

<script type="text/javascript" src="nomeDoArquivo.js" />

Você deve trocar esse comando por:

&lth:outputscript library="js" name="nomeDoArquivo.js">
</h:outputscript>

Pronto, agora já sabemos como importar arquivos JavaScript utilizando JSF. Ficou alguma dúvida sobre o tutorial, está com problema, algo pode melhorar?