Css Plugin

Escrito el

Css plugin para Simphple framework permite gestionar ,desde php, el código css de tu página web de una forma fácil. Sus funcionalidades son las de añadir archivos css y clases css inline a una cabecera html, compactar archivos css e incluirlo y crear, usando el código Simhple, archivos css dinámicos.

Un pequeño ejemplo

En el código simphple solo hay que añadir, en la cabecera html de tu web, un include hacia la plantilla del plugin, el resto se hace desde php.

main.html
<html>
  <head>
    <title>Css example</title>
    <!-- INCLUDE "plugins/css/css_header.html" -->
    </head>
  <body>
  </body>
</html>
main.php
<?php
$dsf = new Sphp_Data_Store_File("cache/"truetrue);
$sphp = new Sphp_Template($dsf$options);
$css = new Css_Handler();

$css->add_file("public/css/style1.css");
$css->add_file("public/css/style2.css");

$class1 = new Css_Class("#id1 a"
    array("text-decoration" => "none""color" => "#33a"));
$css->add_class($class1);

$css->set_simphple_data($sphp);

$sphp->display_file("main.html");

?>
Resultado de ejecutar el archivo main.php
<html>
  <head>
    <title>Css example</title>
    <link href="public/css/style1.css" rel="stylesheet" type="text/css"/>
    <link href="public/css/style2.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
      #id1 a{ text-decoration:none; color: #33a;}
    </style>
    </head>
  <body>
  </body>
</html>

Puedes observar como desde php se pueden añadir enlaces hacia código css y crear clases css 'inline' en la cabecera html.

Haz click aquí para descargar el plugin y ver todas sus características.



Ejemplo para crear tablas html

Escrito el

En este ejemplo se va a diseñar una plantilla parametrizada para crear tablas html. La tabla constará de una fila cabecera opcional th, 0 o más filas normales td y además para hacerla más dinámica también se podrá añadir la etiqueta caption y agregar una clase css.

El primer paso es crear la plantilla parametrizada para que pueda usarse en distintas partes de otros archivos simphple.

table.html
<table<!-- IF !empty($_sphp_.arg2) --> class="{$_sphp_.arg2:}"<!-- ENDIF -->>
    
    <!-- IF !empty($_sphp_.arg3) -->
    <caption>{$_sphp_.arg3:}</caption>
    <!-- ENDIF -->

    <!-- IF exists_head($_sphp_.arg1) -->
    <tr>
        <!-- FOREACH head=get_head_data($_sphp_.arg1) -->
        <th>{$head._VAL_:}</th>
        <!-- ENDFOREACH -->
    </tr>
    <!-- ENDIF -->
    
    <!-- FOREACH row=get_body_data($_sphp_.arg1) -->
    <tr>    
        <!-- FOREACH cell=$row._VAL_ -->
        <td>{$cell._VAL_:}</td>
        <!-- ENDFOREACH -->
    </tr>
    <!-- ENDFOREACH -->
</table>

Esta plantilla consta de 3 parámetros. El primero será un objeto de la clase Sphp_Maker_Table, el cual contiene la información de las celdas de la tabla, como se verá posteriormente. El segundo será una cadena opcional que contiene el nombre de la clase css que se usa en la tabla html; si el parámetro es una cadena vacía entonces no se asigna ninguna clase a la tabla. Y el tercero es otra cadena opcional con el título de la tabla (contenido de la etiqueta caption); si la cadena está vacía entonces la etiqueta caption no se muestra. La llamada de esta plantilla queda de la siguiente forma.

<!-- INCLUDE 'table.html' Sphp_Maker_Table $_sphp_.arg1, [string $_sphp_.arg2 = '', [string $_sphp_.arg3='']] -->

En la plantilla también se observa 3 funciones, estas están asociadas a métodos estáticos de la clase Sphp_Maker_Table. La función simphple exists_head comprueba si existe una fila cabecera en el objeto de la clase Sphp_Maker_Table. get_head_data devuelve un array con las celdas de la cabecera. Y la última función get_body_data devuelve un array bidimensional con las filas y las celdas del cuerpo de la tabla.

Una vez creada la plantilla es tiempo de diseñar una clase que gestiona y guarde los datos de la tabla

table.class.php
<?php

/**
 * Make a table using the table.html template.
 * @author David Casado Martínez <tokkara@gmail.com>
 * @package plugins
 */

class Sphp_Maker_Table{

    /**
     * Function used in the table.html template.
     * @param Sphp_Maker_Table $smt
     * @return boolean
     */

    public static function exists_head(Sphp_Maker_Table $smt){
        return !empty($smt->table_data['head']);
    }

    /**
     * Function used in the table.html template.
     * @param Sphp_Maker_Table $smt
     * @return array
     */

    public static function get_body_data(Sphp_Maker_Table $smt){
        return $smt->table_data['body'];    
    }
    
    /**
     * Function used in the table.html template.
     * @param Sphp_Maker_Table $smt
     * @return array
     */

    public static function get_head_data(Sphp_Maker_Table $smt){
        return $smt->table_data['head'];
    }
    
    /**
     * Declare the functions used in the table.html template.
     * @param Sphp_Template $tpl
     */

    public static function set_template_data(Sphp_Template &$tpl){
        $tpl->add_function(new Sphp_Template_Function(  'exists_head'
                                                        'Sphp_Maker_Table::exists_head'
        ));
        $tpl->add_function(new Sphp_Template_Function(  'get_body_data',
                                                        'Sphp_Maker_Table::get_body_data'
        ));
        $tpl->add_function(new Sphp_Template_Function(  'get_head_data',
                                                        'Sphp_Maker_Table::get_head_data'
        ));
    }
    
    /**
     * Table data.
     * @var array
     */

    private $table_data;
    
    /**
     * Class constructor.
     */

    public function __construct(){
        $this->table_data = array('head' => array(), 'body' => array());
    }
    
    /**
     * Add a body row to the table.
     * @param array $row array with the cells in the row.
     */

    public function add_body_row($row){
        $this->table_data['body'][] = $row;
    }
    
    /**
     * Add the head row.
     *  @param array $row array with the cells in the head row.
     */

    public function add_head_row($row){
        $this->table_data['head'] = $row;
    }
}?>

Los 3 primeros métodos estáticos se asocian a las 3 funciones de simphple descritas anteriormente. El 4º método estático set_template_data simplifica la declaración de las funciones de Simphple.

El resto de métodos crean el contenido de la tabla html. add_head_row añade los datos para la cabecera de la tabla; cada valor del array es el contenido de una celda de la fila. add_body_row añade una fila al cuerpo de la tabla; al igual que el anterior cada valor del array es una celda de la fila.

Estos 2 archivos permiten crear tablas de forma sencilla en cualquier parte del código simphple. Ahora vamos aplicar el plugin a una plantilla cualquiera.

index.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Examples of Maker Tables</title>
    <style type="text/css">
        .table2_class{
            border: 1px solid #0d355e;
            border-collapse: collapse;
            width: 500px;
        }
        
        .table2_class td, .table1_class th{
            border: 1px solid #0d355e;
            padding: 4px;
        }
        
        .table2_class th{
            background-color: #61a3e4;
        }
        
        .table2_class caption{
            background-color: #5894d0;
            border: 1px solid #0d355e;
            border-bottom: none;
            font-weight: bold;
        }
    </style>
</head>
<body>
        <h1>Example table 1</h1>
        <!-- INCLUDE 'table.html'$table1 -->

        <h1>Example table 2</h1>
        <!-- INCLUDE 'table.html'$table2'table2_class''Tabla 2' -->
</body>
</html>

En este ejemplo vamos a crear 2 tablas html, por eso utilizamos 2 includes a table.html. En el primero $table1 es una variable que guarda un objeto de la clase Sphp_Maker_Table, el cual contiene toda la información de la tabla. En el segundo include $table2 es otra instancia de la clase Sphp_Maker_Table con información de la segunda tabla. Además también tiene 2 parámetros adicionales: table2_class es una cadena con el nombre de la clase css para la tabla y Tabla 2 otra cadena con el título de la tabla.

Ahora ya solo falta el archivo php que inicie el framework y prepare los datos.

index.php
<?php

//Include the files.
include 'simphple/data_store/data_store.intfc.php';
include 'simphple/data_store/data_store_file.class.php';

include 'simphple/template/template_code.class.php';
include 'simphple/template/template.class.php';
include 'simphple/template/template_function.class.php';

include 'tables/table.class.php';

//Start the framework.
$dsf = new Sphp_Data_Store_File('cache/', true, true);
$options = array('template_dir_path' => 'tables/templates/');
$tpl = new Sphp_Template($dsf$options);

//Make the table 1.
$table1 = new Sphp_Maker_Table();
$table1->add_head_row(array('Header 1', 'Header 2', 'Header 3'));
$table1->add_body_row(array('Cell 1', 'Cell 2', 'Cell 3'));
$table1->add_body_row(array('Cell 4', 'Cell 5', 'Cell 6'));
$table1->add_body_row(array('Cell 7', 'Cell 8', 'Cell 9'));

//Make the table 2.
$table2 = new Sphp_Maker_Table();
$table2->add_head_row(array('Disco', 'Autor', 'Nº Canciones'));
$table2->add_body_row(array('Privateering', 'Mark Knopfler', '20'));
$table2->add_body_row(array('Material defectuoso', 'Extremoduro', '6'));


//Declare the table functions in the framework.
Sphp_Maker_Table::set_template_data($tpl);

//Add the tables to the framework.
$tpl->add_variable('table1', $table1);
$tpl->add_variable('table2', $table2);

$tpl->display_file('index.html');

En este archivo iniciamos el framework, creamos los objetos de la clase Sphp_Maker_Table $table1 y $table2, insertamos los datos de la tabla en dichos objetos, después declaramos las funciones de la plantilla table.html y las variables del framework y finalmente mostramos el archivo. El resultado final es el siguiente:

Resultado al ejecutar el archivo index.php
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Examples of Maker Tables</title>
    <style type="text/css">
        .table2_class{
            border: 1px solid #0d355e;
            border-collapse: collapse;
            width: 500px;
        }
        .table2_class td, .table1_class th{
            border: 1px solid #0d355e;
            padding: 4px;
        }
        .table2_class th{
            background-color: #61a3e4;
        }
        .table2_class caption{
            background-color: #5894d0;
            border: 1px solid #0d355e;
            border-bottom: none;
            font-weight: bold;
        }
    </style>
</head>
<body>
        <h1>Example table 1</h1>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>    
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>    
        <td>Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
    </tr>
    <tr>    
        <td>Cell 7</td>
        <td>Cell 8</td>
        <td>Cell 9</td>
    </tr>
</table>
        <h1>Example table 2</h1>
<table class="table2_class">
    <caption>Tabla 2</caption>
    <tr>
        <th>Disco</th>
        <th>Autor</th>
        <th>Nº Canciones</th>
    </tr>
    <tr>    
        <td>Privateering</td>
        <td>Mark Knopfler</td>
        <td>20</td>
    </tr>
    <tr>    
        <td>Material defectuoso</td>
        <td>Extremoduro</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

En este resultado se muestran ambas tablas con los datos insertados desde php. Este plugin está pensado para crear de una forma sencilla tablas de datos html sin tener que preocuparse por el código html.

Podéis descargaros el plugin y el ejemplo desde aquí. Para hacerlo funcionar solo tenéis que copiar la carperta del framwork simphple y pegarla en el directorio raiz del proyecto.