动态创建JSF 2.2自定义组件

Question

基于本文，我为出现在数据表中的单选按钮编写了(嗯，修改了)一个自定义组件。我在JSF 2.2中稍微修改了它，使用了@FacesRenderer和@FacesComponent标记，并省略了自定义标记类。在我的XHTML页面中一切正常

xmlns:custom="http://mynamespace"
...
<h:dataTable id="mySampleTable3"
             value="#{myBackingBean.sampleTable3}"
             var="item"
             width="100%"
             border="1"
             first="0">           
    <f:facet name="header">
         <h:panelGrid id="gridHeader3" columns="2" width="100%" >
              <h:outputText id="outputText3" 
                       value="Radios grouped in row(With our custom tag)"/>   
         </h:panelGrid>
    </f:facet>
    <h:column> 
         <f:facet name="header">
                 <h:outputText value="Emp Name" />
         </f:facet>
         <h:outputText id="empName" value="#{item.empName}"/>
    </h:column>         
    <h:column> 
         <f:facet name="header">
                 <h:outputText value="Excellent" />
         </f:facet>
         <custom:customradio id="myRadioId2" 
                             name="myRadioRow" 
                             value="#{item.radAns}"
                             itemValue="E" />                     
    </h:column>         
    <h:column> 
         <f:facet name="header">
                  <h:outputText value="Good" />
         </f:facet>
         <custom:customradio id="myRadioId3" 
                             name="myRadioRow" 
                             value="#{item.radAns}"
                             itemValue="G" />                     
     </h:column>   
     ...      
</h:dataTable>

和单选按钮的数据表正常工作(它们按行分组)。当我动态地使用这个组件时，问题就出现了。这里是

HtmlPanelGrid radioGrid = (HtmlPanelGrid) getApplication()
                          .createComponent(HtmlPanelGrid.COMPONENT_TYPE);
...
UICustomSelectOneRadio customSelectOneRadio = (UICustomSelectOneRadio) getApplication().
                    createComponent(UICustomSelectOneRadio.COMPONENT_TYPE);

customSelectOneRadio.setId("rb_" + question.getQuestionId() + "_" + row + "_" + col);
customSelectOneRadio.setName("myRadioRow");
String binding = "#{" + beanName + "." + propName + 
              "["" + question.getQuestionId().toString() + "_" + 
              subQuestion.getId() + ""]}";
ValueExpression ve = getExpressionFactory().
                    createValueExpression(getELContext(), binding, String.class);
customSelectOneRadio.setValueExpression("value", ve);
customSelectOneRadio.setItemValue(value);
radioGrid.getChildren().add(customSelectOneRadio);

不幸的是，虽然呈现了数据表，但单选按钮没有。出现空白列。我想知道是否有人知道如果有一些方法我应该在我的渲染器重写。我的看起来像:

@FacesRenderer(componentFamily = UICustomSelectOneRadio.COMPONENT_FAMILY, rendererType = HTMLCustomSelectOneRadioRenderer.RENDERER_TYPE)
public class HTMLCustomSelectOneRadioRenderer extends Renderer {
    public static final String RENDERER_TYPE = "com.myapp.jsf.renderers.HTMLCustomSelectOneRadioRenderer";
    @Override
    public void decode(FacesContext context, UIComponent component) {
        if ((context == null) || (component == null)) {
            throw new NullPointerException();
        }
        UICustomSelectOneRadio customSelectOneRadio;
        if (component instanceof UICustomSelectOneRadio) {
            customSelectOneRadio = (UICustomSelectOneRadio) component;
        } else {
            return;
        }
        Map map = context.getExternalContext().getRequestParameterMap();
        String name = getName(customSelectOneRadio, context);
        if (map.containsKey(name)) {
            String value = (String) map.get(name);
            if (value != null) {
                setSubmittedValue(component, value);
            }
        }
    }
    private void setSubmittedValue(UIComponent component, Object obj) {
        if (component instanceof UIInput) {
            ((UIInput) component).setSubmittedValue(obj);
        }
    }

    private String getName(UICustomSelectOneRadio customSelectOneRadio,
            FacesContext context) {
        UIComponent parentUIComponent
            = getParentDataTableFromHierarchy(customSelectOneRadio);
        if (parentUIComponent == null) {
            return customSelectOneRadio.getClientId(context);
        } else {
            if (customSelectOneRadio.getOverrideName() != null
                    && customSelectOneRadio.getOverrideName().equals("true")) {
                return customSelectOneRadio.getName();
            } else {
                String id = customSelectOneRadio.getClientId(context);
                int lastIndexOfColon = id.lastIndexOf(":");
                String partName = "";
                if (lastIndexOfColon != -1) {
                    partName = id.substring(0, lastIndexOfColon + 1);
                    if (customSelectOneRadio.getName() == null) {
                        partName = partName + "generatedRad";
                    } else {
                        partName = partName + customSelectOneRadio.getName();
                    }
                }
                return partName;
            }
        }
    }
    private UIComponent getParentDataTableFromHierarchy(UIComponent uiComponent) {
        if (uiComponent == null) {
            return null;
        }
        if (uiComponent instanceof UIData) {
            return uiComponent;
        } else {
            //try to find recursively in the Component tree hierarchy
            return getParentDataTableFromHierarchy(uiComponent.getParent());
        }
    }
    @Override
    public void encodeEnd(FacesContext context, UIComponent component)
            throws IOException {
        if ((context == null) || (component == null)) {
            throw new NullPointerException();
        }
        UICustomSelectOneRadio customSelectOneRadio
            = (UICustomSelectOneRadio) component;
        if (component.isRendered()) {
            ResponseWriter writer = context.getResponseWriter();
            writer.startElement("input", component);
            writer.writeAttribute("type", "radio", "type");
            writer.writeAttribute("id", component.getClientId(context), "id");
            writer.writeAttribute("name", getName(customSelectOneRadio, context), "name");
            if (customSelectOneRadio.getStyleClass() != null && customSelectOneRadio.getStyleClass().trim().
                    length() > 0) {
                writer.writeAttribute("class", customSelectOneRadio.getStyleClass().trim(), "class");
            }
            if (customSelectOneRadio.getStyle() != null && customSelectOneRadio.getStyle().trim().length() > 0) {
                writer.writeAttribute("style", customSelectOneRadio.getStyle().trim(), "style");
            }
         ...
            if (customSelectOneRadio.getValue() != null
                    && customSelectOneRadio.getValue().equals(customSelectOneRadio.getItemValue())) {
                writer.writeAttribute("checked", "checked", "checked");
            }
            if (customSelectOneRadio.getItemLabel() != null) {
                writer.write(customSelectOneRadio.getItemLabel());
            }
            writer.endElement("input");
        }
    }
}

快速总结一下，当我在facelets/XHTML文件中使用自定义标记时，这是有效的，但当我动态使用它时，例如

<h:panelGroup id="dynamicPanel" layout="block" binding="#{documentController.dynamicPanel}"/>

如果有人知道我可能错过了什么，我将不胜感激。

Answer 1

知道了!这一切都围绕着改变rendererType的属性。从上面的Renderer类中，你可以看到我将它设置为我自己的，即

public static final String RENDERER_TYPE = "com.myapp.jsf.renderers.HTMLCustomSelectOneRadioRenderer";

(1)我把它改成

public static final String RENDERER_TYPE = "javax.faces.Radio";

(2)我也改变了我的xxx.taglib.xml文件来反映这一点，例如

<namespace>http://mycomponents</namespace>
<tag>
    <tag-name>customradio</tag-name>
    <component>
        <component-type>CustomRadio</component-type>
        <renderer-type>javax.faces.Radio</renderer-type>     /*<----- See Here */
    </component>
</tag>

(3)但是，这里是需要注意的最后一步。我还必须在UICustomSelectOneRadio组件中创建以下构造函数。没有这个，它也不能工作。

public UICustomSelectOneRadio() {
    this.setRendererType("javax.faces.Radio"); 
}

请记住-我从UIInput扩展了我的组件，因此javax.faces.Text将被设置。把component family设置为"CustomRadio"就可以了。

我仍然不是100%满意渲染器类型等，但对于任何想要一点信息的人，BalusC在这里解释得很好。