Posts Tagged ‘plantillas’

junio 6, 2010 15

Tutorial de CKEditor. Parte IV.

By in JavaScript, Librerías

Entre las funcionalidades de CKEditor se encuentra una muy interesante, la posibilidad de usar plantillas en el editor. Además es bastante fácil de implementar.  Vamos a ver como configurar nuestro CKEditor para que nos permita mostrar plantillas:

<html>
  <head>
    <title>ckeditor test</title>
    <script src="ckeditor/ckeditor.js"></script>
    <script src="editor.js"></script>
  </head>
  <body>
    <textarea id="editor"></textarea>
  </body>
</html>

Esta es nuestra página con el editor. Hemos añadido el script de ckeditor y otro más llamado editor.js. En ese archivo está el código siguiente:

window.onload = function() {
  CKEDITOR.replace( 'editor',
  {
    toolbar : 'Full',
    templates_files : [ './templates.js' ]
  });
}

Hemos añadido una barra completa para que aparezca el botón de plantilla aunque, esto no es estrictamente necesario, bastaba con añadir el botón Templates a la barra de herramientas, como vimos en la segunda parte del tutorial. Vemos que hay una nueva propiedad (templates_files). Esta propiedad es un array en el que indicaremos los nombres de los ficheros donde definimos las plantillas. En este caso solo un archivo, llamado templates.js.

El archivo templates.js tendrá el siguiente código:

// Registramos las plantillas
CKEDITOR.addTemplates( 'default',
{
  // La ruta donde están las imágenes de las plantillas
  imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

  // Definición de las plantillas
  templates :
  [
    {
      title: 'Plantilla 1',
      image: 'template1.gif',
      description: 'Descripci&oacute;n de la plantilla 1.',
      html:
        '<h2>Pantilla 1</h2>' +
        '<p>Inserte el texto aqu&iacute;.</p>'
    },
    {
      title: 'Plantilla 2',
      html:
      '<h3>Plantilla 2</h3>' +
      '<p>Inserte el texto aqu&iacute;.</p>'
    }
  ]
});

Ahora vamos a la parte interesante. Para añadir plantillas llamamos al addTemplates, al que le pasamos un nombre y un objeto con los datos necesarios para mostrar las plantillas. El objeto tiene los campos imagePath, donde le indicamos la ruta de la imágenes que aparecerán como vista previa de la plantilla, y templates, un array de objetos que tienen los datos de la plantilla. Estos datos son:

  • title: Título de la plantilla.
  • image: imagen de vista previa de la plantilla.
  • description: descripción de la plantilla.
  • html: La plantilla propiamente dicha.

De esta sencilla forma podemos añadir plantillas a nuestro editor. Cuando pulsemos sobre el botón de plantillas nos aparecerá la siguiente ventana:

Ahora solo toca seleccionar nuestra plantilla y esta aparecerá como contenido de nuestro editor, reemplazándolo o añadiéndolo según hayamos indicado en la ventana,

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

junio 19, 2009 3

Plantillas sencillas con TemplatePower. Parte III.

By in Librerías, PHP

Hoy vamos a retomar el tutorial sobre TemplatePower. En la anterior entrega vimos como crear bloques con el método newBlock. Hoy vamos a ver como pasar de un bloque a otro y como anidar bloques. Vamos a verlo con un ejemplo en el que tenemos un array donde cada elemento es a su vez otro array. Cada elemento de este último tiene dos campos, fecha y datos. El campo datos será otro array de arrays donde cada elemento contendrá dos campos, cantidad y concepto. Lo que vamos a hacer es sacar una tabla donde aparezca una cabecera con la fecha y luego detallados los conceptos y la cantidad. Al final aparecerá el total. Al final de la tabla aparecerá el total de sumar todos los totales. Veamos como quedaría la plantilla:

ejemploBloques3.tpl:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Segundo Ejemplo con Bloques</title>
</head>
<body>
<table border="1">
<!-- START BLOCK : dia -->
<tr>
<th colspan="2">{fecha}</th>
</tr>
<tr>
<th>Concepto</th>
<th>Cantidad</th>
</tr>
<!-- START BLOCK : dato -->
<tr>
<td>{concepto}</td>
<td>{cantidad}</td>
</tr>
<!-- END BLOCK : dato -->
<tr>
<td><strong>Total</strong></td>
<td>{total}</td>
</tr>
<!-- END BLOCK : dia -->
<tr>
<td><strong>Total final:</strong></td>
<td>{total_final}</td>
</table>
</body>
</html>

y el manejador de la plantilla:

ejemploBloques3.php:

<?php
include('class.TemplatePower.inc.php');

//Array con los datos
$datos = array(
	array('fecha' => '12-06-2009', 'datos' => array(
		array('concepto' => 'Camisa', 'cantidad' => 12),
		array('concepto' => 'Pantalon', 'cantidad' => 25),
		array('concepto' => 'Zapatos', 'cantidad' => 10),
		array('concepto' => 'bolso', 'cantidad' => 14)
		)),
	array('fecha' => '13-06-2009', 'datos' => array(
		array('concepto' => 'Gorra', 'cantidad' => 35),
		array('concepto' => 'Camisa', 'cantidad' => 40),
		array('concepto' => 'Camiseta', 'cantidad' => 25)
		)),
	array('fecha' => '14-06-2009', 'datos' => array(
		array('concepto' => 'Zapatos', 'cantidad' => 30),
		array('concepto' => 'Cinturon', 'cantidad' => 20),
		array('concepto' => 'Sandalias', 'cantidad' => 10),
		array('concepto' => 'Bolso', 'cantidad' => 25),
		array('concepto' => 'Camiseta', 'cantidad' => 25)
		)),
);

$plantilla = new TemplatePower('ejemploBloques3.tpl');
$plantilla->prepare();

$total = 0;
// recorremos el array
foreach ($datos as $dato)
{
	// creamos el bloque 'dia'
	$plantilla->newBlock('dia');
	$plantilla->assign('fecha', $dato['fecha']);
		$total_parcial = 0;
	// recorremos el array
	foreach ($dato['datos'] as $elemento)
	{
		// creamos el bloque dato
		$plantilla->newBlock('dato');
		$plantilla->assign('concepto', $elemento['concepto']);
		$plantilla->assign('cantidad', $elemento['cantidad']);

		$total_parcial += $elemento['cantidad'];
	}

	// volvemos al bloque dia para asignar el total
	$plantilla->gotoBlock('dia');
	$plantilla->assign('total', $total_parcial);

	$total += $total_parcial;

}

// volvemos al bloque raiz para asignar el total de totales
$plantilla->gotoBlock('_ROOT');
$plantilla->assign('total_final', $total);

// generamos las plantillas
$plantilla->printToScreen();
?>

Lo que hacemos es recorrer el array con los datos, con el foreach, y creamos un bloque ‘dia’. Acto seguido recorremos el array con los datos de cada día, de nuevo con un bucle foreach, y  creamos un nuevo bloque ‘dato’ asignado las variables ‘concepto’ y ‘cantidad’, también vamos calculando el total parcial como suma de las cantidades. Acto seguido volvemos al bloque ‘dia’ para asignar la variable total y vamos calculando el total final como suma de los totales parciales. Al finalizar el primer bucle volvemos al bloque raiz y asignamos el total final.

Espero que con este sencillo ejemplo se hayan entendido bien los bloques anidados y el funcionamiénto del método gotoBlock. De todas formas si hay alguna duda en los comentarios se puede preguntar cualquier cosa, que gustosamente trataré de responder.

Ya para finalizar el código con el ejemplo del artículo (no incluye la librería TemplatePower):

Template Power. Segundo ejemplo con bloques.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

junio 5, 2009 0

Plantillas sencillas con TemplatePower. Parte II.

By in Librerías, PHP

En el artículo anterior vimos como asignar valor a las variables que definimos en nuestra plantilla. Hoy vamos a ver como crear bloques en la plantilla. Los bloques son elementos que se pueden repetir y que pueden ser muy útiles para la creación de tablas o de listas. Para ello vamos a verlo con un pequeño ejemplo:

ejemploBloques1.tpl:

<html>
<head>
<title>Ejemplo de bloques</title>
</head>
<body>
<h1>Ejemplo con bloques</h1>
<ul>
  <!-- START BLOCK : bloque -->
  <li>Elemento {orden}.</li>
  <!-- END BLOCK : bloque -->
</ul>
</body>
</html>

ejemploBloques1.php

<?php

include('class.TemplatePower.inc.php');

$plantilla = new TemplatePower('ejemploBloques1.tpl');

$plantilla->prepare();

for($i = 1; $i <= 10; $i++)
{
	$plantilla->newBlock('bloque');
	$plantilla->assign('orden',$i);
}

$plantilla->printToScreen();
?>

En esta parte tenemos un bucle que cuenta de 1 a 10. Dentro del bucle con el método newBlock creamos un nuevo bloque. A este método solo tenemos que pasarle el nombre del bloque. Luego para asignar variables al bloque lo hacemos con el método assign.

En el próximo artículo veremos como ir cambiando de bloque con el método gotoBlock.

Código del ejemplo para descargar:

Template Power. Primer ejemplo con bloques.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,

junio 3, 2009 0

Plantillas sencillas con TemplatePower. Parte I.

By in Librerías, PHP

TemplatePower es un motor de plantillas para PHP que nos permite separa de una forma fácil el contenido de la presentación. Para empezar podemos ver un ejemplo bastante sencillo en el que tendremos dos archivos: ejemplo1.tpl, que es el archivo con la plantilla, y ejemplo1.php, que es el manejador de la plantilla.

ejemplo1.tpl:

<html>
<head>
<title>{titulo}</title>
</head>
<body>
<h1>!Bienvenido {nombre}!</h1>
</body>
</html>

ejemplo1.php:

<?php

include('class.TemplatePower.inc.php');

$plantilla = new TemplatePower('ejemplo1.tpl');

$plantilla->prepare();

$plantilla->assign('titulo', 'Primer ejemplo con TemplatePower.');
$plantilla->assign('nombre', 'Manuel');

$plantilla->printToScreen();
?>

Como se puede ver las variables se colocan en la plantilla encerradas entre los caracteres ‘{‘ y ‘}’. Luego en el script que hace uso de nuestra plantilla incluimos el archivo ‘class.TemplatePower.inc.php’. A continuación creamos una instancia de la clase TemplatePower, indicándole al constructor el archivo de plantilla que queremos usar. Preparamos la clase llamando al método prepare y con el método assign le asignamos el valor a cada variable. Para finalizar invocamos al método printToScreen para que nos muestre el resultado.

Aquí está el código del primer ejemplo visto en este artículo:

Template Power. Primer ejemplo.

(En el archivo no se incluye la clase TemplatePower. Para obtenerla hay que ir a la sección “download” de la página de TemplatePower y descargarse y la librería.)

En la próxima entrega mostraremos como crear bloques. Un bloque es un trozo de la plantilla que puede repetirse, muy útil para la generación de tablas o de listados.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,