Primero, instala el plugin resources. Si tienes instalado Grails 2 ya viene por defecto instalado. Otros plugins muy interesantes para optimizar el rendimiento de tu aplicación serían: zipped-resources, cached-resources, lesscss-resources, gsp-resources, yui-minify-resources, handlebars-resources y page-resources.
Empezaremos declarando los módulos en el fichero "AppResources.groovy" que está en el directorio conf
modules = {
common {
resource url:"css/main.css"
resource url:"js/jquery.js"
}
}
Aquí le estamos diciendo que declare un módulo llamado "common" con dos recursos: main.css y jquery.js en donde por defecto los css los pondrá en el head y el js al final de la GSP (“defer”) que le definamos. Si queremos que los js los ponga en el head de la GSP, le añadiremos a la linea del resource disposition:"head"
Ahora necesitas meterlo dentro de una GSP. Para hacer esto, necesitas las tags propias del Plugin. Antes de nada, definamos el layout Sitemesh de nuestra aplicación.
<html>
<head>
El primer r:layoutResources servirá para lincar todos los css, js, iconos, etc que tengas en tu <head> y el segundo para renderizar algún resource “defer”, que normalmente es sólo código JavaScript.
Para utilizar un módulo de recursos en una GSP:
<html>
<head>
A veces tienes que controlar el orden de tus recursos ya que dependen de otros para cargarse bien. La regla general de este plugin es que se empiecen a cargar los recursos en orden de definición (es decir de arriba a abajo). También se puede hacer de otra manera, con "dependsOn". Por ejemplo,
modules = {
customize{
dependsOn "common"
resource url:'css/customize.css'
}
}
Con esto le estamos diciendo que antes de cargar el módulo customize, debe estar cargado el módulo common.
Otra de las tags que pueden ser útiles es la r:script. Esta tag se utiliza para introducir algo de código JS en la GSP.
<html>
<head>
window.alert('Boo!')
</head>
<body>
…
</body>
</html>
Este alert que hemos definido se cargará con disposition "defer", es decir se cargará cuando se haya cargado toda la página, aunque esté definido en el head.
Si quisiéramos forzar a que este trozo de JS se cargara en el head le tendríamos que modificar la tag con,
<r:script disposition="head" >
Otro tipo de recurso que se puede utilizar en este plugin son las imágenes. Se puede hacer de dos formas: llamándole desde la GSP,
<r:img uri="images/logo.png"/>
o creando un módulo desde AppResources,
modules = {
images {
resource url:'images/logo.png',
attrs:[width:400, height:180, alt:'ACME Corp.'],
disposition: 'image'
}
}
No hay comentarios:
Publicar un comentario