FuelPHP - Temas

Os temas são usados ​​para permitir a aparência e o comportamento do aplicativo. Ele fornece a opção para o usuário / desenvolvedor alterar a aparência e comportamento do aplicativo sem perturbar a funcionalidade do aplicativo. Um aplicativo pode ter um ou mais temas. Cada tema reside em sua própria pasta. Vamos aprender como criar temas neste capítulo.

Configuração do Tema

FuelPHP fornece um arquivo de configuração separado para temas, fuel/app/config/themes.php. Todas as configurações relacionadas ao tema são definidas neste arquivo. Algumas das configurações do tema principal são as seguintes -

  • active - Nome do tema ativo

  • fallback - Nome do tema substituto, se o tema ativo não for encontrado

  • paths - Matriz do caminho para pesquisar e encontrar temas

  • assets_folder- Normalmente, os ativos precisam estar dentro do DOCPATH para que possam ser acessados ​​pela web. Refere-se à pasta de ativos para os temas dentro do DOCPATH

  • view_ext - Extensão do arquivo de visualização do tema

  • info_file_name - Arquivo com informações estendidas sobre temas

  • require_info_file - Se deve ser necessário o arquivo de informações do tema, info_file_name

  • use_modules - Se usar o módulo atual ou não

A configuração simples para o arquivo de tema é a seguinte.

<?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, 
   );

Aqui nós definimos,

  • O nome do tema ativo e substituto como tpthemes
  • O caminho da pasta do tema como combustível / app / temas /
  • O caminho da pasta de ativos como / public / assets / tpthemes /

Aula temática

Uma vez feita a configuração, podemos usar a classe Tema fornecida pelo FuelPHP para fazer a funcionalidade do tema. Informe-nos sobre os métodos disponíveis na classe Theme neste capítulo.

instância

método de instância permite criar um novo tema. Ele tem os dois parâmetros a seguir,

  • $name - Nome do tema (opcional)

  • $config - Matriz de configuração do tema (o mesmo visto na seção de configuração)

Ambos os parâmetros são opcionais. Se nenhum parâmetro for especificado, ele tenta obter o tema padrão do arquivo de configuração. Se o nome do tema for especificado, ele tenta obter as outras configurações do arquivo de configuração. Se a configuração também for especificada, ela usará a configuração especificada pelo usuário em vez da configuração do arquivo de configuração.

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

forja

forge é semelhante a instance, exceto que só tem array de configuração.

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

Visão

método de visualização usa o View::forge()no fundo. Ambas as APIs são semelhantes, exceto pelo método de exibição que procura o arquivo de exibição na pasta de temas, fuel / app / themes / tpthemes / em vez de fuel / app / views / pasta.

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

apresentador

método do apresentador usa o Presenter::forge()no fundo. Ambas as APIs são semelhantes, exceto pelo método do apresentador que procura o arquivo de visualização na pasta de temas, fuel / app / themes / tpthemes / em vez de fuel / app / views / pasta.

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

asset_path

O método asset_path retorna o caminho para o ativo solicitado em relação ao tema atualmente selecionado.

$theme = \Theme::instance();  

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

add_path

O método add_path permite adicionar um caminho de tema em tempo de execução.

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

add_paths

O método add_paths permite adicionar vários caminhos de tema em tempo de execução.

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

ativo

método ativo permite definir o tema ativo.

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

cair pra trás

o método de fallback permite definir o tema de fallback.

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

get_template

O método get_template retornará a instância View do template de tema carregado atualmente.

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

set_template

O método set_template permite definir o modelo de tema para a página.

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

encontrar

find retorna true, se o caminho para o tema for encontrado, caso contrário, retorna false.

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

todos

all método retorna uma matriz de todos os temas em todos os caminhos de tema.

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

obter informação

O método get_info retorna uma variável específica do array de informações do tema. Se nenhum tema for especificado, a matriz de informações do tema ativo será usada.

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

Aqui, o método get the color é definido em 'newtheme'. Se não estiver definido, usará 'verde' como cor padrão.

set_info

O método set_info define uma variável no tema ativo ou de fallback.

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

set_partial

O método set_partial permite definir uma visualização parcial para uma seção nomeada de seu modelo de página. Normalmente, isso é feito via ligação HMVC.

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

get_partial

O método get_partial permite obter a instância de visualização de um parcial definido anteriormente em uma seção nomeada de seu modelo de página.

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

Exemplo de Trabalho

Vamos adicionar suporte a temas em nosso aplicativo de funcionários.

Step 1 - Adicione um novo arquivo de configuração de tema, fuel / app / config / theme.php com o seguinte conteúdo.

<?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 - Adicionar nova pasta de ativos, public / assets / tpthemes / css para o tema, tpthemes.

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

Step 3 - Baixe o bootstrap mais recente e coloque o bootstrap.min.css em public / assets / tpthemes / css

Step 4 - Adicione uma nova pasta, tpthemes sob a pasta fuel / app / themes.

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

Step 5 - Adicione um novo modelo de layout, bootstrap.html em fuel / app / themes / tpthemes / layout / e adicione o seguinte 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>

Aqui, usamos a instância do tema e o método do ativo para obter o caminho do arquivo de bootstrap. Definimos duas variáveis, cabeçalho e conteúdo.header é definido para definir os detalhes do cabeçalho dinamicamente. content é definido para definir o conteúdo real da página dinamicamente.

Step 6 - Adicione um novo template de cabeçalho, header.php em fuel / app / themes / tpthemes / partials como segue.

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

Step 7 - Crie um novo controlador, ThemeSample em fuel / app / classes / controller / themesample.php e action em action_index da seguinte maneira.

<?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); 
      } 
   }

Aqui, nós usamos before e after método para fazer a inicialização do tema usando métodos de Themeclasse. Alguns dos métodos usados ​​são instance, get_template, set_template e view.

Step 8 - Finalmente, adicione view para a ação do índice, index.php em fuel / app / themes / tpthemes / themesample como segue.

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

Aqui, definimos uma variável, mensagem, que precisa ser configurada dinamicamente no controlador.

Criamos um novo tema, tpthemes e usei em ThemeSamplecontrolador. Vamos agora verificar o resultado solicitando a URL, http: // localhost: 8080 / themesample / index. O resultado é o seguinte.