equanda tapestry5 components demo

This is the example for the tapestry5 components which are part of equanda.

Invisible, but not less useful, is the FormTraverse component which makes the it possible to use the site without mouse. There is a tight integration between the FormTraverse and Tabs components, which makes switching between tab pages automatic when pressing tab.

This project can be found in SVN at https://equanda.svn.sourceforge.net/svnroot/equanda/t5-equanda-example

Accordion
Tabs
Truncate
TreeTable
PagedLoop
TextField
TextArea
Slider
DeltaBar

Menu First Part

Sample menu, the links don't do anything though...

Do something
Something else
And even more

Another part

Just to demonstrate that you can put a lot of stuff in these menus.

Other

Data
Reports
Import
Export

Help

This is the equanda tapestry5 component example. This part on the left demonstrates how the Accordion component can be used to create a full height accrdion with various information.

On the right part, there is a Tabs component in action. One tab contains another Accordion component, one another tags compoennt. This is done to demonstrate that you can put multiple objects on one page.

Here is a second tab component which shows that tabs can be nested.

Page 1
Page 2

This content is repeated on all tabs.

This is the first tab page of the second tab component.

And when there is one, there should also be a second, otherwise there would be little use having a tab page.

The truncate component allows truncating very long text to something more manageable. Its is particularly useful in tables.

This long item+

A long item which uses the ...

This illustrates the TreeTable component. It displays a static (no AJAX) table.

For each node, several blocks can be displayed, each position in a different column.

It is possible to determine the number of levels of the tree which are unfolded.

Region Capital Inhabitants
root
Europe
Benelux
Belgium Brussels 10.6m
Netherlands Amsterdam 16.4m
Luxemburg Luxemburg .4m
France Paris 60.9m
North America
United States Washington DC 303.8m
Canada Vancouver 33.2m
Asia
China Bejing 1330m

Region	Capital	Inhabitants
root
Europe
Benelux
Belgium	Brussels	10.6m
Netherlands	Amsterdam	16.4m
Luxemburg	Luxemburg	.4m
France	Paris	60.9m
North America
United States	Washington DC	303.8m
Canada	Vancouver	33.2m
Asia
China	Bejing	1330m

The PagedLoop component is very similar to a normal "loop" component, except that the items are automatically split accross several "pages" and links are provided to sitch between these pages.

The full content of the looped list is included in the document and the switch between the pages is fully handled client side.

need

long

list

items

show

the

paging

action.

12 3

Add

The TextField component is a variant of the tapestry builtin textfield with support of zones. When the value changes, a zone may be updated based on the changed value.

Any contents typed in the first field is displayed again behind it.

The second field displays the lower and upper case contents separated by an infix.

The TextAreaAutoExpander component assures that all textarea elements in the page automatically adjust their size based on the amount of text in it. It grows and shrinks automatically when needed.

Usage is simple, just include

somewhere in your page (or layout component).

The Slider component allows selecting a numeric value

A value between one and hundred with precision of one.

A value between zero and one with precision of .5.

A disabled slider.

A value between one and hundred, incrementing by 10.

A value between zero and five with precision of .1.

The DeltaBar component allow display a simple horizontal bar with from and to values.

27%82%

Usage is simple, just include

<equanda.DeltaBar fromPercentage="literal:27" toPercentage="literal:82" />

somewhere in your page (or layout component).

8%100%

0%75%

76%76%

76%85%

For this last, more complete example, the code is

<t:equanda.DeltaBar fromPercentage="literal:76" toPercentage="literal:85" width="400" borderColour="blue" backgroundColour="black" textColour="white" fromColour="darkgray" toColour="green" />