Components Test Page

<%-- Menu tests --%> Menus:
Simple menu:

Menu with image, styles and actions with icons:

<%-- Breadcrumb tests --%> Breadcrumbs:
Default style with modified separator and actionListener handler:

Path style with default separator:

Root should be missing from this breadcrumb:

<%-- ActionLink tests --%> ActionLinks:


Action link with image and text, using vertical alignment property to centre text.

Action link with no text, just an image with title/alt text instead:

<%-- Progressive panel tests --%> Progressive Panels:

HTML text inside the Progressive Panel

nothing exciting here not at all

<%-- RichList component test --%> <%-- The RichList component is different to the data-grid in that it is designed to render it's own child components. This means it is capable of rendering the columns in any order and in any kind of layout. Allowing the impl of details, icons and list views within a single component. --%> <%-- NOTE: Suggest config of each view independantly in the config XML e.g. to allow the icon/details views to use different page sizes or styles. Otherwise you have to pick values "compatible" with all view modes! --%> RichList:
RichList component test shown in Details view mode, including sortable columns of various data types and paging.
<%-- this could be a clickable action image etc. --%> <%-- example of a clickable action image as an icon --%> <%-- example of a DateTime converter --%> <%-- can be used to convert both input and output text --%> <%-- components other than columns added to a RichList will generally be rendered as part of the list footer --%>

NOTE: currently all JSF components within a Progressive Panel MUST be given an explicit ID!
Same list shown in a different view mode (Icons). This mode renderer displays the large icon and renderers in a multi-column format. It also chooses not to display the sort header links. <%-- example of a clickable action image as an icon --%> <%-- example of a clickable action link item --%> <%-- TODO: need some way to allow columns for specific views --%> <%-- example of a DateTime converter --%> <%-- can be used to convert both input and output text --%> <%-- components other than columns added to a RichList will generally be rendered as part of the list footer --%>

Same list shown in a different view mode (List). This mode displays the small icon and uses single column rendering.
<%-- this could be a clickable action image etc. --%> <%-- this could be a clickable action image etc. --%> <%-- example of a DateTime converter --%> <%-- can be used to convert both input and output text --%> <%-- components other than columns added to a RichList will generally be rendered as part of the list footer --%>

<%-- component evaluators --%> Evaluators:
1a. Boolean Evaluator - you should see the next line of text:


1b. Boolean Evaluator - you should not see the next line of text:


2a. Value Set Evaluator - you should see the next line of text:


2b. Value Set Evaluator - you should not see the next line of text:


3a. String Equals Evaluator - you should see the next line of text:


3b. String Equals Evaluator - you should not see the next line of text:


Test evaluators around menu actions:

<%-- Date Picker Component --%> <%-- Example of a tag utilising an Input Component with a custom renderer. The renderer handles encoding and decoding of date values to UI elements --%> Date Picker:
Basic date picker:

Date Picker with CSS style applied: