Skip to content
This repository has been archived by the owner. It is now read-only.


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

No Longer maintained moving to node/graphql/react

Tapestry 5 Twitter Bootstrap Module

List Of Contributors

  • Barry Books as trsvax


Bootstrap is a grid based CSS framework started by Twitter. Tapestry is a Java based web framework.


  • Converts existing components such a BeanEditForm and Grid into Bootstrap Forms/Tables
  • Components such as ButtonGroup that make creating Bootstrap HTML easier.
  • Uses Tapestry chain of command so functionality can be extended/overridden.
  • Extensive configuration via the environment

Basic operation

The module attaches a mixin called FW to all existing components. The mixin calls a chain of command with render events. In general the cleaupRender phase is used to modify the DOM created by components so that it is compatible with Bootstrap CSS.

Bootstrap Components:

  • Breadcrumb

  • ButtonGroup

  • Code

  • DropDown

    • marks a set of links so they are formated as a drop down. Can be used in Nav and ButtonGroup
  • Nav

  • NavBar

  • Pagination

  • Thumbnail

Bootstap Mixins

  • Draggable

  • Droppable

  • FW

    • internal mixin for attaching framework chain to component
  • *LoopEnviromentMixin

    • add to Loop component to support paging
  • Pager

    • integrates Pagination and Loop to implement paged data sets
  • PushEnvironment

    • push new objects into the environment
  • Sortable

##Using Bootstrap: Just include the jar file to your project, add the following to your Layout.

@Exclude(stylesheet={"core"})  //If you do not want Tapestry CSS

then modify your Layout.tml Layouts

  <div class="container">

Using Grid

The fw mixins adds an fwtype parameter to the Grid. If this value is null the Grid works as before. Providing a Table Option will cause the table to be formated by Bootstrap

Using BeanEditForm

as with Grid an fwtype parameter will format the form with Bootstrap. based on Forms

Using BeanDisplay

Add fwtype parameter to the BeanDisplay. If the value is null the BeanDisplat looks as before. Use values "dl" or "dl-horizontal" to apply mixin. Any other CSS classes can be additionally specified here, i.e., bootstrap "well".

Using Alerts

Add fwtype parameter to the Alerts. If the value is null the Alerts looks as before. Value fwtype="alert" changes look and feel according to bootstrap alerts.

Until TAP5-1996 fixed Tap5 alerts will use this mapping: Tap5 'info' -> 'alert-success' Tap5 'warn' -> 'alert' Tap5 'error' -> 'alert-error'

Customizing Bootstrap:

There are two Tapestry configurations that allow you to customize Bootstrap. First the EnvironmentSetup.class defines a set of mapped objects that set defaults for most of the components/mixins. For example the following sets the default table type to "table" which will cause all Grid tables to be formated by Bootstrap.

public static void provideEnvironmentSetup(MappedConfiguration<Class, Object> configuration) {
	configuration.override(TableEnvironment.class, new TableValues(null).withType("table"));

Second is the BootstrapProvider chain. This contains an ordered list of provides that create the Bootstrap Provider. The chain is called by the FW mixin for every component. You can override existing providers or add your own.


Tapestry module for Twitter Bootstrap







No packages published

Contributors 4