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».