Extrait du chapitre 2.4 du livre que je suis en train d'écrire sur le Play!framework. Le but de ce livre est la découverte de l'utilisation du framework Play! au travers d'un exemple de site web communautaire de partage de liste de jeux video.

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>&{'home.actions.login'}
                          </li>
          #{/if}
          #{if user}
              <li>&{'home.actions.logout'}
                          </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 Footer est le pied de page, contenant le information traditionnelle de copyright et autres informations utiles (Il est utilisé depuis peu également comme sources d’information pour les fils RSS par exemple).

figure 2.4.2 - Page d'accueil personnalisée
^{figure 2.4.2 – Page d’accueil personnalisée}

Fonction de filtrage et de recherche sur la liste des jeux

Filtrage par platforme

Ajoutons maintenant, en plus de la liste de jeux, un moyen de filtrer celle-ci par un type de plateforme. Pour cela, nous devons récupérer une liste des valeurs distinctes du champs platform dans l’entité Game.

MODIFICATION DU CONTRÔLEUR

le contrôleur Application doit être modifier pour ajouter une liste de plateformes dans les objets mis à disposition du render. Aussi, nous devons modifier la méthode index() comme ci-dessous:

static void index(){
    ...
    List<Game> platforms = Game.find(
        "select distinct g.platform "+
        "from Game g "+
        "order by g.platform").fetch();
    ...
    render(games,platforms);
  }

^{listing 2.4.6 – Ajout de la liste des plateforme de jeux a dessein de filtrage de la liste des jeux}

TAG #{PLATFORMS /}

Intégrons une nouvelle notion: les tags ! Grâce à ce nouvelle élement, nous allons pouvoir éviter les répétitions de code dans les templates. Nous souhaitons afficher dans nos page la liste des platformes. Pour cela, créons un nouveau fichier app/views/tags/platforms.html:

#{if _userConnected}
        #{if _items}
                <h2>&{'home.platforms.title'}</h2>
                <ul>
                    <li>
                            
                                    &{'home.platforms.filter.showAll'}
                    </li>
                #{list items:_items, as:'platform'}
                    <li>
                            
                                    ${platform}
                    </li>
                #{/list}
                </ul>
        #{/if}
#{/if}

^{listing 2.4.7 – Affichage de la liste des plateformes de jeux}

Ensuite, dans le template de page index.html, nous référencerons ce nouveau tag dont la notation est la suivante:

#{platforms items:platforms, userConnected:user}

TAG #{GAMES /}

Nous allons en profiter également pour créer un tag pour la liste des jeux, qui nous sera utile dans le paragraphe suivant, concernant la recherche par nom, le fichier du tag sera :app/views/tags/games.html.

#{if _userConnected}
        #{if _items}
        <h2>&{'home.games.title', _userConnected?.username}</h2>
            #{list items:_items, as:'game'}
                #{set title:'Home / ' + filterPlatform /}                
                <div class="game" id="game_${game.id}">
                    <div class="title">
                            <span>#${game.id}.</span> 
                                    ${game.title}
                    </div>
                    <div class="side">
                        #{if game.cover}
                        <div class="cover">
                            
                                    
                        </div>
                        #{/if}
                        <div class="tags">
                        </div>
                    </div>
                    <div class="info">
                        <span class="platform">
                                ${game.platform}
                        </span>
                        #{if game.description}
                        <div class="bloc">${game.description}</div>
                        #{/if}
                    </div>
                </div>
            #{/list}
        #{/if}
        #{else}
            <p>&{'home.games.noitems'}</p>
        #{/else}
#{/if}
#{else}
        <p>&{'home.anonymous.welcome.message',"Register/create","Goto to Register form"}</p>
#{/else}

^{listing 2.4.8 – Tag #{games/} présentant la liste des jeux}

note: Nous nous proposerons d’enrichir notre liste de jeux avec l’utilisation de Jquery lightbox, un plugin permettant l’affichage modal des images des couvertures des jeux dans un prochain chapître.

TEMPLATE INDEX.HTML

Ainsi, dans le template app/views/Application/index.html nous intégrons les deux nouveaux tags; la liste des platformes #{platforms /} et la liste des jeux #{games /} :

#{extends 'main.html' /}
        <section id="platforms" class="platforms">
                #{platforms items:platforms, userConnected:user /}
        </section>
        <section id="games" class="games">
                #{games items:games, userConnected:user/}
        </section>

^{listing 2.4.9 – Intégration de nos nouveaux tags #{platforms/} et #{games/}}

Ce qui nous donnera dans notre navigateur:

figure 2.4.3 - Intégration de la liste des plateformes dans la page d'accueil
^{figure 2.4.3 – Intégration de la liste des platformes dans la page d’accueil}

Recherche par un nom (title) de jeu

Nous souhaitons pouvoir proposer une recherche sur le nom d’un jeu afin de retrouver rapidement la fiche d’un jeu. Nous allons donc réaliser un filtrage sur le titre du jeu (Game.title).

Pour cela, ajoutons un champs de recherche. Editons le fichier du tag app/views/tags/platforms.html pour ajouter un tag input de type texte portant le nom search, au tout début de la section platforms :

#{if _userConnected}
                <section id="searchForm">
                        <label for="search">&{'home.search.label'}</label><br />
                        <input type="text" name="search" id="search" size="25" maxlength="40"/>
                        <script type="text/javascript">
                        $("#search").keyup(function(event) { // retour simple
                                if(event.keyCode==13){
                                        $.post('@{Application.filterByGameTitle()}',
                                                        {search: $("#search").val()}, 
                                                        function(data){
                                                                $('#games').html(data);
                                                        }
                                        );
                                }
                        });
                        </script>
                </section>
                #{if _items}
                        ...
                #{/if}
        #{/if}

^{listing 2.4.10 – champs search dans la section searchForm}

Ainsi, la recherche est poussée via JQuery et son composant $.post(). Ceci évite un rechargement complet de la page en ciblant uniquement la zone de la liste des jeux.

Modifions le controleur Application et ajoutons la méthode filterByGameTitle() comme ci-dessous pour réaliser le traitement de recherche:

/**
         * Recherche dans la liste de jeux de l'utilisateur connecté des jeux
         * contenant la chaîne <code>search</code> dans le titre du jeu. Se base
         * également sur la plateforme sélectionnée et sur l'utilisateur connecté.
         * 
         * @param search
         *            nom ou partie du nom de jeu à rechercher
         */
        public static void filterByGameTitle(String search) {
                renderArgs.put("search", search);
                // récupération de l'utilisateur connecté
                User user = (User) renderArgs.get("user");
                // recupération de la plateforme (si présente)
                //String platform = (String) renderArgs.get("filterPlatform");
                // Constitution de la liste des plateformes distinctes
                List<Game> platforms = Game.find(
                                "select distinct g.platform from Game g order by g.platform")
                                .fetch();
                // recherche des jeux correspondant à game.title=%search% et
                // game.platform=platefom
                List<Game> games = Game.find(
                                "select g from Game g " + "where lower(g.title) like ? "
                                                + "and g.author=? " + "and g.publish=true "
                                                + "order by g.platform, g.title ",
                                "%" + search.toLowerCase() + "%", user).fetch();
                // rendu de la page
                renderTemplate("Application/search.html", games, user, platforms);
        }

^{listing 2.4.11 – recherche de jeux correspondant à la saisie du champs search}

Ainsi, il nous faut créer un template pour le rendu du résultat de la recherche: ce sera app/views/Application/search.html

#{games games:games, user:user /}

^{listing 2.4.12 – template d’affichage du resultat de recherche: search.html}

Simple non ?

Nous obtenons alors le rendu suivant dans notre navigateur:

figure 2.4.4 - Recherche par titre et filtre sur les plateformes
^{figure 2.4.4 – Recherche par titre et filtre sur les plateformes}

Extrait du chapitre 9.1 du livre que je suis en train d'écrire sur le Play!framework. Le but de ce livre est la découverte de l'utilisation du framework Play! au travers d'un exemple de site web communautaire de partage de liste de jeux video.

Qui n’a pas pester contre la recopie de nombreuse fois d’une même portion de code HTML dans une page, destiné au rendu d’un objet ?
Avec la possibilité de créer des tags aussi facilement qu’on écrit une vue dans Play !, il serait réellement dommage de passer à côté.

Définition

Le tag un simple fichier HTML dans le répertoire views/tags. Le nom du fichier va fixer le nom du tag: view/tags/mytag.html donnera accès au tag « mytag ».

mon tag

Appel

L’appel à notre tag se fera via la balise #{mytag /}
Dans notre page HTML :

<p>Mon tag de rendu</p>
 #{mytag /}

Passage de paramètres

Si nous souhaitons passer des paramètres pour obtenir un rendu dynamique, dans le fichier de définition du tag, il suffit d’ajouter les balises de votre choix, préfixées d’un caractère _(souligné, ou underscore pour les anglophones) :

mon tag avec un paramètre : _parameter

L’appel à ce tag sera :

<p>Mon tag de rendu</p>
 #{mytag parameter :'premier paramètre' /}

Si nous souhaitons passer un objet en paramètre, par exemple un objet User, la définition du tag sera app/views/tags/userdetails.html :

<div class='userdetails'>
        <h1>Utilisateur</h1>
        <ul>
                <li><strong>nickname :</strong> _user.username</li>
                <li><strong>prénom :</strong> _user.firstname</li>
                <li><strong>nom :</strong> _user.lastname</li>
                <li><strong>mail :</strong> _user.email</li>
        </ul>
</div>

et l’appel à ce tag devient : (apps/views/Application/userdetails.html)

<p>Utilisateur connecté :</p>
#{userdetails user:connectedUser /}

où connectedUser est un objet de type User, représentant l’utilisateur connecté. Et ci-dessous découvrons le rendu obtenu :

^{figure 9.1.1 – Tag présentant les détails d’un utilisateur!}

Thanks to this post, a clear explaination about how to specify a Many-to-many relation between 2 entities with a <master> and <slaves>.

When you map a same "ManyToMany relationShip" in both directions, you
need to tell which of these two directions is (kind of) the "master".
So : one of your @ManyToMany annotations must have the info :
"mappedBy" :
For example : if you have two entities : "Event" and "User", and a
User can "follow" several "Events",
and an Event can be followed by several Users ("ManyToMany
relationShip").
You would have :
in the entity User :
@ManyToMany(cascade=CascadeType.ALL)
public Set<Event> followedEvents = new HashSet<Event>();
in the entity Event :
@ManyToMany(mappedBy="followedEvents")
public Set<User> followsByUsers = new HashSet<User>();

Thanks to Dam74 !

One more time, surfing on the web, I've jst discover a very good source of information about "how to use Git" and how to integrate with web site github.com.

This site a http://gitcasts.com/ and some very good piece of video a proprosed to user, from 123'user to "Advanced G33K inside user".

http://blip.tv/file/4094595
video 1 - Git Setup and init

Have fun !

Les modules

Comme mentionné précédemment, nous souhaitons mettre en oeuvre deux plugins du framework Play! Ces deux plugins, pourtant natifs, ne sont pas activé par défaut. Nous allons le faire de ce pas.

Activation CRUD

Pour activer un plugin engénéral, il faut éditer le fichier [projectname]/conf/application.conf et se rendre vers la section traitant des … modules !

Elle a à quelques choses prêt cette tête :

# Additional modules
        # ~~~~~
        # A module is another play! application. Add a line for each module you want
        # to add to your application. Modules path are either absolutes or relative to
        # the application root.
        # They get loaded from top to bottom; Syntax: module.{name}={path}
        #
        # Keep the next line as is to help the play script to manage modules.
        # ---- MODULES ----

Pour en ajouter, il suffit de procéder à l’ajout d’une ligne à la syntaxe suivante:

module.[modulename] = ${play.path}/modules/[modulename]-[version]

où:

modulename est le nom du module à activer dans votre projet,
version est la version cible du dit module, qui est facultatif.

CRUD

Nous souhaitons donc ajouter le module CRUD:

module.crud=${play.path}/modules/crud

Le module apportant un certain nombre de fonctionnalités, il est accompagne de nouvelles pages qui seront dynamiquement créés. pour permettre l’accés à ces pages, nous allons devoir découvrir une nouvelle fonctionnalité de Play!: les routes !

Commençons par finir de configurer notre module CRUD en ajoutant dans le fichier myplayapp/conf/routes la ligne suivante, en fin de fichier:

# Import the default CRUD routes
        GET     /admin             module:crud

Cette déclaration va permettre d’accéder au page générée dynamiquement a partir de l’url http://localhost:9000/admin, (pour un accès depuis le server play en mode run).

Voilà. Comme vu déjà auparavant, on s’apperçoit que les fonctionnalité de Play! sont d’une simplicité de mise en oeuvre déconcertante. Tout développeur Java se souvient des nombreux fichier de configuration qu’ils soient .properties, .conf ou .xml, ils étaient dans tous les cas nombreux. Ici, point de complexité, juste du bon sens.

nota: Il est important de noter que suite à chaque ajout/déclaration d’un nouveau plugin dans votre projet, il est IMPERATIF de regénéré les dépendance du projet eclipse via la commande play eclispify . sous peine d’avoir des erreur de compilation ainsi que des defaillances du système de complétion automatique offert par Eclipse. Cette remarque est également vraie pour NetBeans.

CRUD sur mes entités ?

CRUD, pour les néofites, est un néologisme très anglicisé, correspondant à *C*reate *R*etrieve *U*pdate *D*elete, et signifiant la possibilité de fournir de façon extrêmement simple une interface utilisateur afin d’accéder aux 4 opérations de base pour chaque entité déclaré dans lepackage models.

Ainsi pour notre entité Game, nous souhaitons avoir rapodement une interface simple permettant la gestion de la liste des entités Game.

Pour celà, une simple opération permet de définir un contrôleur spécifique à notre entité. Créons la classe Games dans le package controllers. Celle-ci doit hériter de la classe CRUD mise à disposition par le plugin précédemment activé.

La classe sera :

/**
         * Project myplayapp Part 2
         * Admin zone
         */
        package controllers;

/**
* CRUD management for Game entity.
* @author McGivrer
*
*/
public class Games extends CRUD {

}

Puis, prenez votre élant et lancer le serveur play en mode DEV via la commande:

$ play run

et constatez la beauté du geste ;)

La zone d’administration que nous accédons par http://localhost:9000/admin donne la page ci-dessous:

figure 2.5 - Accueil de la partie principale générée par le plugin CRUD
^{figure 2.5 – Accueil de la partie principale générée par le plugin CRUD}

Si nous cliquons sur le lien “Games” représentant notre nouveau contrôleur, nous pouvons voir la page spécifique à notre entité Game:

figure 2.6 - Page générée par CRUD pour l'entité Game via le contrôleur Games
^{figure 2.6 – Page générée par CRUD pour l’entité Game via le contrôleur Games}

Et enfin, si nous cliquons sur le lien “Add”, situé en haut à droite de la page en cours, vous voyez alors le formulaire généré par CRUD pour la modification/création d’une (nouvelle) occurence de Game:

^{figure 2.7 – Formulaire d’édition d’une entité Game}

I18n

Ok, vous me direz que ces formulaires et pages auto générés sont fort beaux, mais les labels des champs ne sont pas trop parlant. Qu’à cela ne tienne, allons modifier ces libellés.

Pour celà, penchons nous sur un autre point fort de Play! : la gestion de l’internationnalisation (le fameux i18n !).

Vous constaterez certainement, tôt ou tard, la présence, certe bizard, d’un fichier “messages” dans le répertoire conf de votre projet Play!. Et bien, ouvrons le pour voir !

# You can specialize this file for each language.
        # For example, for French create a messages.fr file
        #

Bon, ok il est vide de tout contenu, sauf d’un subtile commentaire. Et pourtant, en une seule phrase, tout est dit !

Vous voulez accéder à des textes subtilement traduit dans une langue particulières, et bien simplement créez le fichier messages.[ext] our [ext] sera le code i18 de la langue cible.

Ainsi pour nous, bon vieux français, nous devrons créer un fichier “messages.fr” et celui là comportera tous les message dans langue de molière que nous souhaitons voir apparaitre dans nos pages.

Pour information, la sélection de la langue à afficher dans les pages pour un utilisateur se fera en fonction de la langue configurée dans les options des navigateurs web. par exemple sous firefox, ce paramétrage se trouve dans “Preferences → Advanced → Languages”:

figure 2.8 - Configuration de la langue d'affichage dans Firefox
^{figure 2.8 – Configuration de la langue d’affichage dans Firefox}

figure 2.9.1 - Configuration de la langue d'affichage dans Chromium - étape 1
^{figure 2.9.1 – Configuration de la langue d’affichage dans Chromium – étape 1}

figure 2.9.2 - Configuration de la langue d'affichage dans Chromium - étape 2
^{figure 2.9.2 – Configuration de la langue d’affichage dans Chromium – étape 2}

Donc, nous devons tout d’abord déclarer la liste des langues supportées par notre application. Nous nous contenterons ici,,dans le cadre de ce tutoriel, de supporter l’anglais et le français. Aussi, le fichier conf/application.conf sera modifié comme suit:

# i18n
        # ~~~~~
        # Define locales used by your application.
        # You can then place localized messages in conf/messages.{locale} files
        application.langs=fr,en

Créons maintenant un fichier conf/messages.fr pour le français, et ajoutons-y nos libellés:

# You can specialize this file for each language.
        # For example, for French create a messages.fr file
        #
        title=Titre
        platform=Platforme
        description=Description
        publish=Publié
        testContent=Texte du test
        developerStudio=Studio de développement
        editor=Editeur
        yearOfPublication=Année d'édition
        note=Note
        cover=Jaquette

ce qui donnera dans l’affichage de la page de modification de Game:

^{figure 2.10.1 – Langue française sur le navigateur}

Si nous créons la version anglaise dans le fichier conf/messages.en :

# You can specialize this file for each language.
        # For example, for French create a messages.fr file
        #
        title=Title
        platform=Platform
        description=Description
        publish=Publish
        testContent=Test Content
        developerStudio=Developer Studio
        editor=Editor
        yearOfPublication=Year
        note=Note
        cover=Cover

^{figure 2.10.2 – Langue anglais sur le navigateur}

Customisation de l’affichage

Si les affichage par défaut dans les liste de type d’entiés et des listes des occurences de ces entités, il est possible facilement de modifier ces affichages.

Titre dans les Listes d’entités

Pour modifier la liste des entités, il suffit d’ajouter dans les Entity une méthode toString() qui permettra de formater l’affichage d’un objet de type entité dans une liste. Ainsi, pour un object de type Game, on implémentera la méthode toString() comme ci-dessous:

public String toString(){
                return this.title + "("+this.yearOfPublication+")";
        }

La liste sera alors affichée de la manière suivante :

figure 2.11 - Titre d'un jeu personnalisé dans la liste des Games
^{figure 2.11 – Titre d’un jeu personnalisé dans la liste des Games}

Colonnes affichés dans les listes

Vous pouvez également donner plus d’information dans les listes affichées. pour cela, vous passez par les fichier list.html des controllers “entities”.

Pour cela, créons un répertoire views/Games et dans celui-ci créer le fichier list.html et copiez-y les lignes ci-dessous:

#{extends 'CRUD/layout.html' /}
        <div id="crudList" class="${type.name}">
                <h2 id="crudListTitle">&{'crud.list.title', type.name}</h2>
                <div id="crudListSearch">
                        #{crud.search /}
                </div>
                <div id="crudListTable">
                        #{crud.table fields:['title', 'yearOfPublication', 'publish', 'platform'] /}
                </div>
                <div id="crudListPagination">
                        #{crud.pagination /}
                </div>
                <p id="crudListAdd">
                        &{'crud.add', type.modelName}
                </p>
        </div>

vous remarquerez la ligne :

#{crud.table fields:['title', 'yearOfPublication', 'publish', 'platform'] /}

Celle-ci liste les champs que vous souhaitez afficher dans la liste des jeux.

figure 2.12 - Liste de champs personnalisé pour la liste des jeux videos
^{figure 2.12 – Liste de champs personnalisé pour la liste des jeux videos}

Vous remarquerz qu’ici aussi, tout les libellés sont traduits.

Voilà pour aujourd’hui, nous arrêterons là. La suite se concentrera sur le module Secure et son implémentation, ainsi que sur la customisation de la page d’accueil de l’application. Nous en profiterons également pour mettre en place une belle zone d’administration avec plein d’information.

Il sera également temps de revoir nos diverses entités pour en faire un beau modèle fonctionnel.

Comme indiqué dans le précédent article, le Play!framework est une avancée notable dans le paysage Java. C'est en effet un framework Agile de développement d'application web, proposant certains précepts en vogue aujourd'hui dans le paysage du web: a savoir, le pattern MVC, la persistance via JPA, des annotations à foison, le principe de règles de notations plutôt que configuration, et j'en passe, et des meilleures. Bref, tout ce que d'autre framework basés sur d'autres langages proposent depuis quelques temps déjà.

Il faut bien avouer que c'était un atout qui manquait sévèrement à notre langage favori qu'est Java. Mais c'est maintenant un retard comblé par Play!.

Première application

Ok, nous allons nous pencher sur la création de notre première application. Pour commencer, assurons nous que notre framework est bien installé.

Installation

Téléchargez l'archive contenant le framework et dézippez la dans le répertoire de votre choix sur votre machine; par exemple dans ~/tools/play si vous êtes sous Linux/Ubuntu oubien sur D:\tools\play sous Windows.

Ensuite, ajoutez ce nouveau chemin à votre chemin système.

Sous Linux, éditer votre fichier ~/.bashrc, et ajouter en fin de fichier

export PATH=%PATH%:~/tools/play:.

sous Windows, éditer vos variables système (Propriété du poste de travail, onglet "Avancé", boutons "variables systèmes" et modifier l'entrée PATH en ajoutant à la fin

;D;\tools\play;.

et le tour est joué.

Création de l'application

fermez puis relancer votre session utilisateur pour être sur que la nouvelle valeur de PATH soit bien prise en compte.

enfin,ouvrez une console de commande (Windows) ou un terminal (Linux) et tapez :

mkdir ~/Projects/Java/play
cd ~/Projects/Java/play
play new myplayapp

La console indique alors :

frederic@nostromo6:~/Projects/Java/play$ play new myplayapp

~ _ _

~ _ __ | | __ _ _ _| |
~ | '_ \| |/ _' | || |_|

~ | __/|_|\____|\__ (_)
~ |_| |__/

~
~ play! 1.1, http://www.playframework.org

~
~ The new application will be created in /home/frederic/Projects/Java/play/myplayapp

~ What is the application name? [myplayapp]
~

~ OK, the application is created.
~ Start it with : play run myplayapp

~ Have fun!
~

Editons dans l'arborescence du projet créé le fichier myplayapp/conf/application.conf

et remplaçons dans les lignes suivantes:

# Database configuration
# ~~~~~
# Enable a database engine if needed.
#
# To quickly set up a development database, use either:
# - mem : for a transient in memory database (HSQL in memory)
# - fs : for a simple file written database (HSQL file stored)
#db=mem
#

Remplaçons la ligne du db=mem par un db=fs et supprimons le #, ceci afin d'avoir une persistance temporaire dans une base de données sur le système de fichier, et non pas en mémoire, ce qui est un peu trop volatile à mon goût.

Ce qui donne:

Vérifions que celle-ci est opérationnelle avec la commande :

play run

et accédons l'url http://localhost:9000/

figure 0 - Premier pas dans le monde de Play!

Voila, l'application est créée... Trop dur !

Éditeur et/ou IDEs

Ok, maintenant, pour pouvoir travailler proprement, je vous propose d'utiliser Eclipse. Partons sur Galileo (Eclipse 3.5) pour commencer. Mais si vous avez un préférence pour Netbeans, pas de soucis.

1. Eclipse

la commande magique suivante permet de générer un projet Play! éditable dans Eclipse. Simplement, placez-vous dans le répertoire de votre projet nouvellement créé:

cd ~/Projects/Java/play/myplayapp

play eclipsify .

ce qui donne dans la console:

frederic@nostromo6:~/Projects/Java/play/myplayapp$ play eclipsify .

~ _ _
~ _ __ | | __ _ _ _| |

~ | '_ \| |/ _' | || |_|
~ | __/|_|\____|\__ (_)

~ |_| |__/
~

~ play! 1.1, http://www.playframework.org
~

~ OK, the application is ready for eclips
~ Use File/Import/General/Existing project to import /home/frederic/Projects/Java/play/myplayapp into eclipse

~
~ Use eclipsify again when you want to update eclipse configuration files.

~ However, it's often better to delete and re-import the project into your workspace since eclipse keeps dirty caches...

~

Maintenant, ouvrez votre Eclipse préféré dans une workspace de votre choix (ex: ~/workspaces/java/play/myplayapp).

figure 1 - Ouverture d'un nouveau workspace pour importer notre projet Play!

Puis, via le menu contextuel dans l'explorateur de projet (sidebar de gauche...) faite "Import > Import..." puis dans la fenêtre affichée, choisissez "Existing projects into Workspace".

figure 2 - Import du projet play "eclipsifié" dans votre workspace

Parcourez le répertoire de votre projet et valider.

figure 3 - Projet play détecté par Eclipse (3.5 ici) et prêt à être importé

Un click sur Finish, et voilà votre projet importé, et prêt a être éditer dans Eclipse

figure 4 - Eclipse présentant votre projet Play! fraîchement importé

Et voilà !

Sous NetBeans, la proécédure est très similaire, la commande permettant de créer la définition du projet Netbeans étant la suivante:

cd ~/Projects/Java/play/myplayapp
play netbeanify .

Ce qui trace dans la console:

frederic@nostromo6:~/Projects/Java/play/myplayapp$ play netbeansify .

~ _ _
~ _ __ | | __ _ _ _| |

~ | '_ \| |/ _' | || |_|
~ | __/|_|\____|\__ (_)

~ |_| |__/
~

~ play! 1.1, http://www.playframework.org
~

~ OK, the application is ready for netbeans
~ Just open /home/frederic/Projects/Java/play/myplayapp as a netbeans project

~
~ Use netbeansify again when you want to update netbeans configuration files, then close and open you project again.

~

Je laisse les aficionados de NetBeans procéder à l'import du projet dans l'IDE de Sun (sic... Oracle), ne connaissant pas aujourd'hui moi-même la procédure.

Entités et autres contrôleurs

C'est une application de gestion de liste de jeux vidéo que nous allons créer, au fait !

Et donc, de quoi avons nous besoin pour modéliser notre bibliothèque de jeux vidéo ? Disons, une entité représentant un jeu, et une entité pour désigner la plateforme d'accueil de ce jeu. C'est un bon début.

Et si on souhaite en faire une vraie application internet, il nous faut, pour pouvoir la sécuriser, une entité représentant un utilisateur.

En plus de ces entité, nous bâtirons l'application sur 1 contrôleur principale, gérant la page d'accueil, et, à l'aide du module CRUD, autant de sous-contrôleurs que d'entités pour la partie administration.

Voilà la liste est faite, plus qu'à se lancer dans le développement de cette magnifique application.

Game

Un jeu est modélisé par un titre, une plateforme (que nous "entité-iserons" plus tard) une description, un éventuel test, une année de production, un studio de développement, un éditeur (qui pourront devenir à leur tour des entités à part entière d'ici quelques temps), une note, et enfin une image représentant la pochette du jeu.

Précipitons nous sous notre IDE préféré, Eclipse pour ma part, et créons une première classe Game dans le package models. N'oubliez pas d'hériter de la classe Model (play.db.jpa.Model) afin de pouvoir faire persister notre jeu dans une base de données (nous aborderons cela au chapitre suivant). Utiliser l'assistant pour vous faciliter la tâche:

figure 5 - La classe Game héritant de play.db.jpa.Model

Et après un clic sur "finish", ajoutons les choses suivantes:

Tout d'abord,

l'annotation @Entity indiquant à Java et à JPA que cette classe devra persister.
Ajoutons les attributs dont nous avons parlé précédemment, à savoir:

public String title;
public String platform;
public String description;
public Boolean publish;
public String test;
public String developerStudio;
public String editor;
public Integer yearOfPublication;
public Integer note;
public String cover;

As we've now get a running web application to manage our library, I propose you to add an image field management to our Book model.
To manage this part, we are going to need 3 things:

an imaging tool like mini_magick or image_magick,
the paperclip plugin for rail
and the paper_clip_with_hobo to be used with Hobo framework.

1. The image tool
My choice go to imagemagick, but i know that this is working well with others tools like

2. Paperclip plugin
You will find very interesting infoirmation about this plugin usage at this page: http://jimneath.org/2008/04/17/paperclip-attaching-files-in-rails/
And you will be able to download it from http://github.com/thoughtbot/paperclip

To install this small plugin, just go to your hobo application root path and run the following command:

script/plugin install git://github.com/thoughtbot/paperclip.git

Now you have downloaded it, you are ready to use it.

3. Get the paperclip_with_hobo
Just fololowing the same process, you have to download/install this rails plugin from git:

script/plugin install git:http://github.com/tablatom/paperclip_with_hobo.git ok. let's apply some model modification to our Book modelisation.Book.rbwe need to add some new field to our app/model/book.rb class Book < ActiveRecord::Base hobo_model # Don't put anything above this  fields do title :string  author :string year :integer  resume :text note :integer  timestamps end   has_attached_file :cover, :styles => {                   :full=>"600x600>",                  :medium => "300x300>",                   :thumb => "100x100>",                  :mini => "60x60>" },                  :path => " :rails_root/public/media/books/covers/:id/:style.:extension",                 :url => "media/books/covers/:id/;style.:extension"  ...end Adding such "has_attached_file" field to our Book model add in reality 4 fields to our database model after running the rake db:migrate standard rails operation : see db/migrate/20100221172242_add_attachements_cover_to_book.rb migration fileclass AddAttachmentsCoverToBook < ActiveRecord::Migration  def self.up add_column :books, :cover_file_name, :string  add_column :books, :cover_content_type, :string add_column :books, :cover_file_size, :integer  add_column :books, :cover_updated_at, :datetime end  def self.down remove_column :books, :cover_file_name  remove_column :books, :cover_content_type remove_column :books, :cover_file_size  remove_column :books, :cover_updated_at end endOk, now our model is updated, database too. we are ready to modify some dryml file to show this image. Go to app/views/taglibs/application.dryml and add the following declaration:At file beginning in existing "include" lines:<include src="paperclip" plugin="paperclip_with_hobo"/> And at end of file :<extend tag="form" for="Book">        <old-form merge multipart>                 <field-list fields="title, author, year, resume, note, cover, category" param/>         <div param="actions">  <submit label="#{ht 'books.actions.save', :default=>['Save']}" param/><or-cancel param="cancel"/>  </div>        </old-form> </extend>This is a view modifier for a Book, adding the cover field and removing the 4 database fields. Then, modify the card dryml for Book model, in the same previous file (application.dryml) :<extend tag="card" for="Book">   <card>    <h5>     
                 <view:resume />     </p>    <p>       <%= I18n.t :uploaded_label %><br />      <view:created_at format="%B %d, %Y" /> by <you:user />.     </p>    <delete-button class="actions" />      </card> </extend>Let's test our new cover field !

Ok, we have just created the first step of our library.

Now we have hundreds of books, maybe we can dispatch all these books in some categories ?

Ok, l'est add categories to our web app "My Library"

script/generate hobo_model_resource category name:string sorder:integer

And we hjev to update the databse with our new model:

script/generate hobo_migration

don't forget the 'm' option to run the migration right now !

ok, just for fun, run the application with a

script/server

browse to http://localhost:3000/ and go to the "Categories" tab..

1.View the Category tab

2.and add a new "Novel" category

yes ok, nothing really new here. It's working just like Books.

Let's dye into the code:

We are going to add the link between Book and Category, knwoing that a category can have many book, and one book belong to one category.

Open the file book.rb and just after fields declaration, add the following "belongs_to":

class Book < ActiveRecord::Base

hobo_model # Don't put anything above this

fields do

title :string

author :string

year :integer

resume :text

note :integer

timestamps

end

belongs_to :category

...

end

Open now the category.rb and add the small "has_many" property:

class Category < ActiveRecord::Base

hobo_model # Don't put anything above this

fields do

name :string

sorder :integer

timestamps

end

has_many :books

...

end

we have to generate a small migration to add this field into the Book data model.

script/generate hobo_migration

note: choose the 'm' option to apply modifications.

and start the server to test !

script/server

let's browse the Books page

And choose one of the created book, you can see the new "Category" field at end of page.

Click the "edit book" link and you will be invited to change the value for category wich is currently set with the default "(No category)".

ok, back to your code editor and open the file category_hints.rb. and replace all the commented lines by the following single line.

class CategoryHints < Hobo::ViewHints

children :books

end

Telling that Category has Books has children will modify automatically the Category page, showing the number of book attached to a category.

1. What's new in the "Categories" page

2. Let's see the detail of a Category

3. And on the Book side, a new top/left link appear "<<Novel"

you can see that with very small add to the generated code, you considerably inflect the default behaviour of the application and the links in the model.

Even if model link declaration and manipulation already exists in Rails, Hobo brings the corresponding mechanisms for the UI side.

Next, more to be discover in the dryml taglib and tags personalization.

Hobo man.

Note: please find attached bellow the project in each step state, from step 1 to step 3.

Click here to download:

MyLibrary-step-1.tar.gz (120 KB)

Click here to download:

MyLibrary-step-2-categories.tar.gz (122 KB)

Click here to download:

MyLibrary-step-3-hints.tar.gz (128 KB)

McGivrer's Home

Play!framework - tutorial - Customisation de la page d'accueil (2.4)

les notations

template des pages

Découpage du modèle de page

Fonction de filtrage et de recherche sur la liste des jeux

Filtrage par platforme

MODIFICATION DU CONTRÔLEUR

TAG #{PLATFORMS /}

TAG #{GAMES /}

TEMPLATE INDEX.HTML

Recherche par un nom (title) de jeu

Play!framework - Création d'un tag (9.1)

Définition

Appel

Passage de paramètres

Play! framework: ManyToMany relation

Good videocast about Git !

Play! framework - deuxième partie (1/4)

Les modules

Activation CRUD

CRUD

CRUD sur mes entités ?

I18n

Customisation de l’affichage

Play!framework - première partie

Hobo: Step 4 - adding a cover image

Hobo: step2 and 3, add categories and some relation

About

Archive

Get Updates