1
Download Introduction to JavaServer Faces 2.0
Document related concepts
no text concepts found
Transcript
Introduction to JavaServer Faces 2.0
Para comenzar necesitamos descargar el archivo de la siguiente liga
http://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252FjsfDemo
.zip
Teniendo este proyecto procederemos con el tutorial
1. Primero que nada abrimos el proyecto con nuestro NetBeans
2. Después de abrirlo procederemos a correrlo para mostrar lo que sucede, le damos en Run
Project
para ver la pagina principal.
3. Clickeamos el botón de submit para ver la pagina respone.xhtml
4. En la ventana de Proyectos haga clic en el nodo del proyecto y seleccione
Propiedades. La ventana Propiedades del proyecto se muestra. Seleccione la categoría Marcos, a
continuación, haga clic en el botón Agregar. En el cuadro de diálogo que aparece,
seleccione JavaServer Faces continuación, haga clic en Aceptar.
En la ficha Bibliotecas, puede especificar cómo el proyecto accede alas bibliotecas JSF 2.0. La
opción por defecto es el uso de las bibliotecas incluidasen el servidor (el servidor GlassFish). Sin
embargo, el IDE también integra lasbibliotecas JSF 2.0. (Usted puede seleccionar la
opción Bibliotecas de registro si desea que su proyecto para utilizar estos archivos.)
5. En la ventana de Proyectos, haga clic en el nodo del proyecto jsfDemo y seleccione
Nuevo> JSF Managed Bean.
En el asistente, escriba lo siguiente:
Nombre de clase: UserNumberBean
Paquete: guessNumber
Nombre: UserNumberBean
Ámbito de aplicación: Sesión
Le damos aceptar y nos creara un archivo llamado UserNumberBean.java en el cual ira el siguiente
código.
package guessNumber;
import java.io.Serializable;
import java.util.Random;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpSession;
/**
*
* @author nbuser
*/
@ManagedBean(name = "UserNumberBean")
@SessionScoped
public class UserNumberBean implements Serializable {
Integer randomInt;
Integer userNumber;
String response;
/** Creates a new instance of UserNumberBean */
public UserNumberBean() {
Random randomGR = new Random();
randomInt = new Integer(randomGR.nextInt(10));
System.out.println("Duke's number: " + randomInt);
}
public Integer getUserNumber() {
return userNumber;
}
public void setUserNumber(Integer userNumber) {
this.userNumber = userNumber;
}
public String getResponse() {
if ((userNumber != null) &&
(userNumber.compareTo(randomInt) == 0)) {
//invalidate user session
FacesContext context =
FacesContext.getCurrentInstance();
HttpSession session = (HttpSession)
context.getExternalContext().getSession(false);
session.invalidate();
return "Yay! You got it!";
} else {
// including HTML requires that you set escape="false"
in view
return "<p>Sorry, " + userNumber + " isn't it.</p>"
+ "<p>Guess again...</p>";
}
}
}
Después de realizar esto procederemos a modificar el siguiente archivo el cual es
response.xhtml y dentro del cual va el siguiente código.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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">
<ui:define name="box">
<h4><h:outputText escape="false"
value="#{UserNumberBean.response}"/></h4>
<h:form prependId="false">
<h:commandButton id="backButton" value="Back"
action="greeting" />
<body>
<ui:composition template="./template.xhtml">
<ui:define name="title">
Response
</ui:define>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Y al realizar esto podemos ver el resultado de esta página dependiendo de lo que el usuario le
proporcione, si le proporciona un numero diferente del que el programa mediante aleatoriedad
elija esta es la pagina que le mostrara.
Y al seleccionar el número que sea el que la maquina haya generado como correcto la pagina que
se desplegara será la siguiente.
Para que esto suceda tenemos que crear el Facelet.
Crear un archivo de plantilla. Abra el asistente de archivos. Seleccione la categoría JavaServer
Faces, entonces Facelets Template. Haga clic en Siguiente.
Elegimos el tipo de plantilla y el nombre, en este caso Template.
Dentro del archivo que se acaba de crear, template.java va el siguiente código.
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">Facelets Template</ui:insert></title>
</h:head>
<h:body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<ui:insert name="box">Box Content Here</ui:insert>
</div>
<div id="right" class="subContainer">
<img src="duke.png" alt="Duke waving" />
</div>
</div>
</h:body>
</html>
Y con esto podemos observar la pagina que nos sale, en la cual se van a mostrar los diferentes
resultados de nuestro programa.
Procedemos a Crear nuestro archivo Greeting.java, el cual será como nuestro index y es desde
donde comenzara a correr. Para crearlo al igual que el anterior. Abra el asistente de
archivos. Seleccione la categoría JavaServer Faces, entonces Facelets Template Client. Haga clic en
Siguiente.
Haga clic en el botón Examinar situado junto al campo de la plantilla, a continuación, utilizar el
cuadro de diálogo que aparece para desplazarse hasta el archivotemplate.xhtml que creó en la
sección anterior. Finalizamos.
Dentro de Greeting.java va el siguiente código.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="title">
Greeting
</ui:define>
<ui:define name="box">
<h4>Hi, my name is Duke!</h4>
<h5>I'm thinking of a number
<br/>
between
<span class="highlight">0</span> and
<span class="highlight">10</span>.</h5>
<h:form>
<h:inputText size="2" maxlength="2"
value="#{UserNumberBean.userNumber}" />
<h:commandButton id="submit" value="submit"
action="response" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
<h5>Can you guess it?</h5>
Y esto finalmente nos muestra la pagina ya terminada y funcionando
