Le framework PLAY! 2.0

Tutoriel

Nous allons ici créer pas à pas notre première application Play en java. Au cours de ce tutoriel vous allez pouvoir découvrir les bases de fonctionnement du framework.
Pré-requis: l'installation de Play doit avoir été réalisée.

La création du projet

La première étape de ce tutoriel est la création du projet. Pour cela rien de plus simple, il suffit de taper la commande:
$ play new MonApplication

La console de Play va creer automatiquement votre projet après vous avoir posé quelques questions.



Une fois l'application créée un nouveau dossier au nom de l'application est créé. Il faut maintenant se déplacer dans ce dossier afin de pouvoir utiliser la console Play sur ce projet.
Pour lancer la console il suffit maintenant de taper la commande $ play



Nous sommens maintenant dans la console play, et si on tape la commande run on peut lancer l'application via le serveur Web intégré: [MonApplication]$ run



Notre nouvelle application est maintenant lancée et on peut accéder à notre serveur web depuis un navigateur à l'adresse: http://localhost:9000/



On peut voir que la page affichée correspond à une page d'accueil intégrée par Play et accessible pour une nouvelle application. Pour savoir quel page notre application doit afficher, un fichier sert de point d'entrée: conf/routes.
Si on ouvre ce fichier, on peut observer qu'il contient la ligne:
GET / controllers.Application.index()

Cette ligne indique que quand le serveur reçoit la requête GET pour la page / il doit appeller la méthode controllers.Application.index().
On peut maintenant regarder ce que contient cette méthode. Pour ce faire, il faut ouvrir le fichier app/controllers/Application.java:

		package controllers;
		import play.*;
		import play.mvc.*;

		import views.html.*;

		public class Application extends Controller {
		  
		  public static Result index() {
			return ok(index.render("Your new application is ready."));
		  }
		}


On peut voir que la méthode controllers.Application.index() retourne un Result. Toutes les méthodes d'action doivent retourner un Result, qui représente la réponse HTTP à envoyer au navigateur Web.

On va maintenant modifier cette méthode par :

public static Result index() {
		  return ok("Hello world");
		}


Si on recharge la page on peut observer le resultat suivant:



On peut remarquer que la page à changer sans que l'on ne demande aucune recompilation. En effet c'est la commande run qui recompile automatiquement lors du rechargement depuis le navigateur.

Pour aller un peu plus loin nous allons modifier le fichier conf/routes: 


		# Home page
		GET     /                       controllers.Application.index()
										
		# Tasks          
		GET     /tasks                  controllers.Application.tasks()
		POST    /tasks                  controllers.Application.newTask()
		POST    /tasks/:id/delete       controllers.Application.deleteTask(id: Long)


On va maintenant créer les méthodes associées dans le fichier Application.java:


public class Application extends Controller {
  
  public static Result index() {
    return ok(index.render("Your new application is ready."));
  }
  
  public static Result tasks() {
    return TODO;
  }
  
  public static Result newTask() {
    return TODO;
  }
  
  public static Result deleteTask(Long id) {
    return TODO;
  }
  
}


On veux aussi modifier la route par defaut pour qu'une redirection soit directement faite vers la page "tasks":


public static Result index() {
  return redirect(routes.Application.tasks());
}


Maintenant que tout cela est pret, on va creer le modèle associé. Pour cela on va creer une classe Task:app/models/Task.java :


package models;

import java.util.*;

public class Task {
    
  public Long id;
  public String label;
  
  public static List all() {
    return new ArrayList();
  }
  
  public static void create(Task task) {
  }
  
  public static void delete(Long id) {
  }
    
}


Maintenant il nous faut modifier le rendu de la page. Pour cela on va modifier le template index.scala.html: 


@(tasks: List[Task], taskForm: Form[Task])

@import helper._

@main("Todo list") {
    
    <h1>@tasks.size() task(s)</h1>
    
    <ul>
        @for(task <- tasks) {
            <li>
                @task.label
                
                @form(routes.Application.deleteTask(task.id)) {
                    <input type="submit" value="Delete">
                }
            </li>
        }
    </ul>
    
    <h2>Add a new task</h2>
    
    @form(routes.Application.newTask()) {
        
        @inputText(taskForm("label")) 
        
        <input type="submit" value="Create">
        
    }
    
}


Nous allons maintenant créer le formulaire. Pour cela nous allons ajouter à notre controleur : static Form taskForm = form(Task.class);

Il est possible d'ajouter des contraintes, pour par exemple rendre un champ obligatoire.
Nous allons ici rendre le champs label obligatoire: 

package models;

import java.util.*;

import play.data.validation.Constraints.*;

public class Task {
    
  public Long id;
  
  @Required
  public String label;
  
  ...

Nous avons donc maintenant tous les éléments necessaires pour afficher notre page.
Nous allons maintenant pouvoir ajouter le code de l'action "tasks": 

  public static Result tasks() {
  return ok(
    views.html.index.render(Task.all(), taskForm)
  );
}


Si on accéde à la page http://localhost:9000/tasks on peut maintenant observer notre formulaire:

formualire du tuto


Il faut maintenant gérer la reception de ce formulaire. Pour cela il va falloir compléter les TODO de la classe Task. Tout d'abord la méthode "newTask":


  public static Result newTask() {
  Form filledForm = taskForm.bindFromRequest();
  if(filledForm.hasErrors()) {
    return badRequest(
      views.html.index.render(Task.all(), filledForm)
    );
  } else {
    Task.create(filledForm.get());
    return redirect(routes.Application.tasks());  
  }
}


Maintenan que nous recuperons les données depuis le formulaire, il est temps de les persister dans une base de donnée. Pour cela nous allon utiliser la base H2 intégrée dans Play.
La première étape est de définir cette base dans la configuration de play. Pour cela il faut ajouter au fichier application.conf les lignes suivantes:

db.default.driver=org.h2.Driver
db.default.url="jdbc:h2:mem:play"
ebean.default="models.*"

Il faut maintenant modifier la classe Task pour permettre la sauvegarde en base: 

  package models;

import java.util.*;

import play.db.ebean.*;
import play.data.validation.Constraints.*;

import javax.persistence.*;

@Entity
public class Task extends Model {

  @Id
  public Long id;
  
  @Required
  public String label;
  
  public static Finder find = new Finder(
    Long.class, Task.class
  );
  
  ...


Maintenant que la classe dépend de la super class play.db.ebean.Model, il faut aussi implémenter les méthodes suivantes: 

  public static List all() {
  return find.all();
}

public static void create(Task task) {
  task.save();
}

public static void delete(Long id) {
  find.ref(id).delete();
}


Enfin il nous reste à implémenter la méthode de suppression: 

 
  public static Result deleteTask(Long id) {
  Task.delete(id);
  return redirect(routes.Application.tasks());
}


Notre application est maintenant créé ! Si tout s'est bien passé vous devriez obtenir le résultat suivant:

formualire du tuto


Nous avons maintenant créé une page, en utilisant un template en scala, un modèle, la gestion des routes et des contrôleurs et gérer une persistance en base. Nous avons abordé toutes les bases nécessaires pour la compréhension de l'utilisation du framework Play, d'autres exemples et tutoriels àpourront être trouvé sur la page officiel du framework (en anglais).




ESIPE-MLV