Tema 3: Diseño de la capa de presentación
Anuncio
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 a HTML / XML, JavaScript,
CSS.
♦ Introducción a JSP
Índice
♦ Introducción a HTML / XML,
JavaScript, CSS.
♦ Introducción a JSP
Introducción a HTML / XML,
JavaScript, CSS.
HTTP
HTTP
TCP/IP
TCP/IP
Cliente web
Servidor
web
Servidor
de lógica
de negocio
Servidor de aplicaciones
Servidor
de datos
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).
Introducción a HTML / XML,
JavaScript, CSS.
♦ Etiquetas de la estructura básica
<<html>
html>
<<head>
head>
<<title>Título
title>Título del
</title>
deldocumento
documento</title>
<!
-- otra
>
<!-otrainformación
informaciónde
decabecera
cabecera--->
</
head>
</head>
<<body>
body>
<!
-- contenido
>
<!-contenidodel
deldocumento
documento--->
</
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.
Introducción a HTML / XML,
JavaScript, CSS.
♦ ¿Qué es XML?
HTML
<b> Pedro P&aacute;ramo </b>
<br> Ju&aacute;n Rulfo
<br>Precio: <i> 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>
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
Introducción a HTML / XML,
JavaScript, CSS.
HTTP
HTTP
TCP/IP
TCP/IP
Cliente web
SQL
SQL
Servidor de aplicaciones
Validación
Validaciónen
en
cliente
cliente
Servidor
de datos
Introducción a HTML / XML,
JavaScript, CSS.
http://www.csszengarden.com
Índice
♦ Introducción a HTML / XML, JavaScript,
CSS.
♦ Introducción a JSP
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
Introducción a JSP, API JSP
<<interface>>
Servlet
•init()
•destroy()
<<interface>>
JspPage
<%!
<%!
public
(){}
publicvoid
voidJspInit
JspInit(){}
public
(){}
publicvoid
voidJspDestroy
JspDestroy(){}
%>
%>
<<interface>>
HttpJspPage
Introducción a JSP, ciclo de vida
HTTP
HTTP
GET/POST
GET/POST
JSP
Contenedor
JSP/Servlet
Cliente web
Traductor
JSP
Servlet
Compilador
javac
.java
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
<%!
<%!
String
Stringcolor
color==“azul”;
“azul”;
int
intcontador
contador==0;
0;
String
(){..}
StringgetDate
getDate(){..}
%>
%>
♦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.
<%=
<%=expresion
expresion%>
%>
<%
<%
String
david”;
Stringuser
user==““david”;
%>
%>
El
Elusuario
usuarioes
es<%=
<%=user
user%>
%>
Introducción a JSP, Directivas
♦include:
Para incluir html o jsp
♦page:
Información acerca de la página
<%@
banner.html” %>
<%@include
includefile
file=“
=“banner.html”
%>
<%@
java.util.*”
<%@page
pageimport
import=“
=“java.util.*”
language
=“Java”%>
language=“Java”%>
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:include
jsp:include page
head.jsp”/>
page=“
=“head.jsp”/>
♦<jsp:forward
Para redireccionar a otro
recurso. En el momento de
redireccionar, el hilo de
ejecución continua
<<jsp:forward
jsp:forward page
error.jsp”>
page=“
=“error.jsp”>
<<jsp:param
jsp:param name
=“type” value
=“1”/>
name=“type”
value=“1”/>
</
jsp:forward>
</jsp:forward>
Introducción a JSP, Objetos
implícitos
Objeto
application
out
response
request
session
Descripción
Es de tipo SerlvetContext
Es de tipo JspWriter
Es de tipo HttpServletResponse
Es de tipo HttpServletRequest
Es de tipo HttpSession
Introducción a JSP, ejemplo
<html>
<head>
<title>Hola Usuario</title>
</head>
<body text="#000000" bgcolor="#ffffff">
<h1>Hola <%= request.getParameter("user") %> </h1>
<br><br><br>
<%
String name = request.getParameter("userName");
String times = request.getParameter("times");
int limit = Integer.parseInt(times); %>
Su nombre escrito <%= limit %> veces:<br>
<%
for (int i=0; i<limit; i++) {
%>
<b><%= name %></b> <br>
<%
}
%>
</body>
</html>
!Gracias!
♦ ¿Podemos mejorar esta lección?
♦ Mándanos un email a [email protected]
♦ Visite la web de la asignatura www.lsi.us.es
