package org.primefaces.component.panel;import java.io.IOException;
import java.util.Map;import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;import org.primefaces.component.menu.Menu;
import org.primefaces.renderkit.CoreRenderer;public class PanelRenderer extends CoreRenderer {@Overridepublic void decode(FacesContext context, UIComponent component) {Panel panel = (Panel) component;String clientId = panel.getClientId(context);Map params = context.getExternalContext().getRequestParameterMap();//Restore toggle stateString collapsedParam = params.get(clientId + "_collapsed");if(collapsedParam != null) {panel.setCollapsed(Boolean.valueOf(collapsedParam));}//Restore visibility stateString visibleParam = params.get(clientId + "_visible");if(visibleParam != null) {panel.setVisible(Boolean.valueOf(visibleParam));}decodeBehaviors(context, component);}@Overridepublic void encodeEnd(FacesContext facesContext, UIComponent component) throws IOException {Panel panel = (Panel) component;encodeMarkup(facesContext, panel);encodeScript(facesContext, panel);}protected void encodeScript(FacesContext context, Panel panel) throws IOException {ResponseWriter writer = context.getResponseWriter();String clientId = panel.getClientId(context);startScript(writer, clientId);writer.write("PrimeFaces.cw('Panel','" + panel.resolveWidgetVar() + "',{");writer.write("id:'" + clientId + "'");//Toggle configurationif(panel.isToggleable()) {writer.write(",toggleable:true");writer.write(",toggleSpeed:" + panel.getToggleSpeed());writer.write(",collapsed:" + panel.isCollapsed());}//Toggle configurationif(panel.isClosable()) {writer.write(",closable:true");writer.write(",closeSpeed:" + panel.getCloseSpeed());}//Options menu configurationif(panel.getOptionsMenu() != null) {writer.write(",hasMenu:true");}encodeClientBehaviors(context, panel);writer.write("});");endScript(writer);}protected void encodeMarkup(FacesContext context, Panel panel) throws IOException {ResponseWriter writer = context.getResponseWriter();String clientId = panel.getClientId(context);Menu optionsMenu = panel.getOptionsMenu();writer.startElement("div", null);writer.writeAttribute("id", clientId, null);String styleClass = panel.getStyleClass() != null ? Panel.PANEL_CLASS + " " + panel.getStyleClass() : Panel.PANEL_CLASS;styleClass = panel.isVisible() ? styleClass : styleClass + " ui-helper-hidden";writer.writeAttribute("class", styleClass, "styleClass");if(panel.getStyle() != null) {writer.writeAttribute("style", panel.getStyle(), "style");}encodeHeader(context, panel);encodeContent(context, panel);encodeFooter(context, panel);if(panel.isToggleable()) {encodeStateHolder(context, panel, clientId + "_collapsed", String.valueOf(panel.isCollapsed()));}if(panel.isClosable()) {encodeStateHolder(context, panel, clientId + "_visible", String.valueOf(panel.isVisible()));}if (optionsMenu != null) {optionsMenu.setPosition("dynamic");optionsMenu.setTrigger(clientId + "_menu");optionsMenu.setMy("left top");optionsMenu.setAt("left bottom");optionsMenu.encodeAll(context);}writer.endElement("div");}protected void encodeHeader(FacesContext context, Panel panel) throws IOException {ResponseWriter writer = context.getResponseWriter();String widgetVar = panel.resolveWidgetVar();UIComponent header = panel.getFacet("header");String headerText = panel.getHeader();String clientId = panel.getClientId(context);if(headerText == null && header == null) {return;}writer.startElement("div", null);writer.writeAttribute("id", panel.getClientId(context) + "_header", null);writer.writeAttribute("class", Panel.PANEL_TITLEBAR_CLASS, null);//Titlewriter.startElement("span", null);writer.writeAttribute("class", Panel.PANEL_TITLE_CLASS, null);if(header != null) {renderChild(context, header);} else if(headerText != null) {writer.write(headerText);}writer.endElement("span");//Optionsif(panel.isClosable()) {encodeIcon(context, panel, "ui-icon-closethick", clientId + "_closer", panel.getCloseTitle());}if(panel.isToggleable()) {String icon = panel.isCollapsed() ? "ui-icon-plusthick" : "ui-icon-minusthick";encodeIcon(context, panel, icon, clientId + "_toggler", panel.getToggleTitle());}if(panel.getOptionsMenu() != null) {encodeIcon(context, panel, "ui-icon-gear", clientId + "_menu", panel.getMenuTitle());}writer.endElement("div");}protected void encodeContent(FacesContext facesContext, Panel panel) throws IOException {ResponseWriter writer = facesContext.getResponseWriter();writer.startElement("div", null);writer.writeAttribute("id", panel.getClientId() + "_content", null);writer.writeAttribute("class", Panel.PANEL_CONTENT_CLASS, null);if (panel.isCollapsed()) {writer.writeAttribute("style", "display:none", null);}renderChildren(facesContext, panel);writer.endElement("div");}protected void encodeFooter(FacesContext facesContext, Panel panel) throws IOException {ResponseWriter writer = facesContext.getResponseWriter();UIComponent footer = panel.getFacet("footer");String footerText = panel.getFooter();if (footer != null || footerText != null) {writer.startElement("div", null);writer.writeAttribute("id", panel.getClientId(facesContext) + "_footer", null);writer.writeAttribute("class", Panel.PANEL_FOOTER_CLASS, null);if (footer != null) {renderChild(facesContext, footer);} else if (footerText != null) {writer.write(footerText);}writer.endElement("div");}}protected void encodeIcon(FacesContext context, Panel panel, String iconClass, String id, String title) throws IOException {ResponseWriter writer = context.getResponseWriter();writer.startElement("a", null);writer.writeAttribute("href", "javascript:void(0)", null);writer.writeAttribute("class", Panel.PANEL_TITLE_ICON_CLASS, null);if(title != null) {writer.writeAttribute("title", title, null);}writer.startElement("span", null);if(id != null) {writer.writeAttribute("id", id, null);}writer.writeAttribute("class", "ui-icon " + iconClass, null);writer.endElement("span");writer.endElement("a");}protected void encodeStateHolder(FacesContext context, Panel panel, String name, String value) throws IOException {ResponseWriter writer = context.getResponseWriter();writer.startElement("input", null);writer.writeAttribute("type", "hidden", null);writer.writeAttribute("id", name, null);writer.writeAttribute("name", name, null);writer.writeAttribute("value", value, null);writer.endElement("input");}@Overridepublic void encodeChildren(FacesContext context, UIComponent component) throws IOException {//Do nothing}@Overridepublic boolean getRendersChildren() {return true;}
}

package org.icefaces.ace.component.panel;import java.io.IOException;
import java.util.Map;import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;import org.icefaces.ace.component.menu.Menu;
import org.icefaces.ace.renderkit.CoreRenderer;import org.icefaces.ace.util.Utils;
import org.icefaces.ace.util.JSONBuilder;
import org.icefaces.render.MandatoryResourceComponent;@MandatoryResourceComponent(tagName="panel", value="org.icefaces.ace.component.panel.Panel")
public class PanelRenderer extends CoreRenderer {@Overridepublic void decode(FacesContext context, UIComponent component) {Panel panel = (Panel) component;String clientId = panel.getClientId(context);Map params = context.getExternalContext().getRequestParameterMap();//Restore toggle stateString collapsedParam = params.get(clientId + "_collapsed");if(collapsedParam != null) {panel.setCollapsed(Boolean.valueOf(collapsedParam));}//Restore visibility stateString visibleParam = params.get(clientId + "_visible");if(visibleParam != null) {panel.setVisible(Boolean.valueOf(visibleParam));}decodeBehaviors(context, component);}@Overridepublic void encodeEnd(FacesContext facesContext, UIComponent component) throws IOException {Panel panel = (Panel) component;encodeMarkup(facesContext, panel);encodeScript(facesContext, panel);}protected void encodeScript(FacesContext context, Panel panel) throws IOException {ResponseWriter writer = context.getResponseWriter();String clientId = panel.getClientId(context);writer.startElement("script", null);writer.writeAttribute("type", "text/javascript", null);writer.write(this.resolveWidgetVar(panel) + " = new ");JSONBuilder jb = JSONBuilder.create();jb.beginFunction("ice.ace.Panel").item(clientId).beginMap().entry("visible", panel.isVisible());//Toggle configurationif(panel.isToggleable()) {jb.entry("toggleable", true);jb.entry("toggleSpeed", panel.getToggleSpeed());jb.entry("collapsed", panel.isCollapsed());}//Toggle configurationif(panel.isClosable()) {jb.entry("closable", true);jb.entry("closeSpeed", panel.getCloseSpeed());}//Options menu configurationif(panel.getOptionsMenu() != null) {jb.entry("hasMenu", true);}encodeClientBehaviors(context, panel, jb);jb.endMap().endFunction();writer.write(jb.toString());writer.endElement("script");}protected void encodeMarkup(FacesContext context, Panel panel) throws IOException {ResponseWriter writer = context.getResponseWriter();String clientId = panel.getClientId(context);Menu optionsMenu = panel.getOptionsMenu();writer.startElement("div", null);writer.writeAttribute("id", clientId, null);String styleClass = panel.getStyleClass() ;Utils.writeConcatenatedStyleClasses(writer, Panel.PANEL_CLASS, styleClass);String style = panel.getStyle();if(style != null) {writer.writeAttribute("style", style, "style");}encodeHeader(context, panel);encodeContent(context, panel);encodeFooter(context, panel);if(panel.isToggleable()) {encodeStateHolder(context, panel, clientId + "_collapsed", String.valueOf(panel.isCollapsed()));}if(panel.isClosable()) {encodeStateHolder(context, panel, clientId + "_visible", String.valueOf(panel.isVisible()));}if (optionsMenu != null) {optionsMenu.setPosition("dynamic");optionsMenu.setTrigger(clientId + "_menu");optionsMenu.setMy("left top");optionsMenu.setAt("left bottom");optionsMenu.encodeAll(context);}writer.endElement("div");}protected void encodeHeader(FacesContext context, Panel panel) throws IOException {ResponseWriter writer = context.getResponseWriter();String widgetVar = this.resolveWidgetVar(panel);UIComponent header = panel.getFacet("header");String headerText = panel.getHeader();String clientId = panel.getClientId(context);if(headerText == null && header == null) {return;}writer.startElement("div", null);writer.writeAttribute("id", clientId + "_header", null);writer.writeAttribute("class", Panel.PANEL_TITLEBAR_CLASS, null);//Titlewriter.startElement("span", null);writer.writeAttribute("class", Panel.PANEL_TITLE_CLASS, null);if(header != null) {renderChild(context, header);} else if(headerText != null) {writer.write(headerText);}writer.endElement("span");//Optionsif(panel.isClosable()) {encodeIcon(context, panel, "ui-icon-closethick", clientId + "_closer");}if(panel.isToggleable()) {String icon = panel.isCollapsed() ? "ui-icon-plusthick" : "ui-icon-minusthick";encodeIcon(context, panel, icon, clientId + "_toggler");}if(panel.getOptionsMenu() != null) {encodeIcon(context, panel, "ui-icon-gear", clientId + "_menu");}writer.endElement("div");}protected void encodeContent(FacesContext facesContext, Panel panel) throws IOException {ResponseWriter writer = facesContext.getResponseWriter();writer.startElement("div", null);writer.writeAttribute("id", panel.getClientId() + "_content", null);writer.writeAttribute("class", Panel.PANEL_CONTENT_CLASS, null);if (panel.isCollapsed()) {writer.writeAttribute("style", "display:none", null);}renderChildren(facesContext, panel);writer.endElement("div");}protected void encodeFooter(FacesContext facesContext, Panel panel) throws IOException {ResponseWriter writer = facesContext.getResponseWriter();UIComponent footer = panel.getFacet("footer");String footerText = panel.getFooter();if (footer != null || footerText != null) {writer.startElement("div", null);writer.writeAttribute("id", panel.getClientId(facesContext) + "_footer", null);writer.writeAttribute("class", Panel.PANEL_FOOTER_CLASS, null);if (footer != null) {renderChild(facesContext, footer);} else if (footerText != null) {writer.write(footerText);}writer.endElement("div");}}protected void encodeIcon(FacesContext context, Panel panel, String iconClass, String id) throws IOException {ResponseWriter writer = context.getResponseWriter();writer.startElement("a", null);writer.writeAttribute("class", Panel.PANEL_TITLE_ICON_CLASS, null);writer.startElement("span", null);if(id != null) {writer.writeAttribute("id", id, null);}writer.writeAttribute("class", "ui-icon " + iconClass, null);writer.endElement("span");writer.endElement("a");}protected void encodeStateHolder(FacesContext context, Panel panel, String name, String value) throws IOException {ResponseWriter writer = context.getResponseWriter();writer.startElement("input", null);writer.writeAttribute("type", "hidden", null);writer.writeAttribute("id", name, null);writer.writeAttribute("name", name, null);writer.writeAttribute("value", value, null);writer.endElement("input");}@Overridepublic void encodeChildren(FacesContext context, UIComponent component) throws IOException {//Do nothing}@Overridepublic boolean getRendersChildren() {return true;}
}

三、PrimeFaces Panel.js

/*** PrimeFaces Panel Widget*/
PrimeFaces.widget.Panel = function(cfg) {this.cfg = cfg;this.id = this.cfg.id;this.jqId = PrimeFaces.escapeClientId(this.id);if(this.cfg.toggleable) {this.toggler = $(this.jqId + '_toggler');this.toggleStateHolder = $(this.jqId + '_collapsed');this.content = $(this.jqId + '_content');this.setupToggleTrigger();}if(this.cfg.closable) {this.visibleStateHolder = $(this.jqId + "_visible");this.setupCloseTrigger();}if(this.cfg.hasMenu) {this.visibleStateHolder = $(this.jqId + "_visible");this.setupMenuTrigger();}this.postConstruct();
}PrimeFaces.extend(PrimeFaces.widget.Panel, PrimeFaces.widget.BaseWidget);PrimeFaces.widget.Panel.prototype.toggle = function() {if(this.cfg.collapsed) {this.toggler.removeClass('ui-icon-plusthick').addClass('ui-icon-minusthick');this.cfg.collapsed = false;this.toggleStateHolder.val(false);}else {this.toggler.removeClass('ui-icon-minusthick').addClass('ui-icon-plusthick');this.cfg.collapsed = true;this.toggleStateHolder.val(true);}var _self = this;this.content.slideToggle(this.cfg.toggleSpeed,function(e) {if(_self.cfg.behaviors) {var toggleBehavior = _self.cfg.behaviors['toggle'];if(toggleBehavior) {toggleBehavior.call(_self, e);}}});
}PrimeFaces.widget.Panel.prototype.close = function() {this.visibleStateHolder.val(false);var _self = this;$(this.jqId).fadeOut(this.cfg.closeSpeed,function(e) {if(_self.cfg.behaviors) {var closeBehavior = _self.cfg.behaviors['close'];if(closeBehavior) {closeBehavior.call(_self, e);}}});
}PrimeFaces.widget.Panel.prototype.show = function() {$(this.jqId).fadeIn(this.cfg.closeSpeed);this.visibleStateHolder.val(true);
}PrimeFaces.widget.Panel.prototype.setupToggleTrigger = function() {var _self = this,trigger = this.toggler.parent();this.setupTriggerVisuals(trigger);trigger.click(function() {_self.toggle();});
}PrimeFaces.widget.Panel.prototype.setupCloseTrigger = function() {var _self = this,trigger = $(this.jqId + '_closer').parent();this.setupTriggerVisuals(trigger);trigger.click(function() {_self.close();});
}PrimeFaces.widget.Panel.prototype.setupMenuTrigger = function() {var trigger = $(this.jqId + '_menu').parent();this.setupTriggerVisuals(trigger);
}PrimeFaces.widget.Panel.prototype.setupTriggerVisuals = function(trigger) {trigger.mouseover(function() {$(this).addClass('ui-state-hover');}).mouseout(function() {$(this).removeClass('ui-state-hover');});
}

四、IceFaces Panel.js

/***  Panel Widget*/
ice.ace.Panel = function(id, cfg) {this.id = id;this.cfg = cfg;this.jqId = ice.ace.escapeClientId(id);if(this.cfg.toggleable) {this.toggler = ice.ace.jq(this.jqId + '_toggler');this.toggleStateHolder = ice.ace.jq(this.jqId + '_collapsed');this.content = ice.ace.jq(this.jqId + '_content');this.setupToggleTrigger();}if(this.cfg.closable) {this.visibleStateHolder = ice.ace.jq(this.jqId + "_visible");this.setupCloseTrigger();}if(this.cfg.hasMenu) {this.visibleStateHolder = ice.ace.jq(this.jqId + "_visible");this.setupMenuTrigger();}if(!this.cfg.visible) {ice.ace.jq(this.jqId).css('display','none');}
}ice.ace.Panel.prototype.toggle = function() {if(this.cfg.collapsed) {this.toggler.removeClass('ui-icon-plusthick').addClass('ui-icon-minusthick');this.cfg.collapsed = false;this.toggleStateHolder.val(false);}else {this.toggler.removeClass('ui-icon-minusthick').addClass('ui-icon-plusthick');this.cfg.collapsed = true;this.toggleStateHolder.val(true);}var _self = this;this.content.slideToggle(this.cfg.toggleSpeed,function(e) {if(_self.cfg.behaviors) {var toggleBehavior = _self.cfg.behaviors['toggle'];if(toggleBehavior) {toggleBehavior.call(this, e);}}});
}ice.ace.Panel.prototype.close = function() {this.visibleStateHolder.val(false);var _self = this;ice.ace.jq(this.jqId).fadeOut(this.cfg.closeSpeed,function(e) {if(_self.cfg.behaviors) {var closeBehavior = _self.cfg.behaviors['close'];if(closeBehavior) {closeBehavior.call(this, e);}}});
}ice.ace.Panel.prototype.show = function() {ice.ace.jq(this.jqId).fadeIn(this.cfg.closeSpeed);this.visibleStateHolder.val(true);
}ice.ace.Panel.prototype.setupToggleTrigger = function() {var _self = this,trigger = this.toggler.parent();this.setupTriggerVisuals(trigger);trigger.click(function() {_self.toggle();});
}ice.ace.Panel.prototype.setupCloseTrigger = function() {var _self = this,trigger = ice.ace.jq(this.jqId + '_closer').parent();this.setupTriggerVisuals(trigger);trigger.click(function() {_self.close();});
}ice.ace.Panel.prototype.setupMenuTrigger = function() {var trigger = ice.ace.jq(this.jqId + '_menu').parent();this.setupTriggerVisuals(trigger);
}ice.ace.Panel.prototype.setupTriggerVisuals = function(trigger) {trigger.mouseover(function() {ice.ace.jq(this).addClass('ui-state-hover');}).mouseout(function() {ice.ace.jq(this).removeClass('ui-state-hover');});
}

结论：ICEfaces的行为让人及其失望，用PrimeFaces的开发者的一句原话作为本文的总结：“您可以复制我们的代码，但您永远也拿不走我们的激情！”。