एल्म - संदेश

संदेश एल्म वास्तुकला में एक घटक है। ये घटक अनुप्रयोग के इंटरफेस के साथ उपयोगकर्ता की बातचीत के जवाब में व्यू द्वारा उत्पन्न होते हैं। संदेश एप्लिकेशन की स्थिति को बदलने के लिए उपयोगकर्ता के अनुरोधों का प्रतिनिधित्व करते हैं।

वाक्य - विन्यास

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

llustration

निम्नलिखित उदाहरण एक सरल काउंटर अनुप्रयोग है। जब उपयोगकर्ता ऐड और सबट्रेक्ट बटन पर क्लिक करता है, तो एप्लिकेशन 1 से एक चर का मूल्य बढ़ाता है और घटाता है।

आवेदन में 4 घटक होंगे। घटक नीचे वर्णित हैं -

संदेश

इस उदाहरण के लिए संदेश होंगे -

type Message = Add | Subtract

नमूना

मॉडल आवेदन की स्थिति का प्रतिनिधित्व करता है। काउंटर एप्लिकेशन में मॉडल परिभाषा नीचे दी गई है; काउंटर की प्रारंभिक स्थिति शून्य होगी।

model = 0

राय

दृश्य अनुप्रयोग के दृश्य तत्वों का प्रतिनिधित्व करता है। दृश्य में दो बटन (+) और (-) शामिल हैं। उपयोगकर्ता द्वारा क्रमशः + और - बटन पर क्लिक करने पर दृश्य द्वारा संदेश जोड़ें और घटाना उत्पन्न होते हैं। तब मॉडल का संशोधित मूल्य दृश्य द्वारा प्रदर्शित किया जाता है।

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

अपडेट करें

इस घटक में कोड है जिसे दृश्य द्वारा उत्पन्न प्रत्येक संदेश के लिए निष्पादित किया जाना चाहिए। यह नीचे दिए गए उदाहरण में दिखाया गया है -

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

यह सब एक साथ डालें

Step 1- एक फ़ोल्डर बनाएँ MessageApp और फ़ाइल MessageDemo.elm

Step 2 - एल्म फ़ाइल में निम्न कोड जोड़ें -

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 - निष्पादित करें elm make commandटर्मिनल में। elm make command कोड संकलित करता है और ऊपर बनाई गई .elm फ़ाइल से एक HTML फ़ाइल बनाता है।

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 - खोलें index.html और नीचे दिखाए अनुसार कार्य को सत्यापित करें -