Frameworks MVC para desarrollo de UITES

Unidad de Investigación en Telemedicina y e-Salud (UITES)

Frameworks MVC de
desarrollo

Propuesta de adopción de tecnologías de
desarrollo web en la UITES
Jesús Cáceres Tello, Santiago Pérez
Madrid, ISCIII, 08/06/2011

Índice

01 Las preguntas que nos debemos hacer…
02 Introducción a los patrones de diseño
03 El patrón MVC
04 Definición de frameworks de desarrollo
05 Aplicaciones web vs. Aplicaciones escritorio
06 Frameworks MVC
06.01 Tecnología Java

Frameworks MVC de desarrollo
06.02 Tecnología PHP
07 Conclusiones
ANEXO: frameworks “web móviles”

2

01 Las preguntas que nos debemos hacer…

 Las decisiones tecnológicas, ¿afectan de igual manera al futuro de un
proyecto?

 ¿Es acertado pensar en el desarrollo de software como una
“commodity”?

 ¿Es asumible el coste de un cambio de tecnología en la fase de
desarrollo de un proyecto?

 ¿Qué coste tendrá el mantenimiento del software?

 ¿Es eficiente rehacer una y otra vez soluciones ya desarrolladas en
otros proyectos?

3

02 Introducción a los patrones de diseño
Máxima: no reinventar la rueda
Definición: Un patrón de diseño es una solución a un problema de
diseño en un determinado contexto.

 No pertenecen a un determinado lenguaje de programación, aunque se suelen
representar en notación UML (-> Orientación a Objetos).

 Se clasifican en –sin ser una lista cerrada-:
– Patrones de creación
– Patrones estructurales
– Patrones de comportamiento
– Patrones de partición
– Patrones de concurrencia Tienen su raíz en la

reutilización del software
– Etc.
 Reducción de tiempos de desarrollo*
 Facilidad de mantenimiento
 Eficiencia
 Consistencia
 Fiabilidad

4
*El 80% del esfuerzo en la fase de desarrollo esta en el 20% del código desarrollado

03 El patrón MVC
Objetivo: independizar la visualización del negocio
Definición: MVC* (Model/View/Controler) es un patrón de arquitectura
de software que separa los datos de una aplicación, la interfaz de
usuario, y la lógica de control en tres componentes distintos.

COMPONENTES DEL PATRÓN MVC
 Modelo: contiene los datos gestionados por la aplicación y las lógicas de negocio.

 Vista: presenta el modelo en un formato adecuado para interactuar (usualmente es la interfaz de
usuario).
 Controlador: responde a eventos -normalmente acciones del usuario-, e invoca peticiones al modelo y,
probablemente, a la vista.

*Descrito por primera vez en 1979 por Trygve Reenskaug, e implementado por Steve Burbeck en su artículo “Programación
de Aplicaciones en Smalltalk-80(TM): Como utilizar Modelo Vista Controlador”. 5

04 Definición de frameworks de desarrollo
Reutilización de software
Definición: Un framework proporciona una guía arquitectónica para
dividir el diseño en módulos y definir sus responsabilidades y
colaboraciones.

 Un framework puede implementar uno o varios patrones de diseño (p.e. MVC),
o ninguno…
 Existen frameworks para ámbitos específicos: web services, web dinámica
(con AJAX), procesos de negocio (BPMS), etc.
 Los frameworks se encargan de los pequeños detalles permitiendo al
programador dedicar más tiempo y esfuerzos a las partes realmente
importantes de las aplicaciones. Es decir, permiten no destinar mucho tiempo
a realizar tareas repetitivas que aportan escaso o nulo valor a las aplicaciones.

VENTAJAS DESVENTAJAS

Desarrollo rápido  Dependencia del código desarrollado a
Reutilización de software ese framework
Diseño uniforme  Recursos hardware necesarios
Cuatro cuatro cuatro cuatro
 Curva de aprendizaje

6

05 Aplicaciones web vs. Aplicaciones escritorio
¿Por qué todo tiende al “Cloud computing” y al “SaaS”?

 Todos los usuarios utilizan siempre la última versión.
 No requiere instalación para los usuarios.
 Accesible desde cualquier equipo sin preinstalación de ningún
componente (a excepción de los necesarios en el navegador).
 Favorece la movilidad no dependiendo del SO en el que se ejecute.
 Seguridad en la aplicación.
 En línea con la Web 2.0
 Mayor fiabilidad al tratarse de un browser en vez de una ventana de
escritorio.
 Se puede medir fácilmente lo que están haciendo los usuarios (tipos

de acciones, tiempos, etc...)
 Los datos están centralizados.
 Mayor facilidad en el soporte de
la aplicación.

7

06 Frameworks MVC
Frameworks con orientación web
Existen muchos frameworks en el mercado que implementan el patrón MVC y con
diferentes tecnologías. La siguiente lista procede de Wikipedia*:

*Frameworks MVC en Wikipedia: http://es.wikipedia.org/wiki/Modelo_Vista_Controlador 8

05.01 Frameworks MVC. Tecnología Java. Struts
Visión general del proyecto

9

EL MODELO

10

LA VISTA

11

EL CONTROLADOR I: El gestor de acciones
Archivo de configuración de Struts.
SECCIONES DE struts-config.xml
<form-beans> : Contiene las definiciones de los beans.
 Se define un elemento <form-beans> por cada bean de formulario,
 Tiene los siguientes atributos importantes:
 Name: Identificador único para referenciarlo en los mapeos de acciones
 Type: ruta completa de la clase Java del bean de formulario
<action-mappings>: Contiene las definiciones de acciones
 Se utiliza un elemento <action> por cada acción.

 Se definen los siguientes atributos :
 Path: nombre de la clase action en relación al contexto de la aplicación
 Type: ruta completa de la clase Java de la clase Action
 Name: nombre del <form-bean> para usar con esta action, si corresponde
 Forward: ruta del archivo de la vista (JSP) a llamar
12

EL CONTROLADOR II: El fichero struts-config.xml

13

EL CONTROLADOR III: Las clases Action

 Una clase Action de una aplicación Struts extiende a la clase
org.apache.struts.action.Action.
 Una clase Action actúa como un envoltorio para la lógica
de negocio y provee una interfaz al modelo.
 Es el mediador entre la vista y el Modelo, ya que transmite
los datos desde la Vista hacia el proceso específico del
modelo y retorna los resultados en sentido contrario.

Sobrecarga del método execute() Parámetros del método execute()

mapping: El ActionMapping usado para
seleccionar esta instancia
public ActionForward execute( ActionMapping mapping, form - ActionForm bean para esta
ActionForm form, petición, si existe
javax.servlet.http.HttpServletRequest request, request - La petición HTTP que se está
javax.servlet.http.HttpServletResponse response
) throws java.lang.Exception
procesando
response - La respuesta HTTP que se
está creando.

14

EL CONTROLADOR IV: Ejemplo Action

15

EL CONTROLADOR V: Las clase ActionForm

 Un ActionForm es un JavaBean que se extiende
org.apache.struts.action.ActionForm.
 Una de las tareas que consume mucho trabajo es la
interacción con formularios, ya sea para editar u obtener
nueva información.
 Las comprobaciones, la gestión de errores, el volver a
presentar el mismo form al usuario con los valores que puso y
los mensajes de error están soportados por Struts con los
Action Forms y JSP.
 Implementa los métodos get y set para cada input de un
formulario de una página, y los métodos validate y reset.

Sobrecarga del método validate() Parámetros del método validate()

mapping: El ActionMapping usado para
public ActionErrors validate(ActionMapping seleccionar esta instancia
mapping,HttpServletRequest request) { }
request - La petición HTTP que se está
procesando
16

EL CONTROLADOR VI: Ejemplo ActionForm

17

Resultado Final

18

05.01 Frameworks MVC. Tecnología Java. JSF
Introducción a JSF

 Es posterior a Struts
 Está basado en componentes UI (User Interface)
 Utiliza JSP para el despliegue de páginas
 Asocia cada componente gráfico a los datos (beans de
respaldo)
 La capa de control está definida por un archivo XML=> control
de eventos y errores
 Validación en cliente y en servidor
 …

WEB SERVICES
CONTROLADOR VISTA MODELO BASES DE DATOS
…

Vista Inicial
Enlaces de interés
Invocar vistas
http://www.sicuma.uma.es/sicuma/Formacion/documentacion/JSF.pdf Solicitar datos
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=EclipseJSF Obtener datos
http://www.proactiva-calidad.com/java/jsf/index.html
http://www.coreservlets.com/JSF-Tutorial/ Recuperar
datos
http://www.desarrolloweb.com/articulos/2380.php Actualización
http://www.desarrolloweb.com/articulos/2404.php de
http://blog.jotadeveloper.com/2008/09/07/ejemplo-richfaces-jsf/ contenidos
19

Visión general del proyecto

MODELO
VISTA
CONTROLADOR

20

EL MODELO

21

LA VISTA

22

EL CONTROLADOR

23

05.01 Frameworks MVC. Tecnología Java. Play
Características I
 Requiere Java 5
 Máxima productividad:
– no es necesario ni compilar ni desplegar ni reinicir el contenedor
web.
– Dispone de un cargador de clases propio

24

Características II

 Completamente stateless (sin estado): La
información de sesión se guarda en coockies.

 Fundamentado en HTTP, permite desarrollar
aplicaciones RESTfull

 Dispone de un motor de plantillas basado en
Groovy:
– Herencia entre plantillas (layout heredando de layout)

 Integración con JDBC o JPA e Hibernate
 No es JavaEE

25

Instalación

 http://www.playframework.org/download

26

HelloWorld con Play

27

06.02 Frameworks MVC. Tecnología PHP.
Symfony – Principales características (I)
 Desarrollado con PHP 5, compatible con la mayoría de gestores de bases de datos
(MySQL, PostgreSQL, Oracle y SQL Server) y multiplataforma (Unix, Linux, Windows).

 El desarrollador solo debe configurar aquello que no es convencional.

 Symfony automatiza la mayoría de elementos comunes de los proyectos web, como por
ejemplo:

 Posee una capa de internacionalización para la traducción de los datos y de la
interfaz, así como la adaptación local de los contenidos.
 La capa de presentación utiliza plantillas y layouts que pueden ser creados por
diseñadores HTML sin ningún tipo de conocimiento del framework.
 Los formularios incluyen validación automatizada y relleno automático de datos

("repopulation").
 La gestión de la caché reduce el ancho de banda utilizado y la carga del servidor.
 Autenticación y gestión de credenciales.
 Sistema de enrutamiento y URL limpias optimizadas para los buscadores.
 Soporte de e-mail incluido.
 Listados con paginación automatizada, el filtrado y la ordenación de datos.
 Interacciones con Ajax fáciles de implementar mediante helpers.
 Integración con PEAR (PHP Extension and Application Repository), un sistema de
distribución para componentes PHP reutilizables". 28

Symfony – Principales características (II)
 Mapeo de Objetos a Bases de datos (ORM - object-relational mapping). Transforma automáticamente las
llamadas a los objetos en consultas SQL optimizadas para el sistema gestor de bases de datos que se está
utilizando en cada momento. Utiliza Phing, una utilidad que usa Propel para generar las clases del modelo.

 Desarrollo rápido de aplicaciones (RAD – Rapid Application Development).

 Utiliza YAML para configurar cualquier elemento. Es un formato para serializar datos que es fácil de
procesar por las máquinas, fácil de leer para las personas y fácil de interactuar con los lenguajes de script.

 El proyecto se estructura en: aplicaciones, módulos y acciones
– Proyecto: “Un conjunto de servicios y operaciones disponibles bajo un determinado nombre de
dominio y que comparten el mismo modelo de objetos". Contiene una o más aplicaciones.
– Aplicación: “Agrupación lógica de operaciones. Se compone de uno o más módulos.”
– Módulo: “Representa a una página web o a un grupo de páginas con un propósito relacionado (p.e.
alta de usuario, carrito de la compra, etc.). Se compone de una o más acciones”.
– Acción: “Representa cada una de las operaciones que se puede realizar en un módulo (p.e. el

módulo carrito de la compra puede definir acciones como añadir, mostrar y actualizar).”

29

Symfony – Estructura de un proyecto
 La raíz de un proyecto Symfony tiene los siguientes directorios:

apps/ -> Contiene un directorio por cada aplicación del proyecto.
frontend/
backend/
cache/ -> Versión cacheada de la configuración, acciones y plantillas.
config/ -> Configuración general del proyecto.
data/ -> Archivos relacionados con los datos (p.e. el esquema de la BBDD, SQLs, etc.).
sql/
doc/ -> Documentación del proyecto generada con PHPdoc.
lib/ -> Almacena las clases y librerías externas.
model/ -> Almacena el modelo de objetos del proyecto.
log/
plugins/ -> Almacena los plugins instalados en la aplicación.
test/ -> Pruebas unitarias y funcionales escritas en PHP.

bootstrap/
unit/
functional/
web/ -> Raíz del servidor web, único directorio accesible desde el exterior
css/
images/
js/
uploads/

30

Symfony – Estructura de una aplicación y de un módulo
 La raíz de una aplicación tiene los siguientes directorios:

[nombre_app]/ -> Raíz de la aplicación.
config/ -> Archivos YAML de configuración de la aplicación.
i18n/ -> Archivos de internacionalización.
lib/ -> Clases y librerías externas utilizadas por la aplicación.
modules/ -> Módulos de la aplicación.
templates/ -> Plantillas globales de la aplicación.
layout.php -> Layout principal con el que se muestras las plantillas de los módulos

 La raíz de un módulo tiene los siguientes directorios:

[nombre_modulo]/ -> Raíz del módulo.
actions/ -> Acciones del módulo.

action.class.php -> Archivos con el código de la(s) acción(es). Puede haber varios.
config/ -> Archivos de configuración del módulo.
lib/ -> Clases y librerías externas utilizadas por el módulo.
templates/ -> Plantillas correspondientes a las acciones del módulo.
indexSuccess.php

31

Symfony – Ejemplo “Mostrar artículos de una BBDD” (I)
 Código PHP sin ningún framework:

<?php Sólo funciona si la BBDD
// Conectar con la base de datos y seleccionarla es MySQL
$conexion = mysql_connect('localhost', 'miusuario', 'micontrasena');
mysql_select_db('blog_db', $conexion);

// Ejecutar la consulta SQL
$resultado = mysql_query('SELECT fecha, titulo FROM articulo', $conexion);
?>
No existe protección
frente a errores
<html>
<head>
<title>Listado de Artículos</title>
</head>
<body>
<h1>Listado de Artículos</h1> HTML y PHP
<table>
<tr><th>Fecha</th><th>Titulo</th></tr>
entrelazado
<?php
// Mostrar los resultados con HTML
while ($fila = mysql_fetch_array($resultado, MYSQL_ASSOC))
{

echo "t<tr>n";
printf("tt<td> %s </td>n", $fila['fecha']);
printf("tt<td> %s </td>n", $fila['titulo']);
echo "t</tr>n";
}
?>
</table>
</body>
</html> Resultado: Aplicación
<?php difícil de mantener y
// Cerrar la conexion
mysql_close($conexion);
actualizar
?>
32

Symfony – Ejemplo “Mostrar artículos de una BBDD” (II)
 Código PHP, primera aproximación al MVC:

modelo.php
<?php

function getTodosLosArticulos()
{
// Conectar con la base de datos y seleccionarla
$conexion = mysql_connect('localhost', 'miusuario', 'micontrasena');
mysql_select_db('blog_db', $conexion);
index.php (controlador)
<?php
$resultado = mysql_query('SELECT fecha, titulo FROM articulo', $conexion);
// Incluir la lógica del modelo
require_once('modelo.php');
vista.php
// Crear el array de elementos para la capa de la vista
$articulos = array(); // Obtener la lista de artículos
while ($fila =<html>
mysql_fetch_array($resultado, MYSQL_ASSOC)) $articulos = getTodosLosArticulos();
{ <head>
$articulos[] = $fila;
<title>Listado de Artículos</title> // Incluir la lógica de la vista
} </head> require('vista.php');

<body>
// Cerrar la conexión
<h1>Listado de Artículos</h1> ?>
<table>
<tr><th>Fecha</th><th>Título</th></tr>
return $articulos;<?php foreach ($articulos as $articulo): ?>
} <tr>
?> <td><?php echo $articulo['fecha'] ?></td>
<td><?php echo $articulo['titulo'] ?></td>
</tr>
<?php endforeach; ?>
</table>
</body>
</html>

33

Symfony – Ejemplo “Mostrar artículos de una BBDD” (III)
 Código PHP, segunda aproximación al MVC: Modelo (acceso a datos)
modelo.php
Modelo (abstracción de la BBDD)
function getTodosLosArticulos()
modelo.php {
// Conectar con la base de datos
<?php
$conexion = crear_conexion('localhost', 'miusuario', 'micontrasena');
function crear_conexion($servidor, $usuario, $contrasena)
{
return mysql_connect($servidor, $usuario, $contrasena);
$resultado = consulta_base_de_datos('SELECT fecha, titulo FROM articulo',
}
'blog_db', $conexion);
function cerrar_conexion($conexion)
{
// Crear el array de elementos para la capa de la vista
$articulos = array();
} Controlador
while ($fila = obtener_resultados($resultado))
function consulta_base_de_datos($consulta, $base_datos, $conexion)
{ index.php
{
$articulos[] = $fila; <?php
mysql_select_db($base_datos, $conexion);
}
return mysql_query($consulta, $conexion);
} // Incluir la lógica del modelo
// Cerrar la conexión require_once('modelo.php');
function obtener_resultados($resultado)
cerrar_conexion($conexion);
{
return $articulos; // Obtener la lista de artículos
return mysql_fetch_array($resultado, MYSQL_ASSOC);
} $articulos = getTodosLosArticulos();
}
?>

// Incluir la lógica de la vista
require('vista.php');
Layout de la vista
vista.php Plantilla de la vista
?>

<html> miplantilla.php
<head> Lógica de la vista <h1>Listado de Artículos</h1>
<title><?php echo $titulo ?></title> vista.php <table>
</head> <tr><th>Fecha</th><th>Título</th></tr>
<?php
<body> <?php foreach ($articulos as $articulo): ?>
<?php echo $contenido ?> <tr>
$titulo = 'Listado de Artículos';
</body> <td><?php echo $articulo['fecha'] ?></td>
$contenido = include('miplantilla.php');
</html> <td><?php echo $articulo['titulo'] ?></td>
?> </tr>
<?php endforeach; ?> 34
</table>

Symfony – Ejemplo “Mostrar artículos de una BBDD” (III)
Una programación correcta incluiría la realización de los siguientes scripts en cada capa:

 La capa del Modelo
– Abstracción de la base de datos ←“Creole” lo hace automáticamente
– Acceso a los datos ←“Propel” genera las clases del modelo
 La capa de la Vista
– Layout
– Lógica de la vista
– Plantilla
 La capa del Controlador
– Controlador frontal ←Symfony crea uno por defecto

– Acción

35

Symfony – Ejemplo “Mostrar artículos de una BBDD” (IV)
Una programación correcta incluiría la realización de los siguientes scripts en cada capa:
miproyecto/apps/miaplicacion/templates/layout.php
 La capa del Modelo <html>
<head>
– Abstracción de la base de datos <?php echo include_title() ?>
</head>
– Acceso a los datos <body>
<?php echo $sf_data->getRaw('sf_content') ?>
 La capa de la Vista </body>
</html>
– Layout
– Lógica de la vista miproyecto/apps/miaplicacion/modules/weblog/config/view.yml
listadoSuccess:
– Plantilla metas: { title: Listado de Artículos }
 La capa del Controlador
– Controlador frontal
miproyecto/apps/miaplicacion/modules/

– Acción weblog/templates/listadoSuccess.php
<h1>Listado de Artículos</h1>
<table>
miproyecto/apps/miaplicacion/ <tr><th>Fecha</th><th>Título</th></tr>
modules/weblog/actions/actions.class.php <?php foreach ($articulos as $articulo): ?>
<tr>
<?php <td><?php echo $articulo->getFecha() ?></td>
class weblogActions extends sfActions <td><?php echo $articulo->getTitulo() ?></td>
{ </tr>
public function executeListado() <?php endforeach; ?>
{ </table>
$this->articulos = ArticuloPeer::doSelect(new Criteria());
}
}
36
?>

07Conclusiones
 No desaprovechemos millones de años de evolución…
La rueda ya fue inventada.

 Los frameworks permiten que nos centremos más en el desarrollo del
“negocio” y menos en los detalles que no aportan valor (aunque sean
imprescindibles).

 Se debe buscar el punto de equilibrio entre el
coste de utilización/aprendizaje de un framework
y el coste del uso/mantenimiento posterior.

 La “reutilización” y la “modularización” deben estar presentes desde el primer
momento en el que comience el diseño de una aplicación.

37

Anexo: frameworks “web móviles” (I)
 Están basados en html 5 y css3

 Symbian, Windows Phone 7, IOS, Android, Blackberry, etc…

 Desarrollos orientados a sistemas de información y no a
juegos

Algunos de ellos son:

 JQuery Mobile

 Sencha Touch
 DHTMLX Touch
 Jo HTML5

38

Anexo: frameworks “web móviles” (II)
jQuery Mobile
 Desarrollado por Team jQuery
 Permite utilizar Ajax
 Facilidad en la transición de páginas. Themes.

A: Alta Compatibilidad
B: Mediana Compatibilidad
C: Baja Compatibilidad

39

Anexo: frameworks “web móviles” (III)
Sencha Touch

 Conjunto de librerías de widgets de usuario, control para
eventos táctiles
 Permite la introducción de video y audio
 Dispone de proxy local para guardar datos sin conexión
 Petición de datos mediante Ajax, Jsonp o YQL

40

Anexo: frameworks “web móviles” (IV)
DHTMLX Touch

 Librería de HTML5 y JavaScript

 Es gratuita con licencia GPL

 Dispone de un entorno de programación visual

41

Anexo: frameworks “web móviles” (V)
Enlaces de interés
 jQuery Mobiles
– http://www.jqmgallery.com/
– http://wwwhatsnew.com/2011/03/31/introduccion-a-jquery-mobile/
– http://www.baluart.net/articulo/ejemplo-de-aplicacion-web-movil-con-
jquery-mobile
– http://geeks.ms/blogs/gperez/archive/2010/10/22/tutorial-creando-una-
app-con-jquery-mobile-webmatrix-y-razor.aspx

 Sencha Touch
– http://www.sencha.com/products/touch/
– http://dev.sencha.com/deploy/touch/getting-started.html

– http://miamicoder.com/2010/creating-sencha-touch-toolbar-buttons/
– http://mobile.tutsplus.com/articles/news/sencha-touch-html5-mobile-
framework/
– http://www.slideshare.net/davidkaneda/sencha-touch-workshop

 DHTMLX Touch
– http://www.dhtmlx.com/index.shtml
42

Gracias por su atención
Jesús Cáceres Tello
jesus.caceres@isciii.es
Tlf: +34 918 222 479

Santiago Pérez de la Cámara
sperezd@isciii.es
Tlf: +34 918 222 572

Unidad de Investigación en Telemedicina y e-Salud
Avda. Monforte de Lemos, 5
28029 - Madrid. España

www.isciii.es

Frameworks MVC para desarrollo de UITES

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Frameworks MVC para desarrollo de UITES

Similaire à Frameworks MVC para desarrollo de UITES (20)

Dernier

Dernier (20)

Frameworks MVC para desarrollo de UITES