Integrating Bootstrap JS with Tapestry5

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'>
   $('.twipsy').twipsy();
</a>

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

$('#mytwipsy').twipsy({title:function(){
  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){
        commands.push(command);
    }

    public void render(markupwriter writer, renderqueue queue) {
        while(!commands.isempty()){
            queue.push(commands.pop());
        }
    }
}

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;

    @inject
    private javascriptsupport javascriptsupport;

    @inject
    private componentresources resources;

    @symbol(bootstrapsymbolconstants.bootstrap_prefix)
    @inject
    private string bootstrapprefix;

    @injectcontainer
    private clientelement container;

    public string gettitleid() {
        return container.getclientid() + "-title";
    }

    @afterrender
    rendercommand render() {
        addjavascript();

        compositerendercommand commands = new compositerendercommand();

        commands.add(new rendercommand() {
            public void render(markupwriter writer, renderqueue queue) {
                writetitlebegintag(writer);
            }
        });

        commands.add((rendercommand) title);

        commands.add(new rendercommand() {
            public void render(markupwriter writer, renderqueue queue) {
                writetitleendtag(writer);
            }
        });

        return commands;
    }

    private void writetitlebegintag(markupwriter writer) {
        writer.element("div",
            "style", "display:none",
            "id", gettitleid());
    }

    private void writetitleendtag(markupwriter writer) {
        writer.end();
    }

    private void addjavascript() {
        jsonobject arguments = bootstraputils.convertinformalparameterstojson(resources,
            bootstrapprefix);

        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)) {
                json.put(parameter.substring(prefix.length()),
                    resources.getinformalparameter
                        (parameter,
                            string.class));
            }
        }

        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

(function($){
  $.extend(tapestry.initializer, {
    bootstraptwipsy: function(specs){
      var element = $("#" + specs.id);
      var title = $("#" + specs.title);

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

      element.twipsy(specs.arguments);
    }
  });
})(jquery);

that’s it. a simple usage will be

this is some content which contains twipsy
    <a>content</a>

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/