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'>

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 = $("#" +;
      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>

Tagged: , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: