Subversion-Projekte lars-tiefland.prado

<com:TContent ID="Main">

<h1>Création de la page d'affichage des messages <tt>ListPost</tt></h1>

<p>

La page <tt>ListPost</tt> affiche les derniers messages sous forme de liste. S'il y a trop de messages, ils seront affichés dans différentes pages.

</p>

<p>

Avant que nous ne passions à l'implémentation, nous voudrions que notre page d'accueil pointe vers la page à venir <tt>ListPost</tt>, ceci dans le but d'afficher la liste des derniers messages dès qu'un utilisateur se connecte au site. Pour cela, nous allons modifier le fichier de configuration de l'application <tt>protected/application.xml</tt> de cette manière.

</p>

<com:TTextHighlighter CssClass="source" Language="xml">

......

<services>

  <service id="page" class="TPageService" DefaultPage="posts.ListPost">

    <pages MasterClass="Application.layouts.MainLayout" />

  </service>

</services>

</com:TTextHighlighter>

<p>

Nous alons maintenant créer le gabarit et le fichier de classe pour notre page <tt>ListPost</tt> : <tt>protected/pages/posts/ListPost.page</tt> et <tt>protected/pages/posts/ListPost.php</tt>.

</p>

<h2>Création du gabarit</h2>

<p>

Pour satisfaire les fonctionnalités de notre page <tt>ListPost</tt>, nous allons utiliser deux contrôles dans notre gabarit.

</p>

<ul>

<li><a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Repeater">TRepeater</a>: ce contrôle permet d'afficher principalement une liste d'éléments. La présentation de chacun ce ces éléments peut être défini soit par un gabarit interne, soit par un gabarit externe (choix que nous avons fait).</li>

<li><a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Pager">TPager</a>: ce contrôle permet de faire la pagination d'une liste d'éléments. Il interagit avec l'utilisateur pour définir quelle page doit être affiché dans un <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.List">contrôle de liste</a> (ie: <tt>TListBox</tt>) ou dans un <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Data">contrôle de données</a> (ie: <tt>TRepeater</tt>).</li>

</ul>

<p>

Ci-dessous le contenu du gabarit :

</p>

<com:TTextHighlighter CssClass="source" Language="prado">

<%@ Title="Mon Blog" %>

<com:TContent ID="Main">

<com:TRepeater ID="Repeater"

	ItemRenderer="Application.pages.posts.PostRenderer"

	AllowPaging="true"

	AllowCustomPaging="true"

	PageSize="5"

	/>

<com:TPager ControlToPaginate="Repeater" OnPageIndexChanged="pageChanged" />

</com:TContent>

</com:TTextHighlighter>

<p>

Dans la partie répétée <tt>TRepeater</tt>, nous indiquons que l'affichage du contenu est délégué à l'élément <tt>PostRenderer</tt> que nous allons créer après. Pour permettre à PRADO de trouver cette classe, nous fournissons l'espace de noms complet <tt>Application.pages.posts.PostRenderer</tt>, qui correspond au fichier <tt>protected/pages/posts/PostRenderer.php</tt>.

</p>

<p>

Nous définissons aussi quelques propriétés complémentaires du <tt>TRepeater</tt> pour activer la pagination. Et nous définissons la propriété <tt>ControlToPaginate</tt> du <tt>TPager</tt> afin qu'il sache quelle est la zone répetée à paginer.

</p>

<h2>Création du fichier de classe</h2>

<p>

En fonction du gabarit précédent, nous pouvons voir que notre fichier de classe doit implémenter un gestionnaire d'évènement pour <tt>pageChanged()</tt> (déclenché par <tt>OnPageIndexChanged</tt> du <tt>TPager</tt>). Nous devons aussi remplir les données qui apparaitront dans le <tt>TRepeater</tt>. Ci-dessous le source complet du fichier de classe :

</p>

<com:TTextHighlighter CssClass="source" Language="php">

class ListPost extends TPage

{

	/**

	 * Initialise le TRepeater.

	 * Cette méthode est appelé par le framework lors de l'initialisation de la page

	 * @param mixed param : paramètres de l'évènement

	 */

	public function onInit($param)

	{

		parent::onInit($param);

		if(!$this->IsPostBack)  // la page est chargée pour la première fois ?

		{

			// récupère le nombre total de messages

			$this->Repeater->VirtualItemCount=PostRecord::finder()->count();

			// rempli le TRepeater avec les données

			$this->populateData();

		}

	}

	/**

	 * Gestionnaire d'évènement pour OnPageIndexChanged du TPager.

	 * Cette méthode est appelée lors du changement de page

	 */

	public function pageChanged($sender,$param)

	{

		// change l'index de la page courante par le nouvel index

		$this->Repeater->CurrentPageIndex=$param->NewPageIndex;

		// rempli de nouveau le TRepeater

		$this->populateData();

	}

	/**

	 * détermine quelle page doit être affichée et remplie

	 * TRepeater avec les données lues

	 */

	protected function populateData()

	{

		$offset=$this->Repeater->CurrentPageIndex*$this->Repeater->PageSize;

		$limit=$this->Repeater->PageSize;

		if($offset+$limit>$this->Repeater->VirtualItemCount)

			$limit=$this->Repeater->VirtualItemCount-$offset;

		$this->Repeater->DataSource=$this->getPosts($offset,$limit);

		$this->Repeater->dataBind();

	}

	/**

	 * lis les données à partir de la base de données en utilisant les fonctionnalités offset et limit.

	 */

	protected function getPosts($offset, $limit)

	{

		// construit les critères de la requête

		$criteria=new TActiveRecordCriteria;

		$criteria->OrdersBy['create_time']='desc';

		$criteria->Limit=$limit;

		$criteria->Offset=$offset;

		// lit les messages en fonction des critères précédents

		return PostRecord::finder()->withAuthor()->findAll($criteria);

	}

}

</com:TTextHighlighter>

<h2>Création du <tt>PostRenderer</tt></h2>

<p>

Nous devons toujours créer la classe <tt>PostRenderer</tt>. Elle définit la manière dont sera affichée chaque ligne de notre <tt>TRepeater</tt>. Nous la créons en tant que gabarit de contrôle, ce qui nous permet d'utiliser notre système de gabarit. Le fichier de gabarit ainsi que notre fichier de classe seront sauvegardés respectivement sous <tt>PostRenderer.tpl</tt> et <tt>PostRenderer.php</tt> dans le dossier <tt>protected/pages/posts</tt>.

</p>

<h3>Création du gabarit pour <tt>PostRenderer</tt></h3>

<p>

Le gabarit définit la présentation des différentes informations d'un message : titre, nom, heure, contenu. Nous lions le titre à la page <tt>ReadPost</tt> qui affiche le détail du message.

</p>

<p>

L'expression <tt>$this->Data</tt> fait référence aux données provenant du <tt>TRepeater</tt>. Dans notre cas, c'est un objet de type <tt>PostRecord</tt>. Remarquez comment nous accédons au nom de l'auteur du message par <tt>$this->Data->author->username</tt>.

</p>

<com:TTextHighlighter CssClass="source" Language="prado">

<div class="post-box">

<h3>

<com:THyperLink Text="<%# $this->Data->title %>"

	NavigateUrl="<%# $this->Service->constructUrl('posts.ReadPost',array('id'=>$this->Data->post_id)) %>" />

</h3>

<p>

Auteur:

&lt;com:TLiteral Text="&lt;%# $this->Data->author->username %>" /><br/>

Heure:

<com:TLiteral Text="<%# date('m/d/Y h:m:sa', $this->Data->create_time) %>" />

</p>

<p>

<com:TLiteral Text="<%# $this->Data->content %>" />

</p>

</div>

</com:TTextHighlighter>

<h3>Création du fichier de classe pour <tt>PostRenderer</tt></h3>

<p>

Notre classe est très simple, elle hérite de <tt>TRepeaterItemRenderer</tt> et ne contient aucun autre code.

</p>

<com:TTextHighlighter CssClass="source" Language="php">

class PostRenderer extends TRepeaterItemRenderer

{

}

</com:TTextHighlighter>

<h2>Test</h2>

<p>

Pour tester la page <tt>ListPost</tt>, naviguons à l'URL <tt>http://hostname/blog/index.php</tt> (rappellez-vous, nous avons défini <tt>ListPost</tt> comme étant notre page d'accueil). Nous devrions obtenir le résultat suivant. vu que nous n'avons qu'un seul message pour le moment, le contrôle de pagination n'apparait pas. Plus tard, quand nous aurons fini la page <tt>NewPost</tt>, nous pourrons ajouter des messages et revenir ici pour tester notre contrôle de pagination.

</p>

<img src="<%~ output.gif %>" class="output" />

</com:TContent>