Wiring Actions to an Element

vim edited this page Sep 13, 2010 · 2 revisions

An “action” is a catch-all term in Erlang for anything that can be added to the actions property of an element. Actions determine how a Nitrogen element will behave on the page. You can wire actions to any Nitrogen element, and just like Elements, some Actions can be nested.

Most actions, when rendered by Nitrogen, simply cause some Javascript to be attached to an element. The Javascript may be run immediately after the page is loaded, altering the element in some way, or it may listen for a specific event such as onclick or onmouseover before running.

How to Wire an Action

Actions are wired in two ways, either inline, or by calling the wf:wire function. This is mostly for aesthetic purposes, though if you use wf:wire then you will need to give your element a name. Behind the scenes, both approaches have the same effect.

Inline Actions

Actions can be added to an element by setting the actions property of the element.

The code samples below will produce an Headline 1 block of HTML with Scriptaculous’s Effect.Highlight applied.

For example:

#h1 { text="A Heading", actions=#effect_highlight{} }

You can add multiple actions by putting them in a list.


#h1 { text="A Heading", actions=[
	#effect_highlight{},
	#effect_appear{}
]}

Wiring Actions with wf:wire(…)


#h1 { id=headline, text="A Heading" }
...
wf:wire(headline, #effect_highlight{})

Again, you can add multiple actions by putting them in a list.


#h1 { id=headline, text="A Heading" }
...
wf:wire(headline, [
	#effect_highlight{},
	#effect_appear{}
])

Dropping Down to Javascript

Nitrogen allows you to wire plain-old Javascript to an element, and gives you a handy way to reference elements in the process.

You can use obj('me') to get current element, obj('me.child1.child2') to get child elements of the current element, or obj('element1.element2') to get a reference to some other element on the page.

Example to show an alert box with the id of the current element:

#h1 { id=headline, text="A Heading", actions="alert(obj('me').id)"}

- or -


#h1 { id=headline, text="A Heading" }
...
wf:wire(headline, "alert(obj('me').id)")