HTML + javascript + Haskell = ELM, parte 9

Los lenguajes funcionales son excelentes para transformar texto. Elm también es excelente para capturar texto. Aquí hay un ejemplo que toma algo de entrada, lo manipula y lo pone en la pantalla, usando un flujo HTML:

import String
import Html exposing (Html, Attribute, text, toElement, div, input)
import Html.Attributes exposing (..)
import Html.Events exposing (on, targetValue)
import Signal exposing (Address)
import StartApp.Simple as StartApp

--Importamos las bibliotecas que necesitaremos. String nos permite manipular cadenas, y Html nos da
-- acceso a varios aspectos de HTML, incluidos eventos, divs y campos de entrada.

 main = StartApp.start { model = "", view = view, update = update }

--Nuestra función principal de una línea inicia nuestra aplicación, inicializando con una cadena
--vacía, presentando una vista y manejando actualizaciones con nuestra función de actualización, que
--se llamará cada vez que cambie nuestro campo de entrada.

 update newStr oldStr = newStr

--A continuación, nuestra función de actualización trivial simplemente devuelve el nuevo valor del
--campo de entrada cada vez que el campo de entrada se actualiza.

 shout text = String.toUpper text
 whisper text = String.toLower text
 echo text = (shout text) ++ " " ++ (whisper text)

--A continuación, definimos un par de funciones simples para trabajar con texto, las funciones de
--grito y susurro. Los usamos para construir una función de eco para transformar el texto. Estas
--funciones no saben nada sobre las interfaces de usuario. Solo funcionan en datos de cadena sin
--procesar.

 view address string =
div []
     [ input
     [ placeholder "Speak"
       , value string
       , on "input" targetValue (Signal.message address)
       , myStyle
      ]
     []
  , div [ myStyle ] [ text (echo string) ]
]
myStyle = style [ ("width", "100%") ]

--La siguiente tarea es construir nuestra página HTML. Agregamos un control de entrada y un div
--que contendrá nuestro texto modificado. El control de entrada simplemente tiene los elementos
--HTML que Elm necesita para representar el control. La función on establece una señal que
--contendrá actualizaciones del campo de entrada. myStyle devuelve la hoja de estilo para nuestros
--elementos HTML. La función div crea un div HTML con los contenidos y el estilo especificados.

Puede parecer un poco extraño al principio, pero la visión del mundo de Elm es el complemento perfecto para la programación web front-end. Cada interfaz de usuario es solo un flujo de entradas de usuario transformadas