Proper way to embed image URL into style attribute?

[Sergey Olefir <so...@gmail.com>]

Hi,

we are currently developing our first application with Wicket -- and
naturally we run into some problems/questions :)

One of the' frameworkish' things we've done is to create 'base page'
that we want to be able switch the look & feel (theme) depending on
the settings (e.g. depending on where/how user is accessing a given
page).

In one of the themes we are using, we want to do a rounded corner on
the dual-colored page. Our designers came up with the HTML that
requires manipulating style attribute on the corresponding div tag,
basically something like:
style="background-image: url(/images/corner.gif); background-repeat:
no-repeat; background-position: right 13px"

Now since this is the 'base page' that will be reused in different
projects we can't hardcode absolute path to the image (at the very
least it is needed to adjust the path based on application context).
Plus to make reuse really easy we decided to store resources
(including images) together with the java/html files.

As far as I could figure out, in this case we need to use
ResourceReference to refer to the resources/images.

I came up with the following code (getWicketVariationContribution()
below returns string that denotes name of the current 'theme'):

OurLookAndFeel lnf = getLookAndFeel();
ResourceReference background =
    new ResourceReference( BasePage.class,
        lnf.getWicketVariationContribution() + "/images/corner.gif");
String styling = "background-image: url(" + urlFor(background) + ");
background-repeat: no-repeat; background-position: right 13px";
AttributeModifier mod = new AttributeModifier("style", true, new
Model<String>(styling));
content.add(mod);


This seemed to work fine until I've run into some redirect issues with
Internet Explorer.

Basically we have application setup under /context/. We have our
StartPage mapped to 'apply' via:
mount(new HybridUrlCodingStrategy("apply", StartPage.class));
(in production we are going to be using encrypted urls for non-entry
point pages).

The sequence of events if accessed from e.g. Opera is like this:
request: /context/
redirect: /context/apply
request: /context/apply
redirect: /context/apply.0 (and set cookie too)
request: /context/apply.0
response: the page
then there are resource requests etc, everything works normally.

However under IE it is different. First it goes like above for Opera,
but then, suddenly there is the following request:
request: GET /context/apply/wicket:interface/:0::INewBrowserWindowListener::
HTTP/1.0
response: the page is rendered again using the same page instance

I'm guessing that this might be due to a 'new window detection' or
some such. I'm not terribly concerned about the fact though -- but
please let me know if this doesn't work like it should.


The thing I'm concerned with is the style attribute outlined above.
The resulting style attribute looks like this:
style="background-image:
url(resources/wicket.page.base.BasePage/theme/images/corner.gif);
background-repeat: no-repeat; background-position: right 13px"

This works perfectly fine when page url is /context/apply.0, however
it fails completely with page url being in entirely different
'folder': /context/apply/wicket:interface/:0::INewBrowserWindowListener::
Not only it fails to load the image, it also produces exception on the Tomcat:
org.apache.wicket.protocol.http.request.InvalidUrlException:
org.apache.wicket.WicketRuntimeException: Internal error parsing
wicket:interface = resources


I did some experimentation and the problem appears to be due to the
fact that I lock the style contents at page creation time. Since
initially page is created for /context/apply.0 URL (as I said, the
same page instance is reused by Wicket when rendering redirected
'INewBrowserWindowListener' URL)., the created style string is invalid
for redirected URL. When I create similar URL in onBeforeRender() it
results (after redirect) in proper URL:
../../resources/wicket.page.base.BasePage/theme/images/corner.gif

However I don't really want to use onBeforeRender() for populating
page components. It would make (in my opinion) page code less readable
and among other things I'll have to track somehow whether I already
added style attribute before (there's no addOrRemove() method and
remove() method throws exception if can't find what to remove).

At any rate this seems to be a terribly convoluted approach -- I
strongly suspect that I'm missing something obvious here :) Something
as simple as:
link.add(new Image("logoImage"));
that is used to replace image path in HTML with resource-relative image path.


So what would be the proper way to render style attribute dynamically
to include reference(s) to image(s) located together with java/html
files?

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org

Re: Proper way to embed image URL into style attribute?

[Igor Vaynberg <ig...@gmail.com>]

problem is you calculate the path once at creation time, but the page
can be accessed from multiple urls so you need to calculate the path
on every render.

AttributeModifier mod = new AttributeModifier("style", true, new
AbstractReadOnlyModel<String>() {
  public String getObject() {
    String styling = "background-image: url(" + urlFor(background) + ");
     background-repeat: no-repeat; background-position: right 13px";
     return styling;
  }
});
content.add(mod);

-igor

On Tue, Feb 23, 2010 at 8:09 AM, Sergey Olefir <so...@gmail.com> wrote:
> Hi,
>
> we are currently developing our first application with Wicket -- and
> naturally we run into some problems/questions :)
>
> One of the' frameworkish' things we've done is to create 'base page'
> that we want to be able switch the look & feel (theme) depending on
> the settings (e.g. depending on where/how user is accessing a given
> page).
>
> In one of the themes we are using, we want to do a rounded corner on
> the dual-colored page. Our designers came up with the HTML that
> requires manipulating style attribute on the corresponding div tag,
> basically something like:
> style="background-image: url(/images/corner.gif); background-repeat:
> no-repeat; background-position: right 13px"
>
> Now since this is the 'base page' that will be reused in different
> projects we can't hardcode absolute path to the image (at the very
> least it is needed to adjust the path based on application context).
> Plus to make reuse really easy we decided to store resources
> (including images) together with the java/html files.
>
> As far as I could figure out, in this case we need to use
> ResourceReference to refer to the resources/images.
>
> I came up with the following code (getWicketVariationContribution()
> below returns string that denotes name of the current 'theme'):
>
> OurLookAndFeel lnf = getLookAndFeel();
> ResourceReference background =
>    new ResourceReference( BasePage.class,
>        lnf.getWicketVariationContribution() + "/images/corner.gif");
> String styling = "background-image: url(" + urlFor(background) + ");
> background-repeat: no-repeat; background-position: right 13px";
> AttributeModifier mod = new AttributeModifier("style", true, new
> Model<String>(styling));
> content.add(mod);
>
>
> This seemed to work fine until I've run into some redirect issues with
> Internet Explorer.
>
> Basically we have application setup under /context/. We have our
> StartPage mapped to 'apply' via:
> mount(new HybridUrlCodingStrategy("apply", StartPage.class));
> (in production we are going to be using encrypted urls for non-entry
> point pages).
>
> The sequence of events if accessed from e.g. Opera is like this:
> request: /context/
> redirect: /context/apply
> request: /context/apply
> redirect: /context/apply.0 (and set cookie too)
> request: /context/apply.0
> response: the page
> then there are resource requests etc, everything works normally.
>
> However under IE it is different. First it goes like above for Opera,
> but then, suddenly there is the following request:
> request: GET /context/apply/wicket:interface/:0::INewBrowserWindowListener::
> HTTP/1.0
> response: the page is rendered again using the same page instance
>
> I'm guessing that this might be due to a 'new window detection' or
> some such. I'm not terribly concerned about the fact though -- but
> please let me know if this doesn't work like it should.
>
>
> The thing I'm concerned with is the style attribute outlined above.
> The resulting style attribute looks like this:
> style="background-image:
> url(resources/wicket.page.base.BasePage/theme/images/corner.gif);
> background-repeat: no-repeat; background-position: right 13px"
>
> This works perfectly fine when page url is /context/apply.0, however
> it fails completely with page url being in entirely different
> 'folder': /context/apply/wicket:interface/:0::INewBrowserWindowListener::
> Not only it fails to load the image, it also produces exception on the Tomcat:
> org.apache.wicket.protocol.http.request.InvalidUrlException:
> org.apache.wicket.WicketRuntimeException: Internal error parsing
> wicket:interface = resources
>
>
> I did some experimentation and the problem appears to be due to the
> fact that I lock the style contents at page creation time. Since
> initially page is created for /context/apply.0 URL (as I said, the
> same page instance is reused by Wicket when rendering redirected
> 'INewBrowserWindowListener' URL)., the created style string is invalid
> for redirected URL. When I create similar URL in onBeforeRender() it
> results (after redirect) in proper URL:
> ../../resources/wicket.page.base.BasePage/theme/images/corner.gif
>
> However I don't really want to use onBeforeRender() for populating
> page components. It would make (in my opinion) page code less readable
> and among other things I'll have to track somehow whether I already
> added style attribute before (there's no addOrRemove() method and
> remove() method throws exception if can't find what to remove).
>
> At any rate this seems to be a terribly convoluted approach -- I
> strongly suspect that I'm missing something obvious here :) Something
> as simple as:
> link.add(new Image("logoImage"));
> that is used to replace image path in HTML with resource-relative image path.
>
>
> So what would be the proper way to render style attribute dynamically
> to include reference(s) to image(s) located together with java/html
> files?
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org