You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Matteo Alessandroni <ma...@tirasa.net> on 2019/05/10 15:24:29 UTC
Control how and where the Bootstrap css resources are included in the
page
Hi,
I would like to know whether there is a way to decide where to place the
Bootstrap css resources in the <head> element.
I'm asking this because I have a "BookmarkablePageLink" element on page
A and, when you click it, it redirects to page B.
Now on B I see all my custom css resource files that are placed BEFORE
the Bootstrap ones, on the contrary, in page A everything is fine
because my custom css files are placed AFTER Bootstrap, so my page
styling is correct as I expect.
Is there a way to control that behaviour? Or, what could I do to make my
css resources render AFTER the Bootstrap ones?
See on [1] how I load Bootstrap from Java code.
The wrapper main page code is on [2] and [3] and the code of the child
page that is loaded and has the issue is on [4] and [5].
[1]
https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java#L240-L244
[2]
https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L66
[3]
https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.java
[4]
https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Flowable.html
[5]
https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/java/org/apache/syncope/client/enduser/pages/Flowable.java
Thank you!
Regards,
Matteo
Re: Control how and where the Bootstrap css resources are included in
the page
Posted by Matteo Alessandroni <ma...@tirasa.net>.
thank you for you help Martin, it works great!
And thank you Bas for the useful suggestion that I'm using now!
Best regards,
Matteo
On 13/05/19 10:51, Martin Grigorov wrote:
> Hi Matteo,
>
> On Mon, May 13, 2019 at 11:48 AM Matteo Alessandroni <
> matteo.alessandroni@tirasa.net> wrote:
>
>> Hi,
>>
>> thank you for the answer.
>> Ok, then, I have transformed my css resource into a
>> "CssResourceReference" and added the Bootstrap css resource reference,
>> like this:
>>
>> public class MyCssResource extends CssResourceReference {
>>
>> private static final long serialVersionUID = 7244898174745686253L;
>>
>> public MyCssResource() {
>> super(MyCssResource.class, "css/style.css");
>> }
>>
>> @Override
>> public List<HeaderItem> getDependencies() {
>>
>> super.getDependencies().add(CssHeaderItem.forReference(Bootstrap.getSettings().getCssResourceReference()));
>> return super.getDependencies();
>> }
>>
>> }
>>
>> but now how can I add that custom resource to the whole application?
>> I mean, that "style.css" resource should be used on all pages, that's
>> why until now I add it in the html base page (see [1] as and example),
>> but with the change above I need to add it via Java.
>> E.g. is it possible to add it in the "SyncopeWebApplication.java" class
>> [2]?
>>
> Yes, you can do that!
> In #init() method add:
>
> getHeaderContributorListeners().add(new IHeaderContributor() {...});
>
>
>>
>> Thank you!
>> Regards,
>> Matteo
>>
>>
>> [1]
>>
>> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L37
>> [2]
>>
>> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java
>>
>> On 10/05/19 17:47, Bas Gooren wrote:
>>> Hi!
>>>
>>> To ensure your resources render *after* bootstrap, you need to make them
>>> dependent on the bootstrap css resource.
>>>
>>> You can override HeaderItem#getDependencies() in your custom
>> CssHeaderItem,
>>> and add the bootstrap css resource to its list of dependencies.
>>>
>>> Met vriendelijke groet,
>>> Kind regards,
>>>
>>> Bas Gooren
>>>
>>> Op 10 mei 2019 bij 17:24:43, Matteo Alessandroni (
>>> matteo.alessandroni@tirasa.net) schreef:
>>>
>>> Hi,
>>>
>>> I would like to know whether there is a way to decide where to place the
>>> Bootstrap css resources in the <head> element.
>>>
>>> I'm asking this because I have a "BookmarkablePageLink" element on page
>>> A and, when you click it, it redirects to page B.
>>> Now on B I see all my custom css resource files that are placed BEFORE
>>> the Bootstrap ones, on the contrary, in page A everything is fine
>>> because my custom css files are placed AFTER Bootstrap, so my page
>>> styling is correct as I expect.
>>>
>>> Is there a way to control that behaviour? Or, what could I do to make my
>>> css resources render AFTER the Bootstrap ones?
>>>
>>> See on [1] how I load Bootstrap from Java code.
>>> The wrapper main page code is on [2] and [3] and the code of the child
>>> page that is loaded and has the issue is on [4] and [5].
>>>
>>>
>>> [1]
>>>
>> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java#L240-L244
>>> [2]
>>>
>> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L66
>>> [3]
>>>
>> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.java
>>> [4]
>>>
>> https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Flowable.html
>>> [5]
>>>
>> https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/java/org/apache/syncope/client/enduser/pages/Flowable.java
>>> Thank you!
>>> Regards,
>>> Matteo
>>>
>>
Re: Control how and where the Bootstrap css resources are included in
the page
Posted by Martin Grigorov <mg...@apache.org>.
Hi Matteo,
On Mon, May 13, 2019 at 11:48 AM Matteo Alessandroni <
matteo.alessandroni@tirasa.net> wrote:
> Hi,
>
> thank you for the answer.
> Ok, then, I have transformed my css resource into a
> "CssResourceReference" and added the Bootstrap css resource reference,
> like this:
>
> public class MyCssResource extends CssResourceReference {
>
> private static final long serialVersionUID = 7244898174745686253L;
>
> public MyCssResource() {
> super(MyCssResource.class, "css/style.css");
> }
>
> @Override
> public List<HeaderItem> getDependencies() {
>
> super.getDependencies().add(CssHeaderItem.forReference(Bootstrap.getSettings().getCssResourceReference()));
> return super.getDependencies();
> }
>
> }
>
> but now how can I add that custom resource to the whole application?
> I mean, that "style.css" resource should be used on all pages, that's
> why until now I add it in the html base page (see [1] as and example),
> but with the change above I need to add it via Java.
> E.g. is it possible to add it in the "SyncopeWebApplication.java" class
> [2]?
>
Yes, you can do that!
In #init() method add:
getHeaderContributorListeners().add(new IHeaderContributor() {...});
>
>
> Thank you!
> Regards,
> Matteo
>
>
> [1]
>
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L37
> [2]
>
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java
>
> On 10/05/19 17:47, Bas Gooren wrote:
> > Hi!
> >
> > To ensure your resources render *after* bootstrap, you need to make them
> > dependent on the bootstrap css resource.
> >
> > You can override HeaderItem#getDependencies() in your custom
> CssHeaderItem,
> > and add the bootstrap css resource to its list of dependencies.
> >
> > Met vriendelijke groet,
> > Kind regards,
> >
> > Bas Gooren
> >
> > Op 10 mei 2019 bij 17:24:43, Matteo Alessandroni (
> > matteo.alessandroni@tirasa.net) schreef:
> >
> > Hi,
> >
> > I would like to know whether there is a way to decide where to place the
> > Bootstrap css resources in the <head> element.
> >
> > I'm asking this because I have a "BookmarkablePageLink" element on page
> > A and, when you click it, it redirects to page B.
> > Now on B I see all my custom css resource files that are placed BEFORE
> > the Bootstrap ones, on the contrary, in page A everything is fine
> > because my custom css files are placed AFTER Bootstrap, so my page
> > styling is correct as I expect.
> >
> > Is there a way to control that behaviour? Or, what could I do to make my
> > css resources render AFTER the Bootstrap ones?
> >
> > See on [1] how I load Bootstrap from Java code.
> > The wrapper main page code is on [2] and [3] and the code of the child
> > page that is loaded and has the issue is on [4] and [5].
> >
> >
> > [1]
> >
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java#L240-L244
> > [2]
> >
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L66
> > [3]
> >
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.java
> > [4]
> >
> https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Flowable.html
> > [5]
> >
> https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/java/org/apache/syncope/client/enduser/pages/Flowable.java
> >
> > Thank you!
> > Regards,
> > Matteo
> >
>
>
Re: Control how and where the Bootstrap css resources are included in
the page
Posted by Matteo Alessandroni <ma...@tirasa.net>.
Hi again,
I think I can answer to myself and I will try to add it to the
"BaseEnduserWebPage.java" class [1].
I'll keep you updated, thanks!
Regards,
Matteo
[1]
https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.java
On 13/05/19 10:40, Matteo Alessandroni wrote:
> Hi,
>
> thank you for the answer.
> Ok, then, I have transformed my css resource into a
> "CssResourceReference" and added the Bootstrap css resource reference,
> like this:
>
> public class MyCssResource extends CssResourceReference {
>
> private static final long serialVersionUID = 7244898174745686253L;
>
> public MyCssResource() {
> super(MyCssResource.class, "css/style.css");
> }
>
> @Override
> public List<HeaderItem> getDependencies() {
> super.getDependencies().add(CssHeaderItem.forReference(Bootstrap.getSettings().getCssResourceReference()));
> return super.getDependencies();
> }
>
> }
>
> but now how can I add that custom resource to the whole application?
> I mean, that "style.css" resource should be used on all pages, that's
> why until now I add it in the html base page (see [1] as and example),
> but with the change above I need to add it via Java.
> E.g. is it possible to add it in the "SyncopeWebApplication.java"
> class [2]?
>
>
> Thank you!
> Regards,
> Matteo
>
>
> [1]
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L37
> [2]
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java
>
> On 10/05/19 17:47, Bas Gooren wrote:
>> Hi!
>>
>> To ensure your resources render *after* bootstrap, you need to make them
>> dependent on the bootstrap css resource.
>>
>> You can override HeaderItem#getDependencies() in your custom CssHeaderItem,
>> and add the bootstrap css resource to its list of dependencies.
>>
>> Met vriendelijke groet,
>> Kind regards,
>>
>> Bas Gooren
>>
>> Op 10 mei 2019 bij 17:24:43, Matteo Alessandroni (
>> matteo.alessandroni@tirasa.net) schreef:
>>
>> Hi,
>>
>> I would like to know whether there is a way to decide where to place the
>> Bootstrap css resources in the <head> element.
>>
>> I'm asking this because I have a "BookmarkablePageLink" element on page
>> A and, when you click it, it redirects to page B.
>> Now on B I see all my custom css resource files that are placed BEFORE
>> the Bootstrap ones, on the contrary, in page A everything is fine
>> because my custom css files are placed AFTER Bootstrap, so my page
>> styling is correct as I expect.
>>
>> Is there a way to control that behaviour? Or, what could I do to make my
>> css resources render AFTER the Bootstrap ones?
>>
>> See on [1] how I load Bootstrap from Java code.
>> The wrapper main page code is on [2] and [3] and the code of the child
>> page that is loaded and has the issue is on [4] and [5].
>>
>>
>> [1]
>> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java#L240-L244
>> [2]
>> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L66
>> [3]
>> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.java
>> [4]
>> https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Flowable.html
>> [5]
>> https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/java/org/apache/syncope/client/enduser/pages/Flowable.java
>>
>> Thank you!
>> Regards,
>> Matteo
>>
>
Re: Control how and where the Bootstrap css resources are included in
the page
Posted by Matteo Alessandroni <ma...@tirasa.net>.
Hi,
thank you for the answer.
Ok, then, I have transformed my css resource into a
"CssResourceReference" and added the Bootstrap css resource reference,
like this:
public class MyCssResource extends CssResourceReference {
private static final long serialVersionUID = 7244898174745686253L;
public MyCssResource() {
super(MyCssResource.class, "css/style.css");
}
@Override
public List<HeaderItem> getDependencies() {
super.getDependencies().add(CssHeaderItem.forReference(Bootstrap.getSettings().getCssResourceReference()));
return super.getDependencies();
}
}
but now how can I add that custom resource to the whole application?
I mean, that "style.css" resource should be used on all pages, that's
why until now I add it in the html base page (see [1] as and example),
but with the change above I need to add it via Java.
E.g. is it possible to add it in the "SyncopeWebApplication.java" class [2]?
Thank you!
Regards,
Matteo
[1]
https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L37
[2]
https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java
On 10/05/19 17:47, Bas Gooren wrote:
> Hi!
>
> To ensure your resources render *after* bootstrap, you need to make them
> dependent on the bootstrap css resource.
>
> You can override HeaderItem#getDependencies() in your custom CssHeaderItem,
> and add the bootstrap css resource to its list of dependencies.
>
> Met vriendelijke groet,
> Kind regards,
>
> Bas Gooren
>
> Op 10 mei 2019 bij 17:24:43, Matteo Alessandroni (
> matteo.alessandroni@tirasa.net) schreef:
>
> Hi,
>
> I would like to know whether there is a way to decide where to place the
> Bootstrap css resources in the <head> element.
>
> I'm asking this because I have a "BookmarkablePageLink" element on page
> A and, when you click it, it redirects to page B.
> Now on B I see all my custom css resource files that are placed BEFORE
> the Bootstrap ones, on the contrary, in page A everything is fine
> because my custom css files are placed AFTER Bootstrap, so my page
> styling is correct as I expect.
>
> Is there a way to control that behaviour? Or, what could I do to make my
> css resources render AFTER the Bootstrap ones?
>
> See on [1] how I load Bootstrap from Java code.
> The wrapper main page code is on [2] and [3] and the code of the child
> page that is loaded and has the issue is on [4] and [5].
>
>
> [1]
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java#L240-L244
> [2]
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L66
> [3]
> https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.java
> [4]
> https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Flowable.html
> [5]
> https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/java/org/apache/syncope/client/enduser/pages/Flowable.java
>
> Thank you!
> Regards,
> Matteo
>
Re: Control how and where the Bootstrap css resources are included in
the page
Posted by Bas Gooren <ba...@iswd.nl>.
Hi!
To ensure your resources render *after* bootstrap, you need to make them
dependent on the bootstrap css resource.
You can override HeaderItem#getDependencies() in your custom CssHeaderItem,
and add the bootstrap css resource to its list of dependencies.
Met vriendelijke groet,
Kind regards,
Bas Gooren
Op 10 mei 2019 bij 17:24:43, Matteo Alessandroni (
matteo.alessandroni@tirasa.net) schreef:
Hi,
I would like to know whether there is a way to decide where to place the
Bootstrap css resources in the <head> element.
I'm asking this because I have a "BookmarkablePageLink" element on page
A and, when you click it, it redirects to page B.
Now on B I see all my custom css resource files that are placed BEFORE
the Bootstrap ones, on the contrary, in page A everything is fine
because my custom css files are placed AFTER Bootstrap, so my page
styling is correct as I expect.
Is there a way to control that behaviour? Or, what could I do to make my
css resources render AFTER the Bootstrap ones?
See on [1] how I load Bootstrap from Java code.
The wrapper main page code is on [2] and [3] and the code of the child
page that is loaded and has the issue is on [4] and [5].
[1]
https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/SyncopeWebApplication.java#L240-L244
[2]
https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.html#L66
[3]
https://github.com/apache/syncope/blob/master/client/idrepo/enduser/src/main/java/org/apache/syncope/client/enduser/pages/BaseEnduserWebPage.java
[4]
https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Flowable.html
[5]
https://github.com/apache/syncope/blob/master/ext/flowable/client-enduser/src/main/java/org/apache/syncope/client/enduser/pages/Flowable.java
Thank you!
Regards,
Matteo