Haste.DOM
:
newTextElem :: String -> IO Elem newElem :: String -> IO Elem appendChild :: Elem -> Elem -> IO () documentBody :: Elem
createTextNode
,
createElement
, appendChild
and
document.body
in JavaScript, that we saw earlier.
parent.appendChild(child) in JavaScript becomes
appendChild parent child
Haste.DOM
setAttr, setProp, setStyle :: Elem -> PropId -> String -> IO () with :: IO Elem -> [Attribute] -> IO Elem
with
mkButton :: String -> IO Elem mkButton label = do button <- newElem "input" setAttr button "type" "button" setAttr button "value" label return button
mkButton :: String -> IO Elem mkButton label = newElem "input" `with` [attr "type" =: "button", attr "value" =: label]
Haste.Events
onEvent :: Event ev => Elem -> ev -> (EventData ev -> IO ()) -> IO HandlerInfo -- Instances in the Event class: data BasicEvent = Change | Submit -- and more... data KeyEvent = KeyPress | KeyUp | KeyDown data MouseEvent = Click | MouseDown | MouseUp -- and more...
EventData
counterExample = do input <- newElem "input" button <- mkButton "Increment" appendChild documentBody input appendChild documentBody button let incr _ = do s <- getProp input "value" let v = read s setProp input "value" (show (v+1)) onEvent button Click incr
IO
SP i o
i
o
IO
F hi ho
buttonF :: String -> F x ButtonClick counterF :: F ButtonClick Int displayF :: F Int x