GHCJS-DOM事件指导

Question

我正在尝试了解如何使用GHCJS-DOM创建GUI.我一直在看hello world示例https://github.com/ghcjs/ghcjs-dom-hello,这是微不足道的.添加新节点非常简单.我不能做的,并且无法从库文档(仅签名)中解决的是添加一些事件.例如,在鼠标单击时向主体添加新节点.

我希望避免使用像JQuery这样的JS库,因为我想通过GUI在GHC(webkit)和GHCJS之间移植.

最后,我希望能够将一个鼠标事件表达为FRP事件,但我会一次解决一个步骤.

如果有人有任何指导我会非常感激.我已经使用了haskell几年了,但这是我第一次进入DOM.

Answer 1

您可以从包括mozilla在内的多个地方获取有关DOM的信息.这是一个为文档正文上的点击事件添加事件处理程序的示例...

module Main (
    main
) where

import Control.Applicative ((<$>))
import Control.Monad.Trans (liftIO)
import GHCJS.DOM
       (enableInspector, webViewGetDomDocument, runWebGUI)
import GHCJS.DOM.Document (documentGetBody, documentCreateElement)
import GHCJS.DOM.HTMLElement (htmlElementSetInnerHTML, htmlElementSetInnerText)
import GHCJS.DOM.Element (elementOnclick)
import GHCJS.DOM.HTMLParagraphElement
       (castToHTMLParagraphElement)
import GHCJS.DOM.Node (nodeAppendChild)
import GHCJS.DOM.EventM (mouseClientXY)

main = runWebGUI $ \ webView -> do
    enableInspector webView
    Just doc <- webViewGetDomDocument webView
    Just body <- documentGetBody doc
    htmlElementSetInnerHTML body "<h1>Hello World</h1>"
    elementOnclick body $ do
        (x, y) <- mouseClientXY
        liftIO $ do
            Just newParagraph <- fmap castToHTMLParagraphElement <$> documentCreateElement doc "p"
            htmlElementSetInnerText newParagraph $ "Click " ++ show (x, y)
            nodeAppendChild body (Just newParagraph)
            return ()
    return ()