Uploaded image for project: 'RichFaces'
  1. RichFaces
  2. RF-7845

TabPenel: add facet(s) for displaying components next to the tabs

    Details

      Description

      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.

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                lutzulrich Lutz Ulrich
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: