List of Examples
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.
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.
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.
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.
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).
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.