ZonePlugin

Gather content of a page in named zones while rendering it

The primary purpose of ZonePlugin is to streamline the anatomy of a HTML page in a way to allow today's browsers to process it more efficiently. Page loading time has been reported to decrease significantly when all JavaScript files are removed from the HEAD element and appended to the end of the BODY element of a page. That's because the browser will stop processing a page as soon as a JavaScript file is found in the linear order of the page. The browser will only proceed after this file has been downloaded and excecuted. Notably other content like CSS files and image material will not be downloaded in parallel as long as the JavaScript interpreter hasn't finished.

Currently, Foswiki uses ADDTOHEAD to place additional CSS and JS files into the HEAD element. It does not reorder those files in any way other than specified by the explicit requires argument to the macro. Further more, it is only able to add stuff to one specific location of a HTML page, the HEAD element.

By using ADDTOZONE CSS and JS material can be added to the resulting page incrementally while the core engine parses templates and wiki applications. ADDTOZONE's first parameter is the name of the zone to add stuff to. There are two special zones: script and head. All CSS should be added to the head zone while all JS goes into the script zone.

The actual location of a zone is specified with an explicit RENDERZONE macro. This macro expands to the content of all material that has been posted to the named zone. Note, that this happens at the very end of the rendering pipeline of Foswiki. That means RENDERZONE is not processed as a normal macro obeying the evaluation order of the TML parser. Instead, all calls to ADDTOZONE are processed by the TML parser first after which all zones are expanded.

If RENDERZONE{head} and RENDERZONE{script} aren't found in the final page explicitly, they are expanded at the appropriate position, that is at </head>.

The features of this plugin have been proposed as a core feature for Foswiki to replace the standard ADDTOHEAD with the more generic ADDTOZONE tag. This plugin allows authors of extensions and wiki applications to make use of this advanced feature in a backwards-compatible way. As soon as the ADDTOZONE macro has been released as part of newer Foswiki versions, this plugin won't be of use anymore.

WARNING: Using this plugin can potentially break your installation. If you experience occasional JavaScript errors, enable {MergeHeadAndScriptZones} in configure. This mode will render the HTML page in a non-optimized way similar to how the standard ADDTOHEAD mechanism does.

In any case is it recommended to use ADDTOHEAD or ADDTOZONE to properly add this code to the page. It is not recommended to add JavaScript code otherwise.

If you rely on having JavaScript added to the page without using ADDTOHEAD or ADDTOZONE then you have to enable {MergeHeadAndScriptZones} mode most probably. In this case the HTML page cannot be optimized.

Syntax

ADDTOZONE

%ADDTOZONE{
  "zone"
  ...
}%

Parameters:

• "zone" optional, comma-separated list of the names of zones that the content should be added to. The only zones guaranteed to exist are head and script. Defaults to head.
• id optional, identifier for the text being added with the ADDTOZONE call, to be used in the requires parameter of other ADDTOZONE calls.
  • Multiple ADDTOZONE calls with the same id parameter will simply overwrite the earlier ADDTOZONE call.
• requires="..." optional, comma separated string of ids of text within this zone that this content should follow when the zone is rendered. The content will be rendered even if a specified id is missing.
• text="..." optional, text to be added to the named zone, mutually exclusive with topic.
• topic="..." optional, full qualified web.topic name that contains the text to be added, mutually exclusive with text. Defaults to %BASETOPIC%
• section="..." optional, section of the topic to be added, defaults to the default section between STARTINCLUDE and STOPINCLUDE.

What is a "Zone"?

Zones are specific places in the output HTML that are marked by calls to the RENDERZONE macro. Zones are used to collect various content together, such as Javascript and CSS, that must be included in the output HTML in a specific order, and in a specific place.

There are two special zones called head and script. The head zone is rendered as part of the HTML head section. It is the catch-all container for any content supposed to be placed into the HTML head section, except Javascript, which is collected in the script zone.

All Javascript must always be added to the script zone exclusively, in order to grant ordering constraints among scripts are resolved properly. Never add Javascript to the head zone -- never add non-Javascript content to the script zone.

Both zones are added to the HTML head section automatically just before the closing </head> tag as if they were specified explicitly in the skin templates using:

<head>
...
%RENDERZONE{"head"}%
%RENDERZONE{"script"}%
</head>

You may create as many zones in addition to the standard head and script zones as you like. For any non-standard zone specified in ADDTOZONE you will also need to provide an appropriate RENDERZONE.

Interesting use cases in wiki applications:

• Create a sidebar zone to add widgets,
• Create a toolbar zone to add buttons icons
• Create a menu zone to add menu entries

Adding content to a zone

ADDTOZONE adds content to a zone identified with the id parameter. An id identifier is unique within the zone that they are added to. When the same id is used in multiple calls to ADDTOZONE the last call will win, that is previous content of the same id will be overwritten.

Enforcing a linear order of content within a zone

An ADDTOZONE call may ensure that its content appears after the content of some other ADDTOZONE calls by specifying their ids in the requires parameter. The requires parameter constraints the linear order of content added to a zone. When a zone is rendered, all ordering constraints expressed via requires are satisfied. Those ids not found in a zone don't have any influence on the final ordering. Missing ids aren't considered an error rather than an over-specified ordering problem.

Working with {MergeHeadAndScriptZones} disabled (default)

In this mode, the head and script zones are treated separately.

Even when head and script zones are treated separately, the head zone will always be rendered before the script zone, unless otherwise specified using RENDERZONE explicitly. So any content in the script zone that depends on content placed into the head zone is satisfied intrinsicly as they are both rendered as specified above.

Working with {MergeHeadAndScriptZones} enabled

In this mode, the head and script zones are separate when adding to them, but may be treated as merged when you call RENDERZONE if there are any dependencies specified that only exist in the opposite zone. This allows an ADDTOZONE{"head"...} to to successfully require an id that has been added to script.

{MergeHeadAndScriptZones} is provided to maintain compatibility with legacy extensions that use ADDTOHEAD to add <script> markup and require content that is now in the script zone. {MergeHeadAndScriptZones} will be removed from a future version of Foswiki.

Example: Adding to a zone with missing dependencies

You must ensure that no head content (and no inline Javascript) depends on script content. Any such dependency will be ignored.

In real world application this isn't a problem as Javascript is never added to the head zone or Javascript zone part of the script zone never really depends on non-Javascript content part of the head zone.

HTML comment decoration which normally appears after each id's content in the rendered HTML will contain a small informative text to aid debugging.

Example

%ADDTOZONE{
  "script"
  text="
  <script type='text/javascript'>
    alert('test');
  </script>"
  requires="some-id-that-exists-in-script"
  id="MY::TEST"
}%

Result

<script type='text/javascript'>
  alert('test');
</script>
<!-- MY::TEST: requires= missing ids: some-id-that-exists-in-script -->

Example: Adding Javascript to a page

Make sure that all inline Javascript code in the topic (if it is allowed) is added to the page using %ADDTOZONE{"script"...requires="library-id"}% with the appropriate library-id to guarantee a correct load order. For example, jQuery code should be added as follows:

%JQREQUIRE{"shake"}%
%ADDTOZONE{
   "script"
   id="MyApp::ShakePart"
   text="
   <script type='text/javascript'>
      jQuery('#something').shake(3, 10, 180);
   </script>"
   requires="JQUERYPLUGIN::SHAKE"
}%

where "MyApp::ShakePart" is a unique id to identify the text added to script; and JQUERYPLUGIN::SHAKE signifies that the content added with that identifier should appear beforehand.

Example: Adding CSS to a page

%ADDTOZONE{"head"
   id="MyCSS"
   text="
      <style type='text/css' media='all'>
         @import url('%PUBURLPATH%/%SYSTEMWEB%/MyCSS/foo.css');
      </style>"
}%

See also RENDERZONE, Using ADDTOZONE, Updating applications to use script zone

RENDERZONE

%RENDERZONE{"zone" ...}%

See ADDTOZONE for an explanation of zones.

Parameters:

• "zone" required, name of the zone.
• format="..." optional, format string for each item added to the zone, default:

  $item <!--<literal> $id $missing</literal>-->

  Tokens:
  • $id - id of the ADDTOZONE call within the zone currently being rendered.
  • $item - text of the ADDTOZONE call within the zone currently being rendered.
  • $zone - the "zone" currently being rendered.
  • $missing - if the ADDTOZONE call being rendered required any id which was not found, then $missing is the missingtoken parameter; empty string otherwise.
  • $missingids - comma separated list of ids that were required by the ADDTOZONE call currently being rendered but weren't found within this zone.
• missingtoken="..." optional, this will be the string assigned to the $missing format token for use in the format parameter. Default:

  $id: requires= missing ids: $missingids

• chomp="on" remove leading and trailing whitespace from formatted items, can be useful for pretty-printing and compression.
• header="..." optional, prepended to the output
• footer="..." optional, appended to the output
• separator="..." optional, put between each item of a zone

Supports the standard format tokens in all parameters.

Notes:

• header and footer are not output if there is no content in the zone (nothing has been ADDTOZONEd ). However they are output if the output is the empty string (at least one ADDTOZONE has been processed).
• Zones are cleared after being rendered; they are only ever rendered once.
• head and script are automatic zones. They don't require a corresponding RENDERZONE anywhere in the templates - they are automatically inserted before the </head> tag in the output HTML page.
• Normally, dependencies between individual ADDTOZONE statements are resolved within each zone. However, if {MergeHeadAndScriptZones} is enabled in configure, then head content which requires an id that only exists in script will be re-ordered to satisfy this dependency.

  {MergeHeadAndScriptZones} will be removed from a future version of Foswiki.

See also ADDTOZONE for more information on zones.

Perl API

This plugin patches the Foswiki::Func API for backwards compatibility.

• New Foswiki::Func::addToZone($zone, $id, $text, $requires)
• Replaces Foswiki::Func::addToHEAD() to use the =head namespace of this plugin instead of Foswiki::_HTMLHEAD

The latter will try to detect text/javascrtipt and move content into the script zone. Otherwise, it will be added to the head.

Any use of ADDTOHEAD or Foswiki::Func::addToHEAD() will emit a warning to the log files (must be switched on with the Warnings flag in configure). This can be used to hunt down suboptimal use of these APIs.

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Author(s):	Michael Daum
Copyright:	© 2010 Michael Daum http://michaelaumconsulting.com
License:	GPL (Gnu General Public License)
Release:	3.1
Version:	9442 (2010-09-30)
Change History:
29 Sep 2010	Foswikitask:Item9763 revert recent changes and forward port script zone to make it work on old foswiki engines
06 Sep 2010	Foswikitask:Item9588: Update ZonePlugin to match Foswiki 1.1. Removed {OptimizePageLayout}, replaced with {MergeHeadAndScriptZones}. Removed body zone, replaced with script zone. Refer to Foswikitask:Item9588 for more info
28 Mar 2010	fix problem where Foswiki 1.0.x installations would fail with "Undefined subroutine &Foswiki::Func::addToZone"
26 Mar 2010	suppressing plugin initialisation on Foswiki engines >= 1.1; renamed BackwardsCompatible switch to OptimizePageLayout (defaults to off)
19 Feb 2010	added {BackwardsCompatible} switch
15 Feb 2010	be more careful applying the monkey-patch to the Func API; parsing RENDERZONE properly but finally inserting the zone at the end of the rendering pipeline
12 Feb 2010	initial release
Dependencies:	None
Home page:	Foswiki:Extensions/ZonePlugin
Support:	Foswiki:Support/ZonePlugin