1

Rafael Díaz RojasAmin Harou

Daniel López Sánchez

2

ÍndiceÍndiceIntroducciónReseña técnicaEjemplo de aplicación

3

Introducción aIntroducción a

4

IntroducciónIntroducciónEs una librería para crear interfaz gráfica de

usuario en HaskellOrientada a la industriaEstá construida sobre wxWidgets que es una

librería de C++ Permite crear aplicaciones para Win32, Mac

OS X, GTK+, X11, Motif, WinCE…

5

IntroducciónIntroducción

Soporta Windows, GTK (Linux) y MacOSEl núcleo de su interfaz se desarrolló a partir

de WxEiffel, luego la mayoría de sus Widgets están soportados

En Enero del 2009 apareció la versión 11.0WxHaskell no soporta la programación

multihebraWxHaskell consta de una página oficial llena

de documentación que fue creada en agosto del 2008

6

Permite crear botones, cajas de texto, menús, etc

Permite especificar la disposición física de los componentes utilizando espacios de trabajo al estilo del lenguaje Java (Los espacios de trabajo sirven para organizar los Widgets)

También se usan eventos como el caso de Java (Por ejemplo se lanza un evento cuando presionamos un botón)

IntroducciónIntroducción

7

WidgetsWidgetsLos Widgets son los componentes básicos de

la interfaz gráfica de usuarioUn Widget es un componente gráfico, o

control, con el cual el usuario interactúa.Existen dos tipos de Widgets:

◦Ventanas : Son los Widgets que contienen otros Widgets

◦Controles: Widgets normales (como una ventana normal con los botones cerrar, minimizar y maximizar)

8

wxWidgetswxWidgetsFue diseñado por Thellinni en Italia 2008 en el

instituto de Aplicaciones de la Inteligencia Artificial de la universidad St. Andrews (Escocia)

Es un software libre (última versión 2.8.9 salió el 22 de septiembre de 2008)

Soporta varias plataformasTambién tiene una ligadura para lenguajes como

Python o PerlCuenta con soporte, documentación, ayuda en

línea, foros …

9

wxWidgetswxWidgetsSe encuentra entre los 25 proyectos más activos de

código abiertoLa biblioteca es madura, lleva en desarrollo

desde 1992Permite gráficos 2D, 3D con openGL, Bases de

datos, Redes, Impresión, Hebras …Cuenta con una versión extendida para

dispositivos como PDAs y teléfonos celularesTiene un API orientada a objetos que es fácil de

aprender y de utilizar

10

Desventajas WxWidgetsDesventajas WxWidgetsWxWidgets es software libre, por lo tanto

depende del tiempo y el esfuerzo de los que lo han creado.

Es una biblioteca muy grande.Consta solo de una capa para el API nativa de

cada SO (Es decir: la apariencia dependerá de en que SO se esta ejecutando)

Abusa de la utilización de macros para realizar ciertas operaciones

No cuenta con soporte para características modernas de C++ como manejo de excepciones

11

Ventajas WxHaskellVentajas WxHaskell

Poder utilizar características importantes de Haskell, como el polimorfismo paramétrico, funciones de orden superior, evaluación perezosa

Los programas resultantes tienden a ser más cortos y más elegantes que sus homólogos en C++ por ejemplo

Posibilidad de interactuar con código Haskell

12

Ejemplo de aplicación: DazzleEjemplo de aplicación: Dazzle

Es un programa que simula las creencias de las redes bayesianas

Fue desarrollado por el grupo Decision Support Systems de la universidad de Utrecht (Holanda)

Herramienta para la construcción, edición y análisis de redes bayesianas

Consta de más de 4000 líneas de código específico WxHaskell

13

Ejemplo gráficoEjemplo gráfico

14

Ejemplo de aplicación: DazzleEjemplo de aplicación: Dazzle

Es una aplicación para múltiples plataformas (Se usa tanto para Windows como para Linux)

Se desarrolló mucho antes del plazo previsto que ocurre rara vez en proyectos software.

En Windows XP, utiliza 12M de memoria para las grandes redes bayesianas de más de 50 nodos

15

Más sobre WxHaskellMás sobre WxHaskellSe publicó un artículo en una revista muy popular

en Francia llamada L’informaticien sobre WxHaskell en Octubre del 2003 escrito por Frédéric Mazué

WxHaskell se imparte en la Universidad Politécnica De Valencia en la asignatura Programación Declarativa

También se imparte en la Universidad de Girona en la asignatura Paradigmas de programación

16

En la Universidad Mayor de San Simón, Cochabamba, Bolivia se dio una conferencia sobre las interfaces gráficas de usuario en Haskell con especial atención a WxHaskell el 1 de Noviembre de 2007

El departamento de ciencias de la computación de la universidad de Utrecht, Holanda tiene varias aplicaciones de investigación que usan WxHaskell (El Dazzle es uno de ellos)

Más sobre WxHaskellMás sobre WxHaskell

17

El departamento de Sistemas Informáticos y computación de la universidad politécnica de Valencia desarrolló una aplicación para la verificación de sitios Web utilizando lenguajes funcionales el 19 de Julio de 2005, y la interfaz gráfica de esa aplicación fue implementada en WxHaskell

Más sobre WxHaskellMás sobre WxHaskell

18

Reseña técnica aReseña técnica a

19

Atributos y PropiedadesAtributos y Propiedades

El tipo de un atributo representa su contenedor y su valor

text :: Attr (Button a) Stringget ::w->Attr w a->IO aA la combinación de atributo y valor se le llama

propiedad( :=) :: Attr w a->a->Prop wset ::w->[Prop w]->IO ()

20

Atributos y PropiedadesAtributos y Propiedades

exclamation :: Button a->IO () exclamation b = do s <- get b text set b [text := s++"!"]

( :~) :: Attr w a->(a->a)->Prop w

exclamation b = set b [text :~ (++"!")]

21

Atributos y PropiedadesAtributos y Propiedades

Como la clase Window de wxWidgets posee un atributo de texto, todo tipo de ventanas pueden tenerlo

text :: Attr (Window a) StringDe esta manera no hay que definir atributos de

forma separadaget ::w->Attr w a->IO aget w (Attr getter setter) = getter wdata Prop w = a: (Attr w a) := a| a: (Attr w a) :» (a->a)

22

SeguridadSeguridad

wxHaskell impone una fuerte disciplina de tipos en wxWidgets

El tratamiento de memoria se realiza de forma automática

Comprueba punteros no inicializados, lanzando una excepción en Haskell

Existe una estructura jerárquica entre los Widgets creados

23

LayoutLayout

Se aloja en el frame

caption :: String->Layoutspace :: Int->Int->Layoutrule :: Int->Int->Layoutboxed :: String->Layout->Layoutgrid :: Int->Int->[[Layout]]->Layout

24

Primer ProgramaPrimer Programa

main :: IO () main = start hello

hello :: IO () hello = do f    <- frame    [text := "Hello!"] quit <- button f [text := "Quit", on command := close f] set f [layout := widget quit]

25

LibreríasLibrerías

Graphics.UI.WX y Graphics.UI.WXCore

WXCore está a bajo nivelEs el núcleo de la interfaz de los wxWidgetsSolamente usa abstracción funcional

Sin embargo WX introduce nuevas funcionalidadesEstá implementada encima de WXCoreMecanismos de abstracción como la sobrecarga

26

ConceptosConceptosEl frame es la ventana de nivel superiorTodas las demás poseen siempre un padreLos panels se incluyen en el frameLos elementos tienen atributosLos nombres de los atributos están sobrecargadosLa apariencia en la pantalla la establece layoutLos controles también tienen atributos

27

ConceptosConceptos

Son instrucciones a seguir cuando se activan (on)Hay Widgets invisibles (timer, value …)Se basa en un entorno de desarrollo orientado a

objetosLos Widgets son punteros a objetos en C++Atributo + Valor = PropiedadGracias a la herencia hay atributos compartidosColisión con el sistema de tipos de HaskellEl contenedor sirve para Widgets anidados

28

ConceptosConceptos

Alinear, Expandir y EstirarhalignLeft :: Layout->Layout -- defaulthalignRight :: Layout->LayouthalignCenter :: Layout->LayoutvalignTop :: Layout->Layout -- defaultvalignBottom :: Layout->LayoutvalignCenter :: Layout->Layout

29

ConceptosConceptos

rigid :: Layout->Layout -- defaultshaped :: Layout->Layoutexpand :: Layout->Layout

static :: Layout->Layout -- defaulthstretch :: Layout->Layoutvstretch :: Layout->Layout

30

ConceptosConceptos

Para dividir el espacio entre filas y columnas

hweight :: Int->Layout->Layoutvweight :: Int->Layout->LayoutDepende del peso de cada elemento

31

Una primera aplicación en

ASTEROIDS(en 54 líneas de código)

32

IntroducciónIntroducción

wxHaskell no es una interfaz diseñada para crear juegos, aún así, hemos elegido poner como ejemplo el conocido juego ASTEROIDS en una versión bastante minimal.

La intención de programar este juego es la de mostrar aspectos interesantes de wxHaskell, que con otras aplicaciones hubiera sido más "costoso" de ver.

Para quien no conozca el juego Asteroids, éste trata de una nave que debe de esquivar infinitas cantidades de asteroides, y en cuanto choca con un asteroide, éste explosiona llevándonos al final del juego.

33

Primeros pasosPrimeros pasos

En esta minimalística versión no trataremos de crear un clon exacto de Asteroids, simplemente intentaremos haceros conocer las virtudes de wxHaskell.

Para comenzar definiremos las siguientes constantes

height = 300 width = 300 (Definición del espacio del frame) Diameter = 24 (Diámetro del asteroide) chance = 0.1 :: Double (Probabilidad de aparecer un asteroide)

34

Creación de la base del juegoCreación de la base del juego

asteroids :: IO ()asteroids =do g <- getStdGen vrocks <- variable [value := randomRocks g] vship <- variable [value := div width 2]

f <- frame [resizeable := False] t <- timer f [interval := 50,

on command := advance vrocks f ]

set f [text := "Asteroids", bgcolor := white, layout := space width height, on paint := draw vrocks vship, on leftKey := set vship [value :» nx!x¡5], on rightKey := set vship [value :» nx!x+5]]

Definimos la variable asteroids como IO()

Creamos una variable para generar números aleatorios

Vrock es una lista de las futuras posiciones de los asteroides

Vship contiene la posición del eje X de la nave

F la ventana T es un temporizador para

actualizar eventos Establecemos los atributos de la

variable 'f', color de fondo, tamaño, función de dibujado, y asignar funciones a las pulsaciones de teclas

35

Creación de la base del juegoCreación de la base del juego

En lugar de la asignación usual de haskell := hemos usado :~ Esto no realiza una asignación a la variable, sino que le aplica una función.

En el caso de on LeftKey, podríamos usar:on leftKey := set vship [value :~ \x->max 0 (x-5)]

Lo que nos permitiría implementar los bordes de la ventana (frame).Para el caso de on Rightkey, análogamente sería:on rightKey := set vship [value :~ \x->min width (x+5)]

36

Función de generado y avanceFunción de generado y avancede los Asteroidesde los Asteroides

randomRocks :: RandomGen g => g → [[Point ]]randomRocks g = flatten [ ] (map fresh (randoms g))flatten rocks (t : ts) = let now = map head rocks later = filter (not o null) (map tail rocks) in now : flatten (t++later) tsfresh r | r>chance = [ ] | otherwise = [track (floor (fromIntegral width*r =

chance))]track x = [point x (y - diameter) | y ← [0,6... height +2

*diameter]]

Tenemos un generador de números aleatorios, que con él generamos asteroides aleatoriamente.

Cuando generamos un asteroide, lo metemos en una lista, siendo un asteroide una lista de posiciones dentro de la ventana, que va desde arriba, hasta abajo.

37

Función de generado y avanceFunción de generado y avancede los Asteroidesde los Asteroides

advance vrocks f = do set vrocks [value :~ tail] repaint f

draw vrocks vship dc view = do rocks ← get vrocks value x ← get vship value let ship = point x (height - 2*diameter) positions = head rocks collisions = map (collide ship) positions drawShip dc ship mapM (drawRock dc) (zip positions collisions) when (or collisions) (play explode)

La función advance coge el estado actual de la situación de los asteroides y la representa en pantalla.

La función draw especifica lo que hacer en la ventana. Ésta llama a drawShip y drawRock. Es llamada cada 50ms.

dc indica el contexto donde dibujar, puede ser un mapa de bits o una impresora, pero en este caso, es la ventana.

Collide es la función que comprueba que un asteroide choca con la nave

38

Función de dibujado de Función de dibujado de primitivasprimitivas

La nave puede ser representada como una primitiva, al igual que los asteroides:

drawShip dc pos =

circle dc pos (div diameter 2) [brush := brushSolid red]

drawRock dc (pos; collides) =

|collides == true = circle dc pos (div diameter 2) [brush := brushSolid black]

|collides == false = circle dc pos (div diameter 2) [brush := brushSolid yellow]

39

Función de dibujado de mapa Función de dibujado de mapa de bitsde bits

La nave puede ser representada con un mapa de bits, al igual que los asteroides:

drawShip dc pos =

drawBitmap dc ship pos True [ ]

drawRock dc (pos; collides) =

let picture = if collides then burning else rock

in drawBitmap dc picture pos True [ ]

collide pos0 pos1 =

let distance = vecLength (vecBetween pos0 pos1)

in distance ≤ fromIntegral diameter

rock = bitmap "rock.ico"

burning = bitmap "burning.ico"

ship = bitmap "ship.ico"

explode = sound "explode.wav"

40

Generación de la barra de Generación de la barra de menúmenú

Con el símbolo '&' indicamos que la letra J del teclado, tendrá asociada la función de expandir el menú Juego

El campo help, indica qué texto poner en la barra de ayuda de la ventana

game ← menuPane [text := "&Juego"]

new ← menuItem game [text := "&Nuevo\tCtrl+N"

, help := "Empezar nuevo juego"]

pause ← menuItem game [text := "&Pausa\tCtrl+P"

, help := "Pausar el juego"

,checkable := True]

menuLine game

quit ← menuQuit game [help := "Salir del juego"]

set new [on command := asteroids]set pause [on command := set t [enabled :~ not]]set quit [on command := close f ]

La opción 'checkable' añade una marca de selección.

Con el comando 'on command', añadimos una funcionalidad a cada botón.

'new' crea una nueva ventana de juego

Para pausar el juego, tan solo hay que desactivar el temporizador

Por último close f, cierra la ventana

41

Juego finalizadoJuego finalizado

42

BibliografíaBibliografíahttp://haskell.org/haskellwiki/WxHaskellhttp://www.wxwidgets.org/http://www.linformaticien.com/El proyecto Verificación de sitios Web utilizando

Lenguajes funcionales [2005]Haskell Ready to Dazzle the Real World [2005]Slicing wxHaskell modules to derive the User

Interface Abstract Model [2007] http://zenon.dsic.upv.es/muterm/muterm.php

(Del profesor Raúl Gutiérrez herramienta de terminación MU-TERM)

43

MejorasMejorasMateu Villavet profesor de la escuela Politécnica

Superior de la Universidad de Gerona y Salvador Lucas profesor de la Universidad Politécnica de Valencia nos contestó a algunas dudas.

El profesor de la Universidad Politécnica de Valencia que participa en el desarrollo de la herramienta de terminación MU-TERM cuya versión 'de sobremesa' utiliza wxHaskell acerca del procedimiento necesario para instalar WxHaskell

44

Respuesta a preguntas (Mateu Respuesta a preguntas (Mateu Villavet)Villavet)¿Como habéis conseguido instalar

WxHaskell?◦Siguiendo las instrucciones de la Web.

Lo único que tienes que vigilar son las versiones de wxhaskell y del GHC queutilices para la compatibilidad

45

¿Cuantas clases prácticas hacéis de WxHaskell?¿Es fácil de manejar, y de entender?¿se hicieron algunos proyectos en la Universidad de Gerona ? ¿y trabajosde investigación?◦ La práctica de haskell ha sido realizar un juego con wxhaskell. algunos

alumnos han hecho el Pacman. La verdad es que no hay mucha documentación pero el artículo que hay en la sesión 5 de laboratorio

◦ es de gran ayuda:http://ima.udg.edu/Docencia/3105200736/index.htmlSobre un proyecto final de carrera hecho con GHC y wxHaskell paraaprender lambda-cálculo puedes visitar:http://ima.udg.edu/~villaret/tilc/TILC-Presentation.htmlSi quieres comentárselo a tu profesor por si desea utilizarlo en casoque estudiéis lambda cálculo.

Respuesta a preguntas (Mateu Respuesta a preguntas (Mateu Villavet)Villavet)

46

Respuesta a preguntas (Salvador Respuesta a preguntas (Salvador Lucas)Lucas)¿Cuantas clases se dedican a WxHaskell?

◦No dedicamos ninguna clase a wxHaskell. En realidad, los alumnos utilizan un móduloHaskell que yo les proporciono para integrar la práctica que realizan y poder utilizarla con una interfaz gráfica realizada en wxHaskell. No necesitan conocer nada sobre la librería...

47

Respuesta a preguntas (Salvador Respuesta a preguntas (Salvador Lucas)Lucas)¿Es fácil el uso de WxHaskell?

◦Es relativamente fácil, una vez que te familiarizas con la manera de especificar la interfaz gráfica y tratar la interacción mediante eventos, etc.

48

Respuesta a preguntas (Raúl Respuesta a preguntas (Raúl Gutiérrez)Gutiérrez)¿Cómo se instala WxHaskell?

◦te recomiendo que te instales cabal, ya que es la mejor forma para trabajar y descargarte paquetes de haskell: http://www.haskell.org/cabal/ y después instalar el paquete con:cabal install wx-core wx

49

MejorasMejorasTambién nos pusimos en contacto con el

profesor Doaitse Swierstra de la Universidad de Utrecht

50

Respuesta a preguntas (Doaitse Respuesta a preguntas (Doaitse Swierstra)Swierstra)¿Podría funcionar el UHC para instalar

WxHaskell?◦ La instalación de WxHaskell en sí no es realmente un

problema hoy en día, solo hace falta lograr la correcta combinación de sistema operativo, WxWidgets y WxHaskell GHC.

◦ En la actualidad, todavía le faltan muchas cosas a WxHaskell para ejecutar programas con UHC, esperemos que este problema se subsane en el futuro

◦ Para instalar WxHaskell en Ubuntu podéis seguir estas instrucciones que fueron producidas por uno de nuestros estudiantes:http://www.students.cs.uu.nl/~jfklein/fp/Install_wxhaskell_on_ubuntu.txt