I try set a dynamic css class value for a pagelink in a simple custom component and can't find any way.

My component ...

<!-- my component template 'testLink' -->
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
    <!-- maybe I can set here something dynamic like that ...
        <t:pagelink page="mytest" t:id="myLink" class="${myDynCss}">

        ... but in this case I need to pass the parameter what link is handled
    -->
    <t:pagelink page="mytest" t:id="myLink">
        I want dynamic css class            
    </t:pagelink>
</html>

The component java code ...

public class TestLink {
    @Parameter(required=true)
    private int activeId;

    @Component
    PageLink myLink;

    public int getActiveId() {
        return activeId;
    }

    public void setupRender()
    {
        // I try to set some class attribute here but I find no matching function in myLink
        // myLink.setCssStyle();
    }   

    public String getMyDynCss(int currentLinkId) {
        if (currentLinkId==activeId)
            return "active";
        else
            return "xxx";
    }
}

The page that includes the component ...

<html t:type="layout" title="Test" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
      xmlns:p="tapestry:parameter">
    <p:app_navigation>
        <t:testLink activeId="1000"/>
    </p:app_navigation>
</html>

Maybe a silly newbie question but I have still problems to think in Tapestry way. Every help or useful hint is welcome.

有帮助吗?

解决方案

It is not quite clear from your code what the difference between currentLinkId en activeId is and where currentId comes from. I'm almost assuming you have some sort of Loop setup you are not sharing here. But given you can obtain these variables from the enclosing component, you are pretty much there in your commented out code, you just need to remove the argument from your getMyDynCss() method. Like so:

Java:

public class TestLink {

    @Property
    @Parameter(required=true)
    private int activeId;

    @Property
    @Parameter(required=true)
    private int currentId;

    public String getMyDynCss() {
        if (currentId == activeId) {
            return "active";
        }
        else {
            return "xxx";
        }
    }
}

Your tml:

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
    <t:pagelink page="mytest" t:id="myLink" class="${myDynCss}">
</html>

Your enclosing component:

<html t:type="layout" title="Test" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
      xmlns:p="tapestry:parameter">
    <p:app_navigation>
        <t:testLink activeId="1000" currentId="somePropertyFromSomewhere"/>
    </p:app_navigation>
</html>

其他提示

My solution use the the life cycle events. If there is any link that has a id that represents the active id (by convention) mark it as active.

My final component template ...

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
    <!-- convention: id == 'm' + numeric value for active entry --> 
    <t:pagelink page="mytest" id="m1000">
        I'm active
    </t:pagelink>

    <t:pagelink page="mytest2" id="m1001">
        I'm not active
    </t:pagelink>
</html>

The java code of the component ...

public class TestLink {
    @Parameter(required=true)
    private int activeId;

    // ... looking for a link with the active id ...
    void afterRender(final MarkupWriter writer) {
        // works only if the id follows the right convention :-D
        String activeElemId="m"+activeId; // <--
        Element activeLink=writer.getDocument().getElementById(activeElemId);
        if (activeLink!=null)
            activeLink.addClassName("active");
    }    
}

The code that includes the component ...

<html t:type="layout" title="Test" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
      xmlns:p="tapestry:parameter">
    <p:app_navigation>
        <t:testLink activeId="1000"/>
    </p:app_navigation>
</html>
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top