使用 Elm 创建表单答案

【问题标题】：Creating a form with Elm使用 Elm 创建表单
【发布时间】：2015-03-21 17:15:07
【问题描述】：

我想在 Elm 中创建一个需要 4 个必需输入的表单：

3 个浮点值
1 个输入可以采用“长”或“短”的值（大概），这将是一个下拉列表

输入值后，会进行计算，根据这些值生成单行输出。

我有这个作为命令行 Python 程序工作：

#!/usr/bin/env python


from __future__ import print_function

# core
import logging

# pypi
import argh

# local

logging.basicConfig(
    format='%(lineno)s %(message)s',
    level=logging.WARN
)

def main(direction, entry, swing, atr):

    entry = float(entry)
    swing = float(swing)
    atr   = float(atr)

    if direction == 'long':
        sl = swing - atr
        tp = entry + (2 * atr)
    elif direction == 'short':
        sl = swing + atr
        tp = entry - (2 * atr)

    print("For {0} on an entry of {1}, SL={2} and TP={3}".format(
        direction, entry, sl, tp))

if __name__ == '__main__':
    argh.dispatch_command(main)

但想使用 Elm 为其创建 Web UI。

【问题讨论】：

那么问题是什么？

标签： frp elm

【解决方案1】：

这不是 Elm 的理想第一次介绍，因为它带您了解 Elm 的一些更困难的领域：邮箱和 Graphics.Input 库。也没有一个易于部署的数字输入，所以我只实现了下拉；你会使用Graphics.Input.Field（它会变得特别危险）。

邮箱基本上是下拉输入可以向其发送消息的信号。我选择将该消息作为一个函数，特别是如何从旧状态生成新状态。我们将 state 定义为记录类型（如 Python 命名的元组），因此保存方向涉及将新方向存储在记录中。

文本使用方便的函数呈现，使其成为monospace。您可以使用整个 text library，但 Elm 0.15 没有字符串插值，因此您会遇到非常丑陋的附加。

最后，Elm 社区关于 SO 的内容不多，但欢迎您加入 mailing list，欢迎提出此类问题。话虽如此，您确实应该尝试深入研究 Elm 并学习基础知识，这样您就可以提出更具体的问题。几乎任何语言、库或框架都是如此——在编写“有用的”代码之前，您必须进行一些基本练习。

import Graphics.Input as Input
import Graphics.Element as Element exposing (Element)

mailbox = Signal.mailbox identity

type Direction = Short | Long
type alias State = {entry : Float, swing : Float, atr : Float, dir : Direction}

initialState : State
initialState = State 0 0 0 Short

dropdown : Element
dropdown =
    Input.dropDown
    (\dir -> Signal.message mailbox.address (\state -> {state| dir <- dir}))
    [("Short", Short), ("Long", Long)]

state : Signal State
state = Signal.foldp (<|) initialState mailbox.signal

render : State -> Element
render state =
    dropdown `Element.above`
    Element.show ("For "++(toString state.dir)++" on an entry of "++(toString state.entry) ++
                  ", SL="++(toString (sl state))++" and TP="++(toString (tp state)))

main = Signal.map render state

-- the good news: these are separate, pure functions
sl {entry, swing, atr, dir} =
    case dir of
        Long -> swing - atr
        Short -> swing + atr

tp {entry, swing, atr, dir} =
    case dir of
        Long -> entry + (2*atr)
        Short -> entry - (2*atr)

更新：我在邮箱以及如何使用邮箱上写了an essay。

【讨论】：