动态创建JSF 2.2自定义组件

时间:2014-06-24 16:51:55

标签: jsf custom-component jsf-2.2

我已经编写(好了,修改过)基于this article出现在数据表中的单选按钮的自定义组件。我通过使用@FacesRenderer和@FacesComponent标记并省略了自定义标记类,对JSF 2.2稍作修改。在我的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}"/>

如果有人对我可能遗失的内容有任何想法,我将不胜感激。

1 个答案:

答案 0 :(得分:0)

疑难杂症!这一切都围绕着改变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”很好。

我对渲染器类型等仍然不是很满意,但对于想要一点信息的人来说, BalusC 很好地解释了它here