Direct-to-DOM Enable the Existing writeHeaderCell Method Implementation

1. The ResponseWriter parameter is no longer required. The Direct-to-DOM enabled renderer will use the ICEfaces DOMContext API. A new parameter, tr, of type Element has been added. This Element is the new table row that will hold the header cell of the tabbed pane. The domContext provides us with an API that allows us to create new W3C DOM Elements/TextNodes, set/getRootNode and setCursorParent. The W3C DOM API is used for DOM manipulation methods, such as appendChild and setAttribute. The superclass, of the renderer, DomBasicRenderer provides the renderAttribute method for more advanced setAttribute functionality. The renderAttribute method will set a non-null, non-empty-string, UIComponent property on the corresponding DOM Element

protected void writeHeaderCell(DOMContext domContext, FacesContext facesContext, HtmlPanelTabbedPane tabbedPane, HtmlPanelTab tab, int tabIndex, boolean active, boolean disabled, Element tr) throws IOException { // create a new table data Element using domContext API Element td = domContext.createElement(HTML.TD_ELEM) ; if (active) { // set attribute using w3c DOM API td.setAttribute(HTML.STYLE_ATTR,ACTIVE_HEADER_CELL_STYLE + "background-color:" + tabbedPane.getBgcolor()); // call the renderAttribute method defined in the superclass renderAttribute(tabbedPane, td, "activeTabStyleClass", HTML.CLASS_ATTR); } else if (disabled) { td.setAttribute(HTML.STYLE_ATTR,INACTIVE_HEADER_CELL_STYLE); renderAttribute(tabbedPane, td, "disabledTabStyleClass", HTML.CLASS_ATTR); } else { td.setAttribute(HTML.STYLE_ATTR,INACTIVE_HEADER_CELL_STYLE); renderAttribute(tabbedPane, td, "inactiveTabStyleClass", HTML.CLASS_ATTR); } String label = tab.getLabel() ; if (label == null || label.length() == 0) { label = "Tab " + tabIndex; } if (disabled) { Element labelElement = domContext.createElement(HTML.LABEL_ELEM); labelElement.setAttribute(HTML.NAME_ATTR, tabbedPane.getClientId(facesContext) + "." + tabIndex); labelElement.setAttribute(HTML.STYLE_ATTR,BUTTON_STYLE_DISABLED); // append the labelElement to the table data element td.appendChild(labelElement); // create a new Text Node Text labelText = domContext.createTextNode(label); // append the label text node to the table data td.appendChild(labelText); } else { // create a new Button Element Element button = domContext.createElement(HTML.INPUT_ELEM) ; button.setAttribute(HTML.TYPE_ATTR,"submit") ; button.setAttribute(HTML.NAME_ATTR, tabbedPane.getClientId(facesContext)+ "." + tabIndex); button.setAttribute("onclick","javascript:iceSubmit(form,this,event);return false;") ; button.setAttribute(HTML.VALUE_ATTR,label) ; if (active) { button.setAttribute(HTML.STYLE_ATTR,BUTTON_STYLE_ACTIVE + "background-color:" + tabbedPane.getBgcolor()); } else { button.setAttribute(HTML.STYLE_ATTR,BUTTON_STYLE_INACTIVE); } // append the button to the table data td.appendChild(button); } // append the new table data to the header cell table row tr.appendChild(td) ; } // end of writeHeaderCell

2. A new table row element is created using domContext createElement method. This row, tr1, will contain the Header cell and be passed to the writeHeaderCell method.

Element tr1 = domContext.createElement(HTML.TR_ELEM);

3. Call the writeHeaderCell method passing in the domContext and the table row Element, tr1, which will contain the Header cell.

writeHeaderCell(domContext, facesContext, tabbedPane, (HtmlPanelTab)child, tabIdx, tabIdx == selectedIndex, isDisabled(facesContext, child) , tr1);

4. Add an Empty tab header cell on the right of the tab header for a better look. A new table data Element is created using the domContext createElement method. An empty Text Element is created using the domContext createTextNode method. The new TextNode is appended to the table data using the W3C DOM appendChild method. This method is also used to append the table data to the table row which is then appended to the table.

Element td = domContext.createElement(HTML.TD_ELEM) ; td.setAttribute(HTML.STYLE_ATTR,EMPTY_HEADER_CELL_STYLE) ; Text text = domContext.createTextNode( " ") ; td.appendChild( text) ; tr1.appendChild( td) ; table.appendChild(tr1) ;