Views (Vues)¶

Templates de Vues¶

La couche view de CakePHP c’est la façon dont vous parlez à vos utilisateurs. La plupart du temps, vos vues afficheront des documents (X)HTML pour les navigateurs, mais vous pourriez aussi avoir besoin de fournir des données AMF à un objet Flash, répondre à une application distante via SOAP ou produire un fichier CSV pour un utilisateur.

Les fichiers de vue de CakePHP sont écrits en pur PHP et ont par défaut .ctp (Cakephp TemPlate) comme extension. Ces fichiers contiennent toute la logique de présentation nécessaire à l’organisation des données reçues du controller, dans un format qui satisfasse l’audience que vous recherchez. Si vous préférez utiliser un langage de template comme Twig, ou Smarty, une sous-classe de View fera le pont entre votre language de template et CakePHP.

Un fichier de vue est stocké dans /app/View/, 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 /app/View/Products/view.ctp.

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

• views: Les Views 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 éléments sont habituellement rendus dans les vues.

• layouts : fichiers de vue 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.

// app/View/Common/view.ctp
<h1><?php echo $this->fetch('title'); ?></h1>
<?php echo $this->fetch('content'); ?>

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

<?php
// app/View/Posts/view.ctp
$this->extend('/Common/view');

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

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

// Le contenu restant sera disponible en tant que block 'content'
// dans la vue parente.
echo h($post['Post']['body']);

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

Utiliser les Blocs de Vues¶

Les blocs de vue remplacent les $scripts_for_layout et fournissent une API flexible qui vous permet de définir des slots (emplacements), ou blocs, dans vos vues / layouts qui peuvent être définies ailleurs. Par exemple, les blocs pour implémenter des choses telles que les sidebars, ou des régions pour charger des ressources dans l’en-tête / pied de page du layout. Un block peut être défini de deux manières. Soit en tant que block capturant, soit en le déclarant explicitement. Les méthodes start(), append() et end() vous permettent de travailler avec les blocs capturant:

// Creer le block sidebar.
$this->start('sidebar');
echo $this->element('sidebar/recent_topics');
echo $this->element('sidebar/recent_comments');
$this->end();


// Le rattacher a la sidebar plus tard.
$this->append('sidebar');
echo $this->element('sidebar/popular_topics');
$this->end();

Vous pouvez aussi le rattacher à l’intérieur d’un block en utilisant start() plusieurs fois. La méthode assign() peut être utilisée pour nettoyer ou outrepasser un block à n’importe quel moment:

// Nettoyer le contenu précedent de la sidebar.
$this->assign('sidebar', '');

Dans 2.3, certaines nouvelles méthodes ont été ajoutées pour travailler avec les blocs. Le prepend() pour ajouter du contenu avant un block existant:

// Ajoutez avant la sidebar
$this->prepend('sidebar', 'ce contenu va au-dessus de la sidebar');

La méthode startIfEmpty() peut être utilisée pour commencer un bloc seulement si il est vide ou non défini. Si le block existe déjà, le contenu capturé va être écarté. C’est utile quand vous voulez définir le contenu par défaut de façon conditionnel pour un bloc, qui ne doit pas déjà exister:

// Dans un fichier de vue.
// Crée un block de navbar
$this->startIfEmpty('navbar');
echo $this->element('navbar');
echo $this->element('notifications');
$this->end();

// Dans une vue/layout parente
<?php $this->startIfEmpty('navbar'); ?>
<p>Si le block n est pas défini pour l instant - montrer ceci à la place</p>
<?php $this->end(); ?>

// Quelque part plus loin dans la vue/layout parent
echo $this->fetch('navbar');

Dans l’exemple ci-dessus, le block navbar va seulement contenir le contenu ajouté dans la première section. Puisque le block a été défini dans la vue enfant, le contenu par défaut avec la balise <p> sera écarté.

echo $this->fetch('sidebar');

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

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

<?php
// dans votre fichier de vue
$this->Html->script('carousel', array('inline' => false));
$this->Html->css('carousel', array('inline' => false));
?>

// dans votre fichier de layout.
<!DOCTYPE html>
<html lang="en">
    <head>
    <title><?php echo $this->fetch('title'); ?></title>
    <?php echo $this->fetch('script'); ?>
    <?php echo $this->fetch('css'); ?>
    </head>
    // rest du layout suit

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

// dans votre layout
echo $this->fetch('scriptBottom');

Layouts¶

Un layout contient le code de présentation qui entoure une vue. Tout ce que vous voulez voir dans toutes vos vues devra être placé dans un layout.

Le fichier de layout par défaut de CakePHP est placé dans /app/View/Layouts. Si vous voulez changer entièrement le look de votre application, alors c’est le bon endroit pour commencer, parce que le code de vue de rendu du controller est placé à l’intérieur du layout par défaut quand la page est rendue.

Les autres fichiers de layout devront être placés dans /app/View/Layouts. Quand vous créez un layout, vous devez dire à CakePHP où placer la sortie pour vos vues. Pour ce faire, assurez-vous que votre layout contienne $this->fetch('content'). Voici un exemple de ce à quoi un layout pourrait ressembler:

<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $this->fetch('title'); ?></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Include external files and scripts here (See HTML helper for more info.) -->
echo $this->fetch('meta');
echo $this->fetch('css');
echo $this->fetch('script');
?>
</head>
<body>

<!-- Si vous voulez afficher une sorte de menu pour toutes vos vues, mettez
le ici -->
<div id="header">
    <div id="menu">...</div>
</div>

<!-- Voilà l'endroit ou je souhaite que mes vues soient affichées -->
<?php echo $this->fetch('content'); ?>

<!-- Ajoute un footer sur chaque page affichée -->
<div id="footer">...</div>

</body>
</html>

Les blocks script, css et meta contiennent tout contenu défini dans les vues en utilisant le helper HTML intégré. Il est utile pour inclure les fichiers JavaScript et les CSS à partir des vues.

Le block content contient les contenus de la vue rendue.

$title_for_layout contient le titre de la page. Cette variable est générée automatiquement, mais vous pouvez la surcharger en la configurant dans votre controller/view.

Vous pouvez créer autant de layouts que vous souhaitez: placez les juste dans le répertoire app/View/Layouts, et passez de l’un à l’autre depuis les actions de votre controller en utilisant la propriété $layout de votre controller ou de votre vue:

// A partir d'un controller
public function admin_view() {
    // stuff
    $this->layout = 'admin';
}

// A partir d'un fichier de vue
$this->layout = 'loggedin';

Par exemple, si une section de mon site incorpore un plus petit espace pour une bannière publicitaire, je peux créer un nouveau layout avec le plus petit espace de publicité et le spécifier comme un layout pour toutes les actions du controller en utilisant quelque chose comme:

class UsersController extends AppController {
    public function view_active() {
        $this->set('title_for_layout', 'Voir les Utilisateurs actifs');
        $this->layout = 'default_small_ad';
    }

    public function view_image() {
        $this->layout = 'image';
        //sort une image de l\'utilisateur
    }
}

CakePHP dispose de deux fonctionnalités de layout dans le coeur (en plus du layout default de CakePHP) que vous pouvez utiliser dans votre propre application: “ajax” et “flash”. Le layout AJAX est pratique pour élaborer des réponses AJAX - c’est un layout vide (la plupart des appels ajax ne nécessitent qu’un peu de balise en retour, et pas une interface de rendu complète). Le layout flash est utilisé pour les messages montrés par la méthode Controller::flash().

Trois autres layouts, xml, js, et rss, existent dans le coeur permettant de servir rapidement et facilement du contenu qui n’est pas du text/html.

class UsersController extends AppController {
    public function view_active() {
        $this->layout = 'Contacts.contact';
    }
}

Elements¶

Beaucoup d’applications ont des petits blocks de code de présentation qui doivent être répliqués d’une page à une autre, parfois à des endroits différents dans le layout. CakePHP peut vous aider à répéter des parties de votre site web qui doivent être réutilisées. Ces parties réutilisables sont appelées des Elements. Les publicités, les boites d’aides, les contrôles de navigation, les menus supplémentaires, les formulaires de connexion et de sortie sont souvent intégrés dans CakePHP en elements. Un element est tout bêtement une mini-vue qui peut être inclue dans d’autres vues, dans les layouts, et même dans d’autres elements. Les elements peuvent être utilisés pour rendre une vue plus lisible, en plaçant le rendu d’éléments répétitifs dans ses propres fichiers. Ils peuvent aussi vous aider à réutiliser des fragments de contenu dans votre application.

Les elements se trouvent dans le dossier /app/View/Elements/, et ont une extension .ctp. Ils sont affichés en utilisant la méthode element de la vue:

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

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

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

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

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

class PostsController extends AppController {
    // ...
    public function index() {
        $posts = $this->paginate();
        if ($this->request->is('requested')) {
            return $posts;
        }
        $this->set('posts', $posts);
    }
}

<h2>Derniers Posts</h2>
<?php
  $posts = $this->requestAction(
    'posts/index/sort:created/direction:asc/limit:5'
  );
?>
<ol>
<?php foreach ($posts as $post): ?>
      <li><?php echo $post['Post']['title']; ?></li>
<?php endforeach; ?>
</ol>

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

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

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

echo $this->element('helpbox', array(), array('plugin' => 'Contacts'));

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

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

Créer vos propres classes de vue¶

Vous avez peut-être besoin de créer vos propres classes de vue pour activer des nouveaux types de données de vue, ou ajouter de la logique supplémentaire de rendu de vue personnalisée. Comme la plupart des components de CakePHP, les classes de vue ont quelques conventions:

• Les fichiers de classe de View doivent être mis dans App/View. Par exemple App/View/PdfView.php.

• Les classes de View doivent être suffixées avec View. Par exemple PdfView.

• Quand vous référencez les noms de classe de vue, vous devez omettre le suffixe View. Par exemple $this->viewClass = 'Pdf';.

Vous voudrez aussi étendre View pour vous assurer que les choses fonctionnent correctement:

// dans App/View/PdfView.php

App::uses('View', 'View');
class PdfView extends View {
    public function render($view = null, $layout = null) {
        // logique personnalisée ici.
    }
}

Remplacer la méthode render vous laisse le contrôle total sur la façon dont votre contenu est rendu.

API de View¶

class View¶

Les méthodes de View sont accessibles dans toutes les vues, element et fichiers de layout. Pour appeler toute méthode de view, utilisez $this->method()

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

Les Views ont une méthode set() qui est analogue à set() qui se trouvent dans les objets du controller. Utiliser set() à partir de votre fichier de vue va ajouter les variables au layout et aux elements qui seront rendus plus tard. Regarder Les Méthodes du Controller pour plus d’informations sur l’utilisation de set().

Dans votre fichier de vue, vous pouvez faire:

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

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

View::get(string $var, $default = null)¶

Récupère la valeur d’une viewVar avec le nom de $var.

Depuis 2.5 vous pouvez fournir une valeur par défaut dans le cas où la variable n’est pas déjà définie.

Modifié dans la version 2.5: L’argument $default a été ajouté dans 2.5.

View::getVar(string $var)¶

Récupère la valeur de viewVar avec le nom $var.

Obsolète depuis la version 2.3: Utilisez View::get() à la place.

View::getVars()¶

Récupère une liste de toutes les variables de view disponibles dans le cadre de rendu courant. Retourne un tableau des noms de variable.

View::element(string $elementPath, array $data, array $options = array())¶

Rend un element ou une vue partielle. Regardez la section sur Elements pour plus d’informations et d’exemples.

View::uuid(string $object, mixed $url)¶

Génère un ID de DOM unique pour un objet non pris au hasard, basé sur le type d’objet et l’URL. Cette méthode est souvent utilisée par les helpers qui ont besoin de générer un ID de DOM unique pour les elements comme le JsHelper:

$uuid = $this->uuid(
  'form',
  array('controller' => 'posts', 'action' => 'index')
);
//$uuid contains 'form0425fe3bad'

View::addScript(string $name, string $content)¶

Ajoute du contenu au buffer des scripts internes. Ce buffer est rendu disponible dans le layout dans $scripts_for_layout. Cette méthode est utile quand vous créez des helpers qui ont besoin d’ajouter du JavaScript ou du CSS directement au layout. Gardez à l’esprit que les scripts ajoutés à partir du layout, ou des elements du layout ne seront pas ajoutés à $scripts_for_layout. Cette méthode est plus souvent utilisée de l’intérieur des helpers, comme pour les helpers JSHelper et HTMLHelper.

Obsolète depuis la version 2.1: Utilisez les fonctionnalités Utiliser les Blocs de Vues à la place.

View::blocks()¶

Récupère les noms de tous les blocks définis en tant que tableau.

View::start($name)¶

Commence un block de capture pour un block de vue. Regardez la section Utiliser les Blocs de Vues pour avoir des exemples.

Nouveau dans la version 2.1.

View::end()¶

Termine le block de capture ouvert le plus en haut. Regardez la section sur les Utiliser les Blocs de Vues pour avoir des exemples.

Nouveau dans la version 2.1.

View::append($name, $content)¶

Ajoute dans le block avec $name. Regardez la section sur les Utiliser les Blocs de Vues pour des exemples.

Nouveau dans la version 2.1.

View::prepend($name, $content)¶

Ajoute avant dans le block avec $name. Regardez la section Utiliser les Blocs de Vues pour des exemples.

Nouveau dans la version 2.3.

View::startIfEmpty($name)¶

Commence un block si il est vide. Tout le contenu dans le block va être capturé et écarté si le block est déjà défini.

Nouveau dans la version 2.3.

View::assign($name, $content)¶

Assigne la valeur d’un block. Cela va surcharger tout contenu existant. Regardez la section sur les Utiliser les Blocs de Vues pour des exemples.

Nouveau dans la version 2.1.

View::fetch($name, $default = '')¶

Récupère la valeur d’un block. Si un block est vide ou non défini, “” va être retourné. Regardez la section sur les Utiliser les Blocs de Vues pour des exemples.

Nouveau dans la version 2.1.

View::extend($name)¶

Etend la vue/element/layout courant avec celle contenu dans $name. Regardez la section sur les Vues Étendues pour les exemples.

Nouveau dans la version 2.1.

property View::$layout¶

Définit le layout qui va entourer la vue courante.

property View::$elementCache¶

La configuration de cache utilisée pour les elements de cache. Définir cette propriété va changer la configuration par défaut utilisée pour mettre en cache les elements. Celle par défaut peut être surchargée en utilisant l’option “cache” dans la méthode element.

property View::$request¶

Une instance de CakeRequest. Utilisez cette instance pour accéder aux informations qui concernent la requête courante.

property View::$output¶

Contient le dernier contenu rendu d’une view, ou d’un fichier de view, ou d’un contenu de layout.

Obsolète depuis la version 2.1: Utilisez $view->Blocks->get('content'); à la place.

property View::$Blocks¶

Une instance de ViewBlock. Utilisé pour fournir la fonctionnalité des blocks de view dans le rendu de view.

Nouveau dans la version 2.1.

En savoir plus sur les vues¶