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

[Lutz Ulrich (JIRA)]

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
            Reporter: Lutz Ulrich


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.

-- 
This message is automatically generated by JIRA.
-
If you think it was sent incorrectly contact one of the administrators: https://jira.jboss.org/jira/secure/Administrators.jspa
-
For more information on JIRA, see: http://www.atlassian.com/software/jira