CC 5511 Patrones de diseo y la programacin

CC 5511 Patrones de diseño y la programación de GUIs ¿que patrones de diseño se usan cómo ? Ejemplos con Java 1

Principios de patrones de diseño Diseñar un software para reutilizarlo es difícil; uno debe encontrar: ◦ Una buena descomposición del problema y las abstracciones de software correctas. ◦ Un diseño con flexibilidad, modularidad y elegancia. Los diseños a menudo emergen de un proceso iterativo (ensayos y errores) Existen diseños exitosos ◦ Dos diseños casi nunca son idénticos. ◦ Presentan algunas características recurrentes. La perspectiva de la ingeniería: ¿Se pueden describir, codificar o estandarizar los diseños? ◦ Esto cortocircuitaría la fase de prueba y error. ◦ producir "mejor" software más rápido 2

De aqui emergen los patrones de diseño o Design patterns design pattern: una solucion a un problema común en un context dado ◦ Ejemplo de cc 3001: el patron Iterator Define una interfaz que declara metodos para accesar secuencialmente a objetos en una colección. 3

Historia de los patrones El concepto de "patrón" se expresó por primera vez en el trabajo “A Pattern Language” de Christopher Alexander en 1977 (2543 patrones) En 1990, un grupo llamado Gang of Four o "Go. F" (Gamma, Helm, Johnson, Vlissides) compila un catálogo de patrones de diseño para software. Presentados en un libro de 1995 Patrones de diseño: elementos de software orientado a objetos reutilizables es un clásico del campo 4

Gang of Four (Go. F) patterns Creational Patterns (relacionados con abstraer el proceso de instanciacion de objetos) ◦ Factory Method ◦ Builder Abstract Factory Prototype Singleton Structural Patterns (concerned with how objects/classes can be combined to form larger structures) ◦ Adapter ◦ Decorator ◦ Proxy Bridge Facade Composite Flyweight Behavioral Patterns (concerned with communication between objects) ◦ Command Interpreter ◦ Mediator Observer ◦ Strategy Chain of Responsibility ◦ Template Method Iterator State Visitor 5

Model-view-controller model-view-controller (MVC): paradigma de diseño común para sistemas gráficos controller: Clases que conectan modelo y vista. ◦ ◦ define cómo reacciona la interfaz de usuario a la entrada del usuario (eventos) recibe mensajes de la vista (de donde vienen los eventos) envía mensajes al modelo (indica qué datos mostrar) data for a veces parte de la vista (ver izquierda) Model rendering View Component events updates Model Controller 6

Recordemos: Model y View Model: Clases en un sistema que están relacionadas con la representación interna del estado del sistema. ◦ a menudo parte del modelo está conectado a archivos o bases de datos ◦ Ejemplo (sistema bancario): cuenta, usuario, lista de usuarios View: clases en el sistema que muestran el estado del modelo al usuario ◦ ◦ en general, esta es tu GUI (también podría ser una IU de texto) No debe contener datos de aplicación cruciales. Diferentes vistas pueden representar los mismos datos de diferentes maneras. Ejemplo: gráfico de barras vs. gráfico circular 7

MVC: Un ejemplo MUY simple (solo para mostrar los pasos) Vamos a crear un objeto de estudiante que actúa como modelo. Student. View será una clase de vista que puede imprimir los detalles del estudiante en la consola y Student. Controller es la clase de controlador responsable de almacenar los datos en el objeto Student y actualizar la vista de Student. View en consecuencia. MVCPattern. Demo, utilizará Student. Controller para demostrar el uso del patrón MVC.

Paso 1: Crear Modelo. public class Student { private String roll. No; private String name; public String get. Roll. No() { return roll. No; } public void set. Roll. No(String roll. No) { this. roll. No = roll. No; } public String get. Name() { return name; } public void set. Name(String name) { this. name = name; } }

Paso 2: Crear View. public class Student. View { public void print. Student. Details(String student. Name, String student. Roll. No){ System. out. println("Student: "); System. out. println("Name: " + student. Name); System. out. println("Roll No: " + student. Roll. No); } }

Paso 3: Crear Controller. public class Student. Controller { private Student model; private Student. View view; public Student. Controller(Student model, Student. View view){ this. model = model; this. view = view; } public void set. Student. Name(String name){ model. set. Name(name); } public String get. Student. Name(){ return model. get. Name(); } public void set. Student. Roll. No(String roll. No){ model. set. Roll. No(roll. No); } public String get. Student. Roll. No(){ return model. get. Roll. No(); } public void update. View(){ view. print. Student. Details(model. get. Name(), model. get. Roll. No()); } }

Step 4: Crear Aplicacion. public class MVCPattern. Demo { public static void main(String[] args) { //fetch student record based on his roll no from the database Student model = retrive. Student. From. Database(); //Create a view : to write student details on console Student. View view = new Student. View(); Student. Controller controller = new Student. Controller(model, view); controller. update. View(); //update model data controller. set. Student. Name("John"); controller. update. View(); } private static Student retrive. Student. From. Database(){ Student student = new Student(); student. set. Name("Robert"); student. set. Roll. No("10"); return student; } }

MVC: A Calculator El ejemplo es una calculadora solo con la operación multiplicar 3 versiones 1. Todo dentro de un solo archivo 2. Separar Vista y control de modelo 3. Full MVC Ver documento Model. View. Controller. Example 2 (Calc). docx

Patrón Observer observer: un objeto que “observa" el estado de otro objeto y realiza alguna accion cuando cambia de alguna manera ◦ En Java: event listeners; java. util. Observer observable : un objeto que permite a observadores que lo examinen (notifica a los observadores cuando cambia su estado) ◦ Permite definer un comportamiento customizable, extensible, basado en eventos y graficos 14

Patron: Observer PARA OBJETOS CUYO ESTADO PUEDE SER OBSERVADO 15

Beneficios del observer Acoplamiento abstracto entre sujeto y el observer, cada uno puede ser extendido y usado independientemente del otro. Relación dinámica entre sujeto y observador; se puede establecer en tiempo de ejecución (se pueden intercambiar vistas apenas cambian los datos, etc. ) ofrece mucha más flexibilidad de programación comunicación por broadcast: la notificación se transmite automáticamente a todos los objetos interesados que se suscribieron Observer se puede utilizar para implementar la separación de la vista con el modelo en Java con mayor facilidad 16

Diagrama de secuencia del Observer 17

Interface de Observer package java. util; public interface Observer { public void update(Observable o, Object arg); } Idea: el metodo update se llamará cuando el modelo observable cambie, para lo cual hay que poner el código apropiado para encargarse de este cambio dentro de update 18

La clase Observable public void add. Observer(Observer o) public void delete. Observer(Observer o) Agrega/elimina o a/de la lista de objetos a los que se notificará (a través de su método de actualización) cuando se llame a notify. Observers. public void notify. Observers() public void notify. Observers(Object arg) Informa a todos los observadores que escuchan este objeto observable de un evento que ha ocurrido. Se puede pasar un argumento de objeto opcional para proporcionar más información sobre el evento. public void set. Changed() Señala que el objeto observable ha cambiado desde el último evento; debe llamarse cada vez antes de llamar a notify. Observers. 19

Uso frecuente que se le da a Observer 1. Escribir una clase Observable ◦ Hacer que el modelo notifique a sus observadores cuando algo significativo pase 2. Escribir todas las vistas de ese modelo como observadores (ej. GUI panels que muestran el modelo en pantalla) ◦ Hacer que las vistas tomen una accion cuando el modelo notifica de un evento (e. g. repaint, tocar un sonido, mostrar un dialogo, cambiar un texto o color, etc. ) 20

Usando vistas multiples Hacer un modelo Observable Escribir una interfaz o clase abstracta Vista ◦ Hacer de Vista un observer extend/implement Vista para todas las vistas concretas ◦ Dar a cada una sus components internos propios y el código para “dibujar” el modelo en su propio estilo Proveer un mecanismo en el GUI para que el ususario pueda elegir que vista(s) mostrar 21

Ejemplo: Cambiando vistas // en el action listener de un frame: // hide old view; show new one model. delete. Observer(view 1); model. add. Observer(view 2); view 1. set. Visible(false); view 2. set. Visible(true); 22

Observer y Observable: Ejemplo básico con string (1) import java. util. *; // This is the observer, implments update class Observer 1 implements Observer { public void update(Observable obj, Object arg) { System. out. println("Observer 1 is invoked “+obj. to. String()); } } // This is class being observed class Being. Observed extends Observable { static int i = 0; void incre() { i++; set. Changed(); notify. Observers(); } public String to. String() { return i+””; } } public class Observer. Demo { // Driver method of the program public static void main(String args[]) { Being. Observed being. Observed = new Being. Observed(); Observer 1 observer 1 = new Observer 1(); being. Observed. add. Observer(observer 1); being. Observed. incre(); } }

Observer y Observable: Ejemplo básico con string pasando un parámetro import java. util. *; // This is the observer, implments update class Observer 1 implements Observer { public void update(Observable obj, Object arg) { System. out. println("Observer 1 is invoked “+arg); } } // This is class being observed class Being. Observed extends Observable { static int i = 0; void incre() { i++; set. Changed(); notify. Observers(this. to. String()); } public String to. String() { return i+””; } } public class Observer. Demo { // Driver method of the program public static void main(String args[]) { Being. Observed being. Observed = new Being. Observed(); Observer 1 observer 1 = new Observer 1(); being. Observed. add. Observer(observer 1); being. Observed. incre(); } }

Observer y Observable Ejemplo simple ◦ http: //www. austintek. com/mvc/#austintek_mvc. view_2 Ejemplo mas ilustrativo ◦ http: //www. dcc. uchile. cl/nbaloian/cc 5511/Programas/Temperatura

Pattern: Strategy OBJETOS QUE CONTIENEN ALGORITMOS ALTERNATIVOS PARA RESOLVER UN PROBLEMA 26

Patron Strategy strategy: un algoritmo desacoplado del objeto que lo usa, y encapsula su propio objeto ◦ Cada estrategia implementa un comportamiento, una implementación de cómo resolver el mismo problema. ◦ Separa el algoritmo para el comportamiento del objeto que quiere actuar. ◦ permite cambiar el comportamiento de un objeto dinámicamente sin extender / cambiar el objeto en sí ejemplos: ◦ guardar / compresión de archivos ◦ Layout managers en contenedores GUI ◦ Algoritmos AI para videojuegos. 27

Ejemplo de Strategy : Card player // Strategy hierarchy parent // (an interface or abstract class) public interface Strategy { public Card get. Move(); } // setting a strategy player 1. set. Strategy(new Smart. Strategy()); // using a strategy Card p 1 move = player 1. move(); // uses strategy 28

Relación entre Strategies y layouts para GUI Cómo especifica el programador dónde se encuentra cada componente en una ventana GUI, qué tan grande debe ser cada componente y qué debería hacer el componente si la ventana se redimensiona / mueve / maximiza / etc. ? Posicionamiento absoluto (C++, C#, others): Especifica el lugar (coordenadas) exacto de cada componente Layout managers (Java): Tener objetos especiales que deciden dónde colocar cada componente según algunos criterios ◦ ¿Cuáles son los beneficios o inconvenientes de cada enfoque? 29

Containers con layout La idea: coloque muchos componentes en un componente especial llamado contenedor, luego agregue el contenedor al marco de la ventana 30

Container contenedor: un objeto que contiene componentes; También gobierna sus posiciones, tamaños y comportamiento de cambio de tamaño. public void add(Component comp) public void add(Component comp, Object info) Agrega una componente al contenedor, a veces dando información extra acerca de donde ponerlo. public void remove(Component comp) Remueve el componente del container. public void set. Layout(Layout. Manager mgr) Uses the given layout manager to position the components in the container. public void validate() Debería llamar a esta función si cambia el contenido de un contenedor que ya está en la pantalla, para que vuelva a calcular su diseño. 31

JPanel Un panel es una subclase of Container, asi que hereda todos sus métodos. Se usa para agrupar widgets que se muestran usando una cierta estrategia común, dentro de una ventama con más elementos (por ejemplo, botones en el borde de abajo de una ventana que se deben agrupar en x lineas e y clumnas: public JPanel() Construye un panel con el flow layout, que es su estrategia por defecto. public JPanel(Layout. Manager mgr) Construye un panel que usa la estrategia de layout especificada en el parámetro. 32

El llamado “Preferred size” de los components Un objeto de alguna clase componente de Swing tiene un tamaño que le “gustaría” tener: lo suficientemente grando como para acomodar su contenido (texto, iconos, otros components, etc) ◦ A esto se le llama el tamaño preferido “preferred size” de la componente ◦ Algunos tipos de layout managers (ej. Flow. Layout) estan programadas para poner el tamaño de las components dentro de ellas ( dentro de la componente que tiene este layout manager) de acuerdo al tamaño preferido; otros (ej. Border. Layout, Grid. Layout) desestiman el preferred size y usan otro esquema para determiner el tamaño Buttons con preferred size: sin preferred size: 33

Border. Layout (default para JFrame) Public Border. Layout() divide el container en 5 regions llamadas : NORTH, SOUTH, WEST, EAST, CENTER Las regiones NORTH y SOUTH se expanden para llenar la region horizontalmente, y usan el “preferred size” de los widgets en forma vertical Las regiones WEST e EAST se expanden para llenar verticalmente la region (excluyendo lo que toman norte y sur) y usan el “preferred size” horizontalmente CENTER usa todo el espacio que noo ocuparon los otros Container panel = new JPanel(new Border. Layout()); panel. add(new JButton("Button 1 (NORTH)", Border. Layout. NORTH); 34

Flow. Layout (default para JPanel) public Flow. Layout() trata el contenedor como una "página" o "párrafo" de arriba a abajo, de izquierda a derecha Los componentes tienen su tamaño preferido tanto horizontal como verticalmente. Los componentes se colocan en el orden en que se agregaron. si es demasiado largo, los componentes se ajustan a la siguiente línea Container panel = new JPanel(new Flow. Layout()); panel. add(new JButton("Button 1")); 35

Grid. Layout public Grid. Layout(int rows, int columns) Trata al contenedor como una rejilla de columnas y filas de igual tamaño (elementos todos iguales en tamaño) A las componenetes se les determina su tamaño horizontal o vertical sin tomar en cuenta su tamaño preferido. Se pueden especificar 0 columnas o filas para indicar que se debe expander en esa direccion lo que se necesite para acomodar a los componentes 36

Box. Layout Box. create. Horizontal. Box() Box. create. Vertical. Box() alinea los componentes en el contenedor en una sola fila o columna los componentes utilizan los tamaños preferidos y se alinean en función de su alineación preferida La forma mas comunes de crear un Box Layout: Box. create. Horizontal. Box(); or Box. create. Vertical. Box(); 37

Otros layouts Card. Layout para poner capas de "cards" apiladas, uno sobre la otra; solo la primera “card” es visible Grid. Bag. Layout bien complicada, no la entiendo bien null para definer la posicion y tamaño de todos los components con set. X/Y and set. Width/Height no varia su posicion o tamaño si el contenedor varia su forma 38

Problemas con layout managers ¿Como se hace una interfaz como la que se ve abajo con los layouts mostrados anteriormente ? 39

Solucion: composición, combinación de paneles con distintos layouts crear paneles dentro paneles cada panel tiene un layout distinto, y al combiner los layouts, se puede obtener uno más complejo y poderoso ejemplo: ◦ cuantos panels? ◦ que layout en cada uno? 40

Patron: Composite OBJETOS QUE PUEDEN SERVER DE CONTENEDORES Y PUEDEN A SU VEZ CONTENER OBJETOS COMO ELLOS MISMOS 41

Composite pattern composite: un objeto que es ya sea un item individual o una coleccion de items ◦ Objetos composite pueden ester compuestos de items individuales o de otros composites ◦ definicion recursiva : objetos pueden contenerse a si mismos (objetos de la misma clase) ◦ Frecuentemente esto lleva a una estructura de árbol con nodos internos y hojas: ◦ <nodo> ◦ < nodo_composite> : : = <node_hoja> | <nodo_composite> : : = <nodo>* examplos en Java: ◦ collections ( Lista de Listas) ◦ Layout para GUI (paneles conteniendo buttons, etc. ) 42

Un ejemplo de Composite : panels Container north = new JPanel(new Flow. Layout()); north. add(new JButton("Button 1")); north. add(new JButton("Button 2")); Container south = new JPanel(new Border. Layout()); south. add(new JLabel("Southwest"), Border. Layout. WEST); south. add(new JLabel("Southeast"), Border. Layout. EAST); // overall panel contains the smaller panels (composite) JPanel overall = new JPanel(new Border. Layout()); overall. add(north, Border. Layout. NORTH); overall. add(new JButton("Center Button"), Border. Layout. CENTER); overall. add(south, Border. Layout. SOUTH); frame. add(overall); 43

Pattern: Decorator OBJETOS QUE SE ENVUELVEN ALREDEDOR DE OTROS OBJETOS PARA AGREGAR CARACTERÍSTICAS ÚTILES. 44

Decorator decorator: un objeto que modifica el comportamiento o añade funcionalidades a otro objeto ◦ El decorador debe mantener la interfaz común del objeto que envuelve. ◦ Se utiliza para que podamos agregar características a un objeto simple existente sin necesidad de interrumpir la interfaz que el código del cliente espera al usar el objeto simple. ◦ El objeto que se está "decorando" no suele saber explícitamente sobre el decorador. ejemplos en Java: ◦ multilayered input streams agregan metodos de I/O necesarios ◦ Agregando scroll bars a controles del GUI 45

Decorator ejemplo con I/O La clase Input. Stream tiene solo el método public int read() para leer un carácter a la vez. Los decorators como Buffered. Reader o Scanner agregan mayor funcionalidad para leer desde el stream más facilmente // Input. Stream. Reader/Buffered. Reader decoran Input. Stream in = new File. Input. Stream("hardcode. txt"); Input. Stream. Reader isr = new Input. Stream. Reader(in); Buffered. Reader br = new Buffered. Reader(isr); // gracias a los decoradores podemos // leer lineas enteras de una sola vez en una llamada // (Input. Stream solo prove public int read() ) String whole. Line = br. read. Line(); 46

Decorator ejemplo con GUI Componentes de GUI normales no tienen scroll bars JScroll. Pane es un container con scrollbars al cual se le pueden agregar componenetes que lo hagan scrollable // JScroll. Pane decorates GUI components JText. Area area = new JText. Area(20, 30); JScroll. Pane scroll. Pane = new JScroll. Pane(area); content. Pane. add(scroll. Pane); ◦ Los Jcomponent tienen tambien un método set. Border para agregar un borde “decorativo”. 47

Referencias The Java Tutorial: Visual Index to the Swing Components. http: //java. sun. com/docs/books/tutorial/ uiswing/components. html The Java Tutorial: Laying Out Components Within a Container. http: //java. sun. com/docs/books/tutorial/uiswing/ layout/index. html Java Class Library Reference: Observer, Observable. http: //java. sun. com/j 2 se/1. 5. 0/docs/api/java/util/Observer. html http: //java. sun. com/j 2 se/1. 5. 0/docs/api/java/util/Observable. html Cunningham & Cunningham OO Consultancy, Inc. ◦ http: //c 2. com/cgi/wiki? Iterator. Pattern ◦ http: //c 2. com/cgi/wiki? Decorator. Pattern ◦ http: //c 2. com/cgi/wiki? Composite. Pattern Design Patterns Java Companion ◦ http: //www. patterndepot. com/put/8/Java. Patterns. htm 48