Question

我尝试在简单的自定义组件中为pagelink设置动态css类值，但找不到任何方法。

我的组件......

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

组件java代码......

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";
    }
}

包含组件的页面......

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

也许是一个愚蠢的新手问题，但我仍然有问题以Tapestry的方式思考。欢迎提供每一个帮助或有用的提示。

Answer 1

从您的代码中可以清楚地看出currentLinkId和activeId之间的区别是什么和currentId来自哪里。我差点假设你有一些你不在这里分享的循环设置。但是，鉴于您可以从封闭组件中获取这些变量，您在注释掉的代码中几乎就是这样，您只需要从getMyDynCss()方法中删除参数。像这样：

爪哇：

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";
        }
    }
}

你的tml：

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

您的封闭组件：

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

Answer 2

我的解决方案使用生命周期事件。如果有任何链接具有表示活动ID的ID（按照惯例），则将其标记为活动状态。

我的最终组件模板......

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

组件的java代码......

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");
    }    
}

包含组件的代码......

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

Tapestry pagelink与动态css类

2 个答案: