| <document> |
| <body> |
| <section name="Examples"> |
| |
| <subsection name="ZoneDemo.tml (partial)"> |
| |
| <source><![CDATA[ |
| <t:zone t:id="counterZone" id="counterZone"> |
| <p>You have clicked the link <strong>${clickCount}</strong> times.</p> |
| </t:zone> |
| |
| <p> |
| <t:actionlink t:id="clicker" zone="counterZone">increment the count</t:actionlink> |
| </p> |
| |
| ]]></source> |
| |
| <p> It's pretty standard to bind the id parameter of a zone; the zone parameter of ActionLink |
| and Form are the<em>client-side element id</em>, not the component id. They are often, |
| but not always, the same. Binding the id parameter ensures that a particular, fixed value |
| is used. |
| </p> |
| |
| <p> |
| Binding the zone parameter of the ActionLink, EventLink or Form (the "trigger" |
| component) is what triggers the partial-render and update logic. |
| </p> |
| |
| </subsection> |
| |
| <subsection name="ZoneDemo.java"> |
| <source><![CDATA[ |
| public class ZoneDemo |
| { |
| @Property |
| @Persist |
| private int clickCount; |
| |
| @InjectComponent |
| private Zone counterZone; |
| |
| Object onActionFromClicker() |
| { |
| clickCount++; |
| |
| return counterZone.getBody(); |
| } |
| } |
| ]]></source> |
| |
| <p> |
| The event handler method for the clicker component increments the count, then |
| returns the body of the zone. The body will be re-rendered (reflecting the new count), |
| and sent to the client, which will update the zone in place, and trigger and animation |
| (by default, a simple yellow fade) to draw the user's attention. |
| </p> |
| |
| <p> |
| Not shown here, but fully valid, is to include JavaScript libraries and generate |
| initialization JavaScript. This fully consistent with ordinary full-page renders. |
| </p> |
| |
| |
| </subsection> |
| <subsection name="Configuring the Zone Component in the AppModule class"> |
| <p> |
| It is possible to configure the show and update parameters of the Zone component in the AppModule class of your application. All your Zone components will use this default configuration until you define a value for one of these parameters. |
| </p> |
| <source><![CDATA[ |
| public static void contributeApplicationDefaults(MappedConfiguration<String, String> configuration) |
| { |
| configuration.add(ComponentParameterConstants.ZONE_SHOW_METHOD, "show"); |
| |
| configuration.add(ComponentParameterConstants.ZONE_SHOW_METHOD, "highlight"); |
| } |
| ]]></source> |
| </subsection> |
| |
| </section> |
| </body> |
| </document> |
