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 your link text here . 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: ") $>" alt="someimage" /> Please take a look in the existing ecpp pages for additional usage examples.