Live development guidelines
===========================

This file contains some guidelines for developers about what to obey
when adding new functionality to live plugin.

First of all please look at the existing code and how it was done
there. We are still open for improvement suggestions though.

We want to support a broad range of browsers. On one side are hand held
devices like WEB-enabled PDAs or mobile phones. They often lack full
grown support for ECMAScript and have small screen sizes. The other
extreme are the desktop browsers like FireFox, Konqueror, Opera and
perhaps IE (if the 'powers that be' make him more CSS compliant).
Here WEB 2.0 features can improve the users experience.


With or without ECMAScript
--------------------------

Since not all browsers support ECMAScript, we need to make sure all
functions live wants to provide need to be accessible through links.

With the mootools framework and its selection functions we can enhance
the user experience through ECMAScript by selecting the relevant
elements in the DOM and attaching event handlers from the loaded
script files. Thus when the user disables ECMAScript in his browser
(or the browser does not support it) the traditional web technique of
jumping between pages provides the functions. With enabled ECMAScript
the event handlers can take over and provide a nifty Web 2.0 technique
solution to the user.

To enable a tooltip just add a 'title' attribute on the element and
load 'hinttips.js' in your pages (Actually this will be allready done
for you if you use the live page-framework).

For popup windows that asynchronously load its contents you need to
use normal links like <a href="epginfo.html?eventid=evnt_identifier">
your link text here </a>.  If 'infowin.js' is loaded it will enhance
these links with AJAX functionality. If not the link will change to a
new page with the requested information.

This means that both users with and without ECMAScript support will
benefit from the functions in live.


Themeing
--------

Current CSS based themeing in live depends on additional stylesheets
and a configurable location to retrieve images from (see
css-themeing.txt).

Developers must use the <& pageelems.stylesheets &> component in their
pages to include both the default and the themed stylesheet. This is
the easy part, because stylesheets are referred in the header at a
central location.

More difficult is the access to images, which is spread around the
pages at the corresponding locations. To support this, a new method in
the live Setup class (see file setup.h) has been added. It is called
'GetThemedLink'. For every image, that might be customized, you must
use a img tag according to this example:

  <img src="<$ LiveSetup().GetThemedLink("img", "<imagename>") $>"
  alt="someimage" />

Please take a look in the existing ecpp pages for additional usage
examples.