Integrating wro4j with Apache Roller

[Matt Raible]

This morning, I tried to integration wro4j into Roller to concat the
CSS and JS used in Apache Roller and my site at http://raibledesigns.com.
Here's my wro.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">

<group name="roller-css">
<css>/themes/base.css</css>
<css>/themes/andreas08/theme.css</css>
<css>/themes/andreas08/styles/lightbox.css</css>
<css>/themes/andreas08/scripts/syntaxhighlighter-2/styles/
shCore.css</css>
<css>/themes/andreas08/scripts/syntaxhighlighter-2/styles/
shThemeDefault.css</css>
</group>

<group name="roller-js">
<js>/themes/andreas08/scripts/prototype.js</js>
<js>/themes/andreas08/scripts/scriptaculous.js?load=effects</js>
<js>/themes/andreas08/scripts/lightbox.js</js>
<js>/themes/andreas08/scripts/syntaxhighlighter-2/scripts/
shCore.js</js>
<js>/themes/andreas08/scripts/syntaxhighlighter-2/scripts/
shBrushJava.js</js>
<js>/themes/andreas08/scripts/syntaxhighlighter-2/scripts/
shBrushScala.js</js>
<js>/themes/andreas08/scripts/syntaxhighlighter-2/scripts/
shBrushXml.js</js>
</group>

<group name="external-js">
<js>http://www.linkedin.com/js/public-profile/widget-os.js</js>
<js>http://twitter.com/javascripts/blogger.js</js>
<js>http://www.google-analytics.com/urchin.js</js>
</group>

</groups>

Unfortunately, I found that replacing the CSS and JS links and scripts
with references to /wro/* didn't work. Some JS worked (syntax
highlighter), but none of the CSS worked. Any ideas? Is this because
there might be conflicts between libraries when combined?

Here's the references to the CSS and JS when combined:

http://raibledesigns.com/wro/roller-css.css
http://raibledesigns.com/wro/roller-js.js

Thanks,

Matt

[Alex Objelean]

The problem is that your css contains @import statements.... Can you
try to add them to the group as well?


Alex Objelean

On 6 nov., 18:42, Matt Raible <m...@raibledesigns.com> wrote:
> This morning, I tried to integration wro4j into Roller to concat the

> CSS and JS used in Apache Roller and my site athttp://raibledesigns.com.

[Paul]

on the CSS front. I believe that @import are supposed to be at the
top of a CSS file, currently your andreas08/theme.css is just a bunch
of additional imports and they are being put in the middle of the
file.

also, it appears that the imports are going to a relative path one
level back ../themes/ instead of /themes/andreas08/

this may be why you are having CSS issues.

you may want to try changing the configuration line
<css>/themes/andreas08/theme.css</css>
to

<css>/themes/andreas08/styles/tools.css</css>
<css>/themes/andreas08/styles/typo.css</css>
<css>/themes/andreas08/styles/forms.css</css>
<css>/themes/andreas08/styles/layout-navtop-subright.css</css>
<css>/themes/andreas08/styles/layout.css</css>
<css>/themes/andreas08/styles/andreas08.css</css>

On Nov 6, 9:42 am, Matt Raible <m...@raibledesigns.com> wrote:
> This morning, I tried to integration wro4j into Roller to concat the

> CSS and JS used in Apache Roller and my site athttp://raibledesigns.com.

[Alex Objelean]

This problem is a known issue... There is no way to make @import work
in a merged css resource: http://code.google.com/p/wro4j/wiki/KnownIssues

On 6 nov., 18:42, Matt Raible <m...@raibledesigns.com> wrote:

> This morning, I tried to integration wro4j into Roller to concat the

> CSS and JS used in Apache Roller and my site athttp://raibledesigns.com.

[Matt Raible]

Thanks. I'll try changing things later this afternoon.

Cheers,

Matt

[Matt Raible]

On Fri, Nov 6, 2009 at 10:40 AM, Paul <pa...@lofte.net> wrote:
>
> on the CSS front.  I believe that @import are supposed to be at the
> top of a CSS file, currently your andreas08/theme.css is just a bunch
> of additional imports and they are being put in the middle of the
> file.
>
> also, it appears that the imports are going to a relative path one
> level back ../themes/ instead of /themes/andreas08/
>
> this may be why you are having CSS issues.
>
> you may want to try changing the configuration line
> <css>/themes/andreas08/theme.css</css>
> to
>
> <css>/themes/andreas08/styles/tools.css</css>
> <css>/themes/andreas08/styles/typo.css</css>
> <css>/themes/andreas08/styles/forms.css</css>
> <css>/themes/andreas08/styles/layout-navtop-subright.css</css>
> <css>/themes/andreas08/styles/layout.css</css>
> <css>/themes/andreas08/styles/andreas08.css</css>

This fixed my CSS issues and I'm successfully combing 9 css files into
1 now - thanks!

Unfortunately, I'm still having issues with JS. I was able to reduce
the # of JS files from 11 to 8, but wasn't able to get a couple things
working - notably Twitter and Prototype, Scriptaculous and Lightbox.

So this works:

<script type="text/javascript"
src="/themes/andreas08/scripts/prototype.js"></script>
<script type="text/javascript"
src="/themes/andreas08/scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript"
src="/themes/andreas08/scripts/lightbox.js"></script>

But this doesn't:

http://raibledesigns.com/wro/lightbox.js

The group definition is:

<group name="lightbox">

<js>/themes/andreas08/scripts/prototype.js</js>
<js>/themes/andreas08/scripts/scriptaculous.js?load=effects</js>
<js>/themes/andreas08/scripts/lightbox.js</js>

</group>

Also, this works for Twitter:

<script type="text/javascript"
src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/mraible.json?callback=twitterCallback2&count=3"></script>

But if I combine them in a group and try to use:

http://raibledesigns.com/wro/lightbox.js

It doesn't display the @username of anyone I reply to. It displays the
status messages, but displays "undefined" for the person I replied to.

Any advice on solving these issues would be great.

Other than that, I'm very pleased to have my YSlow rating go from F to C. ;-)

Cheers,

Matt

[Alex Objelean]

For the lightbox issue, if it doesn't work... do you see any js errors
in console which could help to identify the problem?
Do you have a test machine which integrates wro4j and where I could be
able to test? I do not have enough hints to fix this.

PS: the resources combined in groups are cached on the server-side. If
you have any js resources which are served dynamically depending on
some params, then it is not a good idea to serve them with wro4j..
because you will get the same result each time.

Alex Objelean

On 7 nov., 05:28, Matt Raible <m...@raibledesigns.com> wrote:

> src="http://twitter.com/statuses/user_timeline/mraible.json?callback=twitt..."></script>

> >>http://raibledesigns.com/wro/roller-css.csshttp://raibledesigns.com/w...
>
> >> Thanks,
>
> >> Matt

[Matt Raible]

I don't have a test machine, buy you could try developing a small web page that has a lightbox enabled image and point it at my JS (3 individuals one and the wro combined one). All you need to do is <a href="large image URL" rel="lightbox"><img src="thumbnail URL"/></a>.

Another thought I had is the lightbox/prototype/scriptaculous libraries I have are a couple years old and it might make sense to upgrade.

Matt

[Alex Objelean]

It seems that you've forgot to include effect.js library. It should be
a part of the group or at least included before the group as a
separate js resource.

Hope this helps!

Alex Objelean

On 7 nov., 17:33, Matt Raible <m...@raibledesigns.com> wrote:
> I don't have a test machine, buy you could try developing a small web page
> that has a lightbox enabled image and point it at my JS (3 individuals one
> and the wro combined one). All you need to do is <a href="large image URL"
> rel="lightbox"><img src="thumbnail URL"/></a>.
>
> Another thought I had is the lightbox/prototype/scriptaculous libraries I
> have are a couple years old and it might make sense to upgrade.
>
> Matt
>

[Alex Objelean]

With other words, instead of:
<script type="text/javascript" src="/themes/andreas08/scripts/
scriptaculous.js?load=effects"></script>

You should have:
<script type="text/javascript" src="/themes/andreas08/scripts/
scriptaculous.js"></script>
<script type="text/javascript" src="http://raibledesigns.com/themes/
andreas08/scripts/effects.js"></script>

I'm not quite sure why the effects resource is not included when it is
a part of the group.... This is something I'll investigate later.. but
my feeling is that there is nothing wro4j can do... it is about
prototype..

Alex Objelean

On 7 nov., 17:33, Matt Raible <m...@raibledesigns.com> wrote:

> I don't have a test machine, buy you could try developing a small web page
> that has a lightbox enabled image and point it at my JS (3 individuals one
> and the wro combined one). All you need to do is <a href="large image URL"
> rel="lightbox"><img src="thumbnail URL"/></a>.
>
> Another thought I had is the lightbox/prototype/scriptaculous libraries I
> have are a couple years old and it might make sense to upgrade.
>
> Matt
>

[Matt Raible]

That worked - thanks!

One issue I've seen that you might want to fix is the XML and XSD is outputted to the console when the application first starts.

Other than that, I've very happy with this library - well done! A couple awesome enhancements:

1. Add a Filter to set expires headers:

http://juliusdev.blogspot.com/2008/06/tomcat-add-expires-header.html

It'd be great to have it as part of the existing filter, but might make sense to have it separate since it'd be nice for images too.

2. Add the ability to minify and cache JS and CSS on-the-fly.

Cheers,

Matt

[Alex Objelean]

Hi Matt!
Glad to hear that it worked for you!

1. Set expires header is already in the trunk. It will be available in
the next release.
2. The js is already minified on the fly. It is easy to plug other
minification strategy for css or js by implementing a post processor.
I'll add a more detailed description on the page later.

Thanks for suggestions!

Alex Objelean

On Nov 7, 9:33 pm, Matt Raible <m...@raibledesigns.com> wrote:
> That worked - thanks!
>
> One issue I've seen that you might want to fix is the XML and XSD is
> outputted to the console when the application first starts.
>
> Other than that, I've very happy with this library - well done! A couple
> awesome enhancements:
>
> 1. Add a Filter to set expires headers:
>
> http://juliusdev.blogspot.com/2008/06/tomcat-add-expires-header.html
>
> It'd be great to have it as part of the existing filter, but might make
> sense to have it separate since it'd be nice for images too.
>
> 2. Add the ability to minify and cache JS and CSS on-the-fly.
>
> Cheers,
>
> Matt
>

> On Sat, Nov 7, 2009 at 8:57 AM, Alex Objelean <alex.objel...@gmail.com>wrote:
>
>
>
>
>
> > With other words, instead of:
> > <script type="text/javascript" src="/themes/andreas08/scripts/
> > scriptaculous.js?load=effects"></script>
>
> > You should have:
> > <script type="text/javascript" src="/themes/andreas08/scripts/
> > scriptaculous.js"></script>
> > <script type="text/javascript" src="http://raibledesigns.com/themes/

> > andreas08/scripts/effects.js<http://raibledesigns.com/themes/%0Aandreas08/scripts/effects.js>

[pradip...@gmail.com]

i am working on apache roller project

i am working on eclispe ide

database-mysql

roller-5.0.0-tomcat

i have a problem in build the project.the problem in lang folder which is situated in roller-ui folder.

can body can help me out with it.

[Matt Raible]

I would suggest you post this to the Roller user mailing list rather than wro4j.

https://cwiki.apache.org/confluence/display/ROLLER/Roller+Mailing+Lists