Hướng dẫn sự kiện GHCJS-DOM

Question

Tôi đang cố gắng hiểu cách tạo GUI bằng GHCJS-DOM. Tôi đã nhìn vào ví dụ thế giới hello https://github.com/ghcjs/ghcjs-dom-hello, điều này là tầm thường. Việc thêm các nút mới rất đơn giản. Những gì tôi không thể làm, và không thể làm việc ra khỏi tài liệu thư viện (chỉ chữ ký) là thêm một số sự kiện. Ví dụ: thêm một nút mới vào cơ thể khi nhấp chuột.

Tôi muốn tránh sử dụng các thư viện JS như JQuery, bởi vì tôi muốn GUI có thể di chuyển giữa GHC (webkit) và GHCJS.

Cuối cùng tôi muốn thể hiện sự kiện chuột là sự kiện FRP, nhưng tôi sẽ giải quyết từng bước một.

Nếu có ai có bất kỳ hướng dẫn nào, tôi sẽ biết ơn nhất. Tôi đã sử dụng haskell trong một vài năm nay, nhưng đây là lần đầu tiên tôi tham gia vào DOM.

Answer 1

Bạn có thể nhận thông tin về DOM từ một số địa điểm bao gồm mozilla. Dưới đây là ví dụ thêm bộ xử lý sự kiện cho các sự kiện nhấp chuột trên nội dung tài liệu ...

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