GHCJS-DOM事件指導

Question

我想了解如何使用GHCJS-DOM創建一個GUI。我一直在尋找你好世界的例子https://github.com/ghcjs/ghcjs-dom-hello，這是微不足道的。添加新節點非常簡單。我不能做的，也不能從圖書館文檔（只有簽名）中解決的是添加一些事件。例如，通過單擊鼠標將新節點添加到主體。

我希望避免使用JS庫，如JQuery，因爲我想通過GUI在GHC（webkit）和GHCJS之間移植。

最終，我希望能夠將鼠標事件表達爲FRP事件，但我會一次解決一個步驟。

如果有人有任何指導，我會很感激。我已經使用haskell幾年了，但這是我第一次進入DOM。

Answer 1

您可以從許多地方獲得有關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()