Client Side Templates, version 0.1


Table of Contents

Client Side Templates, version 0.1
Intro
CST elements
data
frame
window
hidebox
title

List of Examples

1. ct:data
2. ct:frame
3. ct:window
4. ct:hidebox

Client Side Templates, version 0.1

Intro

The goal of CST engine is to ease dynamic web content creation by using mixed XML markup in XHTML. Reference implementation parses this markup on client side and uses JavaScript DOM to create, change or destroy web widgets "on the fly". Main idea is very simple: there is the CST XML namespace, and when CST parser meets nodes from the namespace, it creates respective standard HTML code and attaches it to the HTML body or to a parent widget.

Prerequisites: a browser with JavaScript and cookies support turned on. JavaScript engine MUST support XMLHttpRequest and DOMParser objects and MAY support XSLTProcessor object.

CST elements

All examples below use prefix ct for CST namespace. All sizes and coordinates are given in pixels. All xml attributes are optional unless there is no “mandatory” note in the description.

data

Example 1. ct:data

<ct:data src="/bala.xml" transform="/dala.xsl" />
<ct:data>
	Static data, just like <div />
</ct:data>
		      

Creates “data slot”. The only difference from XHTML div element is that data can contain static data as well as download it from the server (note src attribute). Possible attributes:

  • base — (connexion specific) a base for a command.

  • cmd — (connexion specific) a command to run (command output will be loaded asynchronously).

  • src — load data from path, absolute or relative. No URLs allowed.

  • load — if specified, instructs data to not load the data immediately, but wait an event. Possible values for this attribute are: no or JavaScript event names (like onclick, onmouseover etc. If specified as no, do not load data by itself, but wait a signal from parent widget.

  • transform — use specified XSLT for XML transformation. XSLT will be applied only for text/xml or application/xhtml+xml mime types. As for src, no URLs allowed, only absolute or relative path can be used.

frame

Example 2. ct:frame

<div>
	<!-- Standard XHTML code contains embedded CST
		code. It is crucial to use XHTML, 'cause
		legacy HTML markup can't contain non-HTML
		elements. -->
	<ct:frame x="25" y="25">
		<!-- frame content -->
		...
	</ct:frame>
</div>
		      

Element frame creates a frame with fixed position. If no size is given via attributes, the frame can change size according to it's content. Possible attributes:

  • x — X coordinate of the top left corner.

  • y — Y coordinate of the top left corner.

  • w — width of the frame.

  • h — height of the frame.

  • set-id — set ID of the frame.

window

Example 3. ct:window

<ct:window set-id="debug" title="bala" w="640">
	<ct:data src="/debug.xml" transform="/main.xsl" />
	<ct:data>
		Debug window with transformed content of /debug.xml
	</ct:data>
</ct:window>
		      

Creates a moveable frame, a “window”-analogue. If w and/or h attributes are specified, the window will be also resizeable along respective axis. In any other aspects window works like frame widget. Attributes:

  • x — X coordinate of the top left corner.

  • y — Y coordinate of the top left corner.

  • w — width of the window.

  • h — height of the window.

  • set-id — set ID of the window.

  • title — window title (mandatory).

hidebox

Example 4. ct:hidebox

<ct:hidebox load="onclick">
	<ct:title>A menu item</ct:title>
	<ct:data src="/menu-item0.xhml" load="no" />
</ct:hidebox>
		      

Create a “hidebox”: widget, that can be collapsed or expanded with a mouse click. Hidebox widget contains three parts: a two-state “hide” button, a title and a data container. Such container can be supplied with any number of data widgets.

  • load — specifies, when to send “load” signal to data widgets.

  • set-id — set ID of the hidebox.

title

See hidebox definition above. There is no attributes for title widget.