Учебники

Вяз — Сообщения

Январь 20, 2019

Сообщение является компонентом в архитектуре Вяза. Эти компоненты создаются представлением в ответ на взаимодействие пользователя с интерфейсом приложения. Сообщения представляют собой запросы пользователей на изменение состояния приложения.

Синтаксис 

--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

Собираем все вместе

Шаг 1 — Создайте папку MessagesApp и файл MessagesDemo.elm

Шаг 2 — Добавьте следующий код в файл 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
   }

Шаг 3 — Выполните команду elm make в терминале. Команда elm make компилирует код и генерирует HTML-файл из файла .elm, созданного выше. 

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

Шаг 4 — Откройте index.html и проверьте работу, как показано ниже —

45
Share: