Elm - Mensajes

El mensaje es un componente de la arquitectura Elm. Estos componentes son generados por la Vista en respuesta a la interacción del usuario con la interfaz de la aplicación. Los mensajes representan solicitudes de usuarios para alterar el estado de la aplicación.

Sintaxis

--Message Syntax
type Message = some_message1 |some_message2 ...|some_messageN

ilustracion

El siguiente ejemplo es una aplicación de contador simple. La aplicación incrementa y reduce el valor de una variable en 1 cuando el usuario hace clic en los botones Agregar y Restar respectivamente.

La aplicación tendrá 4 componentes. Los componentes se describen a continuación:

Mensaje

Los mensajes de este ejemplo serán:

type Message = Add | Subtract

Modelo

El modelo representa el estado de la aplicación. En la aplicación de contador, la definición del modelo se da a continuación; el estado inicial del contador será cero.

model = 0

Ver

La vista representa los elementos visuales de la aplicación. La vista contiene dos botones (+) y (-). Los mensajes Agregar y Restar son generados por la Vista cuando el usuario hace clic en los botones + y - respectivamente. A continuación, la Vista muestra el valor modificado del modelo.

view model =
-- invoke text function
h1[]
[   div[] [text "CounterApp from TutorialsPoint" ]
   ,button[onClick Subtract] [text "-"]
   ,div[][text (toString model)]
   ,button[onClick Add] [text "+"]
]

Actualizar

Este componente contiene código que debe ejecutarse para cada mensaje generado por la vista. Esto se muestra en el siguiente ejemplo:

update msg model =
case msg of
Add -> model+1
Subtract -> model-1

Poniendolo todo junto

Step 1- Crea una carpeta MessagesApp y archivo MessagesDemo.elm

Step 2 - Agregue el siguiente código en el archivo elm -

import Html exposing (..)
import Html.Events exposing(onClick)

model = 0 -- Defining the Model

--Defining the View

view model =
   h1[]
   [  div[] [text "CounterApp from TutorialsPoint" ]
      ,button[onClick Subtract] [text "-"]
      ,div[][text (toString model)]
      ,button[onClick Add] [text "+"]
   ]

--Defining the Messages

type Message = Add | Subtract

--Defining Update

update msg model =
case msg of
   Add -> model+1
   Subtract -> model-1

-- Define the main method
main =
   beginnerProgram
   {
      model=model
      ,view=view
      ,update=update
   }

Step 3 - Ejecuta el elm make commanden terminal. loselm make command compila el código y genera un archivo HTML a partir del archivo .elm creado anteriormente.

C:\Users\dell\elm\MessagesApp> elm make .\MessageDemo.elm
Some new packages are needed. Here is the upgrade plan.

   Install:
      elm-lang/core 5.1.1
      elm-lang/html 2.0.0
      elm-lang/virtual-dom 2.0.4

Do you approve of this plan? [Y/n] y
Starting downloads...

   ΓùÅ elm-lang/html 2.0.0
   ΓùÅ elm-lang/virtual-dom 2.0.4

ΓùÅ elm-lang/core 5.1.1
Packages configured successfully!
Success! Compiled 38 modules.
Successfully generated index.html

Step 4 - Abra el index.html y verifique el funcionamiento como se muestra a continuación -