Datadriven Block List

A datadriven list component that can accommodate a variety of styles and controls.

Movies

Star Wars: Episode I - The Phantom Menace
Star Wars: Episode II - Attack of the Clones
Star Wars: Episode III - Revenge of the Sith

The list can be client side filtered via a call to widgetVar.filter(query). The helper tag filterFor can be used to add filtering capabilities to any text input.

The li tag takes an optional chrevron attribute to render a chrevron to the right of the element, a title to render as a list item header, and also a link attribute that will wrap the children of the li in an anchor with href to the attribute value.

list.xhtml

Documentation


<h:inputText pt:placeholder="Search" id=search/>

<t:filterFor widget="movies" target="search"/>

<t:list title="Movies" value="#{controller.movies}" widgetVar="movies">
    <t:li chevron="true" link="#">#{it.title}</t:li>
</t:list>

A datadriven list component that can accommodate a variety of styles and controls.

Info

Tag name	list
Component type	io.tornadofaces.component.List
Renderer type	io.tornadofaces.component.ListRenderer

Attributes

Name	Description	Required
styleClass	Styles to apply to the list section.	false
title	A title to be displayed as the list header.	false
filterFn	A JavaScript function to filter the list when widget.filter() is called. The function is called with each item in the list	false
value	The List of elements, as a value expression.	true
highlightFilter	Highlight text in filtered elements. Default true.	false
hideEmpty	Hide the section completely if the value is of zero length (empty list). Default false (will render title if empty).	false
var	The variable that will refer to each element in the list. Defaults to "it"	false
rendered	Should this component be rendered?	false

Client Side API

Widget: TornadoFaces.widget.List

Method	Params	Return type	Description
setFilterFn(filterFn)	filterFn: Function that will be called to filter then list via `filter()`	function	Override the default filter function used for client side filtering. The method will be called with the parameters `(item, query, index)` and should return true or false to indicate that the given item should be rendered.
filter(query)	query: The query string to filter the list by	String	The default `filterFn` looks for the query text somewhere within each item. A custom filterFn can be provided via `setFilterFn` for finer grained control.

Advanced usage

The markup for the list is very basic, and you can easily replicate the markup with a standard repeater component if necessary. Please refer to the Foundation For Apps Documentation for more information.