Views (Vues)¶

Sorties Alternatives¶

Utilisez echo ou print sur une variable dans votre template:

<?php echo $variable; ?>

Avec le support de « Short Tag »:

<?= $variable ?>

Structures de Contrôle Alternatives¶

Les structures de contrôle tel que if, for, foreach, switch, et while peuvent être écrites dans un format simplifié. Remarquez l’absence d’accolades. À la place, l’accolade de fin du foreach est remplacée par endforeach. Chacune des structures de contrôle listées ci-dessous a une syntaxe de fermeture similaire: endif, endfor, endforeach, et endwhile. Vous remarquerez aussi qu’à la place du point-virgule après chaque structure (à l’exception de la dernière), il y a un double-point.

Voici un example de foreach:

<ul>
<?php foreach ($todo as $item): ?>
<li><?= $item ?></li>
<?php endforeach; ?>
</ul>

Un autre exemple utilisant if/elseif/else. Remarquez les doubles points:

<?php if ($username === 'sally'): ?>
   <h3>Hi Sally</h3>
<?php elseif ($username === 'joe'): ?>
   <h3>Hi Joe</h3>
<?php else: ?>
   <h3>Hi unknown user</h3>
<?php endif; ?>

Si vous préférez utiliser un langage de template comme Twig, une sous-classe de View va faire le pont entre le langage du template et CakePHP.

Un fichier de template est stocké dans src/Template/, dans un sous-dossier portant le nom du controller qui utilise ce fichier. Il a un nom de fichier correspondant à son action. Par exemple, le fichier de vue pour l’action « view() » du controller Products devra normalement se trouver dans src/Template/Products/view.ctp.

La couche vue de CakePHP peut être constituée d’un certain nombre de parties différentes. Chaque partie a différents usages qui seront présentés dans ce chapitre :

• templates: Les templates sont la partie de la page qui est unique pour l’action lancée. Elles sont la substance de la réponse de votre application.

• elements : morceaux de code de view plus petits, réutilisables. Les elements sont habituellement rendus dans les vues.

• layouts : fichiers de template contenant le code de présentation qui se retrouve dans plusieurs interfaces de votre application. La plupart des vues sont rendues à l’intérieur d’un layout.

• helpers : ces classes encapsulent la logique de vue qui est requise à de nombreux endroits de la couche view. Parmi d’autres choses, les helpers de CakePHP peuvent vous aider à créer des formulaires, des fonctionnalités AJAX, à paginer les données du model ou à délivrer des flux RSS.

• cells: Ces classes fournissent des fonctionnalités de type controller en miniature pour créer des components avec une UI indépendante. Regardez la documentation View Cells pour plus d’informations.

Variables de Vue¶

Toute variable que vous définissez dans votre controller avec set() sera disponible à la fois dans la vue et dans le layout que votre action utilise. En plus, toute variable définie sera aussi disponible dans tout element. Si vous avez besoin de passer des variables supplémentaires de la vue vers le layout, vous pouvez soit appeler set() dans le template de vue, soit utiliser un Utiliser les Blocks de Vues.

Vous devriez vous rappeler de toujours échapper les données d’utilisateur avant de les afficher puisque CakePHP n’échappe automatiquement la sortie. Vous pouvez échapper le contenu d’utilisateur avec la fonction h():

<?= h($user->bio); ?>

Définir les Variables de Vue¶

Cake\View\View::set(string $var, mixed $value)¶

Les vues ont une méthode set() qui fonctionne de la même façon que set() qui se trouve dans les objets Controller. Utiliser set() à partir de la vue va ajouter les variables au layout et aux elements qui seront rendus plus tard. Regardez Définir les Variables de View pour plus d’informations sur l’utilisation de set().

Dans votre fichier de vue, vous pouvez faire:

$this->set('activeMenuButton', 'posts');

Ensuite, dans votre layout, la variable $activeMenuButton sera disponible et contiendra la valeur “posts”.

Vues étendues¶

Une vue étendue vous permet d’encapsuler une vue dans une autre. En combinant cela avec view blocks, cela vous donne une façon puissante pour garder vos vues DRY. Par exemple, votre application a une sidebar qui a besoin de changer selon la vue spécifique en train d’être rendue. En étendant un fichier de vue commun, vous pouvez éviter de répéter la balise commune pour votre sidebar, et seulement définir les parties qui changent:

<!-- src/Template/Common/view.ctp -->
<h1><?= $this->fetch('title') ?></h1>
<?= $this->fetch('content') ?>

<div class="actions">
    <h3>Related actions</h3>
    <ul>
    <?= $this->fetch('sidebar') ?>
    </ul>
</div>

Le fichier de vue ci-dessus peut être utilisé comme une vue parente. Il s’attend à ce que la vue l’étendant définisse des blocks sidebar et title. Le block content est un block spécial que CakePHP crée. Il contiendra tous les contenus non capturés de la vue étendue. En admettant que notre fichier de vue a une variable $post avec les données sur notre post. Notre vue pourrait ressembler à ceci:

<!-- src/Template/Posts/view.ctp -->
<?php
$this->extend('/Common/view');

$this->assign('title', $post->title);

$this->start('sidebar');
?>
<li>
<?php
echo $this->Html->link('edit', [
    'action' => 'edit',
    $post->id
]); ?>
</li>
<?php $this->end(); ?>

// The remaining content will be available as the 'content' block
// In the parent view.
<?= h($post->body) ?>

L’exemple ci-dessus vous montre comment vous pouvez étendre une vue, et remplir un ensemble de blocks. Tout contenu qui ne serait pas déjà dans un block défini, sera capturé et placé dans un block spécial appelé content. Quand une vue contient un appel vers un extend(), l’exécution continue jusqu’à la fin de la vue actuelle. Une fois terminé, la vue étendue va être générée. En appelant extend() plus d’une fois dans un fichier de vue, le dernier appel va outrepasser les précédents:

$this->extend('/Common/view');
$this->extend('/Common/index');

Le code précédent va définir /Common/index.ctp comme étant la vue parente de la vue actuelle.

Vous pouvez imbriquer les vues autant que vous le voulez et que cela vous est nécessaire. Chaque vue peut étendre une autre vue si vous le souhaitez. Chaque vue parente va récupérer le contenu de la vue précédente en tant que block content.

Vous pouvez récupérer la liste de tous blocks existants en utilisant la méthode blocks():

$list = $this->blocks();

Afficher les Blocks¶

Vous pouvez afficher les blocks en utilisant la méthode fetch(). Cette dernière va, de manière sécurisée, générer un block, en retournant “” si le block n’existe pas:

<?= $this->fetch('sidebar') ?>

Vous pouvez également utiliser fetch pour afficher du contenu, sous conditions, qui va entourer un block existant. Ceci est très utile dans les layouts, ou dans les vues étendues lorsque vous voulez, sous conditions, afficher des en-têtes ou autres balises:

// dans src/Template/Layout/default.ctp
<?php if ($this->fetch('menu')): ?>
<div class="menu">
    <h3>Menu options</h3>
    <?= $this->fetch('menu') ?>
</div>
<?php endif; ?>

Vous pouvez aussi fournir une valeur par défaut pour un block qui ne devrait pas avoir de contenu. Cela vous permet d’ajouter du contenu placeholder, pour des déclarations vides. Vous pouvez fournir une valeur par défaut en utilisant le 2ème argument:

<div class="shopping-cart">
    <h3>Your Cart</h3>
    <?= $this->fetch('cart', 'Votre Caddie est vide') ?>
</div>

Utiliser des Blocks pour les Fichiers de Script et les CSS¶

HtmlHelper est lié aux blocks de vue, et ses méthodes script(), css(), et meta() mettent à jour chacun un block avec le même nom quand il est utilisé avec l’option block = true:

<?php
// Dans votre fichier de vue
$this->Html->script('carousel', ['block' => true]);
$this->Html->css('carousel', ['block' => true]);
?>

// Dans votre fichier de layout.
<!DOCTYPE html>
<html lang="en">
    <head>
    <title><?= $this->fetch('title') ?></title>
    <?= $this->fetch('script') ?>
    <?= $this->fetch('css') ?>
    </head>
    // reste du layout à la suite

Le HtmlHelper vous permet aussi de contrôler vers quels blocks vont les scripts:

// dans votre vue
$this->Html->script('carousel', ['block' => 'scriptBottom']);

// dans votre layout
<?= $this->fetch('scriptBottom') ?>

Utiliser les layouts à partir de plugins¶

Si vous souhaitez utiliser un layout qui existe dans un plugin, vous pouvez utiliser la syntaxe de plugin. Par exemple pour utiliser le layout de contact à partir du plugin Contacts:

namespace App\Controller;

class UsersController extends AppController
{
    public function view_active()
    {
        $this->viewBuilder()->layout('Contacts.contact');
        // ou ce qui suit avant 3.1
        $this->layout = 'Contacts.contact';
    }
}

Passer des Variables à l’intérieur d’un Element¶

Vous pouvez passer des données dans un element grâce au deuxième argument:

echo $this->element('helpbox', [
    "helptext" => "Oh, this text is very helpful."
]);

Dans le fichier element, toutes les variables passés sont disponibles comme des membres du paramètre du tableau (de la même manière que Controller::set() fonctionne dans le controller avec les fichiers de template). Dans l’exemple ci-dessus, le fichier src/Template/Element/helpbox.ctp peut utiliser la variable $helptext:

// A l'intérieur de src/Template/Element/helpbox.ctp
echo $helptext; //outputs "Oh, this text is very helpful."

La méthode View::element() supporte aussi les options pour l’element. Les options supportées sont “cache” et “callbacks”. Un exemple:

echo $this->element('helpbox', [
        "helptext" => "Ceci est passé à l'element comme $helptext",
        "foobar" => "Ceci est passé à l'element via $foobar",
    ],
    [
        // utilise la configuration de cache "long_view"
        "cache" => "long_view",
        // défini à true pour avoir before/afterRender appelé pour l'element
        "callbacks" => true
    ]
);

La mise en cache d’element est facilitée par la classe Cache. Vous pouvez configurer les elements devant être stockés dans toute configuration de Cache que vous avez défini. Cela vous donne une grande flexibilité pour choisir où et combien de temps les elements sont stockés. Pour mettre en cache les différentes versions du même element dans une application, fournissez une valeur unique de la clé cache en utilisant le format suivant:

$this->element('helpbox', [], [
        "cache" => ['config' => 'short', 'key' => 'unique value']
    ]
);

Si vous avez besoin de plus de logique dans votre element, comme des données dynamiques à partir d’une source de données, pensez à utiliser une View Cell plutôt qu’un element. Vous pouvez en savoir plus en consultant les View Cells.

Mise en cache des Elements¶

Vous pouvez tirer profit de la mise en cache de vue de CakePHP si vous fournissez un paramètre cache. Si défini à true, cela va mettre en cache l’element dans la configuration “default” de Cache. Sinon, vous pouvez définir la configuration de cache devant être utilisée. Regardez La mise en cache pour plus d’informations sur la façon de configurer Cache. Un exemple simple de mise en cache d’un element serait par exemple:

echo $this->element('helpbox', [], ['cache' => true]);

Si vous rendez le même element plus d’une fois dans une vue et que vous avez activé la mise en cache, assurez-vous de définir le paramètre “key” avec un nom différent à chaque fois. Cela évitera que chaque appel successif n’écrase le résultat de la mise en cache du précédent appel de element(). Par exemple:

echo $this->element(
    'helpbox',
    ['var' => $var],
    ['cache' => ['key' => 'first_use', 'config' => 'view_long']]
);

echo $this->element(
    'helpbox',
    ['var' => $differenVar],
    ['cache' => ['key' => 'second_use', 'config' => 'view_long']]
);

Ce qui est au-dessus va s’enquérir que les deux résultats d’element sont mis en cache séparément. Si vous voulez que tous les elements mis en cache utilisent la même configuration du cache, vous pouvez sauvegarder quelques répétitions, en configurant View::$elementCache dans la configuration de Cache que vous souhaitez utiliser. CakePHP va utiliser cette configuration, quand aucune n’est donnée.

Requêter les Elements à partir d’un Plugin¶

Si vous utilisez un plugin et souhaitez utiliser les elements à partir de l’intérieur d’un plugin, utilisez juste la syntaxe de plugin habituelle. Si la vue est rendue pour un controller/action d’un plugin, le nom du plugin va automatiquement être préfixé pour tous les elements utilisés, à moins qu’un autre nom de plugin ne soit présent. Si l’element n’existe pas dans le plugin, il ira voir dans le dossier principal APP:

echo $this->element('Contacts.helpbox');

Si votre vue fait partie d’un plugin, vous pouvez ne pas mettre le nom du plugin. Par exemple, si vous êtes dans le ContactsController du plugin Contacts:

echo $this->element('helpbox');
// et
echo $this->element('Contacts.helpbox');

Sont équivalents et résulteront à l’affichage du même element.

Pour les elements dans le sous-dossier d’un plugin (e.g., plugins/Contacts/sidebar/helpbox.ctp), utilisez ce qui suit:

echo $this->element('Contacts.sidebar/helpbox');

Préfix de Routing et Elements¶

Si vous avez configuré un préfix de routage, la résolution des chemins d’accès aux Elements peut chercher dans un chemin préfixé, comme les Layouts et les vues d’Action le font déjà. En partant du postulat que vous avez configuré le préfix « Admin » et que vous appelez:

echo $this->element('my_element');

L’element va d’abord être cherché dans src/Template/Admin/Element/. Si un tel fichier n’existe pas, il sera ensuite cherché dans le chemin par défaut.

Mettre en Cache des Sections de votre View¶

Cake\View\View::cache(callable $block, array $options = [])¶

Parfois, générer une section de l’affichage de votre view peut être coûteux à cause du rendu des View Cells ou du fait d’opérations de helper coûteuses. Pour que votre application s’exécute plus rapidement, CakePHP fournit un moyen de mettre en cache des sections de view:

// En supposant l'existence des variables locales
echo $this->cache(function () use ($user, $article) {
    echo $this->cell('UserProfile', [$user]);
    echo $this->cell('ArticleFull', [$article]);
}, ['key' => 'my_view_key']);

Par défaut, le contenu de la view ira dans la config de cache View::$elementCache, mais vous pouvez utiliser l’option config pour changer ceci.

Liste des Events¶

• View.beforeRender

• View.beforeRenderFile

• View.afterRenderFile

• View.afterRender

• View.beforeLayout

• View.afterLayout

Vous pouvez attacher les listeners d’events de votre application à ces events ou utiliser les Callbacks de Helper.