Section 16.5. CSS, JavaScript, and Widgets

16.5. CSS, JavaScript, and Widgets

Widgets are designed to have JavaScript behaviors and element IDs and classes built right into their template code. So, for simple JavaScript and CSS styling that may be all you need. But whenever you do anything slightly more complex, your widget may need access to JavaScript libraries, like MochiKit, Scriptaculous, or Dojo. Widgets provide a simple syntax to assure that the right script and CSS tags get added to your headers, and that they are only added onceeven if multiple widgets ask for them.

The functions that do all of this are JSLink and CSSLink. When you display any widget on a page, its CSS and JavaScript links get thrown into a couple of set-like objects that contain only one of each CSS or JavaScript link. Then when the page is rendered, these links are conveniently placed in the headers of the page.

When you are using widgets, you don't need to worry about what JavaScript and CSS links need to be included, the widgets themselves know, and will do the right thing automatically.

You don't really need to deal with the JSLink or CSSLink functions unless you are creating your own widgets. But if you are creating or modifying a widget's CSS or JavasScript links, the code is very simple. Here's how the AutoComplete field defines the JavaScript and CSS that it requires in order to work properly.

javascript = [mochikit, JSLink(static,"autocompletefield.js")] css = [CSSLink(static,"autocompletefield.css")]

We'll come back to the AutoComplete widget in section 16.7 where we'll go through each of its parts to show you how easy it is to create full-fledged Ajax-style widgets.