JSF – Usando Javascript – Java

Publicado: 20 de janeiro de 2015 em Java, JavaScript

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

JSF – WebContent

2 – Na pasta js crie um novo arquivo javascript de acordo com o código abaixo:

JSF - Javascript

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

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 ';
}

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s