創建一個可重用的Bootstrap“折疊按鈕”作為Java Tapestry組件

Question

我的項目使用許多Bootstrap“折疊”按鈕來顯示和隱藏內容。 結構是一致的，因此我認為這是可以轉化為組件的一個不錯的選擇。

結構如下：

<button type="button" class="btn btn-toggle pull-right" data-toggle="collapse" data-target="#name_of_div_to_collapse">
<span class="caret"></span>
</button>

<div id="#name_of_div_to_collapse" class="btn_collapse"> 
Content to show and hide when the collapse button is toggled
</div>

我想將整個按鈕變成一個可重用的組件，但是當為按鈕的每個實例指定必要的唯一數據目標#name_of_div_to_collapse時，我無法弄清楚該如何做。 使用Tapestry有可能嗎？ 我可以在調用組件的地方傳遞TML中指定數據目標名稱的參數嗎？

更新：

現在，我可以使用以下代碼打印具有唯一數據目標的按鈕。 我無法解決的是如何將跨度插入符號插入到MarkupWriter生成的標記中。

TML：

 <t:frontend.CollapseButton dataTarget="literal:#check_cases_collapse"/>

Java：

 @SupportsInformalParameters
public class CollapseButton {

@Parameter(required=true, allowNull=false, defaultPrefix=BindingConstants.ASSET)
private String dataTarget;

@Inject
private ComponentResources resources;

boolean beginRender(MarkupWriter writer)
{
     writer.element("button", "data-target", dataTarget, "class", "btn btn-toggle pull-right", "type", "button", "data-toggle", "collapse");
     resources.renderInformalParameters(writer);
     writer.end();
     return false;
}

}

這將生成以下輸出，這幾乎是我想要的：

<button data-toggle="collapse" type="button" class="btn btn-toggle pull-right" data-target="#check_cases_collapse"></button>

但是我不知道如何使用MarkupWriter在按鈕HTML內插入span插入符號。 任何人？

Answer 1

事實證明MarkupWriter接受嵌套的標記。 java類的最終工作代碼是：

@SupportsInformalParameters
public class CollapseButton {

@Parameter(required=true, allowNull=false, defaultPrefix=BindingConstants.ASSET)
private String dataTarget;

@Inject
private ComponentResources resources;

boolean beginRender(MarkupWriter writer)
{
     writer.element("button", "data-target", dataTarget, "class", "btn btn-toggle pull-right",    "type", "button", "data-toggle", "collapse");
     resources.renderInformalParameters(writer);
     writer.element("span", "class", "caret");
     writer.end();
     writer.end();
     return false;
}

}

仍然可以進行改進和優化。

Answer 2

就我而言，我通過以下方式解決了：

button data-toggle="collapse" type="button" class="btn btn-toggle pull-right" 
data-target="#${check_cases_collapse_uuid}

我在Java中的位置：

@Property
private String collapsibleComponentUUID;

check_cases_collapse_uuid = UUID.randomUUID().toString();