Ing. Pablo Almeida Haro Msc.

AJAX CON JSF

 

*Crear el proyecto web: file/new Project/web application

x10sctmp

 

*Ingresar nombre de proyecto y ubicación

 

x10sctmp0

 

 

*Ingresar servidor, ubicación del proyecto y ruta de inicio

 

x10sctmp1

 

 

*Seleccionar el framework

 

x10sctmp2

 

*En la página index.xhtml ingresar el código que sigue a continuación:

 

<?xml version='1.0' encoding='UTF-8' ?>

<!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"     

> 

<h:head>

<title>Facelet Title</title>

</h:head>

<h:body>

<h:form>

<h:outputText id="ote_etiqueta_ingreso" value="Ingrese valor:" ></h:outputText>

<h:inputText id="ite_valor" value="#{clase_ajax.valor}" autocomplete="off">

<f:ajaxevent="keyup" render="ote_replica_valorite_valorote_contador" listener="#{clase_ajax.contar}"/>

</h:inputText>

<br></br>

<h:outputText id="ote_etiqueta_replica" value="El valor ingresado es:" />

<h:outputText id="ote_replica_valor" value="#{clase_ajax.replica_valor}"/>

<br></br>

<h:outputText id="ote_etiqueta_contador" value="El contador es:" />

 

<h:outputText id="ote_contador" value="#{clase_ajax.contador}"/>

</h:form>

</h:body>

</html>

 

*Crear una clase y paquete: click derecho sobre sourcepackage/new/java class

 

 

*Ingresar el código que sigue a continuación:

packagepkg_ajax;

 

importjavax.faces.bean.ManagedBean;

importjavax.faces.bean.SessionScoped;

importjavax.faces.event.AjaxBehaviorEvent;

@ManagedBean

@SessionScoped

public class clase_ajax

{   intcontador;

    String valor;

    String replica_valor;

 

public String getReplica_valor() {

return replica_valor=valor;

    }

 

 

publicintgetContador() {

returncontador;

    }

 

 

public String getValor() {

return valor;

    }

 

public void setValor(String valor) {

this.valor = valor;

    }

 

public void contar(AjaxBehaviorEvent event)

{

contador++;

    }

}

 

*Correr la aplicación: click derecho sobre el proyecto y run

 

x10sctmp3