Elm - Messaggi

Il messaggio è un componente dell'architettura Elm. Questi componenti vengono generati dalla vista in risposta all'interazione dell'utente con l'interfaccia dell'applicazione. I messaggi rappresentano le richieste degli utenti per modificare lo stato dell'applicazione.

Sintassi

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

llustration

L'esempio seguente è una semplice applicazione contatore. L'applicazione incrementa e decrementa il valore di una variabile di 1 quando l'utente fa clic rispettivamente sui pulsanti Aggiungi e Sottrai.

L'applicazione avrà 4 componenti. I componenti sono descritti di seguito:

Messaggio

I messaggi per questo esempio saranno:

type Message = Add | Subtract

Modello

Il modello rappresenta lo stato dell'applicazione. Nella contro domanda la definizione del modello è data di seguito; lo stato iniziale del contatore sarà zero.

model = 0

Visualizza

La vista rappresenta gli elementi visivi dell'applicazione. La vista contiene due pulsanti (+) e (-). I messaggi Aggiungi e Sottrai vengono generati dalla Vista quando l'utente fa clic rispettivamente sui pulsanti + e -. Il valore modificato del modello viene quindi visualizzato dalla Vista.

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

Aggiornare

Questo componente contiene codice che dovrebbe essere eseguito per ogni messaggio generato dalla vista. Questo è mostrato nell'esempio seguente:

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

Mettere tutto insieme

Step 1- Crea una cartella MessagesApp e un file MessagesDemo.elm

Step 2 - Aggiungi il seguente codice nel file 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 - Esegui il file elm make commandnel terminale. Ilelm make command compila il codice e genera un file HTML dal file .elm creato sopra.

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 - Apri il file index.html e verificare il funzionamento come mostrato di seguito -