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

[Nick Belaevski (JIRA)]

     [ https://jira.jboss.org/jira/browse/RF-7845?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Nick Belaevski updated RF-7845:
-------------------------------

        Fix Version/s: Future
    Affects Version/s: 3.3.1
             Assignee: Nick Belaevski


> 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.

-- 
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