JSF Custom Image Component Problem to display multiple Image

Question

Created a Tag Library Descriptor File:

 <?xml version="1.0" encoding="UTF-8"?>
    <taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd">
      <tlib-version>1.0</tlib-version>
      <short-name>image</short-name>
      <uri>/WEB-INF/tlds/image</uri>
      <tag>
        <name>BsilImage</name>
        <tag-class>com.custom.image.ImageTagHandler</tag-class>
        <body-content>scriptless</body-content>
        <attribute>
          <name>url</name>
          <required>true</required>
          <rtexprvalue>true</rtexprvalue>
          <type>java.lang.String</type>
        </attribute>
        <attribute>
          <name>style</name>
          <rtexprvalue>true</rtexprvalue>
          <type>java.lang.String</type>
        </attribute>
        <attribute>
          <name>type</name>
          <required>true</required>
          <rtexprvalue>true</rtexprvalue>
          <type>java.lang.String</type>
        </attribute>
      </tag>
    </taglib>

ImageTagHandler

public class ImageTagHandler extends UIComponentELTag {

    private String url;
    private String style;
    private String type;
    private static final String IMAGE_COMP_TYPE = "IMAGE_COMPONENT";
    private static final String IMAGE_RENDERER_TYPE = "IMAGE_RENDERER";

    public void setUrl(String url) {
        this.url = url;
    }

    public void setStyle(String style) {
        this.style = style;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getComponentType() {
        return IMAGE_COMP_TYPE;
    }

    public String getRendererType() {
        return IMAGE_RENDERER_TYPE;
    }

    @Override
    protected void setProperties(UIComponent component) {
        super.setProperties(component);
        ImageComponent imgComponent =
                ((ImageComponent) component);
        if (type != null) {
            imgComponent.setType(ImageTranscoder.getImageTypeOf(type));
        }
        if (url != null) {
            imgComponent.setUrl(ImageTranscoder.getImagePath(url));
        }

        if (style != null) {
            imgComponent.setStyle(style);
        }        
    }
}

ImageComponent

public class ImageComponent extends UIOutput {

    private String url;
    private String style;
    private String type;
    private static final String IMAGE_COMP_FAMILY = "IMAGE_FAMILY";

    @Override
    public String getFamily() {
      return IMAGE_COMP_FAMILY;
  }

    /**
     * Get the value of type
     *
     * @return the value of type
     */
    public String getType() {
        return type;
    }

    /**
     * Set the value of type
     *
     * @param type new value of type
     */
    public void setType(String type) {
        this.type = type;
    }

    /**
     * Get the value of style
     *
     * @return the value of style
     */
    public String getStyle() {
        return style;
    }

    /**
     * Set the value of style
     *
     * @param style new value of style
     */
    public void setStyle(String style) {
        this.style = style;
    }

    /**
     * Get the value of url
     *
     * @return the value of url
     */
    public String getUrl() {
        return url;
    }

    /**
     * Set the value of url
     *
     * @param url new value of url
     */
    public void setUrl(String url) {
        this.url = url;
    }

}

ImageRenderer

public class ImageRenderer extends Renderer {
    @Override
    public void encodeBegin(FacesContext context, UIComponent component)
                    throws IOException {
        ImageComponent imgComponent = (ImageComponent)component;
        ResponseWriter writer = context.getResponseWriter();
        writer.startElement("div",component);
        writer.startElement("img", imgComponent);
        writer.writeAttribute("src",imgComponent.getUrl(), "url");
        writer.writeAttribute("class", imgComponent.getStyle(), "style");
        writer.endElement("div");
    }

}

CODE TO ACCESS TAG LIB IS

<h:dataTable var="landing" binding="${LandingBean.tourPackages}" >
       <h:column>
          <tr:panelGroupLayout layout="vertical" styleClass="landingListing">
              <bsil:BsilImage style="listingImage" url="${landing.photoThumbnail}"   type="banner"/>
           </tr:panelGroupLayout>
       </h:column>
</h:dataTable>

The bean contain multiple photos which has to be shown in number of column when the page is displayed. The problem which I am facing is its cant show me multiple images gives an error saying

According to TLD or attribute directive in tag file, attribute binding does not accept any expressions

If the bean contain single Image It is displayed the code for that is

<tr:panelHeader id="panelHeader" styleClass="banner" text="">
                    <bsil:BsilImage url="${LandingBean.bannerImage}"
                        style="bannerImage" type="banner"></bsil:BsilImage>
                </tr:panelHeader>

I want to know how to display multiple images using custom component.

Answer 1

According to the error message you quoted, it seems that the issue is in the <h:dataTable ...> tag, it seems that its attribute called "binding" apparently doesn't accept expressions for some reason.

E.g.

<tag> 

    <name>dataTable</name> 

    <attribute> 
      <name>binding</name>
      <!-- add this: --> 
      <rtexprvalue>true</rtexprvalue>
    </attribute>

</tag>

If you own the code of the dataTable tag, add <rtexprvalue>true</rtexprvalue> next to the "binding" attribute of that tag (like you did in your image tag). If you don't, refer to it's documentation and find out why it doesn't allow expressions.