How to add a new ECM template with tabs

To avoid refreshing the first tab for every action execution, add a new private function to the template with tabs. In the template, you must insert a new piece of code like the following:



private String getDisplayTab(String selectedTab) {

  if ((uicomponent.getSelectedTab() == null && selectedTab.equals("mainWebcontent"))

            || selectedTab.equals(uicomponent.getSelectedTab())) {

        return "display:block";

    }

    return "display:none";

}


private String getSelectedTab(String selectedTab) {

    if (getDisplayTab(selectedTab).equals("display:block")) {

        return "SelectedTab";

    }

    return "NormalTab";

}

Changing in every event of onClick must be done like the following:

<div class="UITab NormalTabStyle">
  <div class="<%=getSelectedTab("mainWebcontent")%>
    ">
    <div class="LeftTab">
      <div class="RightTab">
        <div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "mainWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.MainContent")%></div>
      </div>
    </div>
  </div>
</div>

<div class="UITab NormalTabStyle">
  <div class="<%=getSelectedTab("illustrationWebcontent")%>
    ">
    <div class="LeftTab">
      <div class="RightTab">
        <div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "illustrationWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.Illustration")%></div>
      </div>
    </div>
  </div>
</div>

<div class="UITab NormalTabStyle">
  <div class="<%= getSelectedTab("contentCSSWebcontent")%>
    ">
    <div class="LeftTab">
      <div class="RightTab">
        <div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "contentCSSWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.Advanced")%></div>
      </div>
    </div>
  </div>
</div>

Finally, to display the selected tab, simply add it to the style of UITabContent class.

<div class="UITabContent" style="<%=getDisplayTab("mainWebcontent")%>">