Seven Wonders 5 – MVC (Spring Me VoiCi) et Jetty

L’appli web sera écrite en MVC. Plusieurs possibilités : l’écrire from scratch, ou en utilisant  le wizard de SpringSource, ou l’archetype appfuse spring mvc, ou en partant de tatami sur github…

Pour aller vite, je reprend un projet de test Spring MVC créé avec SpringSource que je transfère dans mon module sevenwonders-web. Celui-ci gagne un HomeControlleur.java et sa home.jsp, un web.xml, un root-context.xml et un servlet-context.xml ainsi qu’un log4j.xml.

Pour faire du beau site (disons « pas moche ») rapidement, récupérons Twitter Bootstrap pour le css et la mise en forme du site.

Nous allons enfin utiliser jetty pour lancer rapidement l’application. Grâce aux conventions maven, le plugin jetty sait directement où chercher le war (dans target) et utilise un tas de paramètres par défaut, dont le port à 8080.

Ajoutons simplement le plugin Jetty à notre pom :


<plugin>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>jetty-maven-plugin</artifactId>
 <version>${maven.jetty.version}</version>
 <configuration>
 <scanIntervalSeconds>${jetty.scanIntervalSeconds}</scanIntervalSeconds>
 <stopKey>stop-jetty</stopKey>
 <stopPort>9999</stopPort>
 <systemProperties>
 <systemProperty>
 <name>jetty.port</name>
 <value>${jetty.port}</value>
 </systemProperty>
 </systemProperties>
 </configuration>
 <executions>
 <execution>
 <id>start-jetty</id>
 <phase>pre-integration-test</phase>
 <goals>
 <!-- <goal>run-exploded</goal> -->
 <goal>run</goal>
 </goals>
 <configuration>
 <scanIntervalSeconds>0</scanIntervalSeconds>
 <daemon>true</daemon>
 </configuration>
 </execution>
 <execution>
 <id>stop-jetty</id>
 <phase>post-integration-test</phase>
 <goals>
 <goal>stop</goal>
 </goals>
 </execution>
 </executions>
 </plugin>

Il suffit de spécifier maintenant la version utilisée, en l’occurence la dernière : <maven.jetty.version>8.1.5.v20120716</maven.jetty.version>

Enfin, lançons le mvn jetty:run et allons voir en localhost:8080 le beau site web un peu flou qui nous attend, la simplicité de cette étape me mettant la larme à l’oeil.

Bon, essuyons vite la larme, la page est vide, ou quasiment, vu que je suis parti d’un contrôleur dont la simplicité est un hommage aux jardins de pierre japonais et qui se contente d’afficher l’heure qu’il est.

@Controller
public class HomeController {

private static final Logger logger = LoggerFactory.getLogger(HomeController.class);

/**
* Simply selects the home view to render by returning its name.
*/
@RequestMapping(value = "/", method = RequestMethod.GET)
public String home(Locale locale, Model model) {
logger.info("Welcome home! the client locale is "+ locale.toString());

Date date = new Date();
DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);

String formattedDate = dateFormat.format(date);

model.addAttribute("serverTime", formattedDate);

return "home";

}

home.jsp :

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<html>
<head>
<title>Home</title>
</head>
<body>
	<h1>Hello world!</h1>

	<P>The time on the server is ${serverTime}.</P>

</body>
</html>

Nous pourrions nous arrêter sur ce bel écran et atteindre l’illumination, mais continuons d’avancer vers le but que nous nous sommes fixés et ajoutons un formulaire pour créer une partie. Ce formulaire sera très simple et n’aura comme choix que le nombre de bots de la partie.

Initialisation du formulaire :

@ModelAttribute("partieForm")
  public PartieForm initPartieForm(){
	  PartieForm partieForm = new PartieForm();
	  partieForm.setNombreBots(4);
	  return partieForm;
  }

@RequestMapping(method=RequestMethod.POST)
  public ModelAndView submitForm(@ModelAttribute("partieForm") PartieForm partieForm, Model model) {
    Partie partie = new Partie();
    partieManager.initPartie(partie, partieForm.getNombreBots());
    model.addAttribute("partie", partie);
    for (Joueur joueur : partie.getListeJoueurs()) {
      System.out.println("joueur " + joueur.getMerveille().getNomEn());
    }
    return new ModelAndView("partie", "partie", partie);
  }

On fait un tas de belles jsp avec des beaux css pour faire du bel affichage, et voilà ce qui arrive quand on n’est pas une brute en design et qu’on en fait quand même :

Bon, c’est pas encore bon, mais intéressons nous plutôt à l’erreur « fichier ayant une section mappée utilisateur , elle provient de l’utilisation de jetty et empêche la modification de fichiers utilisés par jetty. La solution a été trouvée ici : http://blog.xebia.fr/2009/06/10/maven-jetty-plugin-et-section-mappee/ et en rajoutant la ligne du nouveau connector, le problème disparait.

Ensuite on code un paquet de trucs. Oui, en langage littéraire ça s’appelle une ellipse, mais c’est ce qui arrive quand on code plus vite qu’on n’écrit ses articles sur le blog. Bref :

Création du service de bot qui sert à choisir une action pour les places gérées par l’ordinateur

Du javascript jsp et css pour mettre en forme l’interface ; sur ce point je rame un peu, difficile de faire tenir 7 merveilles + une dizaine de cartes sur un écran (de surcroît quand c’est un portable 12 pouces) ainsi que le formulaire pour jouer une action. Je devrais probablement n’afficher qu’un résumé des infos des joueurs qui ne sont pas soi / voisin droite / voisin gauche, avec un popup pour leur jeu entier, mais ça nécessite pas mal de temps à creuser les css div html toussa toussa… Bref pour l’instant tout est en une page, et passablement encore hideux. Et voici :

Ah suite : un bon tuto pour débugguer du jetty : http://karamimed.developpez.com/tutoriels/java/web/eclipse/maven-jetty/debug/

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s