Barracuda Component Demo

This page demonstrates how we can load an XMLC document and manage Text and List components via a server-side DOM component interface.

If you see a "render failed" anywhere in here, you know the test failed.

Text Components:
This table lists the various HTML elements that a WGenericText component can be bound to. To see what parts of the element get replaced, look for the [text render failed 0] for each component
<A>: We might want to set some text in a link: [text render failed 1]...
<AREA>: Here's a sample image map (we'll set the alt attribute in the area tag):imagemap.gif (2023 bytes) [text render failed 2] [text render failed 3] [text render failed 4] [text render failed 5]
<BUTTON>: Here we set the text in an image button:
<CAPTION>: Here is a little table with a caption:
[text render failed 7]
Seven sailors sailed the seas
In a rickety boat that groaned and wheezed
<DEL>: Here's some text in an <DEL> block: [text render failed 8]
<DIV>: Here's some text in an <DIV> block:

[text render failed 9]

<FIELDSET>: Here's a fieldset:
[text render failed 10]
<H1>...<H6>: And where would we be without a heading?

[text render failed 11]

<IMG>: Here the text gets set in the alt attribute of this image:[text render failed 12]
<INPUT>: Here we set the text in the button:
Setting text in a textfield:
<INS>: Here's some text in an <INS> block: [text render failed 15]
<LABEL>: Here's some text in a label tag:
<LEGEND>: There's a legend tag in here...
[text render failed 17]
<LI>: Text in a list of items:
  • [text render failed 18]
  • [text render failed 19]
  • [text render failed 20]
  • ...
<OBJECT>: We may also want to be able to replace text inside of an <OBJECT> tag, like this: [text render failed 21]
<OPTION>: We also need the ability to change text in <OPTION> components:
<P>: Here we replace an entire paragraph of text...

[text render failed 24]

<PRE>: Same type of thing but with precise text...
[text render failed 25]
<Q>: And here is a quote: [text render failed 26]
<SPAN>: Here's a nice little paragraph of some standalone text. [text render failed 27] The end.
<TEXTAREA>: And of course we can't forget out textareas:
<TITLE>: There's always the title text too (check the title of the browser to verify that it got changed)
<TH>/<TD>: And of course we should actually be able to set data within a table itself...
[text render failed 30]
[text render failed 31]
   
  So...are there others I am forgetting?

 

List Components:
This table lists the various HTML elements that a WGenericList component can be bound to. To see what parts of the element get replaced, look for the [[todo]] for each component
<DL>: Here's an example of a Definition List:
[list render failed 1a]
[list render failed 1b]
[list render failed 1c]
[list render failed 1d]
Hacker
a clever programmer
Nerd
technically bright but socially inept person
<OL>: Here's an example of an Ordered List: (hit refresh to see the list grow)
  1. [list render failed 2a]
  2. [list render failed 2b]
  3. [list render failed 2c]
<OPTGROUP>:
<SELECT>:
<UL>: Here's an example of an Unordered List: (hit refresh to see the list grow)
  • Item 1 [list render failed 5a]
  • Item 2 [list render failed 5b]
  • Item 3 [list render failed 5c]
Other Tags: This section demonstrates that List components can also be bound to any tag supported by the WGenericText component (see above).

Here's a list of items within a <SPAN> tag: [list render failed 6a]

Here's that same list rendered bound to an input control:

You get the idea.

The examples actually get even more interesting. For instance, we can also bind a list of complex components to a node. Here we return a series of input controls followed by text (simulating RadioButtons):[list controls here]

And here's an another case -- our list model returns a series of HTML snippets loaded from other XMLC pages:

[list render failed 8a]

 

 

Table Components:
This table shows how we handle tables (todo)..
<COLGROUP>: (todo)
<TABLE>: Here are a few basic examples...
 
Table A (head, body, foot tagsss)
Col 0 Col 1 Col 2 Col 3
Row 0, Col 0 Row 0, Col 1 Row 0, Col 2 Row 0, Col 3
Row 1, Col 0 Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 0 Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
Row 3, Col 0 Row 3, Col 1 Row 3, Col 2 Row 3, Col 3
Footer goes here

 Blippp

Table B (everything is body)
Col 0 Col 1 Col 2 Col 3
Row 0, Col 0 Row 0, Col 1 Row 0, Col 2 Row 0, Col 3
Row 1, Col 0 Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 0 Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
Row 3, Col 0 Row 3, Col 1 Row 3, Col 2 Row 3, Col 3
Footer goes here

Here's an example that demonstrates how you can set multiple columns and footers by using the HeaderModel and FooterModel structures within a table

Table C (head, body, foot tags)
Row 0, Col 0 Row 0, Col 1 Row 0, Col 2 Row 0, Col 3
Row 1, Col 0 Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Footer goes here

We follow these with a more complex example...


 
Table D (nested tables)
Col 0 Col 1 Col 2 Col 3
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
XO
Footer goes here