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
