Você está na página 1de 34

MODULO JAVA WEB APPLICATION I

Sesin 01 Aplicaciones Web

1
citechcursos@yahoo.com

Agenda

1 2 3 4 5

Introduccin a las Aplicaciones Web Aplicaciones Web Control de Solicitudes de Aplicaciones Web Interaccin Cliente Web y Aplicacin Web con Servlets Mdulos Web

Objetivos

Al finalizar la sesin, usted estar en capacidad de:

Conocer los Componentes Web Entender el funcionamiento del Control de Solicitudes de Aplicaciones Web Diferenciar los elementos del Mdulo Web

Introduccin a las aplicaciones Web

Una aplicacin Web es una extensin dinmica de un servidor web o de aplicaciones. Las aplicaciones web son de los siguientes tipos: Orientada a presentacin : Genera pginas web interactivas que contienen varios tipos de lenguajes de marcas (HTML, XHTML, XML, etc) y contenido dinmico como respuesta a las solicitudes Orientada a servicios: Implementan servicios web finales. Las aplicaciones Orientado a Presentacin suelen ser los clientes de las aplicaciones web orientadas a servicios.

Aplicaciones Web
En la plataforma Java EE, los componentes web proporcionan la capacidad para extender la dinmica de un servidor web.

Los componentes Web pueden ser:

Servlets Java Pginas web implementada con tecnologa JavaServer Faces Servicios web finales Pginas JSP

Control de Solicitudes de Aplicaciones Web

Cliente Web

Solicitud HTTP

Http Servlet Request

Componentes Web
5 3

Base de datos

Respuesta HTTP

Http Servlet Response

Componentes JavaBeans

Base de datos 6

Interaccin Cliente Web y Aplicacin Web con Servlet

El cliente enva una solicitud HTTP al servidor web. Un servidor web que implementa la tecnologa Java Servlet y JavaServer Pages convierte la solicitud en un objeto HttpServletRequest. Este objeto se entrega a un Componente Web, que puede interactuar con los 3 componentes JavaBeans o 4 una base de datos para generar contenido dinmico. El componente web puede generar un HttpServletResponse o puede pasar la solicitud a otro componente web. Un componente web finalmente genera un objeto HttpServletResponse. El servidor web convierte este objeto en una respuesta HTTP y lo devuelve al cliente.

Mdulo Web

Mdulo Web

En la arquitectura Java EE, los componentes Web y los archivos de contenido web esttico, como imgenes, son llamados recursos web. Un mdulo web es la unidad mnima de despliegue y utilizable de los recursos web. Adems de los componentes web y recursos web, un mdulo web puede contener otros archivos: Clases de utilidad del lado del servidor, tales como carrito de compra Clases del lado del clientes, como applets y clases de utilidad

Estructura del Mdulo Web


El directorio de nivel superior de un mdulo web es el document root de la aplicacin. El document root contiene un subdirectorio llamado WEB-INF, que puede contener los siguientes archivos y directorios: classes: un directorio que contiene las clases del lado del servidor: servlets, archivos de clase Enterprise bean, las clases de utilidades y componentes JavaBeans tags: Un directorio que contiene los archivos de etiquetas, que son implementaciones de bibliotecas de etiquetas lib: Un directorio que contiene los archivos JAR que contienen Enterprise beans, y las bibliotecas de clases Descriptores de despliegue, tales como web.xml (descriptor de despliegue de la aplicacin Web) y ejb-jar.xml (un descriptor de despliegue
10

EJB)

Aplicacin Web con Servlet


Contenedor
Web browser
1

Contenedor lgico

controlador

cliente servlet modelo

vista

componente

11

Aplicacin Web con Servlet


Contenedor
Web browser
4

11

Contenedor lgico

cliente servlet
6 8 7

10

request componente

12

Fases del Ciclo de Vida JSF

Restaurar vista

Aplicar valores de solicitud Procesar validaciones Actualizar valores del modelo Invocar aplicacin

Renderizar respuesta

13

Fases del Ciclo de Vida JSF

Restaurar vista: Restaura o crea un rbol de componentes del lado del servidor (View) en memoria para representar la informacin UI de un cliente. Aplicar valores de solicitud: Actualiza los componentes del lado del servidor con datos nuevos del cliente. Procesar validaciones: Realiza la validacin y conversin de tipo de datos sobre los nuevos datos. Actualizar valores del modelo: Actualiza el modelo de objetos del lado del servidor con nuevos datos. Invocar aplicacin: Invoca cualquier lgica de aplicacin necesaria para cumplir con la solicitud y navegar a una pgina nueva si es necesario. Renderizar respuesta: Guarda el estado y renderiza una respuesta al cliente solicitante.

14

Representacin del lado del servidor del UI Cliente

15

rbol de Componentes UI (Vista)

16

Fase 2: Aplicar valores de solicitud

17

Fase 3: Procesar Validaciones

Mensajes de error de validacin

18

Fase 4: Actualizar valores del Modelo

19

Fase 5: Invocar Aplicacin

20

Fase 6: Renderizar respuesta

21

Etiquetas JSF (Java Server Faces)

outputText UIForm outputLabel UIOutput outputLink outputFormat UIInput

inputText inputSecret inputHidden inputTextArea

22

UIForm - UIOutput

Etiqueta JSF UIForm form


<h:form id="frmIngreso"> </h:form>

Resultado renderizado

Cdigo fuente HTML

No renderizado

<h:form id="frmIngreso"> <h:outputText id="txtName value=Nombres/> </h:form>

UIOutput outputText
<h:outputText value="#{ejemploMB.codigoPostal}"/>

10032

10032

outputLabel
<h:outputLabel for=direccion"> <h:outputText id=txtDireccion" value=Direccion Usuario"/> </h:outputLabel>

Direccion Usuario

<span id="jsftags:txtDireccion"> Direccion Usuario</span>

23

UIOutput

Etiqueta JSF UIOutput outputLink


<h:outputLink value="#{msg['jsfstudio.home.url']"> <f:verbatim>JSF Studio</f:verbatim> </h:outputLink>

Resultado renderizado

Cdigo fuente HTML

JSF Studio

<a href="http://www.jsf-studio.com"> JSF Studio </a>

outputFormat
<h:outputFormat value="#{msg.jsfstudioThankYou}"> <f:param value=Estimado Usuario"/> <f:param id=nombreProducto" value="#{msg['jsfstudio.etiqueta']}"/> </h:outputFormat> Gracias, Estimado Usuario, por probar JSF Studio!

Gracias, Estimado Usuario, por probar JSF Studio!

24

UIInput

Etiqueta JSF UIInput inputText


<h:inputText id=direccion" value="#{ejemploMB.direccion}" />

Resultado renderizado

Cdigo fuente HTML

<input type="text" name="jsftags:_idl" value=Av Amazonas" />

inputSecret
<h:inputSecret redisplay="false" value="#{ejemploMB.password}" /> <input id="jsftags:password" type="password" name="jsftags:password" value="secret" />

inputHidden
<h:inputHidden id=oculto" value=preferenciaUsuario" />

No renderizado

<input id="jsftags:oculto" type="hidden" name="jsftags:oculto" value=preferenciaUsuario" />

25

UIInput

Etiqueta JSF UIInput inputTextArea


<h:inputTextarea id="textArea" rows="4" cols="7" value=Aqui va el texto"/>

Resultado renderizado

Cdigo fuente HTML

<textarea id="jsftags:textArea" name="jsftags:textArea" cols="5 rows="3"> Aqu va el texto </textarea>

26

Etiquetas JSF (Java Server Faces)

commandButton UICommand commandLink UIGraphic graphicImage

UIMessage UIMessages

message

UISelectBoolean

selectBooleanChec kbox

27

UICommand

Etiqueta JSF UICommand commandButton


<h:commandButton id=submit" value="#{ejemploMB.cabeceraBoton}" action=pagina2"> </h:commandButton>

Resultado renderizado

Cdigo fuente HTML

<input id="_id0:submit" type="submit" name="_id0:submit" value=Enviar"/>

commandLink
<h:commandLink id="link" action="goto"> <h:outputText value="#{ejemploMB.nombreLink}"/> </h:commandLink> <a id="_id0:link" href="#" onclick= "document.forms['_id0']['_id0:link'].value= '_id0:link'; document.forms['_id0'].submit(); return false;">Pagina Siguiente</a>

Pagina Siguiente

28

UIMessage - UIMessages

Etiqueta JSF UIMessage - UIMessages message


Ingresar Direccion: <h:message style="color: red" for=txtDireccion" /> <h:inputText id=txtDireccion" value="#{ejemploMB.direccion}" required="true"/> <h:commandButton action=guardar" value=Guardar"/>

Resultado renderizado

Cdigo fuente HTML

Ingresar Direccion: <span style="color: red"> Validation Error: Value is required. </span> <input id="jsftags:txtDireccion" type="text" name="jsftags:txtDireccion value="" /> <input type="submit" name="jsftags:_id1" value=Guardar" />

29

Etiquetas JSF (Java Server Faces)


selectOneRadio

UISelectOne

selectOneMenu

selectOneListBox

selectManyCheckboxList

UISelectMany

selectManyMenu

selectManyListbox

30

Etiquetas JSF (Java Server Faces)

panelGrid UIPanel (Grid - Group) panelGroup

dataTable UIData - UIColumn column

31

Etiquetas JSF (Java Server Faces)

UISelectItems

selectItems

UISelectItem

selectItem

32

Espacio para preguntas

33

Muchas gracias!

citechcursos@yahoo.com