GHCJS-DOM Event Guide

Question

I am trying to figure out how to create a GUI with GHCJS-DOM. I look at a welcome example of the world https://github.com/ghcjs/ghcjs-dom-hello , which is trivial. Adding new nodes is simple. What I cannot do and cannot work from the library documentation (only signatures) is to add some events. For example, add a new node to the body with a mouse click.

I want to avoid using JS libraries like jQuery because I want the GUI to be portable between GHC (webkit) and GHCJS.

Ultimately, I would like to express the mouse event as an FRP event, but I will agree one step at a time.

If anyone has any recommendations, I will be very grateful. I have used haskell for several years now, but this is my first venture in the DOM.

Answer 1

You can get information about the DOM from several places, including mozilla . Here is an example that adds an event handler for click events on the body of the document ...

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