Elm - Mensagens

A mensagem é um componente da arquitetura Elm. Esses componentes são gerados pela Visualização em resposta à interação do usuário com a interface do aplicativo. As mensagens representam solicitações do usuário para alterar o estado do aplicativo.

Sintaxe

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

ilustração

O exemplo a seguir é um aplicativo de contador simples. O aplicativo aumenta e diminui o valor de uma variável em 1 quando o usuário clica nos botões Adicionar e Subtrair, respectivamente.

O aplicativo terá 4 componentes. Os componentes são descritos abaixo -

mensagem

As mensagens para este exemplo serão -

type Message = Add | Subtract

Modelo

O modelo representa o estado do aplicativo. Na aplicação do contador, a definição do modelo é fornecida abaixo; o estado inicial do contador será zero.

model = 0

Visão

A visualização representa os elementos visuais do aplicativo. A visualização contém dois botões (+) e (-). As mensagens Adicionar e Subtrair são geradas pela Visualização quando o usuário clica nos botões + e - respectivamente. O valor modificado do modelo é então exibido pela Visualização.

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

Atualizar

Este componente contém o código que deve ser executado para cada mensagem gerada pela view. Isso é mostrado no exemplo abaixo -

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

Juntando tudo

Step 1- Crie uma pasta MessagesApp e arquive MessagesDemo.elm

Step 2 - Adicione o seguinte código no arquivo 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 - Execute o elm make commandno terminal. oelm make command compila o código e gera um arquivo HTML a partir do arquivo .elm criado acima.

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 o index.html e verifique o funcionamento conforme mostrado abaixo -