Elm - Messages

Le message est un composant de l'architecture Elm. Ces composants sont générés par la vue en réponse à l'interaction de l'utilisateur avec l'interface de l'application. Les messages représentent les demandes des utilisateurs de modifier l'état de l'application.

Syntaxe

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

illustration

L'exemple suivant est une simple application de compteur. L'application incrémente et décrémente la valeur d'une variable de 1 lorsque l'utilisateur clique respectivement sur les boutons Ajouter et Soustraire.

L'application aura 4 composants. Les composants sont décrits ci-dessous -

Message

Les messages de cet exemple seront -

type Message = Add | Subtract

Modèle

Le modèle représente l'état de l'application. Dans l'application de compteur, la définition du modèle est donnée ci-dessous; l'état initial du compteur sera nul.

model = 0

Vue

La vue représente les éléments visuels de l'application. La vue contient deux boutons (+) et (-). Les messages Ajouter et Soustraire sont générés par la Vue lorsque l'utilisateur clique respectivement sur les boutons + et -. La valeur modifiée du modèle est alors affichée par la vue.

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

Mettre à jour

Ce composant contient du code qui doit être exécuté pour chaque message généré par la vue. Ceci est illustré dans l'exemple ci-dessous -

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

Mettre tous ensemble

Step 1- Créez un dossier MessagesApp et un fichier MessagesDemo.elm

Step 2 - Ajoutez le code suivant dans le fichier 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 - Exécutez le elm make commanddans le terminal. leelm make command compile le code et génère un fichier HTML à partir du fichier .elm créé ci-dessus.

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 - Ouvrez le index.html et vérifiez le fonctionnement comme indiqué ci-dessous -