Tema 3: Diseño de la capa de presentación

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Tema 3: Diseño de la capa de presentación"

Patricia Cortés Rojas
hace 5 años
Vistas:

1 escuela técnica superior de ingeniería informática Tema 3: Diseño de la capa de presentación Departamento de Lenguajes y Sistemas Informáticos Ingeniería del Software de Gestión III

2 Índice Introducción a HTML / XML, JavaScript, CSS. Introducción a JSP

3 Índice Introducción a HTML / XML, JavaScript, CSS. Introducción a JSP

4 Introducción a HTML / XML, JavaScript, CSS. HTTP TCP/IP Cliente web Servidor web Servidor de lógica de negocio Servidor de datos Servidor de aplicaciones

5 Introducción a HTML / XML, JavaScript, CSS. Procesamiento en el servidor de datos Integridad referencial. Procedimientos almacenados. Disparadores. Procesamiento en el servidor de aplicaciones CGI (C, Perl, ). Lenguajes de script (JSP, ASP, PHP, ColdFusion). Servlets (Java). Procesamiento en el cliente web JavaScript. Applets (Java). ActiveX (Microsoft). Flash (Macromedia).

6 Introducción a HTML / XML, JavaScript, CSS. Etiquetas de la estructura básica <html <html> <head <head> <title <title>título del del documento</ documento</title> title>  --> </head </head> <body <body>  --> </body </body> </html </html> <html>: marca raíz del documento. <head>: cabecera del documento, aparte del título, puede contener otra información sobre el documento. <title>: título del documento. <body>: cuerpo del documento.

7 Introducción a HTML / XML, JavaScript, CSS. Qué es XML? HTML Pedro Páramo Juán Rulfo precio: 100 pesos (contado) Contenido: caracteres elemento atributo XML <libro> <titulo> Pedro Páramo </titulo> <autor> Juán Rulfo </autor> <precio moneda= PESO modo= contado > 100</precio> </libro>

8 Introducción a HTML / XML, JavaScript, CSS. Contenido de un documento XML: Elementos y atributos y contenido <precio moneda= PTA modo= contado > 275 </precio> Tuberías de metainformación <?xml version="1.0" encoding="utf-7"?> Documento bien formado (well-formed): Estructura jerárquica de los elementos Un solo elemento raíz Sensible a mayúsculas y minúsculas Etiquetas de cierre obligatorias

9 Introducción a HTML / XML, JavaScript, CSS. HTTP SQL TCP/IP Cliente web Servidor de aplicaciones Servidor de datos Validación Validación en en cliente cliente

10 Introducción a HTML / XML, JavaScript, CSS.

11 Índice Introducción a HTML / XML, JavaScript, CSS. Introducción a JSP

12 Introducción a JSP Problema: los Servlets son difíciles de mantener (código html embebido en código java): Si modifico código HTML tengo que volver a recompilar. No puedo usar herramientas HTML Solución ideal: separar roles: Diseñador: HTML, WML, Programador: Diseño, implementación, JSP: Lenguaje de script para ser usado del lado del servidor. Tiene código java embebido en código HTML

13 Introducción a JSP, API JSP <<interface>> Servlet init() destroy() <%! <%! public publicvoid voidjspinit(){} public publicvoid voidjspdestroy(){} <<interface>> JspPage <<interface>> HttpJspPage

14 Introducción a JSP, ciclo de vida HTTP GET/POST JSP Cliente web Contenedor JSP/Servlet Traductor JSP Servlet Compilador javac.java

15 Introducción a JSP, sintáxis y estructura Los elementos JSP se diferencian de los HTML porque empiezan por <% o <jsp: Existen varios tipos de elementos: Scripting: código java embebido Directivas: información para traducir la página JSP Acciones: acciones utilizadas frecuentemente

Introducción a JSP, Scripting Declaraciones: Atributos o métodos de la clase correspondiente Expresiones: Conjunto simple de expresiones cuyo resultado es una cadena y es enviado al flujo de salida

16 Introducción a JSP, Scripting Declaraciones: Atributos o métodos de la clase correspondiente Expresiones: Conjunto simple de expresiones cuyo resultado es una cadena y es enviado al flujo de salida Scriptlets: Código Java que se ejecuta cuando llega una petición. <%! <%! String Stringcolor = azul ; azul ; int intcontador = 0; 0; String StringgetDate(){..} getdate(){..} <%= <%= expresion expresion <% <% String Stringuser = david david ; El El usuario usuario es es <%= <%= user user

17 Introducción a JSP, Directivas include: Para incluir html o jsp <%@ <%@ include includefile file = banner.html = banner.html page: Información acerca de la página <%@ <%@ page pageimport = java.util = java.util.*.* language= Java language= Java

18 Introducción a JSP, acciones <jsp:include Para incluir jsp o html. A diferencia de la directiva, la inclusión se procesa cada vez que se llama a la página <jsp:forward Para redireccionar a otro recurso. En el momento de redireccionar, el hilo de ejecución continua <jsp:include <jsp:include page page = head.jsp = head.jsp /> <jsp:forward <jsp:forward page page = error.jsp = error.jsp > <jsp:param <jsp:param name= name= type value= 1 /> value= 1 /> </jsp:forward </jsp:forward>

19 Introducción a JSP, Objetos implícitos Objeto Descripción application Es de tipo SerlvetContext out Es de tipo JspWriter response Es de tipo HttpServletResponse request Es de tipo HttpServletRequest session Es de tipo HttpSession

20 Introducción a JSP, ejemplo <html> <head> <title>hola Usuario</title> </head> <body text="#000000" bgcolor="#ffffff"> <h1>hola <%= request.getparameter("user") </h1> <% String name = request.getparameter("username"); String times = request.getparameter("times"); int limit = Integer.parseInt(times); Su nombre escrito <%= limit veces: <% for (int i=0; i<limit; i++) { <%= name <% } </body> </html>

21 !Gracias! Podemos mejorar esta lección? Mándanos un a benavides@us.es Visite la web de la asignatura

Documentos relacionados

Tema 3: Diseño de la capa de presentación

escuela técnica superior de ingeniería informática Tema 3: Diseño de la capa de presentación Departamento de Lenguajes y Sistemas Informáticos Ingeniería del Software de Gestión III Índice Introducción