Over a million developers have joined DZone.

Integrating Bootstrap JS with Tapestry5

DZone's Guide to

Integrating Bootstrap JS with Tapestry5

· Java Zone
Free Resource

Download Microservices for Java Developers: A hands-on introduction to frameworks and containers. Brought to you in partnership with Red Hat.

Adding Bootstrap JS Twispy to your template is very easy

<a href='#' class='twipsy' data-title='My Twipsy'>Hover over me</a>
<script type='text/javascript'>

and you can always use property-expressions to display some dynamic data. But what if you want to have block rendered as title. This was exactly what I was trying to accomplish in one of my recent projects. (We are using tapestry-jquery for jquery support in that project.)

This involves a javascript trick and ofcourse a tapestry mixin. Bootstrap allows you to change the title dynamically by setting title property to a function. So if we are able to render the block in a hidden element, we can always use this function to display it

  return $('myhiddenblock').html();

Before we render the block we need to hide it by wrapping it in a hidden div. The key is what Thiago always says

Tapestry only renders RenderCommands

We add three RenderCommands to the RenderQueue. The first one and last one to wrap the block in a hidden div and the middle one to render the title block. The problem with RenderQueue is that it is a Stack(not a Queue). To “negate this stack effect”, we create a wrapper around it.

public class CompositeRenderCommand implements RenderCommand {
    private Stack commands = CollectionFactory.newStack();

    public void add(RenderCommand command){

    public void render(MarkupWriter writer, RenderQueue queue) {

It adds the commands to a stack and the pushes it on the queue(which is a stack :) ). Sometimes two wrongs do make a right :)

As this functionality will be better served with a mixin so here it is

@Import(library = {"bootstrap-twipsy.js", "twipsy.js"})
public class Twipsy {

    @Parameter(required = true, allowNull = false, defaultPrefix = BindingConstants.BLOCK)
    private Block title;

    private JavaScriptSupport javaScriptSupport;

    private ComponentResources resources;

    private String bootstrapPrefix;

    private ClientElement container;

    public String getTitleId() {
        return container.getClientId() + "-title";

    RenderCommand render() {

        CompositeRenderCommand commands = new CompositeRenderCommand();

        commands.add(new RenderCommand() {
            public void render(MarkupWriter writer, RenderQueue queue) {

        commands.add((RenderCommand) title);

        commands.add(new RenderCommand() {
            public void render(MarkupWriter writer, RenderQueue queue) {

        return commands;

    private void writeTitleBeginTag(MarkupWriter writer) {
            "style", "display:none",
            "id", getTitleId());

    private void writeTitleEndTag(MarkupWriter writer) {

    private void addJavaScript() {
        JSONObject arguments = BootstrapUtils.convertInformalParametersToJSON(resources,

        JSONObject mainParams = new JSONObject();
        mainParams.put("arguments", arguments);
        mainParams.put("id", container.getClientId());
        mainParams.put("title", getTitleId());
        javaScriptSupport.addInitializerCall("bootstrapTwipsy", mainParams);


public class BootstrapUtils {

    public static JSONObject convertInformalParametersToJSON(ComponentResources resources,
        String prefix) {
        JSONObject json = new JSONObject();

        for(String parameter : resources.getInformalParameterNames()) {
            if(parameter.startsWith(prefix)) {

        return json;


Note we use the informal parameters prefixed with bootstrapPrefix(‘bp-’) as arguments to the twipsy function call.

We add a simple javascript to accomplish our javascript part of the trick

  $.extend(Tapestry.Initializer, {
    bootstrapTwipsy: function(specs){
      var element = $("#" + specs.id);
      var title = $("#" + specs.title);

      $.extend(specs.arguments, {
        title: function(){
          return title.html();


That’s it. A simple usage will be

This is some content which contains twipsy

Some Tooltip <strong>Demo</strong> with a lot of <em>HTML Formatting!!</em>


From http://tawus.wordpress.com/2011/10/28/integrating-bootstrap-js-with-tapestry5/

Download Building Reactive Microservices in Java: Asynchronous and Event-Based Application Design. Brought to you in partnership with Red Hat


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}