O h:outputScript apresenta um elemento HTML do tipo script como um javascript. Está tag é usada para adicionar javascript de um arquivo externo em uma página JSF. Você pode colocar arquivos de script em um diretório de recursos na raiz da sua aplicação web. Subdiretórios deste diretório são chamados de bibliotecas, você pode criar todas as bibliotecas como quiser, como por exemplo uma biblioteca de imagens, de javascripts ou arquivos css.
h:outputScript: https://javaserverfaces.java.net/docs/2.2/vdldocs/facelets/h/outputScript.html
Usando uma Biblioteca Externa
1 – Crie um projeto web dinâmico JSF e na pasta WebContent crie uma pasta chamada resources e dentro dela as pastas, images, js e css:
JSF – WebContent
2 – Na pasta js crie um novo arquivo javascript de acordo com o código abaixo:
JSF – Javascript
3 – Na pagina xhtml na tag Head utilize o outputScript e alimente os parâmetros para o nome do arquivo e sua pasta no qual é a biblioteca javascript está localizada, crie um elemento DIV no final da pagina no qual o Javacript adicionará o resultado dos eventos disparados e por fim adicione os eventos no elemento de texto do campo nome:
JSF – Aplicação
Exemplo:
Neste exemplo utilizamos um arquivo javascript externo para criar a funcionalidade para os evento de entrada e saída do mouse sobre um elemento de entrada de texto.
Java
Managed Bean – Participante
package org.desenvolvimento.aberto;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
// Define decoradores
@ManagedBean(name = "Participante")
@RequestScoped
public class Participante {
// Define atributos privados
private long id;
private String nome;
private String sobrenome;
private String cargo;
private Double salario;
// Metodos Getter e Setter
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
public String getSobrenome() {
return sobrenome;
}
public void setSobrenome(String sobrenome) {
this.sobrenome = sobrenome;
}
public String getCargo() {
return cargo;
}
public void setCargo(String cargo) {
this.cargo = cargo;
}
public Double getSalario() {
return salario;
}
public void setSalario(Double salario) {
this.salario = salario;
}
// Método de Ação (clique do botão)
public String Acao() {
System.out.println("Clique do botão");
System.out.println("Nome: " + this.getNome() + "\n " +
"Sobrenome: " + this.getSobrenome() + "\n " +
"Cargo: " + this.getCargo() + "\n " +
"Salário: " + this.getSalario() + "\n ");
return null;
}
}
Index.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">
<f:loadBundle basename="resources.application" var="msg" />
<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>
<h:outputScript name="testejs.js" library="js"></h:outputScript>
</head>
<h:body>
<h2>JSF - Desenvolvimento Aberto - Managed Beans -</h2>
<h3>
<h:outputText id="lnome" value="Validação - Cadastros:" />
</h3>
<h:form>
<h:panelGrid columns="3" cellpadding="2px">
<h:outputText id="lnome" value="Nome:" />
<h:inputText id="tnome" value="#{Participante.nome}" size="30"
required="true" label="Nome" onmouseover="meuMouseOver()"
onmouseout="meuMouseOut()" />
<h:message for="tnome" style="color:red" />
<h:outputText id="lsobrenome" value="Sobrenome:" />
<h:inputText id="tsobrenome" value="#{Participante.sobrenome}"
size="40" required="true" label="Sobrenome" />
<h:message for="tsobrenome" style="color:red" />
<h:outputText id="lcargo" value="Cargo" />
<h:inputText id="tcargo" value="#{Participante.cargo}" size="25"
required="true" label="Cargo" />
<h:message for="tcargo" style="color:red" />
<h:outputText id="lsalario" value="Salário" />
<h:inputText id="tsalario" value="#{Participante.salario}"
required="true" label="Salário"
requiredMessage="#{msg['requerido.salario']}"
validatorMessage="#{msg['validar.salario']}">
<f:validateDoubleRange minimum="788.00" maximum="9999.99" />
</h:inputText>
<h:message for="tsalario" style="color:red" />
</h:panelGrid>
<br />
<h:commandButton id="botao" action="#{Participante.Acao}"
value="Enviar Dados" />
<div id="meulog"></div>
</h:form>
</h:body>
</html>
Javascript – testejs001.js
function meuMouseOver()
{
var div = document.getElementById('meulog');
div.innerHTML = div.innerHTML + 'Você entrou no campo nome ';
}
function meuMouseOut()
{
var div = document.getElementById('meulog');
div.innerHTML = div.innerHTML + 'Você saiu do campo nome ';
}
Ricardo Mantovani
Desenvolvimento Código Aberto 