2013-09-27 21 views
0

我尝试在一个简单的自定义组件中设置一个pagelink的动态css类值,并且找不到任何方法。带动态css类的挂毯pagelink

我的组件......

<!-- 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方式思考。 欢迎提供任何帮助或有用的提示。

回答

2

从代码中不太清楚currentLinkId和activeId之间的区别以及currentId来自哪里。我几乎假设你有一些你不在这里分享的Loop设置。但是,如果您可以从封闭组件中获取这些变量,那么您几乎可以在注释掉的代码中找到这些变量,您只需要从getMyDynCss()方法中删除参数即可。像这样:

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

您的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> 
+0

而最好使用prop:binding而不是$ {...},例如class =“prop:myDynCss”,http://tapestry.apache.org/component-parameters.html#ComponentParameters-dontUseSyntax – sody

+1

@sody我认为你在prop:binding这里是不正确的。对于组件上定义的参数绑定,这是正确的,而不是简单地将值打印到类属性的DOM属性中。 – joostschouten

+0

@joostschouten对于迟到的答复感到遗憾......并且感谢解决方案。我会试试看。与此同时,另一种方式与afterRender事件。 – OkieOth

1

我的解决方案使用的生命周期事件。如果有任何代表活动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>