我正在尝试了解如何使用GHCJS-DOM创建GUI.我一直在看你好世界的例子
https://github.com/ghcjs/ghcjs-dom-hello,这是微不足道的.添加新节点非常简单.我不能做的,并且无法从库文档(仅签名)中解决,是添加一些事件.例如,在鼠标单击时向主体添加新节点.
我希望避免使用像JQuery这样的JS库,因为我想通过GUI在GHC(webkit)和GHCJS之间移植.
最后,我希望能够将一个鼠标事件表达为FRP事件,但我会一步一步解决.
如果有人有任何指导我会非常感激.我已经使用了haskell几年了,但这是我第一次尝试使用DOM.
解决方法
您可以从许多地方获取有关DOM的信息,包括
mozilla.这是一个为文档正文中的点击事件添加事件处理程序的示例…
- 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 ()