You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Sylvain Vieujot <sv...@gmail.com> on 2013/03/17 07:09:51 UTC

CSS bundles order does not seem stable when using an application

My application is using a resourceBundle to concatenate CSS resources
via : getResourceBundles().addCssBundle( ... ).

My base wicket page, from which all others pages inherit starts
including the Bootstrap CSS, and then my other CSS :

public void renderHead(IHeaderResponse response) {
        super.renderHead( response );
        Bootstrap.renderHeadResponsive( response );

response.render( CssHeaderItem.forReference( BaseCssResourceReference.get() ) );
    ...
}

However, on some pages the Bootstrap CSS is included first, like on this
page : http://dubai.windcam.com/winds/gallery
Whilst on others, the mainCSSBundle is included first, like here :
http://dubai.windcam.com/winds/windDailyChart 
or here : http://dubai.windcam.com/winds/
And this breaks the CSS that overloads Bootstrap defaults.

What could be the cause of this ?

I thought that calling calling Bootstrap.renderHeadResponsive( response
) first would ensure this order.
Is there an other way to fix this order ?

Thank you,

Sylvain.

Re: CSS bundles order does not seem stable when using an application

Posted by Sylvain Vieujot <sv...@gmail.com>.
The PriorityHeaderItem solved the problem.

Thank you !

On Mon, 2013-03-18 at 05:49 -0700, armandoxxx wrote:

> read this about resources:  resources management
> <http://wicketinaction.com/2012/07/wicket-6-resource-management/>  
> 
> us PriorityHeaderItem() 
> 
> Regards
> 
> Armando
> 
> 
> 
> 
> 
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/CSS-bundles-order-does-not-seem-stable-when-using-an-application-tp4657299p4657319.html
> Sent from the Users forum mailing list archive at Nabble.com.
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
> 

Re: CSS bundles order does not seem stable when using an application

Posted by armandoxxx <ar...@dropchop.com>.
read this about resources:  resources management
<http://wicketinaction.com/2012/07/wicket-6-resource-management/>  

us PriorityHeaderItem() 

Regards

Armando





--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/CSS-bundles-order-does-not-seem-stable-when-using-an-application-tp4657299p4657319.html
Sent from the Users forum mailing list archive at Nabble.com.

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


Re: CSS bundles order does not seem stable when using an application

Posted by Michael Haitz <mi...@1und1.de>.
ok, didn't know that you use wicket:head. By default components are visited child-first and wicket:head before code contribution.

order should be something like that:

 1. child component wicket:head
 2. child component renderHead
 3. Page wicket:head
 4. Page renderHead

You can manipulate order by using FilteredHeaderItem. Here's a javascript example, but it works with css too.

https://github.com/martin-g/blogs/tree/master/wicket6-resource-management/src/main/java/com/wicketinaction/resourcemanagement/positioning



Am 17.03.2013 um 22:52 schrieb Sylvain Vieujot <sv...@gmail.com>:

> Add the bootstrap css resource reference to the bundle would solve the
> problem if it were possible.
> Indeed the bootstrap css include references to images whose path is
> relative to the bootstrap classpath. So adding bootstrap css to a bundle
> whose path is not the same as bootstrap will break the bootstrap images.
> 
> On Sun, 2013-03-17 at 22:45 +0100, Michael Haitz wrote:
> 
>> does adding the bootstrap css resource reference to the bundle solve your problem? 
>> 
>> sorry, i don't have access to the code at the moment.
>> 
>> Am 17.03.2013 um 21:46 schrieb "Sylvain Vieujot" <sv...@gmail.com>:
>> 
>>> Unfortunately, this does not solve the issue.
>>> It seems that if the page has a <wicket:head> tag, the order is
>>> disturbed.
>>> This was not the case when my application was not using
>>> getResourceBundles().addCssBundle in the Application.init.
>>> 
>>> On Sun, 2013-03-17 at 16:26 +0100, Michael Haitz wrote:
>>> 
>>>> you can add a dependency to the bootstrap resource reference in your own BaseCssResourceReference:
>>>> 
>>>>   @Override
>>>>   public Iterable<? extends HeaderItem> getDependencies() {
>>>>       List<HeaderItem> dependencies = new ArrayList<HeaderItem>();
>>>>       dependencies.add(JavaScriptHeaderItem.forReference(Bootstrap.plain()));
>>>> 
>>>>       return dependencies;
>>>>   }
>>>> 
>>>> here's a short introduction to wicket resource management:
>>>> 
>>>> http://wicketinaction.com/2012/07/wicket-6-resource-management/
>>>> 
>>>> best,
>>>> Michael
>>>> 
>>>> 
>>>> Am 17.03.2013 um 07:09 schrieb Sylvain Vieujot <sv...@gmail.com>:
>>>> 
>>>>> My application is using a resourceBundle to concatenate CSS resources
>>>>> via : getResourceBundles().addCssBundle( ... ).
>>>>> 
>>>>> My base wicket page, from which all others pages inherit starts
>>>>> including the Bootstrap CSS, and then my other CSS :
>>>>> 
>>>>> public void renderHead(IHeaderResponse response) {
>>>>>      super.renderHead( response );
>>>>>      Bootstrap.renderHeadResponsive( response );
>>>>> 
>>>>> response.render( CssHeaderItem.forReference( BaseCssResourceReference.get() ) );
>>>>>  ...
>>>>> }
>>>>> 
>>>>> However, on some pages the Bootstrap CSS is included first, like on this
>>>>> page : http://dubai.windcam.com/winds/gallery
>>>>> Whilst on others, the mainCSSBundle is included first, like here :
>>>>> http://dubai.windcam.com/winds/windDailyChart 
>>>>> or here : http://dubai.windcam.com/winds/
>>>>> And this breaks the CSS that overloads Bootstrap defaults.
>>>>> 
>>>>> What could be the cause of this ?
>>>>> 
>>>>> I thought that calling calling Bootstrap.renderHeadResponsive( response
>>>>> ) first would ensure this order.
>>>>> Is there an other way to fix this order ?
>>>>> 
>>>>> Thank you,
>>>>> 
>>>>> Sylvain.
>>>> 
>>>> 
>>>> ---------------------------------------------------------------------
>>>> 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
>> 


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


Re: CSS bundles order does not seem stable when using an application

Posted by Sylvain Vieujot <sv...@gmail.com>.
Add the bootstrap css resource reference to the bundle would solve the
problem if it were possible.
Indeed the bootstrap css include references to images whose path is
relative to the bootstrap classpath. So adding bootstrap css to a bundle
whose path is not the same as bootstrap will break the bootstrap images.

On Sun, 2013-03-17 at 22:45 +0100, Michael Haitz wrote:

> does adding the bootstrap css resource reference to the bundle solve your problem? 
> 
> sorry, i don't have access to the code at the moment.
> 
> Am 17.03.2013 um 21:46 schrieb "Sylvain Vieujot" <sv...@gmail.com>:
> 
> > Unfortunately, this does not solve the issue.
> > It seems that if the page has a <wicket:head> tag, the order is
> > disturbed.
> > This was not the case when my application was not using
> > getResourceBundles().addCssBundle in the Application.init.
> > 
> > On Sun, 2013-03-17 at 16:26 +0100, Michael Haitz wrote:
> > 
> >> you can add a dependency to the bootstrap resource reference in your own BaseCssResourceReference:
> >> 
> >>    @Override
> >>    public Iterable<? extends HeaderItem> getDependencies() {
> >>        List<HeaderItem> dependencies = new ArrayList<HeaderItem>();
> >>        dependencies.add(JavaScriptHeaderItem.forReference(Bootstrap.plain()));
> >> 
> >>        return dependencies;
> >>    }
> >> 
> >> here's a short introduction to wicket resource management:
> >> 
> >> http://wicketinaction.com/2012/07/wicket-6-resource-management/
> >> 
> >> best,
> >> Michael
> >> 
> >> 
> >> Am 17.03.2013 um 07:09 schrieb Sylvain Vieujot <sv...@gmail.com>:
> >> 
> >>> My application is using a resourceBundle to concatenate CSS resources
> >>> via : getResourceBundles().addCssBundle( ... ).
> >>> 
> >>> My base wicket page, from which all others pages inherit starts
> >>> including the Bootstrap CSS, and then my other CSS :
> >>> 
> >>> public void renderHead(IHeaderResponse response) {
> >>>       super.renderHead( response );
> >>>       Bootstrap.renderHeadResponsive( response );
> >>> 
> >>> response.render( CssHeaderItem.forReference( BaseCssResourceReference.get() ) );
> >>>   ...
> >>> }
> >>> 
> >>> However, on some pages the Bootstrap CSS is included first, like on this
> >>> page : http://dubai.windcam.com/winds/gallery
> >>> Whilst on others, the mainCSSBundle is included first, like here :
> >>> http://dubai.windcam.com/winds/windDailyChart 
> >>> or here : http://dubai.windcam.com/winds/
> >>> And this breaks the CSS that overloads Bootstrap defaults.
> >>> 
> >>> What could be the cause of this ?
> >>> 
> >>> I thought that calling calling Bootstrap.renderHeadResponsive( response
> >>> ) first would ensure this order.
> >>> Is there an other way to fix this order ?
> >>> 
> >>> Thank you,
> >>> 
> >>> Sylvain.
> >> 
> >> 
> >> ---------------------------------------------------------------------
> >> 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
> 

Re: CSS bundles order does not seem stable when using an application

Posted by Michael Haitz <mi...@1und1.de>.
does adding the bootstrap css resource reference to the bundle solve your problem? 

sorry, i don't have access to the code at the moment.

Am 17.03.2013 um 21:46 schrieb "Sylvain Vieujot" <sv...@gmail.com>:

> Unfortunately, this does not solve the issue.
> It seems that if the page has a <wicket:head> tag, the order is
> disturbed.
> This was not the case when my application was not using
> getResourceBundles().addCssBundle in the Application.init.
> 
> On Sun, 2013-03-17 at 16:26 +0100, Michael Haitz wrote:
> 
>> you can add a dependency to the bootstrap resource reference in your own BaseCssResourceReference:
>> 
>>    @Override
>>    public Iterable<? extends HeaderItem> getDependencies() {
>>        List<HeaderItem> dependencies = new ArrayList<HeaderItem>();
>>        dependencies.add(JavaScriptHeaderItem.forReference(Bootstrap.plain()));
>> 
>>        return dependencies;
>>    }
>> 
>> here's a short introduction to wicket resource management:
>> 
>> http://wicketinaction.com/2012/07/wicket-6-resource-management/
>> 
>> best,
>> Michael
>> 
>> 
>> Am 17.03.2013 um 07:09 schrieb Sylvain Vieujot <sv...@gmail.com>:
>> 
>>> My application is using a resourceBundle to concatenate CSS resources
>>> via : getResourceBundles().addCssBundle( ... ).
>>> 
>>> My base wicket page, from which all others pages inherit starts
>>> including the Bootstrap CSS, and then my other CSS :
>>> 
>>> public void renderHead(IHeaderResponse response) {
>>>       super.renderHead( response );
>>>       Bootstrap.renderHeadResponsive( response );
>>> 
>>> response.render( CssHeaderItem.forReference( BaseCssResourceReference.get() ) );
>>>   ...
>>> }
>>> 
>>> However, on some pages the Bootstrap CSS is included first, like on this
>>> page : http://dubai.windcam.com/winds/gallery
>>> Whilst on others, the mainCSSBundle is included first, like here :
>>> http://dubai.windcam.com/winds/windDailyChart 
>>> or here : http://dubai.windcam.com/winds/
>>> And this breaks the CSS that overloads Bootstrap defaults.
>>> 
>>> What could be the cause of this ?
>>> 
>>> I thought that calling calling Bootstrap.renderHeadResponsive( response
>>> ) first would ensure this order.
>>> Is there an other way to fix this order ?
>>> 
>>> Thank you,
>>> 
>>> Sylvain.
>> 
>> 
>> ---------------------------------------------------------------------
>> 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


Re: CSS bundles order does not seem stable when using an application

Posted by Sylvain Vieujot <sv...@gmail.com>.
Unfortunately, this does not solve the issue.
It seems that if the page has a <wicket:head> tag, the order is
disturbed.
This was not the case when my application was not using
getResourceBundles().addCssBundle in the Application.init.

On Sun, 2013-03-17 at 16:26 +0100, Michael Haitz wrote:

> you can add a dependency to the bootstrap resource reference in your own BaseCssResourceReference:
> 
>     @Override
>     public Iterable<? extends HeaderItem> getDependencies() {
>         List<HeaderItem> dependencies = new ArrayList<HeaderItem>();
>         dependencies.add(JavaScriptHeaderItem.forReference(Bootstrap.plain()));
>         
>         return dependencies;
>     }
> 
> here's a short introduction to wicket resource management:
> 
> http://wicketinaction.com/2012/07/wicket-6-resource-management/
> 
> best,
> Michael
> 
> 
> Am 17.03.2013 um 07:09 schrieb Sylvain Vieujot <sv...@gmail.com>:
> 
> > My application is using a resourceBundle to concatenate CSS resources
> > via : getResourceBundles().addCssBundle( ... ).
> > 
> > My base wicket page, from which all others pages inherit starts
> > including the Bootstrap CSS, and then my other CSS :
> > 
> > public void renderHead(IHeaderResponse response) {
> >        super.renderHead( response );
> >        Bootstrap.renderHeadResponsive( response );
> > 
> > response.render( CssHeaderItem.forReference( BaseCssResourceReference.get() ) );
> >    ...
> > }
> > 
> > However, on some pages the Bootstrap CSS is included first, like on this
> > page : http://dubai.windcam.com/winds/gallery
> > Whilst on others, the mainCSSBundle is included first, like here :
> > http://dubai.windcam.com/winds/windDailyChart 
> > or here : http://dubai.windcam.com/winds/
> > And this breaks the CSS that overloads Bootstrap defaults.
> > 
> > What could be the cause of this ?
> > 
> > I thought that calling calling Bootstrap.renderHeadResponsive( response
> > ) first would ensure this order.
> > Is there an other way to fix this order ?
> > 
> > Thank you,
> > 
> > Sylvain.
> 
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
> 

Re: CSS bundles order does not seem stable when using an application

Posted by Michael Haitz <mi...@1und1.de>.
you can add a dependency to the bootstrap resource reference in your own BaseCssResourceReference:

    @Override
    public Iterable<? extends HeaderItem> getDependencies() {
        List<HeaderItem> dependencies = new ArrayList<HeaderItem>();
        dependencies.add(JavaScriptHeaderItem.forReference(Bootstrap.plain()));
        
        return dependencies;
    }

here's a short introduction to wicket resource management:

http://wicketinaction.com/2012/07/wicket-6-resource-management/

best,
Michael


Am 17.03.2013 um 07:09 schrieb Sylvain Vieujot <sv...@gmail.com>:

> My application is using a resourceBundle to concatenate CSS resources
> via : getResourceBundles().addCssBundle( ... ).
> 
> My base wicket page, from which all others pages inherit starts
> including the Bootstrap CSS, and then my other CSS :
> 
> public void renderHead(IHeaderResponse response) {
>        super.renderHead( response );
>        Bootstrap.renderHeadResponsive( response );
> 
> response.render( CssHeaderItem.forReference( BaseCssResourceReference.get() ) );
>    ...
> }
> 
> However, on some pages the Bootstrap CSS is included first, like on this
> page : http://dubai.windcam.com/winds/gallery
> Whilst on others, the mainCSSBundle is included first, like here :
> http://dubai.windcam.com/winds/windDailyChart 
> or here : http://dubai.windcam.com/winds/
> And this breaks the CSS that overloads Bootstrap defaults.
> 
> What could be the cause of this ?
> 
> I thought that calling calling Bootstrap.renderHeadResponsive( response
> ) first would ensure this order.
> Is there an other way to fix this order ?
> 
> Thank you,
> 
> Sylvain.


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