affichage de la liste de jeux

Comme prévu, nous souhaitons créer notre propre page d’accueil (sinon, où est l’intérêt ? 🙂

Aussi, voici ce que nous souhaitons obtenir en première étape: l’affichage de la fiche d’un jeu vidéo:

figure 2.4.1 - Fiche d'une jeu vidéo
figure 2.4.1 – Fiche d’un jeu vidéo

Ce qui se traduit côté code “HTML/Groovy” par les lignes suivantes dans le fichier app/view/Application/index.html:

#{extends 'main.html' /} <div id="games" class="games"> <h1>&{'home.games.title'}</h1> #{if games} #{list items:games, as:'game'} #{set title:'Home / '+game.platform+'/'+game.title /} <div class="game" id="game_${game.id}">                         <div class="title">         <span>#${game.id}.</span>         ${game.platform}/${game.title}                         </div> <div class="side"> #{if game.cover} <div class="cover"> <img src="public/images/games/${game.platform}/${game.title}/cover/${game.cover}.resized" title="${game.platform}/${game.title}" width="60"/> </div> #{/if} <div class="tags"> </div> </div> <div class="info"> #{if game.description} <div class="label">&{'home.games.game.description'}</div> <div class="bloc">${game.description}</div> #{/if} #{if game.testContent} <div class="label">&{'home.games.game.test'}</div> <div class="bloc">${game.testContent}</div> #{/if} </div> </div> #{/list} #{/if} #{else} <p>&{'home.games.noitems'}</p> #{/else} </div>

listing 2.4.1 – Template index.html pour l’affichage de la liste des jeux

les notations

On distingue plusieurs notations utiles qui vont permettre le rendu de plusieurs types d’informations issues de différentes sources:

  • &{} permet l’affichage de messages issus des fichier "messages.[langue]", exemple: &{'home.games.title'},
  • ${} permet l’affichage de variables d’entités,
  • #{} permet les tests de structures et boucles.

Les méthodes intéressantes sont:

  • #{if}#{/if} délimite une condition,
  • #{else}#{/else} délimite le cas échéant de la condition,
  • #{list items:[liste], as:'[item]'} permet de parcourir une liste [liste] avec comme index l’objet [item]. il est alors possible de référencer chaque occurense dans la liste par “[item].attribut”, où attribut est un attribut valorisé de l’occurence.

Par exemple, la génération d’une liste de prénoms d’utilisateurs:

<ul> #{list:users, as: 'user'} <li>@user.firstname.</li> #{/list} </ul>

listing 2.4.2 – Exemple de boucle pour l’affichage d’une liste

Référons nous à la documentation présente sur le site de Play! pour découvrir toutes les subtilités de Groovy, qui est le langage utilisé ici.

note: si nous n’avons pas accès à internet pendant le dévelopement, pour une raison quelconque, nous pouvons accèder à tout moment à la documentation de Play! en démarrant le serveur play intégrer (commande play start@) dans un projet vierge (par exemple) et en appelant l’urlhttp://localhost:9000/@documentation.

template des pages

Notons l’importance de #{extends main.html /} qui permet à notre page d’hériter de la mise en page de notre site située dansapp/view/main.html.

Pour le moment, cette page se résume à :

<!DOCTYPE html> <html> <head> <title>#{get 'title' /}</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}"> #{get 'moreStyles' /} <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}"> <script src="@{'/public/javascripts/jquery-1.4.2.min.js'}" type="text/javascript" charset="utf-8"></script> #{get 'moreScripts' /} </head> <body> #{doLayout /} </body> </html>

listing 2.4.3 – Template de base des page : main.html

Nous constatons l’utlisation du doctype HTML5. Nous ferons abstraction des nombreuses déclarations de début de fichier pour nous concentrer sur celles qui méritent toute notre attention:

#{doLayout /}

C’est via cette simple balise que toutes les pages héritant de main.html (#{extends 'main.html'}) verront ici leur contenu inséré.

Modifions maintenant l’aspect globale de notre site en personnalisant le template app/views/main.html :

Ajoutons la zone de titre (header) et la zone de pied de page (footer):

<!DOCTYPE html> <html> <head> <title>#{get 'title' /}</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}"> #{get 'moreStyles' /} <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}"> <script src="@{'/public/javascripts/jquery-1.4.2.min.js'}" type="text/javascript" charset="utf-8"></script> #{get 'moreScripts' /} </head> <body> <header> <h1>&{'site.title'}</h1> <h2>&{'site.subtitle'}</h2> <nav class="menu"> <ul> #{if !user} <li>                 </li> #{/if} #{if user} <li>                 </li> #{/if} </ul> </nav> </header> <section id="content"> #{doLayout /} <div class="clear"></div> </section> <footer> <p>&{'site.footer.label'} - &{'site.footer.credits', "http://www.famfamfam.com/lab/icons/silk/"}</p> </footer> </body> </html>

listing 2.4.4 – refonte de main.html pour intégrer entête, menu et pied de page

Nous notons dans la ligne :

<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">

qui charge la feuille de styles pour notre site, le chemin vers la feuille de styles est calculée par le tag @{’/public/stylesheets/main.css’}.

Mais regardons de plus près la commande #{get 'moreStyles' /}. Celle permettra dans tout sous-template d’ajouter la définition d’une feuille de styles supplémentaire, sans avoir a la référencer systématiqement dans le template de la page.

...         #{set 'moreStyles'}         <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/xxx.css'}" />         #{/set} ...

listing 2.4.5 – Ajout d’un style dans un sous template qui sera généré dans le main.html

Il existe également le #{get 'moreScripts'}, procédant de la même manière pour les fichiers javascript.

note: Notons le copyright en fin de page relatif aux icônes que nous avons embarqué dans nos pages, icônes qui proviennet dewww.famfamfam.com.

Découpage du modèle de page

Nous allons diviser notre page de la manière suivante:

HTML HEADER NAV "menu" SECTION "content" FOOTER
  • Le header est l’entête de page, contenant titre, sous-tire, et nav, le menu de navigation,
  • La Section “content” contient (sic!!) les données à afficher, ici les fiches des différents jeux vidéo,
  • le codecodecodecodecode

Publicités