Image from resource in SafeHtmlTemplate

[Micah Caldwell]

I have an image from a ClientBundle resource:

final String myImageUrl = new Image(Resources.sSingleton.GetMyImage()).getUrl();

I also have a SafeHtmlTemplates interface:

public interface MyTemplates extends SafeHtmlTemplates {

@Template("<img src='{1}'/>")

SafeHtml GenerateCellHtml(String imageUrl);

}

When I call MyTemplates.GenerateCellHtml an exception is thrown because the URL output by Image.getUrl(), when the image comes from a resource, does not have one of the supported protocols (http, https, ftp, etc.).

Is it possible to use SafeHtmlTemplates with an Image sourced from a ClientBundle?  Am I stuck manually building the HTML string in the middle of my Java code using SafeHTMLBuilder?

[Micah Caldwell]

For the curious, this is what is returned by Image.getUrl():

data:image/png;base64,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

[Ioan Agopian]

You can use the following code to build the html for the image:

AbstractImagePrototype.create(Resources.Singleton.GetMyImage()).getHTML();


Regards,
Ioan

[Micah Caldwell]

SafeHtmlTemplates doesn't like that one either. The output of that ends up escaped when I run it through the template:

&lt;img onload='this.__gwtLastUnhandledEvent=&quot;load&quot;;' src='http://127.0.0.1:8888/MyProject/clear.cache.gif' style='width: 48px; height: 48px; background: url(data:image/png;base64,iVB...mCC) no-repeat 0px 0px' border='0'&amp;gt;

('...' added for brevity)

[Micah Caldwell]

This gets me close (and I love the class name): 

String myImageHtml = AbstractImagePrototype.create(Resources.sSingleton.fDelete()).getHTML();
SafeHtml mySafeImageHtml = new OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml(myImageHtml);
GWT.create(MyTemplates.class).generateCellHtml(mySafeImageHtml);

 When used in combination with this:

public interface MyTemplates extends SafeHtmlTemplates {

@Template("{1}")
SafeHtml generateCellHtml(SafeHtml imageUrl);
}

However, the template I want to use is more complex than this test case, with other HTML surrounding the image tag, and most importantly, the image tag having an id attribute (so I can get a browser event when it is clicked).  The tag generated by AbstractImagePrototype does not appear to have an id field.

[Micah Caldwell]

I figured it out.  A bit more unwieldy than I would like but it gets the job done.  In short, I create a DOM element out of the resource, add an id to it, then assure my SafeHtmlTemplates that it is already SafeHtml so it doesn't try to parse it.

final ImagePrototypeElement imageElement = AbstractImagePrototype.create(Resources.sSingleton.getMyImage()).createElement();
imageElement.setId("delete_button");
final String imageUnsafeHtml = imageElement.getString();
final SafeHtml imageSafeHtml = new OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml(imageUnsafeHtml);
GWT.create(MyTemplates.class).generateCellHtml(imageSafeHtml);

[Steen Laursen]

Micah Caldwell <mic...@gmail.com> wrote:

>--
>You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
>To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/nw0_n7YusWIJ.
>To post to this group, send email to google-we...@googlegroups.com.
>To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
>For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>

[Ioan Agopian]

You don't have to run the result of AbstractImagePrototype.create
through the template, just add it to the SafeHtmlBuilder:

String imageHtml =
AbstractImagePrototype.create(Resources.sSingleton.getMyImage()).getHTML();
safeHtmlBuilder.appendHtmlConstant(imageHtml);

On Aug 13, 7:12 pm, Steen Laursen <steen.laur...@gmail.com> wrote:
> Micah Caldwell <mic...@gmail.com> wrote:
> >SafeHtmlTemplates doesn't like that one either. The output of that ends up
> >escaped when I run it through the template:
>
> >&lt;img onload='this.__gwtLastUnhandledEvent=&quot;load&quot;;'
> >src='http://127.0.0.1:8888/MyProject/clear.cache.gif'style='width: 48px;
> >height: 48px; background: url(data:image/png;base64,iVB...mCC) no-repeat 0px
> >0px' border='0'&amp;gt;
>
> >('...' added for brevity)
>
> >--
> >You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

> >To view this discussion on the web visithttps://groups.google.com/d/msg/google-web-toolkit/-/nw0_n7YusWIJ.

[Micah Caldwell]

Yeah, I understand that part and after reading over my original post it seems that I over-simplified my example.  The template is much larger than just "<img src='{0}'/> and the image tag is in the middle of it all.  I was trying to avoid splitting my template up into multiple parts, one before the image tag and one after the image tag because I expect I will add additional images to the template and each one require I branch off another template if I were to just manually add the image tag using appendHtmlConstant.