[richfaces-issues] [JBoss JIRA] Updated: (RF-7845) TabPenel: add facet(s) for displaying components next to the tabs

TabPenel: add facet(s) for displaying components next to the tabs ----------------------------------------------------------------- Key: RF-7845 URL: https://jira.jboss.org/jira/browse/RF-7845 Project: RichFaces Issue Type: Feature Request Components: component-output Affects Versions: 3.3.1 Reporter: Lutz Ulrich Assignee: Nick Belaevski Fix For: Future TabPanelRenderers should render a "controls" facet. The facet should be rendered right or left to the tabs in the tabs header row. ASCII Example: tab0 | tab1 | controls-facet (could be d DropDownMenu) ----------------------------------------------------------------------------------- content of active tab Use case: There can be a lot of Tabs in a TabPanel. In order to improve the display, one could add logic which hides a subset of the tabs and display, for example, only a maximum of 4 tabs. For this mechanism we need a way to add a menu with which the user can open hidden tabs. This would be like the pop-up menu in Eclipse's editor panel with which one can put hidden tabs to front. I do not ask for implementing a hide-tab-logic in TabPanel. I just ask for a way to add additional components next to the tabs. Simple solution: render a facet in an additional <td> in the table row which contains the tabs. Here is my simple reimplementation of org.richfaces.renderkit.html.TabPanelRenderer.doEncodeBegin() of 3.3.1: public void doEncodeBegin(ResponseWriter writer, FacesContext context, org.richfaces.component.UITabPanel component, ComponentVariables variables ) throws IOException { java.lang.String clientId = component.getClientId(context); variables.setVariable("spacer", getResource( "images/spacer.gif" ).getUri(context, component) ); encodeTabPanelScript(context, component); writer.startElement("table", component); getUtils().writeAttribute(writer, "border", "0" ); getUtils().writeAttribute(writer, "cellpadding", "0" ); getUtils().writeAttribute(writer, "cellspacing", "0" ); getUtils().writeAttribute(writer, "class", "rich-tabpanel " + convertToString(component.getAttributes().get("styleClass")) ); getUtils().writeAttribute(writer, "id", clientId ); getUtils().writeAttribute(writer, "style", encodeStyles(context,component) ); getUtils().encodePassThruWithExclusions(context, component, "width,height,styleClass,class,style,id"); writer.startElement("tbody", component); writer.startElement("tr", component); writer.startElement("td", component); getUtils().writeAttribute(writer, "align", component.getAttributes().get("headerAlignment") ); getUtils().writeAttribute(writer, "class", "dr-bottom-line rich-tab-bottom-line " + convertToString(component.getAttributes().get("headerClass")) ); getUtils().encodeBeginFormIfNessesary(context, component); writer.writeComment(convertToString("table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"position:relative;top:1px\"")); writer.startElement("table", component); getUtils().writeAttribute(writer, "border", "0" ); getUtils().writeAttribute(writer, "cellpadding", "0" ); getUtils().writeAttribute(writer, "cellspacing", "0" ); writer.startElement("tr", component); writer.startElement("td", component); writer.startElement("img", component); getUtils().writeAttribute(writer, "alt", "" ); getUtils().writeAttribute(writer, "height", "1" ); getUtils().writeAttribute(writer, "src", variables.getVariable("spacer") ); getUtils().writeAttribute(writer, "style", convertToString(encodeHeaderSpacing(context,component)) + ";border:0" ); writer.endElement("img"); writer.endElement("td"); encodeTabs(context, component); writer.endElement("tr"); writer.endElement("table"); writer.startElement("div", component); getUtils().writeAttribute(writer, "style", "display: none;" ); if ( Boolean.valueOf( String.valueOf(variables.getVariable("clientSide")) ).booleanValue() ) { writer.startElement("input", component); getUtils().writeAttribute(writer, "id", convertToString(clientId) + "_input" ); getUtils().writeAttribute(writer, "name", clientId ); getUtils().writeAttribute(writer, "type", "hidden" ); getUtils().writeAttribute(writer, "value", getValueAsString(context,component) ); writer.endElement("input"); } encodeTabsScript(context, component); writer.endElement("div"); getUtils().encodeEndFormIfNessesary(context, component); writer.endElement("td"); //------------------------------------------------ // Additional code writer.startElement("td", component); getUtils().writeAttribute(writer, "class", "dr-bottom-line rich-tab-bottom-line " + convertToString(component.getAttributes().get("headerClass")) ); getUtils().writeAttribute(writer, "align", "right" ); UIComponent controlsFacet = component.getFacet("controls"); if (controlsFacet != null && controlsFacet.isRendered()) { renderChild(context, controlsFacet); } writer.endElement("td"); // End of additional code //------------------------------------------------ writer.endElement("tr"); writer.startElement("tr", component); } } Because of the additional table column, a colspan="2" has to be added in org.richfaces.renderkit.html.TabRenderer.doEncodeBegin(), too: public void doEncodeBegin(ResponseWriter writer, FacesContext context, org.richfaces.component.UITab component, ComponentVariables variables ) throws IOException { java.lang.String clientId = component.getClientId(context); writer.startElement("td", component); getUtils().writeAttribute(writer, "id", clientId ); getUtils().writeAttribute(writer, "style", convertToString(getTabDisplay(context,component)) + ";height:100%" ); //------------------------------------------------ // Additional code: getUtils().writeAttribute(writer, "colspan", "2" ); //------------------------------------------------ // rest of original code ... One could improve this solution by implementing support for adding controls to the left, too (for example by defining 2 facets "left-controls", "right-controls"). And one could pass the colspan to the TabRenderer setting an intermediate request attribute or an attribute of the active tab UIComponent.