How can I use jQuery in a custom Tapestry 5 component

Question

I am attempting to create a component that if given the following tml:

<t:slideout>
    <p:header>Short Description of Data</p:header>

    Long Details about the data here
</t:slideout>

This should initially render the block in the header parameter, when this block is clicked I want the long details section to slide out using the jQuery .slideDown() function or equivalent.

Currently I have the following class:

public class slideout
{
    @Parameter(name="header", defaultPrefix = BindingConstants.LITERAL)
    private Block headerBlock;

    public Block getHeader() 
    {
    return headerBlock;
    }
}

and the corresponding slideout.tml file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
    xmlns:p="tapestry:parameter">
<body>
    <t:delegate to="header"/>
    <t:body/>
</body>
</html>

We are already making use of the tapestry5-jQuery library, this component needs be able to be used multiple times on the same page so I'm also not sure of how to ensure that there are no ID collisions when rendering the page.

I'm not sure where to progress from here, if I was doing this in raw HTML/jQuery I'd do something like

$('slideout-header').click(function() {
    $(this).next('slideout-body').slideDown();
});

However I'm not sure of what the "Tapestry" way of constructing these classes would be. What is the best way to solve this problem in Tapestry 5?

Answer 1

You can add a Slideout.js file next to your Slideout.tml:

Tapestry.Initializer.Slideout = function (parameters) {
    var yourClientId = parameters.clientId;
    //your javascript init script here
};

Add to your Slideout.java:

@Import(library = {"Slidout.js"})
public class Slideout {

    @Inject
    private JavaScriptSupport javaScriptSupport;

    @Parameter(name="header", defaultPrefix = BindingConstants.LITERAL)
    private Block headerBlock;

    @Property
    @Parameter(value = "prop:componentResources.id", defaultPrefix = "literal")
    private String clientId;

    @AfterRender
    private void afterRender() {
        JSONObject props = new JSONObject();
        props.put("clientId", clientId);
        javaScriptSupport.addInitializerCall("Slideout", props);
    }

    public Block getHeader() 
    {
        return headerBlock;
    }
}

and your Slideout.tml (note that I removed the html so that you can use Slideout as a component)

<div id="${clientId}" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
    xmlns:p="tapestry:parameter">
    <t:delegate to="header"/>
    <t:body/>
</div>

Disclaimer: I have not tested this code so have a play.

How can I use jQuery in a custom Tapestry 5 component

Question

1 answers

solution1
2 ACCPTED 2012-07-09 12:53:20

How can I use jQuery in a custom Tapestry 5 component

Question

1 answers

solution1 2 ACCPTED 2012-07-09 12:53:20

solution1
2 ACCPTED 2012-07-09 12:53:20