Ulme - Nachrichten

Nachricht ist eine Komponente in der Elm-Architektur. Diese Komponenten werden von der Ansicht als Reaktion auf die Interaktion des Benutzers mit der Benutzeroberfläche der Anwendung generiert. Nachrichten stellen Benutzeranforderungen dar, um den Status der Anwendung zu ändern.

Syntax

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

Illustration

Das folgende Beispiel ist eine einfache Zähleranwendung. Die Anwendung erhöht und verringert den Wert einer Variablen um 1, wenn der Benutzer auf die Schaltflächen Hinzufügen und Subtrahieren klickt.

Die Anwendung wird 4 Komponenten haben. Die Komponenten werden nachfolgend beschrieben -

Botschaft

Die Nachrichten für dieses Beispiel lauten:

type Message = Add | Subtract

Modell

Das Modell repräsentiert den Status der Anwendung. In der Zähleranwendung ist die Modelldefinition unten angegeben; Der Anfangszustand des Zählers ist Null.

model = 0

Aussicht

Die Ansicht repräsentiert die visuellen Elemente der Anwendung. Die Ansicht enthält zwei Schaltflächen (+) und (-). Die Meldungen Hinzufügen und Subtrahieren werden von der Ansicht generiert, wenn der Benutzer auf die Schaltflächen + und - klickt. Der geänderte Wert des Modells wird dann in der Ansicht angezeigt.

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

Aktualisieren

Diese Komponente enthält Code, der für jede von der Ansicht generierte Nachricht ausgeführt werden soll. Dies wird im folgenden Beispiel gezeigt -

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

Alles zusammenfügen

Step 1- Erstellen Sie einen Ordner MessagesApp und eine Datei MessagesDemo.elm

Step 2 - Fügen Sie den folgenden Code in die Ulmen-Datei ein -

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 - Führen Sie die elm make commandim Terminal. Daselm make command Kompiliert den Code und generiert eine HTML-Datei aus der oben erstellten .elm-Datei.

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 - Öffnen Sie die index.html und überprüfen Sie die Funktionsweise wie unten gezeigt -