Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Listed the Tapestry.ElementEffect functions, resolving an old TODO on the javascript page

...

Zones are Tapestry's approach to performing partial page updates. A Zone component renders as an HTML element, typically a <div>, with the "t-zone" CSS class. (It also adds some JavaScript to the page to "wire up" a Tapestry.ZoneManager object to control updating that element.)

...

The show and update functions (see Zone Functions, below) apply to the Zone <div>, not just the update <div>.

Event Handler Return Types

...

A Zone may be initially visible or invisible. When a Zone is updated, it is made visible if not currently so. This is accomplished via a function on the Tapestry.ElementEffect client-side object. By default, the show() function is used for this purpose. The Zone's show parameter is the name of a If you want Tapestry to call a different Tapestry.ElementEffect function when updates occur, specify its name with the zone's show parameter.

If a Zone is already visible, then a different effect function is used to highlight the change. Here it is the Zone's update parameter, and a default By default, the highlight() function is called, which performs a yellow fade to highlight that the content of the Zone has changed. Alternatively, you can specify a different effect function with the Zone's update parameter:

Tapestry.ElementEffect Function

Purpose

show()

make the zone visible if it isn't already visible

highlight()

Highlight changes to an already-visible zone

slidedown()

Scroll the content down

slideup()

Slide the content back up (opposite of slidedown)

fade()

Fade the content out (opposite of show)

To have Tapestry update a zone without the usual yellow highlight effect, just specify "show" for the update parameter: <t:zone t:id="myZone" t:update="show">

You may also define and use your own JavaScript effect function (with lower-case names), like this:

Code Block
JavaScript
JavaScript

Tapestry.ElementEffect.myeffectname = function(element){ YourJavascriptCodeGoesHere; }

Zone Limitations

Unlike many other situations, Tapestry relies on you to specify useful and unique ids to Zone components, then reference those ids inside EventLink (or ActionLink, or Form) components. Using Zone components inside any kind of loop may cause additional problems, as Tapestry will uniqueify the client id you specify (appending an index number).

...