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

*Ingresar nombre de proyecto y ubicación

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

*Seleccionar el framework

*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




