Custom component & validation/rendering problems

[Tommaso Tama]

Hi,

I need a component that will do the following:

- render an icon with an HtmlAjaxCommandLink
- clicking the icon an action will be triggered
- clicking the icon a modal panel will appear with some label, text and so on.

This is the tag I have in mind:

<myTagLib:helpbasic
	action = "#{helpBasicManager.helpProf}"  
	rendered = "#{!prevMan.locked}"
	assignCodTo = "#{helpBasicManager.test}"
	assignDescTo = "#{helpBasicManager.testDesc}"
	reRender = "prof,profDesc" 
	label = "Help Prof"
/>

So, I started to write a custom component that will extend an HtmlAjaxCommandLink

public class UIHelpPanel extends org.ajax4jsf.component.html.HtmlAjaxCommandLink
{

	private String					label;

	private String					codLabel;
	private String					descLabel;
	private String					_dummyReRender			= "";
	private String					assignCodTo;
	private String					assignDescTo;

	private HtmlGraphicImage	img;
	private HtmlModalPanel		panel;

	public UIHelpPanel()
	{
		super();
	}
	
	public void encodeBegin(FacesContext context) throws IOException
	{
		if(context == null)
		{
			throw new NullPointerException();
		}
		if(!isRendered())
		{
			return;
		}

		_dummyReRender = (String) getReRender();

		this.img = getImg(context, getIcoLinkSrc());
		this.img.setStyle("border:0px;");
		getChildren().add(img);

		this.panel = getPanel(context, getWidth(), getHeight());
		panel.setKeepVisualState(true);

		this.img.getChildren().add(panel);
		this.img.setOnclick("Richfaces.showModalPanel('" + this.panel.getId() + "');");

		.......

		[b]super.encodeBegin(context);[/b]

	}
	private HtmlGraphicImage getImg(FacesContext context, String url)
	{
		HtmlGraphicImage gi = (HtmlGraphicImage) context.getApplication().createComponent(HtmlGraphicImage.COMPONENT_TYPE);
		gi.getClientId(context);
		gi.setUrl(url);
		return gi;
	}
	private HtmlModalPanel getPanel(FacesContext context, int width, int height)
	{
		HtmlModalPanel panel = (HtmlModalPanel) context.getApplication().createComponent(HtmlModalPanel.COMPONENT_TYPE);
		panel.setDomElementAttachment("form");
		panel.getClientId(context);
		panel.setResizeable(false);
		panel.setAutosized(true);
		panel.setWidth(width);
		panel.setHeight(height);
		return panel;
	}
	
	public String getLabel()
	{
		if(null != this.label)
		{
			return this.label;
		}
		ValueExpression _ve = getValueExpression("label");
		if(_ve != null)
		{
			return (java.lang.String) _ve.getValue(getFacesContext().getELContext());
		}
		else
		{
			return null;
		}
	}

	public void setLabel(String label)
	{
		this.label = label;
	}

	public void encodeEnd(FacesContext context) throws IOException
	{
		super.encodeEnd(context);
	}

	public void encodeChildren(FacesContext context) throws IOException
	{
		super.encodeChildren(context);
	}

}

The idea is to use

getChildren()

and then add a child component to the DOM:

public void encodeBegin(FacesContext context) throws IOException
{
  .....

  getChildren().add(img);
  this.panel = getPanel(context, getWidth(), getHeight());
  panel.setKeepVisualState(true);
  this.img.getChildren().add(panel);
.....
}

Tag works fine ....


(see one.gif)

but if a JSF validation is triggered (i.e. a missing value in a mandatory field), something goes wrong.


(see two.gif)

The component is rendered again, so I have two icons in the page.


(see three.gif)

While debugging, I saw that after validation, encodeBegin is called again and that getChildCount() returns 1.
The solution I found is to invoke getChildren().clear() in encodeBegin method.

I know that this is not the right way to fix my problem.

Any suggestion?

Many thanks,
Tommaso

[Tommaso Tama]

Sorry, I forgot: I'm using JSF1.2 and Rich components (3.3).