I'm using the Resources plugin in Grails 2.0.1. The issue I'm having is getting a JavaScript resource specified using r:external to be placed after all of the other script previously declared using either r:require or r:external, all in the deferred disposition. Currently the resource specified using r:external it is being output in the location where the r:external tag is placed.
I have a layout file that contains an r:require tag to fetch some core resources:
<html>
<head>
...
<r:require module="core" />
</head>
....
</html>
Then a GSP that includes another r:require tag followed by an r:external tag:
<head>
...
<r:require module="forms" />
<r:external dir="js" file="page-specific-resource.js" /> %{-- specifying disposition="defer" has no effect --}%
....
</head>
...
My expectation is each of the JavaScript resources I'm trying to include would be output in the deferred disposition with the core resources first, the forms resources next, and the page-specific resource last. The actual results are that the core and forms resources are output as expected in the deferred disposition, but the page-specific resource is output in head, where the r:external tag is placed (Specifying disposition="defer" seems to have no effect).
Is my expectation incorrect or is this a legitimate issue? Is there another way to specify page-specific resources (I'm trying avoid declaring these types of resources in the resource DSL) and have the positioned after all previously declared resources?
As answered by Marc Palmer on the Grails User mailing list (http://grails.1312388.n4.nabble.com/Placement-Of-JS-Resource-Via-lt-r-external-gt-td4506074.html#none):
I'm afraid your expectation is incorrect.
r:external is just for rendering links where you invoke it.
You need to declare your dependencies, or put your r:external at the
end of the page.
Declaring modules for "functional areas" of your app is profitable. It
means you can also bundle them together if need be, or have fine
grained control and the page no longer needs to be aware of that.
Related
I'm loading achild *.xhtml file in my jsf page with ui:include. When I load this
<html>
<head/>
<body>
Testing
</body>
</html>
I get this error
One or more resources have the target of 'head', but no 'head' component has been defined within the view.
However - when I modify it to this:
<html>
<!-- <head/> -->
<body>
Testing
</body>
</html>
The error goes away. (The child *.xhtml file comes from a static content team so it can't have jsf directives in it).
What is the root cause? How can this be avoided?
Versions:
Mojarra 2.0
Java 7.0
Tomcat 7.0
Windows 7.0
It's talking about the <h:head>. Do the same for the body, which should be <h:body>.
By the way, the generated HTML output must be syntactically valid. You usually don't put <html> in an include file, but only in the parent file or the master template.
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
When to use <ui:include>, tag files, composite components and/or custom components?
What's the difference between <h:head> and <head> in Java Facelets?
How to programmatically add JS and CSS resources to <h:head>?
I have a grails resource module set up:
modules {
myModule {
resources url:'js/application.js'
resources url:'js/helper.js'
}
}
And I can load this onto my GSP page using <r:require ... />.
Problem:
I want some JS code to fire when this script has loaded. Is there anyway to do this?
Even if I could do it via JS (script.onLoad) that would be ok, I'm just not sure how to generate a link to the module using grails.
You can include your module in your GSP page as:
<r:require modules="myModule" />
and you can fire any java script function in you js files on page load.
in case your module will not get loaded on the GSP, try adding disposition, i.e.
modules {
myModule {
resources url:'js/application.js', disposition: 'head'
resources url:'js/helper.js', disposition: 'head'
}
}
I think better way to include your resources on the view pages, is through layout, I used to do it like, adding all the resources on the layout page, ex. layout->main.gsp
add all the required resources on this page as:
<r:require
modules="myModule" />
<g:layoutHead />
<r:layoutResources />
then on all the GSP pages in the application you can apply this layout, i.e.
<g:applyLayout name="main"/>
and to call any java script code(on the included js files) on script load, I think you should associate it with the onload event on the gsp page.
in my grails app, I'm using the awesome resource plugin which wires all the dependencies. When I'm doing the ajax calls I always use <r:layoutResources disposition="defer"/> in order to render all scripts <r:script>... and other dependencies property.
The problem is if I use <r:require module="myModule"/> and the module specify a JS file which was not loaded before (when the page was not loaded). After the AJAX call the JS file is not loaded, what is more or less expected because all JS file should be loaded when the page is rendered.
My question is how to solve it properly? Should I put my r:require to the gsp which is rendered during the first request? Or are there any plans to make the r:require deal with "external" JS files when AJAX?
Thanks,
Mateo
Create a layout ajaxInternal.gsp and put in something like:
<r:require module="gaScript" />
<r:layoutResources />
<g:layoutBody />
<r:layoutResources disposition="defer" />
And in your ajax action of controller render this:
render(template:"aTemplateIfRequired", model:[yourModel],layout:'ajaxInternalContentBox')
So all your js will work properly and all your modules also.
In my JSF webApp I have put all of my resources (js, css, img) into a versioned library as pointed out by BalusC in this answer.
Now my favicon also resided here:
resources --> default --> 1_1 --> img --> favicon.ico
According to this answer the way to add the favicon would be:
<link rel="shortcut icon"
type="image/x-icon" href="#{request.contextPath}/resources/default/1_1/img/favicon.ico"/>
But this way the resource handling that automatically picks files from the highest version folder (e.g. 1_1) is ignored and I would have to change this manually every time.
So is there another way to include the favicon or should the favicon be placed elsewhere (out of the versioned library)?
Use implicit EL #{resource} handler to let JSF convert a resource identifier to proper URL.
<link ... href="#{resource['default:img/favicon.ico']}" />
Note that this is also the way you're supposed to use to reference background images in CSS files.
I have a test grails app setup with a context of "/testapp". When I add a link in my gsp that references / it does not go to the root of my grails.app.context, but to the root of my grails.serverURL property.
For example given a link with href "/css/main.css"
I would expect that this link would actually look in localhost:8080/testapp/css/main.css instead of localhost:8080/css/main.css
Is there a way that I can get references to / to start at my grails.app.context vs the grails.serverURL?
use the request contextPath value on the page
${request.contextPath}
and then prepend the additional host information if necessary to construct the complete url
the question is how do you add your links into your gsps?
We do things like
<link rel="stylesheet" href="${resource(dir: 'css', file: 'stylesheet1.css')}"/>
and
<g:javascript library="prototype"/>
by using the g:javascript and resource tags and methods, you tell grails to set the path for you...
I suspect you are just putting standard tags in...
goto
http://grails.org/doc/latest/
and, under tags in the left hand nav, look for resource and/or javascript to get an idea (its difficult to link directly in to the docs...:()
I had a similar issue to OP - how to have grails form links that start at the context root and NOT server root?
You can do so using the "uri" attribute for g:link and g:createLink tags. For example:
<g:link uri="/login">login</g:link>
will prefix any context if applicable, and produce the following
login if your app is at the http://server/
login if your app is at http://server/testapp/
Not sure why it's an undocumented attribute in the reference docs, but I found it in the Javadocs - ApplicationTagLib
You should probably be using the resource tag into your grails CSS directory, like mentioned above. However, you can also use the resource method to find the root context of you web application using the same tag:
${resource(uri:'/')}
then just use that string wherever.
And when it comes to elements like stylesheets I'd recommend creating a simple tag that'll do the trick, something along those lines:
class StylesTagLib {
static namespace = "g"
def stylesheet = { args, body ->
out << """<link rel="stylesheet" href="${resource(dir: 'css', file: args.href)}"/>"""
}
}
and later on in your code use it like this:
<g:stylesheet href="main.css"/>
Obviously you can fiddle with the conventions (should I use a predefined folder? should I add the .css extension automatically? stuff like that) but the general idea is to hide the ugliness behind a nicely defined tag.