Muchas veces he necesitado añadir un script Javascript a una vista en concreto mientras desarrollaba un componente para, por ejemplo,mostrar un mapa de Google maps. También he necesitado añadir un estilo específico para dar estilo a mi componente, pero solo a esa vista sin que se cargue el script de google maps en todo el sitio, ya que esto lo ralentizaría.
En un principio lo solucionaba haciendo un arreglo en la estructura de ficheros de Joomla! y poniendo un include en el template.
Esto me sirvió, pero es poco mantenible y poco portable, ya que si me levo el componente a otro sitio tendría que añadir el script necesario al template para que funcionara correctamente. Así que me puse a leer la documentación oficial, y en la descripción de clases encontré el método addStyle y el método addScript del objeto JDocument, los cuales me permiten agregar estilos css y scripts de javascript solo a una vista en concreto.
La forma de uso es la siguiente:
En nuestra fichero view.html.php agregamos el siguiente codigo:
class componenteViewcontacto extends JView { function display($tpl = null) { $document = JFactory::getDocument(); $document->addScript(JURI::base() . 'componentes/com_componente/fichero.js'); $document->addStyleSheet(JURI::base() . 'componentes/com_componente/fichero.css'); $script = ' var variable = "holaaaaaaaa";'; $estilo = "body{color:green;}"; $document-> addScriptDeclaration ($script); $document->addStyleDeclaration($estilo); parent::display($tpl); } }
Primero obtenemos el objeto JDocument, y después usamos los métodos addStyleSheet o addScript si lo qeu queremos es hacer un link del estilo/script o el método addScriptDeclaration o addStyleDeclaration pasándole como parámetro un string que contendrá el código css o javascript que queramos que se incluya directamente en la cabecera.
Lo ideal es empaquetar los ficheros css y js en el componente y hacer un link a la URL del fichero dentro del componente, de esta forma lo podremos instalar en cualquier Joomla! sin tener que modificar el template.
Si ahora cargas la vista en el navegador e inspeccionas el código fuente podras comprobar que se han añadido los css y js correctamente.
Es muy simple y útil y nos permitirá incluir css y javascript independiente en cada vista sin hacer “chapuzas”.
Me llamo David Noguera, tengo 23 años y soy Desarrollador/Administrador web.
Puedes encontrar algo más de información en la página
25 de octubre del 2008 a las 12:44 pm
Gracias por el comentario y enhorabuena por la web.
4 de diciembre del 2008 a las 5:49 pm
Se podria hacer en un modulo??
Gracias
10 de febrero del 2009 a las 3:07 am
Muchas gracias por el dato, yo estoy ahora haciendo una pagina basada en Joomla y estoy pasando a componentes las paginas html que mostraba con enlaces internos; estaba intentando incluir los estilos y los archivos .js con lineas del estilo de: <link rel=”stylesheet” href= type=”text/css” />. En el archivo default.php de la plantilla; tu sugerencia funciona pero yo he hecho lo mismo pero a traves de la api de Joomla con dos lineas como estas:
JHTML::stylesheet(‘estilo.css’,'components/com_cursos/css/’);
JHTML::script(‘acordeon.js’,'components/com_cursos/js/’,true);
El parametro ‘true’ de la segunda linea es para activar la libreria mootools.
16 de marzo del 2009 a las 9:35 pm
hola soy primeriso en esto del joomla en cual de los tres css debo de agregar el codigo q nos dejas y esto funciona para 1.5??
Saludos
12 de junio del 2009 a las 11:48 am
Gracias por el dato pero soy de pano novaton y ya busque ese tal view.html.php y no aparece. Alguien podría decirme donde está?
12 de junio del 2009 a las 1:23 pm
Que es lo que pretendes hacer????
El fichero view.html.php esta en la carpeta views del componente..
2 de julio del 2009 a las 12:33 pm
hola david.
tengo una duda. ahí nos demuestra como incluir un archivo js, pero si ese archivo js tiene varias funciones como hago para que busque la función que necesito?
20 de agosto del 2009 a las 11:12 pm
Hola. He probado éste método pero me sale un error Class ‘JView’ not found
Qué tengo que hacer???
He añadido el código en el archivo courses.html.php que en mi caso es donde se monta el código de la página.
Muchas gracias.
21 de agosto del 2009 a las 3:20 pm
Hola carlos, pues no se exactamente que has hecho, pero así por lo pronto, creo que te has equivocado nombrando el fichero de la clase JView, en lugar de courses.html.php, debería ser view.html.php. Ya me cuentas, saludos!!
31 de agosto del 2009 a las 12:19 pm
Si quiero agregar jquery a mi componente para hacer algunos efectos locos ;P, como lo hago??
Muy bueno el blog, estoy desarrollando un componente y me ha servido de mucho!!
Gracias!!
31 de agosto del 2009 a las 4:37 pm
Pues simplemente añade una referencia al framework y listo. Es conveniente que uses la opción noConflict de jQuery para que no de problemas con Mootools, que es el framework que usa Joomla internamente.
Un saludo!!!
31 de agosto del 2009 a las 4:43 pm
Ok, en cuanto me haga un nuevo tiempo libre lo pruebo, muchas gracias por la rapida respuesta!!
Saludos!!
31 de agosto del 2009 a las 7:15 pm
De nada Alejo ;) , un saludo!!
9 de octubre del 2009 a las 12:56 am
Creo q es el unico foro donde he podido encontrar algo del tema del modulo html para joomla 1.5 + javascripts… en toda la red.
TENGO UN PROBLEMA: en un artículo de joomla coloco con {loadposition xxxx} un modulo html 1.5 que lo unico que tiene es esto:
.. es decir una llamada a un html que esta en una carpeta dentro de joomla.
Hasta aqui todo bien. Lo que pasa es que este html utiliza javascript… es decir que tiene lineas en el head del tipo:
….
y lo que pasa es que la pagina ya no funciona (es un carrusel de imagenes) como debiera.
Llevo varios dias intentando por activa y por pasiva arreglarlo y ver porque NO funciona… pero aunque soy programador (no experto en Joomla ni java)… ya no puedo más.
Si alguien pudiera echarme una mano estaria muy agradecido.. tambien puedo decirle la dirección exacta de la página por si quisiera tener más datos…
mi email es jruinie@gmail.com
Gracias a todos.
9 de octubre del 2009 a las 12:58 am
html body
iframe scrolling=”auto” src=”images/coleccion/carrusel.html” frameborder=”0″ height=”470″ width=”700″></iframe
/body /html
9 de octubre del 2009 a las 1:00 am
… y las lineas que se incluyen en el html y que ? no han aparecido en mi primer post son del tipo:
script type=”text/javascript” src=”java/accordion.js” /script
(he quitado los en el mensaje.