4.2. Comenzando con el Skin

Cada Widget esta relacionado con un template en particular el cual por lo general posee su mismo nombre, pero en letras minusculas, pero no siempre sucede eso, como el caso de los Widget FT* los cuales dependen del templete ftitem.tpl, y del los template form*.tpl. Ademas cada Skin posee un archivo PHP el cual define algunos contenidos, atributos, directorios o imagenes dentro del Skin, los cuales seran utilizados por los Widgets. Por ejemplo en el Skin FSM, el archivo PHP que contiene los datos del Skin es SkinFSM.php, para una vision mas exacta del directorio de Skins y del Skin FSM

Skins/
|-- FSM/
|   |-- adherenteslist.tpl
|   |-- bifroot.tpl
|   |-- columncnt.tpl
|   |-- css/
|   |   |-- bifinclude.css
|   |   |-- titlebox.css
|   |   |-- titlebox2.css
|   |   |-- titlebox3.css
|   |   `-- titlebox4.css
|   |-- fsmroot.tpl
|   |-- ftitem.tpl
|   |-- images/
|   |   |-- ..... (Un monton de archivos)
|   |   |-- titulo-fondo.png
|   |   `-- titulo.png
|   |-- listaorganizacion.tpl
|   |-- listapersona.tpl
|   |-- rowcnt.tpl
|   |-- titlebox.tpl
|   |-- titlebox2.tpl
|   |-- titlebox3.tpl
|   `-- titlebox4.tpl
`-- SkinFSM.php
	

Como veras hay un directorio FSM dentro del directorio Skins, luego un directorio css, donde estan incluidas algunas hojas de estilo para algunos widgets, los nombres del las hojas de estilo son el mismo nombre que el del widget, por ejemplo para el widget TitleBox la hoja de estilo debe ser titlebox.css. Ademas como se ven en pantalla, estan presentes los archivos *.tpl, y un archivo con informacion de Skin SkinFSM.php

<?php

class SkinFSM extends PEAR {

  var $reg = array();

  function SkinFSM() {
   
    $this->PEAR(); // default init.
    global $sys_dir,$app_dir;

    $this->path_dir = "$sys_dir/Skins/FSM/";// Directorio donde se ubican los
                                            // archivos de templates .tpl
    $this->path_url = 'Skins/FSM/';         // URL, usada por los css, y las
                                            // imagenes para la pagina
    $this->reg =                                // valores del Skin
       array(
	'titlebox_WIDTH'  =>'100%',
	'titlebox2_WIDTH' =>'100%',
	'titlebox3_WIDTH' =>'100%',
	'titlebox4_WIDTH' =>'100%',
	     );
  }

  function _SkinFSM() {
    // Destructor
  }

  function resource($string,$type='_template') {
    if ($type == '_template') {
      $file = $this->path_dir . $string . ".tpl";
      if (file_exists($file)) {
	return($file);
      }else{
	return;
      }
    } 
    // Buscar las hojas de estilo css
    else if ($type == '_css') {
      $file= $this->path_url . 'css/' . $string . '.css';
      global $app_dir;
      if (file_exists("$app_dir/$file")) {
	return($file);
      }else{
	return;
      }
    }
    else if ($type == '_layout') {
      $file= $this->path_dir . 'layouts/' . $string . '.tpl';
      if (file_exists($file)) {
	return($file);
      }else{
	return;
      }
    } 
    else
      return $this->reg["$string" . "$type"];
  }
}
?>

Como se ve aqui se indica el directorio de ubicacion de los templates del Skin, de sus hojas de estilo, y de sus imagenes. Un ejemplo de template simple seria:

        <a> class="biflink" {HREF} {TARGET}>{TEXT}</a>	
	

Los elementos contenidos entre {}, son los RAWfields y HTMLfields que son definidos dentro del archivo del Widget.