FuelPHP - Temas

Los temas se utilizan para permitir múltiples aspectos de la aplicación. Proporciona la opción para que el usuario / desarrollador cambie la apariencia de la aplicación sin alterar la funcionalidad de la aplicación. Una aplicación puede tener uno o más temas. Cada tema vive en su propia carpeta. Aprendamos a crear temas en este capítulo.

Configuración del tema

FuelPHP proporciona un archivo de configuración separado para temas, fuel/app/config/themes.php. Todos los ajustes relacionados con el tema se configuran en este archivo. Algunas de las configuraciones principales del tema son las siguientes:

  • active - Nombre del tema activo

  • fallback - Nombre del tema alternativo, si no se encuentra el tema activo

  • paths - Matriz de la ruta para buscar y encontrar temas.

  • assets_folder- Normalmente, los activos deben estar dentro de DOCPATH para que sea accesible a través de la web. Se refiere a la carpeta de activos para los temas dentro de DOCPATH

  • view_ext - Extensión del archivo de vista del tema

  • info_file_name - Archivo con información ampliada sobre temas

  • require_info_file - Si se requiere el archivo de información del tema, info_file_name

  • use_modules - Ya sea para usar el módulo actual o no

La configuración simple para el archivo de tema es la siguiente.

<?php  
   return array ( 
      'active' => 'tpthemes', 
      'fallback' => 'tpthemes', 
      'paths' => array ( 
         APPPATH.'themes', 
      ), 
      'assets_folder' => 'assets', 
      'view_ext' => '.html', 
      'require_info_file' => false, 
      'info_file_name' => 'themeinfo.php', 
      'use_modules' => false, 
   );

Aquí lo hemos puesto

  • El nombre del tema activo y alternativo como tpthemes
  • La ruta de la carpeta de temas como fuel / app / themes /
  • La ruta de la carpeta de activos como / public / assets / tpthemes /

Clase temática

Una vez realizada la configuración, podemos usar la clase, Theme proporcionada por FuelPHP para hacer la funcionalidad del tema. Háganos saber acerca de los métodos disponibles en la clase Theme en este capítulo.

ejemplo

El método de instancia permite crear un nuevo tema. Tiene los siguientes dos parámetros,

  • $name - Nombre del tema (opcional)

  • $config - Matriz de configuración del tema (igual que se ve en la sección de configuración)

Ambos parámetros son opcionales. Si no se especifica ningún parámetro, intenta obtener el tema predeterminado del archivo de configuración. Si se especifica el nombre del tema, intenta obtener las otras configuraciones del archivo de configuración. Si también se especifica la configuración, utilizará la configuración especificada por el usuario en lugar de la configuración del archivo de configuración.

$theme = \Theme::instance(); 
$theme = \Theme::instance('tpthemes'); 
$theme = \Theme::instance ('mytheme', array ( 
   'active' => 'mytheme', 'view_ext' => '.php'));

fragua

forge es similar a la instancia, excepto que solo tiene una matriz de configuración.

$theme = \Theme::forge (array( 
   'active'   => 'tpthemes', 
   'fallback' => 'tpthemes', 
   'view_ext' => '.php', 
));

ver

El método de vista utiliza el View::forge()en el fondo. Ambas API son similares, excepto que el método de vista busca el archivo de vista en la carpeta de temas, fuel / app / themes / tpthemes / en lugar de fuel / app / views / folder.

$theme = \Theme::instance(); 
$view = $theme->view('template/index'); 
// *fuel/app/themes/tpthemes/template/index.php

presentador

El método del presentador utiliza el Presenter::forge()en el fondo. Ambas API son similares, excepto que el método del presentador busca el archivo de vista en la carpeta de temas, fuel / app / themes / tpthemes / en lugar de fuel / app / views / folder.

$theme = \Theme::instance(); 
$presenter = $theme->presenter('template/index');

asset_path

El método asset_path devuelve la ruta al activo solicitado en relación con el tema seleccionado actualmente.

$theme = \Theme::instance();  

// public/assets/tpthemes/css/style.css 
$style = \Html::css($theme->asset_path('css/style.css'));

add_path

El método add_path permite agregar una ruta de tema en tiempo de ejecución.

$theme = \Theme::instance(); 
$theme->add_path(DOCROOT.'newthemes');

add_paths

El método add_paths permite agregar múltiples rutas de tema en tiempo de ejecución.

$theme = \Theme::instance();   
$theme->add_path(DOCROOT.'newthemes');

activo

El método activo permite establecer el tema activo.

$theme = \Theme::instance(); 
$active = $theme->active('newtheme');

retroceder

El método de reserva permite establecer el tema de reserva.

$theme = \Theme::instance();
$fallback = $theme->fallback('custom');

get_template

El método get_template devolverá la instancia de View de la plantilla de tema cargada actualmente.

$theme = \Theme::instance(); 
$theme->get_template()->set('body', 'Theme can change the look and feel of your app');

set_template

El método set_template permite configurar la plantilla de tema para la página.

$theme = \Theme::instance(); 
$theme->set_template('layouts/index')->set('body', 'set theme template');

encontrar

find devuelve verdadero, si se encuentra la ruta al tema; de lo contrario, devuelve falso.

$theme = \Theme::instance(); 
$path = $theme->find('newtheme')

todas

El método all devuelve una matriz de todos los temas en todas las rutas de temas.

$theme = \Theme::instance(); 
$themes = $theme->all();

obtener información

El método get_info devuelve una variable específica de la matriz de información del tema. Si no se especifica ningún tema, se utiliza la matriz de información del tema activo.

$theme = \Theme::instance(); 
$var = $theme->get_info('color', 'green', 'newtheme');

Aquí, el método para obtener el color se define en 'newtheme'. Si no está definido, utilizará "verde" como color predeterminado.

set_info

El método set_info establece una variable en el tema activo o de reserva.

$theme->set_info('color', 'green', 'fallback');

set_partial

El método set_partial permite establecer una vista parcial para una sección con nombre de la plantilla de su página. Por lo general, se realiza mediante una llamada HMVC.

$theme = \Theme::instance(); 
$theme->set_template('layouts/homepage'); 
$theme->set_partial('navbar', 'homepage/navbar');

get_partial

El método get_partial permite obtener la instancia de vista de un parcial previamente establecido en una sección con nombre de la plantilla de su página.

$theme = \Theme::instance(); 
$theme->set_partial('sidebar', 'partials/menu'); 
$theme->get_partial('sidebar', 'partials/menu')->set('class', 'menu green');

Ejemplo de trabajo

Agreguemos soporte de temas en nuestra aplicación para empleados.

Step 1 - Agregue un nuevo archivo de configuración de tema, fuel / app / config / theme.php con el siguiente contenido.

<?php  
   return array ( 
      'active' => 'tpthemes',
      'fallback' => 'tpthemes', 
      'paths' => array (APPPATH.'themes', ), 
      'assets_folder' => 'assets', 
      'view_ext' => '.html', 
      'require_info_file' => false, 
      'info_file_name' => 'themeinfo.php', 
      'use_modules' => false, 
   );

Step 2 - Agregue una nueva carpeta de activos, public / assets / tpthemes / css para el tema, tpthemes.

cd /go/to/app/root/path 
mkdir -p public/assets/tpthemes/css

Step 3 - Descargue el bootstrap más reciente y coloque el bootstrap.min.css en public / assets / tpthemes / css

Step 4 - Agregue una nueva carpeta, tpthemes en la carpeta fuel / app / themes.

cd /go/to/app/root/path   
mkdir -p fuel/app/themes/tpthemes

Step 5 - Agregue una nueva plantilla de diseño, bootstrap.html en fuel / app / themes / tpthemes / layout / y agregue el siguiente código.

<!DOCTYPE html> 
<html lang = "en"> 
   <head> 
      <title>Theme example</title> 
      <meta charset = "utf-8"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <!-- Bootstrap core CSS --> 
      <?php echo \Theme::instance()->asset->css('bootstrap.min.css'); ?> 
   </head> 
   
   <body> 
      <?php echo $header; ?> 
      <div class = "container"> 
         <div class = "row">
            <div class = "col-sm-12"> 
               <?php echo $content; ?> 
            </div> 
         </div> 
      </div> 
   </body>
   
</html>

Aquí, hemos utilizado la instancia del tema y el método de activos para obtener la ruta del archivo de arranque. Hemos definido dos variables, encabezado y contenido.header se define para establecer los detalles del encabezado de forma dinámica. content se define para establecer el contenido real de la página de forma dinámica.

Step 6 - Agregue una nueva plantilla de encabezado, header.php en fuel / app / themes / tpthemes / partials de la siguiente manera.

<div class = "jumbotron text-center">
   <h1>Theme support in fuelphp</h1> 
   <p>bootstrap based template</p>  
</div>

Step 7 - Crea un nuevo controlador, ThemeSample en fuel / app / classes / controller / themesample.php y action en action_index de la siguiente manera.

<?php  
   class Controller_ThemeSample extends \Controller { 
      public function before() { 
         $this->theme = \Theme::instance(); 
         $this->theme->set_template('layouts/bootstrap');  
         $header = $this->theme->view('partials/header'); 
         $this->theme->get_template()->set('header', $header); 
      }  
      public function action_index() { 
         $content = $this->theme 
         ->view('themesample/index') 
         ->set('message', 'This data comes from action page');  
         $this->theme 
         ->get_template() 
         ->set('content', $content); 
      } 
      public function after($response) { 
         if (empty($response) or  ! $response instanceof Response) { 
            $response = \Response::forge(\Theme::instance()->render()); 
         } 
         return parent::after($response); 
      } 
   }

Aquí, hemos utilizado before y after método para hacer la inicialización del tema usando métodos de Themeclase. Algunos de los métodos utilizados son instancia, get_template, set_template y view.

Step 8 - Finalmente, agregue la vista para la acción de índice, index.php en fuel / app / themes / tpthemes / themesample de la siguiente manera.

<p>The data comes from *fuel/app/themes/tpthemes/themesample/index.html* file.</p> 
<p> 
   <?php echo $message; ?> 
</p>

Aquí, hemos definido una variable, mensaje, que debe configurarse dinámicamente en el controlador.

Hemos creado un nuevo tema, tpthemes y lo usé en ThemeSamplecontrolador. Comprobemos ahora el resultado solicitando la URL, http: // localhost: 8080 / themesample / index. El resultado es el siguiente.