Slots y java script: la combinación perfecta

¿Que es un “slot” en Symfony 1.4?

Un slot es simplemente un recurso de Symfony que permite insertar fragmentos de código HTML o java script, en determinados módulos y plantillas.

El caso más simple (sin uso de JavaScript): los títulos de las páginas

Si tuviéramos un simple archivo HTML por fuera de Symfony, y quisiéramos que la página aparezca en el navegador con un título determinado, por ejemplo “Página principal“, escribiríamos el código del siguiente modo:

<html>
<head>
<title>Página principal</title>
</head>
<body>

..........

</body>
</html>

Para poder aplicar el caso del punto anterior, a una plantilla determinada, en Symfony 1.4 debemos utilizar los “slots”.

En la literatura desarrollada por los creadores de Symfony, se despliega el ejemplo de un slot para insertar el título de cada página, que como ya vimos, debe ir dentro de <head> <title>…….</title></head> Además, se contempla el caso en que  queremos un título específico para ciertas y determinadas páginas y uno general, para las demás páginas. Los pasos son los siguientes:

Procedemos a definir, bajo que sección y usando cuales etiquetas, deseamos que aparezca un slot en el archivo layout.php de la aplicación frontend El código quedaría  como sigue:

// Archivo: apps\frontend\templates\layout.php

<head>
<title>
<?php if (!include_slot('title')): ?>
Portal de Conflictividad de la Provincia de Córdoba
<?php endif; ?>
</title>

<title><?php include_slot('title') ?></title>

Vemos que en las líneas de la 4 a la 8, le decimos a Symfony que, si no existe un título definido a través de un slot llamado ‘title‘ directamente use como título por defecto: Portal de Conflictividad de la Provincia de Córdoba

Luego, en la línea 10, queda definido el lugar donde irá el slot para los títulos, llamado ‘title‘ Vemos que el contenido del slot queda encerrado entre los tags <title> </title> .

En la página donde quiero que aparezca un título específico, por ejemplo el título “Listado de Conflictos” en  indexSuccess.php escribo lo siguiente:

// Archivo: apps\frontend\modules\conflictos\templates\indexSuccess.php

<?php slot('title') ?>
<?php echo ('Listado de Conflictos') ?>
<?php end_slot(); ?>

Automáticamente, Symfony sabe que este slot debe ir en el encabezado de la página dentro de las etiquetas <title> </title> porque así lo dejamos definido en layout.php

¿Cómo insertar código java script en plantillas de Symfony 1.4?

La mayoría de los desarrollos en javascript,  constan por un lado de un archivo de extensión js  que contiene las funciones para un uso determinado, que generalmente se guarda en la carpeta web/js Luego debe hacerse el llamado a las funciones, desde una página o plantilla determinada. ¿Cómo insertar este llamado a la función si las plantillas de Symfony 1.4, no tienen una sección <head> </head> ?

En el mismo template indexSuccess.php necesitaba usar una función de javascript que me permitiera ordenar una tabla por una columna determinada, haciendo clic sobre el encabezado de dicha columna. Para ello, necesitaba usar en el template (pero solo en este template) una función incorporada en el archivo jquery.tablesorter.js

Copiamos el archivo que contiene las funciones de java script, en web/js de nuestra aplicación. Como requiere del uso de jQuery, debo también incorporar el archivo de esta aplicación.
Cargamos el archivo desde view.yml

// Archivo: apps\frontend\modules\config\view.yml
stylesheets:    [jquery-ui-1.8.16.custom.css]
javascripts:    jquery-ui-1.9.2.custom.min.js, jquery.tablesorter.js]

Incluímos la siguiente línea, dentro del head en el archivo layout.php :

<?php include_slot('ordenar_tabla') ?>

Finalmente, en el template indexSuccess.php escribimos el llamado a la función, mediante el slot ‘ordenar_tabla‘ Cuando Symfony encuentre este slot definido en indexSuccess.php  sabe que lo debe incorporar al <head> de la página, porque así lo especificamos en el archivo layout.php :

// Archivo: apps\frontend\modules\conflictos\templates\indexSuccess.php

<?php slot('ordenar_tabla') ?>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter({widgets: ['zebra']});
}
);
</script>
<?php end_slot(); ?>

3 comentarios en “Slots y java script: la combinación perfecta

  1. Hello there! Quick question that’s totally off topic.

    Do you know how to make your site mobile friendly?
    My weblog looks weird when viewing from my iphone.

    I’m trying to find a theme or plugin that might be
    able to resolve this problem. If you have any recommendations, please share.
    Appreciate it!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s