pod 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

// basics
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
win.viewport         // get size of window viewport

// event handlers
win.onEvent("hashchange", false) |e| { Win.cur.alert("hashchanged!") }

// storage
win.localStorage["bar"]         // return value for bar from local storage
win.localStorage["foo"] = 25    // store foo:25 in local storage
win.localStorage.remove("foo")  // remove foo from local storage
win.localStorage.clear          // clear all contents from local storage

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.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.bounds             // pos and size 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.