Creating a Java control for Image component

Question

Using the tutorial of Creating Java control in an NSF, I was able to create a simple Java control. Now I want to extend it so that it displays an image so I modified the code in following way:

This is the example control class which now extends the UIGraphicEx class instead of UIComponentBase.

package com.example.component;
import com.ibm.xsp.component.UIGraphicEx;
public class ExampleControl extends UIGraphicEx {
    public ExampleControl() {
        super();
        setRendererType("com.ibm.xsp.ImageEx");

    }
    @Override
    public String getFamily() {
        return "com.example.examplecontrol";
    }
}

This is the xsp-config file for example control class defined above. I have modified it by adding <base-component-type> with value as com.ibm.xsp.component.UIGraphicEx and set <renderer-type> to com.ibm.xsp.ImageEx.

<faces-config>
    <faces-config-extension>
        <namespace-uri>http://example.com/xsp/control</namespace-uri>
        <default-prefix>eg</default-prefix>
    </faces-config-extension>
    <component>
        <description>Example</description>
        <display-name>Example Control</display-name>
        <component-type>com.example.examplecontrol</component-type>
        <component-class>com.example.component.ExampleControl</component-class>
        <component-extension>
            <base-component-type>com.ibm.xsp.component.UIGraphicEx</base-component-type>
            <component-family>com.example.examplecontrol</component-family>
            <renderer-type>com.ibm.xsp.ImageEx</renderer-type>
            <tag-name>exampleControl</tag-name>
            <designer-extension>
                <category>Example</category>
                <selected-event>onclick</selected-event>
            </designer-extension>
        </component-extension>
    </component>
</faces-config>

My renderer class looks like this. Here instead of using ResponseWriter class, I am casting the UIComponent object to UIGraphicEx and setting its URL (the image is present in the same database).

package com.example.renderkit.html_basic;
import javax.faces.render.Renderer;
import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import com.ibm.xsp.component.UIGraphicEx;
public class ExampleRenderer extends Renderer {
    @Override
    public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
        UIGraphicEx g = (UIGraphicEx)component;
        g.setUrl("review_icon.gif");
        g.setRendered(true);
        System.out.println("-----------" + g.getUrl());
    }
    @Override
    public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
    }
}

When I put this control in XPage no output is given, however the System.out.println statement in method encodeBegin fires up in the console. What am I doing wrong here? Is this the correct way to proceed?

My final objective here is to generate image data on the fly (based on some input) and then put it into image control through the renderer. How can I achieve that?

Answer 1

EDIT: You can't wrap up an xagent and deploy it serverwide. I would suggest using a servlet and deploy it via an OSGI plugin.

Answer 2

Be sure to ensure that the family is defined the same in the component, xsp-config and faces-config. Also, as Toby said, you're not writing anything out to the ResponseWriter. You need to output some html to the screen using ResponseWriter. Or, if you're just wanting to output the exact same thing as the UIGraphicEx renderer, make your renderer extend it (UIGraphicEx Renderer class) and call super.encodeBegin() and super.encodeEnd().

package com.example.renderkit.html_basic;
import javax.faces.render.Renderer;
import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import com.ibm.xsp.component.UIGraphicEx;
public class ExampleRenderer extends Renderer {
    @Override
    public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
        UIGraphicEx g = (UIGraphicEx)component;
        g.setUrl("review_icon.gif");
        g.setRendered(true);
        ResponseWriter writer = context.getResponseWriter();
        writer.append("<img src='http://someserver/somedb.nsf/review_icon.gif' />");
        System.out.println("-----------" + g.getUrl());
    }
    @Override
    public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
    }

}