所以我有一个带有列表框,按钮和textarea的简单示例布局,单击按钮可以更改textarea中的文本:
import Control.Applicative
import Control.Monad
import Data.Maybe
import qualified Graphics.UI.Threepenny as UI
import Graphics.UI.Threepenny.Core
main :: IO ()
main = startGUI defaultConfig setup
setup :: Window -> UI ()
setup w = do
return w # set UI.title "Simple example"
listBox <- UI.listBox (pure ["First", "Second"]) (pure Nothing) ((UI.string .) <$> (pure id))
button <- UI.button # set UI.text "Button"
display <- UI.textarea # set UI.text "Initial value"
element listBox # set (attr "size") "10"
getBody w #+ [element listBox, element button, element display]
on UI.click button $ const $ do
element display # set UI.text "new text"
我想要做的是让更改取决于列表框选择(例如,根据选择,"new text"
为"First"
或"Second"
。
我可以通过将userSelection
和facts
合并为
facts . userSelection :: ListBox a -> Behavior (Maybe a)
但是因为设置textarea的值是用
完成的set text :: String -> UI Element -> UI Element
我不知道如何解决选择是Behavior
。
所有这些对我来说似乎有点单调,我想知道这样做的正确方法是什么。也许我应该在完成或更改列表框选择时执行某些操作,而不仅仅是按下按钮时。
答案 0 :(得分:4)
首先,a regression影响了这里的代码。这个问题现在已经解决了。 Threepenny 0.6.0.3有一个临时修复,最终版本将包含在发布之后。
pastebin you provided中的代码几乎是正确的。唯一需要的更改是您不需要在按钮单击回调中使用sink
- 在您的情况下,sink
应该在行为和文本区域的内容之间建立永久连接,行为值响应按钮点击事件而改变。
为了完整起见,这是一个完整的解决方案:
{-# LANGUAGE RecursiveDo #-}
module Main where
import Control.Applicative
import Control.Monad
import Data.Maybe
import qualified Graphics.UI.Threepenny as UI
import Graphics.UI.Threepenny.Core
main :: IO ()
main = startGUI defaultConfig setup
setup :: Window -> UI ()
setup w = void $ mdo
return w # set UI.title "Simple example"
listBox <- UI.listBox
(pure ["First", "Second"]) bSelected (pure $ UI.string)
button <- UI.button # set UI.text "Button"
display <- UI.textarea
element listBox # set (attr "size") "10"
getBody w #+ [element listBox, element button, element display]
bSelected <- stepper Nothing $ rumors (UI.userSelection listBox)
let eClick = UI.click button
eValue = fromMaybe "No selection" <$> bSelected <@ eClick
bValue <- stepper "Initial value" eValue
element display # sink UI.text bValue
要带走的两件关键事项是:
Behavior (Maybe a)
的{{1}}参数不会仅设置初始选定值,而是确定应用程序整个生命周期内值的演变。在此示例中,listBox
仅为facts $ UI.userSelection listBox
,可通过the source code of the Widgets
module进行验证。bSelected
(如果事件包含您希望使用的数据,则为(<@)
)。答案 1 :(得分:1)
警告:我不熟悉ThreePenny,我只是在阅读文档。
我认为您需要将sink
列表框放入文本区域:
element display # sink UI.text ((maybe "new text" id) <$> (facts $ userSelection listBox))
答案 2 :(得分:1)
尝试为列表框创建一个步进器,然后只是下沉显示
listB <- stepper Nothing (userSelection listBox)
element display # sink UI.text ((maybe "new text" id) <$> (listB)
然后,如果您想使用按钮
对行为进行采样listB <- stepper Nothing (userSelection listBox)
button <- UI.button # set UI.text "Button"
cutedListB <- stepper Nothing (listB <@ UI.click button)
element display # sink UI.text ((maybe "new text" id) <$> (listB)