Руководство GHCJS-DOM

Question

Я пытаюсь понять, как создать графический интерфейс с GHCJS-DOM. Я смотрел на пример "Привет, мир!" 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 ()