CommandButton doesn't accept images inside

UI Components for JSF
Post Reply
User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

20 Mar 2011, 22:34

Hello Cagatay,

Images for command buttons are defined via CSS ("image" attribute). Unfortunately we have many dynamic images coming from DB e.g. We have a problem at the moment with this code

Code: Select all

    <p:commandButton ...>
        <h:graphicImage value="#{container.action.imagePath}"/>
    </p:commandButton>
Image is rendered outside of command button. I can give you more details about the reason if you need any. I think it could be improved by writing (as in command link renderer)

Code: Select all

	public void encodeChildren(FacesContext context, UIComponent component) throws IOException {
		//Do Nothing
	}

	public boolean getRendersChildren() {
		return true;
	}
and then in encodeEnd(...) method

Code: Select all

        renderPassThruAttributes(facesContext, button, HTML.BUTTON_ATTRS, HTML.CLICK_EVENT);

        if (button.getValue() != null) {
            // workaround begin ===================
            for(UIComponent kid : button.getChildren()) {
                if(kid instanceof HtmlGraphicImage) {
                    renderChild(facesContext, kid);
                }
            }
            // workaround end ===================

            writer.write(button.getValue().toString());
        } else if (button.getImage() != null) {
            writer.write("ui-button");
        }

        writer.endElement("button");
Could you consider that in future releases please? Do you need an issue in the issue tracker?
Last edited by Oleg on 21 Mar 2011, 16:04, edited 3 times in total.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

21 Mar 2011, 09:58

Hello again,

I think, I can replace image paths by image CSS selectors which reference paths via "background", but p:graphicImage can not still be used (dynamic images streamed as bytes). I think, general we should allow to render any content inside of buttons and not only text. I think, general it would be great if PrimeFaces buttons render any child content and not only text. I think that this is one of the important strengths of the button tag. HTML button element allows this

Code: Select all

<button>
     ....
     any HTML content
     ....
</button>
and that should be possible in PrimeFaces buttons too.

What do you think?
Thanks a lot.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 34 guests