Prctica 4 Herramientas Case

Ksenia Belova Alejandro Martn Mlaga Kevin Garca Guilabert

21/03/2012

Indice Descripcin Prueba Manual o Tutorial Conclusiones Bibliografa 3 5 8 13 16 16

1Descripcin
Introduccin VisualWADE consiste en que con una combinacin de conceptos simples (constructores de modelado), el crear cualquier tipo web, un portal bsico hasta un comercio electrnico. VisualWADE es una aproximacin dirigida por el modelo MDA (Model-Driven Architecture). Este modelo se base en el anlisis de requisitos, el diseo de alto nivel, y el prototipado rpido. De esta forma un producto, en teste caso un sitio web, evoluciona de forma suave desde el primer prototipo al final, esta forma de desarrollo con lleva que el producto tenga un mantenimiento continuo durante su desarrollo. Con aparecen nuevas ideas o requisitos solo es necesario realizar las modificaciones en el modelo y general el nuevo cdigo. VisualWADE aprovecha unos conceptos bien conocidos para poder representar la complejidad de las aplicaciones web reales. SE usa el mtodo OOH (object oriented hypermedia) que nos permite modelar espacios web basndonos en UML. Los esquemas y datos capturados se compilan y dan como resultados una presentacin por defecto del producto. Esta puede ser refinada con una herramienta de diseo para llegar a la apariencia final de la web. Caractersticas -Modelo de dominio: La forma de trabajo de la aplicacin es a travs de un modelo de dominio representado con un diagrama de clases. Estos diagramas estn basados en UML, si se conocen las tcnicas de anlisis y diseo de programacin orientada a objetos resulta sencillo moverse por los diagramas. La interfaz es sencilla, pero potente, tiene un asistente de usuarios que nos acompaa durante la creacin de los diagramas. Con los diferentes mens se pueden crear todo tipo de clases, atributos, relaciones, etc Tambin hay opcin de zoom, cambiar vistas, permitiendo al usuario moverse de una forma cmodo independiendo del tamao y la cantidad de datos que se encuentren en el esquema.

-Modelado del espacio de navegacin: El espacio de navegacin es el lugar donde se realizan los diagramas de Acceso de Navegacin (NAD). Cada pgina de navegacin estar representada con un diagrama. Los diagramas se basan en 4 tipos de constructores, destinos, clases, enlaces y agrupadores de enlace.

En la imagen de ejemplo, se muestra una pgina de inicio. Desde esta se puede navegar al men de usuarios, si es incorrecto dar error y vuelve a la principal si no se va a una pgina del men. Modelado de la presentacin En el modelado de la presentacin aparecen los diagramas de presentacin abstracta (DPA), que permiten la modificacin y el refinamiento de la interfaz. Los diagramas de presentacin se generan a partir de los diagramas de clases y de navegacin Una de las caractersticas ms importantes de VisualWade y que por ahora es nica en las herramientas CASE es que al compilar un diagrama este genera el conjunto de paginas mnimas que son necesarias para representarlo y ofrece la posibilidad de modificar la forma visual final de la interfaz. Se puede modificar, cosas como colores, estilos, imgenes, pero siempre manteniendo la consistencia con las vistas anteriores de diagrama de clases y de navegacin.

2 Prueba de la herramienta
Hemos creado el diagrama de clases definiendo los atributos (UML).

Son tres clases A1, B1, C1 enlazadas entre s con los atributos que vienen por defecto.

A continuacin, creamos el diagrama de navegacin (NAD), donde se asignan las relaciones entre las pginas, tarjetas de navegacin, clases. Es importante crear un punto de entrada.

En el modelo de presentacin se aade la interfaz que contendr una tabla con el contenido con formularios y enlaces. (CLD)

Finalmente, se guardan varios archivos en php con cdigo de html que se abre con el navegador firefox y los enlaces funcionan perfectamente.

3 Manual
Para conseguir la herramienta accedemos a la web oficial [Link] y entramos en la seccin de descargas. Una vez registrados y logueados ya podemos descargar el programa. Una vez descargado lo descomprimimos y pulsamos en el setup.

Automticamente nos muestra una pantalla de Bienvenida, pulsamos continuar.

Leemos las condiciones de Visualwade y si estamos de acuerdo aceptamos.

Escogemos la ruta de la instalacin que deseemos y aceptamos. Luego vemos los tipos.

Typical: Instala el mnimo de paquetes y archivos para poder usar el programa. Complete: Todos los archivos y paquetes incluidos en el instalador. Custom: Escoges manualmente lo que deseas instalar.

10

Si ests seguro de que todo los seleccionado es correcto pulsamos sobre next, si no back hasta llegar al punto que deseamos cambiar.

11

Una vez ejecutado el programa nos pide que instalemos unos archivos de libreras extras.

12

TUTORIAL

Para empezar a manejar el programa lo primero que tenemos que hacer es el diseo del diagrama de clases. Para acceder a la pantalla del UML debemos pulsar el botn para la vista del diagrama de clases. Despus de esto ya podemos empezar a crear el diagrama para ello en la barra lateral derecha tenemos un botn para ir insertando clases, para ello debemos pulsar primero en el botn de aadir clase e insertarla en la zona del diagrama un. Para poder editar sus atributos hacemos doble clic en el nombre de la clase donde se nos abre un cuadro de texto donde podemos elegir los atributos y los distintos mtodos de la clase. Otra forma de insertar atributos o funciones en la clase es cliquear en el botn de atributos o en el de mtodos y luego hacer clic en la clase en la que los quieres aadir. Para aadir enlaces entre las clases debemos hacer clic en el botn del tipo de enlace que deseemos. Tras esto seleccionamos en una clase y arrastramos hacia la otra clase con la que queremos enlazar, de esta forma se nos genera un enlace. Desde este punto ya ests dispuesto para hacer un buen diseo UML. Tras esto continuamos con el diagrama de enlaces NAD.

13

Una vez diseado los diagramas uml y el diagrama de enlaces podemos comenzar con lo que sera el diseo de las distintas paginas e instancias para ello haremos clic en el botn clm. Una vez en la vista hacemos clic en el botn para aadir una zona de trabajo y creamos distintos rectngulos en la zona de trabajo. En estos rectngulos se realizaran los distintos diseos de las pginas web. Para ello debemos hacer clic primero en la instancia que vamos a disear, despus le aadimos la zona en la que vamos a trabajar, luego lo ponemos en modo visible y por ltimo se pone en modo editable. Despus de todo esto podemos crear cuadros de texto o insertamos imgenes en la zona de trabajo para ir diseando toda nuestra pgina. Una vez terminado el diseo tenemos ya todo disponible para generar nuestra pgina web. Primero pulsamos el botn para ver si nuestro diseo tiene fallos y despus, si todo ha ido bien, pulsamos en el botn de ejecutar y nos generara los ficheros XML para tener la pagina a nuestra disposicin.

14

Para comenzar a disear los enlaces entre las clases y sus instancias, debemos pulsar en el botn de diagrama de NAD. Para aadir elementos al diagrama es el mismo mtodo que en el diagrama de clases. Primero seleccionamos en el men lateral el elemento que queramos aadir, ya sean colectores o instancias de la clase. Hacemos clic en el botn y luego lo insertamos en la zona del diagrama. Luego podemos aadir los disantos enlaces entre las instancias y los colectores siguiendo el mismo patrn que en el apartado anterior. Pinchamos en el colector o instancia y arrastramos hacia el objeto al que lo queremos conectar. Podemos poner sentencias encima de los conectores haciendo doble clic en ellas. Para poder continuar debemos seleccionar un Entry Point User, que ser la pagina inicial a la que accederemos. Este punto se selecciona en la barra lateral en el tipo de enlace EntryPoint-User.

15

4 Conclusiones
-Solo funciona bajo XP, hemos tenido que instalar una mquina virtual con el sistema operativo de Windows XP. -Solo si las resoluciones son superiores a 800 x 600. -Se necesita instalar versiones de python pero vienen incluidas. - Al crear los diagramas es intuitivo pero hemos tenido unas cuantas pegas con el modo editable. - En algunos casos el programa se queda bloqueado, sale un error y se cierra el programa. - Se requiere tener conocimientos un poco avanzados sobre programacin orientada a objetos.

Bibliografa
[Link]

16