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 Fantom -------------- --------------- Window Win Document Doc Element Elem Event Event XmlHttpRequest HttpReq/HttpRes
Win
win := Win.cur // get current Win instance win.alert("Hello!") // display a modal dialog win.uri // the URI for this page win.hyperlink(uri) // hyperlink to new page
Doc
doc := Win.cur.doc // get doc instance for this window 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.val // 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| { Win.cur.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=`/foo` }.send("POST", "some content") |res| { Win.cur.alert(res.content) }
Convenience methods are availabe for the common request methods:
HttpReq { uri=`/foo` }.get |res| {...} HttpReq { uri=`/foo` }.post("some content") |res| {...} HttpReq { uri=`/foo` }.postForm(["name":"Barney Stinson"]) |res| {...}
The postForm
will automatically encode the request to look like a normal HTML form submission.