Haste.DOM
:
newTextElem :: String -> IO Elem -- createTextNode newElem :: String -> IO Elem -- createElement appendChild :: Elem -> Elem -> IO () documentBody :: Elem -- document.body
Elem
IO
Note: methods in JavaScript objects become functions in Haskell:
JavaScript: | parent.appendChild(child)
|
Haskell: | 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]
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
(=<=) :: F t o -> F i t -> F i o (>+<) :: F i1 o1 -> F i2 o2 -> F (Either i1 i2) (Either o1 o2) loopLeftF :: F (Either l i) (Either l o) -> F i o