Dom
Overview
WARNING: the dom API is still an early prototype, so will be going through many changes during development
The dom pod provides a framework for interoperating with the browser DOM and related browser APIs. For the most part, these map one-to-one:
Browser Fan -------------- --------------- Window Window Document Doc Element Elem Event Event XmlHttpRequest HttpReq/HttpRes
Window
Window.alert("Hello!") // display a modal dialog Window.uri // the URI for this page Window.hyperlink(uri) // hyperlink to new page
Doc
Doc.elem("someId") // return the Elem with id='someId' Doc.createElem("div") // create a new <div> element
Elem
// attributes elem["alt"] // get an attribute value elem["alt"] = "Alt text" // set an attribute value elem.id // 'id' attribute elem.name // 'name' attribute elem.tagName // tag name of this element // CSS elem.style // CSS style object for this element elem.computedStyle // computed style for this element elem.className // return the current class name(s) elem.hasClassName("alpha") // does this element have the given class name? elem.addClassName("beta") // add a new class name to any current class names elem.removeClassName("gamma") // remove a class name, leaving any others remaining // tree elem.parent // parent element elem.next // next sibling elem.prev // prev sibling elem.children // List of child elements elem.first // first child, or null if no children elem.add(child) // add a new child element elem.remove(child) // remove a child element // form conveniences elem.value // the 'value' attribute elem.checked // true/false for checkboxes // position and size elem.x // x position within parent elem.y // y position within parent elem.w // width of elment elem.h // height of element // event handlers elem.onEvent("click", false) |e| { Window.alert("$e.target clicked!") } // find elem.find |e| { e.tagName == "img" } // find first <img> descendant elem.findAll |e| { e.tagName == "img" } // find all <img> descendants
XmlHttpRequest
The HttpReq
object is used to make background HTTP requests from the browser. For both sync and async requests, the response is passed to you in the callback closure:
HttpReq(uri).send("some content") |res| { Window.alert(res.content) }
If you are submitting form values, you can use sendForm
to automatically encode the values as a form submission, and set the Content-Type to application/form-url-encoded
:
HttpReq(uri).sendForm(["name":"Barney Stinson"]) |res| { Window.alert(res.content) }
Effects
Modeled after jQuery, the Effect
object allows an element to be animated, such as sliding it down, fading in, or transitioning between colors. Common effects can be applied directly using a built-in method:
// show/hide elem.effect.show elem.effect.show(100ms) elem.effect.hide(200ms) // sliding elem.effect.slideDown(500ms) elem.effect.slideUp(250ms) // fading elem.effect.fadeIn(100ms) elem.effect.fadeOut(100ms) elem.effect.fadeTo(0.75, 200ms)
Arbitrary animations can be applied using the animate
method:
// move elem diagonally down 100px elem.effect.animate(["left":"100px", "top":"100px"], 250ms)