GHCJS-DOM guida agli eventi

Question

Sto cercando di capire come creare una GUI con GHCJS-DOM. Ho visto l'esempio Hello World https://github.com/ghcjs/ghcjs-dom-hello, che è banale. L'aggiunta di nuovi nodi è semplice. Quello che non posso fare e che non posso elaborare dalla documentazione della biblioteca (solo le firme) è aggiungere alcuni eventi. Ad esempio, aggiungi un nuovo nodo al corpo con un clic del mouse.

Desidero evitare l'uso di librerie JS come JQuery, perché voglio che la GUI sia portabile tra GHC (webkit) e GHCJS.

In definitiva mi piacerebbe essere in grado di esprimere un evento del mouse come evento FRP, ma mi accontento di un passo alla volta.

Se qualcuno ha una guida, sarei molto grato. Ho usato haskell per alcuni anni, ma questa è la mia prima avventura in DOM.

Answer 1

È possibile ottenere informazioni sul DOM da un numero di posti, tra cui mozilla. Ecco un esempio che aggiunge un gestore di eventi per eventi click sul corpo del documento ...

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()