1/ Utilisation de javascript avec jquery

Avec le javascript et la bibliothèque jquery, nous pouvons mettre en barré le texte associé à une case cochée par l’internaute.

Supposons que nous disposons du code HTML suivant fabriqué à l’origine par la JSP:

<p>
<input type="checkbox" name="checkbox_eau" > Eau
</p>

Nous devons en premier lieu pouvoir manipuler le texte du à côté de la case à cochée, en ajoutant un tag span nous indiquons que ce texte n’est pas simplement un texte sans modifier la mise en forme.

<p>
<input type="checkbox" name="checkbox_eau" >
<span id="checkbox_eau"> Eau </span>
</p>

Nous aimerions ensuite pouvoir lier le click sur la case de la checkbox à la modification du HTML par le javascript en ajoutant la classe barre au tag <span>:

<p>
<input type="checkbox" name="checkbox_eau" >
<span id="checkbox_eau" class="barre"> Eau </span>
</p>

Nous allons appeler jquery directement depuis le serveur hébergent ce projet (CDN) via l’ajout de ce code dans la JSP:

 <script
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

ou en téléchargeant le code javascript pour garder notre version en local et ne pas subir les évolutions de la version jquery:

 <script src="js/jquery-latest.min.js"></script>

Nous pouvons maintenant coder directement en javascript dans la page HTML pour les premiers tests puis ce code ira dans un fichier javascript dans le dossier js:

 <script language="javascript">

 $(document).ready(function() {
    $("input[type=checkbox]").click(
         function(event) { 
            var name = $(this).attr("name");
            var checked = $(this).prop('checked');;
            console.log( $(this).attr("name") );
           // ... continuer en javascript
         });
   
 });
// 
</script>

en décomposant ce code nous avons un premier appel à une fonction anonyme dans la méthode ready.

$(document).ready(function() {
    // ce code javascript est déclenché quand la page est chargée
});

Jquery exploite une fonction qui s’appelle $ pour chercher soit dans le DOM de la page HTML un ou plusieurs éléments/tags, par exemple :

$("h1") // cherche des tags h1
$("#header") // cherche des tags avec id="header"

$("input[type=checkbox]") // cherche des tags input avec un attribut input qui vaut checkbox

la dernière instruction permet donc de trouver nos checkbox et nous allons leur ajouter un événement click dessus.

$("input[type=checkbox]").click(  );

Pour ajouter ce qui doit être fait par le click nous indiquons ainsi une fonction javascript anonyme qui va être appelée par cet événement click :

         function(event) { 
            var name = $(this).attr("name");
            var checked = $(this).prop('checked');;
            console.log( $(this).attr("name") );
           // ... continuer en javascript
         });

console.log appelle la console Javascript embarquée dans les navigateurs (voir plus bas).

En exploitant la fonction de recherche d’un tag à partir de son id et en utilisant la méthode addClass(« barre ») vous pouvez ajouter une classe au bon texte.

$("span#checkbox_eau").addClass("barre");

Nous pouvons exploiter le débugger et la console javascript embarqués dans nos navigateurs. Voici l’exemple avec Firebug (pour Chrome faire CTRL+ALT+I) :

Animation de l’activation des onglets: Console, Script et Réseau

Nous pouvons afficher le code Javascript et poser des points d’arrêt dans notre code.

Avec firebug, affichage du code javascript et point d’arrêt ajouté

Pour Firefox:

Pour Chrome: 

Nota: la fonction $ peut parfois être utilisé par d’autres frameworks Javascript. on peut alors remplacer les appels via jQuery:

jQuery(document).ready(function(jQuery){
            // ne pas utiliser la fonction $ mais jQuery
        });

2/ Injection de javascript avec AngularJS 1.x

AngularJS est actuellement en version 2.x mais cette version s’appuie sur une sur-implémentation de Javascript appelé TypeScript. Le développeur code en langage TypeScript qui passe dans un compilateur TypeScript pour générer du Javascript spécialisé.

AngularJS 2 est plus performant et plus léger que la version 1.x mais nous allons utiliser la version AngularJS 1.x car elle est plus simple en évitant cette compilation additionnelle.

Nous injection dans le tag <header> le chargement d’AngularJS 1.6.1  et d’un fichier Javascript qui va gérer en MVC la manipulation du HTML dans la page Web:

<script
 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="js/todo.js"></script>

Nous appelons dans une DIV une application todoApp :

<div ng-app="todoApp">

Puis dans un autre DIV incluse dans la précédente nous appelons la gestion de la liste des todo via un controller avec une fabrication du tag de début de liste <ul>:

<div ng-controller="TodoListController as todoList">
 <ul>

Nous avons ensuite une boucle qui va charger successivement les todos :
<li ng-repeat= »todo in todoList.todos »>

Nous pouvons ensuite appelé un champ de type checkbox qui va être lié à la partie modèle de notre application AngularJS:

<input type="checkbox" ng-model="todo.actif"> 

Nous pouvons indiquer à AngularJS que nous voulons un affichage du contenu des objects Javascript avec ce genre de code:

{{todo.texte}}

Maintenant pour la partie formulaire nous allons coder l'appel via le bouton Submit à la fonction addTodo qui se trouve dans AngularJs et qui fera ensuite appel au travers du réseau à la Servlet Controlleur: 

 <form ng-submit="todoList.addTodo()">
 <input type="text"  ng-model="todoList.todoText"  placeholder="add new todo here"> 
 
 <input type="submit" value="add">
 </form>

Voici le code todo.js pour déclencher l’affichage de quelques todos pour tester votre application AngularJS:

// Création de l'application todoApp et déclaration du controleur avec le module http activé
angular.module('todoApp', []).controller('TodoListController', function( $http ) {

var todoList = this;
 
todoList.todos = [
{ texte: 'chocolat' , actif:false},
{ texte: 'gateaux' , actif:true}
];
 
// Fonction pour ajouter un  todo depuis l'interface HTML
todoList.addTodo = function() {
      todoList.todos.push( {texte:todoList.todoText, actif:false});
      todoList.todoText = '';
};

}); // Fin application

Pour l’instant tout ce code ne permet qu’une manipulation en local dans le navigateur de la liste des Todos. Il faut via une commande Ajax faire une requête vers le serveur pour que la mise à jours soit effective dans la base de données.

Nota: le paramètre action dans la liste des paramètres permet à la notre Servlet Controlleur de savoir que la demande via pour de l’ajax et qu’il faut faire un ajout du Todo dans la base de données et d’ensuite répondre en  json par exemple:

// Création de la liste des paramètres de la requête GET avec le paramètre action 
var parametres = {action: "ajax.add_todo" };

$http({
  method : "GET",
  url : "./Controleur",
  params: parametres,
})
   .then(function successCallback(response) {
        console.log( response.data );
        // Rafraichir la liste avec la reponse en Json reçue
}, function errorCallback(response) {
        // En cas d'erreur par exemple 404 pour la requête GET sur le controleur
        console.log( response );
});

1/ Ajout d’une feuille de style

L’ajout d’une feuille de style permet de proposer une nouvelle mise en forme. Ajouter le fichier style.css contenant le code suivant dans le dossier css du dossier WebContent:

div#central{
  position:absolute;
  left: 50%;
  top: 10%;
  width: 800px;
  height: 800px;
  margin-top: -50px;
  margin-left: -400px;
  color: black;
  background-color:rgb(200,220,200);
  padding: 20px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 4px 4px 4px 4px;
}
ul > li{
   display: inline;
}
div#menu{
  position:relative;
  left:10%;
  width:80%;
  background-color:rgb(200,240,220);
}

Il faut ajouter deux div dans la JSP avec comme « id » central et menu, le div « menu » doit être inclus dans central et appeler le fichier style.css dans le tag <head> :

<link rel="stylesheet" type="text/css" href="css/style.css">

<div id="central">
 <div id="menu">
      <!-- Zone pour le menu -->
 </div>

    <!-- Zone pour le contenu -->
</div>

La zone menu va utiliser une liste d’hyperlien pour présenter un menu (voir le site alsacreation pour les étapes de construction en CSS)

<ul><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li></ul>

Modifier les marges et les couleurs à votre convenance.

Refaite une mise en forme de votre application, avec le framework Bootstrap CSS, en utilisant par exemple le jumbotron comme exemple: Jumbotron

2/ Utilisation des logs

Plutôt que de multiplies les sorties sur la console via des classiques:

System.out.println("Erreur " + e);

Il parait plus stable d’avoir sur un serveur Tomcat de multiples informations selon les applications et selon les besoins de ces applications. En production, les logs permettent de gérer les sorties d’informations de l’application en se limitant au maximum, au contraire en développement, on peut avoir besoin d’un niveau très important de détails des logs.

Nous allons exploiter une librairie de log qui s’appelle log4j disponible en version simple 1.2.17 ici. Vous pouvez télécharger ce jar et le placer dans un dossier lib dans le dossier WEB-INF du dossier WebContent.

Nota: vous pourrez mettre d’autres librairies .jar à déployer dans votre projet web dans ce dossier pour que chaque Application Web disposent de ses propres jars.

Nota 2:  Une autre option est d’utiliser le dossier lib dans le dossier tomcat pour indiquer les jars disponible pour tous les projets déployés.

Pour configurer le logger, on va créer un fichier log4j.properties dans le dossier Java Resources > src (il n’a pas à être dans un package ce n’est pas un fichier java juste un fichier de configuration). Pour créer un fichier texte, faire clic droit sur le dossier > New > Other …> General > Untitled Text File.

Entrez les informations suivantes dans le fichier et sauver le dans votre projet, dans le dossier src avec comme nom log4j.properties.

Le fichier log4j.properties doit contenir ces informations:

log4j.rootLogger=DEBUG,stdout,file

log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.out
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n


log4j.appender.file=org.apache.log4j.FileAppender
log4j.appender.file.File=c:/Developpement/workspace_jee/BoostrapSample/out.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%-7p %d [%t] %c %x - %m%n

La première ligne indique que le niveau de log est DEBUG et qu’il y a 2 loggers: stdout et file.

Les lignes commençant par log4j.appender.stdout indique les réglages pour le logger stdout soit une sortie d’information sur la console de l’ordinateur (là où va habituellement le System.out.println).

Les lignes commençant par log4j.appender.file indique les réglages pour le logger file soit une sortie dans un fichier. Il vous faut corriger mon exemple pour que le fichier puisse être créer dans le dossier qui correspond à votre workspace ( vous n’avez peut être pas de dossier: c:/Developpement/workspace_jee/BoostrapSample/ ).

L’instruction ConversionPattern indique la forme de la sortie:

La date: %d{ABSOLUTE}
Le niveau de log: %5p
Le nom du logger: %c{1}
La ligne du log: %L
Le message: %m

Vous pouvez trouver des exemples de pattern avec log4j

Pour utiliser le logger dans une classe, on va simplement créer une instance log de type org.apache.log4j.Logger:

private static final org.apache.log4j.Logger log = org.apache.log4j.Logger.getLogger("BoostrapSample");

Nota: j’utilise le chemin absolut de la classe en spécifiant sont package devant (org.apache.log4j) car il existe d’autres solutions de log et Tomcat utilise d’ailleurs pour son utilisation interne org.apache.commons.logging. Il peut donc y avoir conflit entre les 2 systèmes de Log. Nous avons ici une démonstration de la force/faiblesse de Java qui va foisonner de solutions pour proposer une variété de réponses mais qui peut gêner par leur multiplicité.

Au moment où on veut logger une information, il suffit d’appeler l’instance avec le niveau de sévérité du message  et de passer en paramètre le message :

log.trace("Niveau le moins important");
log.debug("Niveau au dessus du moins important");
log.info("Niveau habituel de fonctionnement");
log.warm("Erreur non bloquante");
log.error("Niveau Erreur classique");
log.fatal("Niveau Erreur maximum");

Au final on peut utiliser qu’un nombre limité de niveaux d’erreurs ou au contraire ajouter ses propres niveaux. L’important est d’éviter de saturer d’erreurs le fichier de tomcat avec tout type de niveau d’erreur ou au contraire de trop filter l’affichage de potentiels problèmes mineurs.

C’est la première ligne du fichier log4j.properties qui indique le niveau d’erreur minimum que je filtre, avec le niveau DEBUG, log4j, va afficher les logs FATAL,ERROR,WARM, INFO et DEBUG.

log4j.rootLogger=DEBUG // affiche FATAL,ERROR,WARM, INFO et DEBUG

log4j.rootLogger=ERROR// affiche FATAL et ERROR

Je peux modifier le niveau de Log avec l’instruction suivante en cours d’exécution:

log.setLevel( org.apache.log4j.Level.INFO );

Ajouter un troisième logger en html en vous inspirant de ce code:

log4j.appender.html=org.apache.log4j.DailyRollingFileAppender
log4j.appender.html.DatePattern='.'yyyy-MM-dd-HH-mm
log4j.appender.html.layout=org.apache.log4j.HTMLLayout

Ce logger a plusieurs spécificités si vous lancer des logs en nombres. Consulter régulièrement le dossier où va être stocker vos logs et si vous utilisez Eclipse pour afficher le contenu de dossier, n’hésitez pas à faire rafraîchir le contenu du dossier.

Pour afficher les logs, j’utilise un plugin d’Eclipse qui s’appelle « Log Viewer« . Vous pouvez installer ce plugin en faisant  glisser-deposer le bouton « Install » dans Eclipse.

Vous pouvez ensuite mettre dans votre pesrpective Eclipse ce nouveau plugin via le menu Windows > Show View > Other… et chercher Log Viewer

Dans la fenêtre Log Viewer, on peut ensuite ouvrir différents fichier de log, régler la coloration des logs, rafraichir l’affichage, etc.

En premier lieu, il faut ouvrir le fichier des logs créé avec le bouton Open Logfile:

 .

Ensuite, on peut indiquer les règles que l’on veut appliquer au Log Viewer via le bouton Show rules preferences:

La liste des règles peut être modifiée pour mettre en surbrillance différentes lignes des logs selon un critère de recherche:

3/ Classe Helper

Une classe Helper permet de stocker des méthodes utilitaires pour la classe dont elle porte le nom.

Par exemple, nous allons ajouter une classe ControleurHelper qui va nous permettre de réaliser le log des paramètres passés au Controleur.

private static final org.apache.log4j.Logger log = org.apache.log4j.Logger.getLogger( "Emacs2016" );

public static void logAllParameters(HttpServletRequest request){

 Map<String, String[]> parameters = request.getParameterMap();
 
 for(String parameter : parameters.keySet()) { 
    String[] values = parameters.get(parameter);

    String value = Arrays.stream( values ).collect(Collectors.joining(","));

    log.info( "Parametre " + parameter + " " + value ); 
 }

}

Cet exemple utilise une fonctionnalité avancée du Java 8+ appelée stream. Cette fonctionnalité est à couplé avec un appel de méthode inline pour par exemple filtrer les informations.

Par exemple, si on souhaite traiter la liste des Todos comme un stream pour extraire le texte des Todos actifs uniquement.

Nous partons d’une liste de Todos que nous convertissons en stream

lesTodos.stream()

Maintenant nous allons utiliser une méthode filter pour n’utiliser que les Todos actif, nous pourrions passer une méthode qui donne la raison de la comparaison à la méthode filter. C’est l’opérateur -> qui indique à gauche quel est le nom paramètre sur chaque élément du stream que nous allons exploiter et à droite de l’opérateur l’action à réaliser.

todo -> todo.isActif()

est à mettre en parallèle à la création d’une classe anonyme avec une méthode qui est automatiquement appelé

Class anonyme{
    public static boolean méthode_appelé_automatiquement(Todo todo){
        return todo.isActif();
    }
}

Cela suppose un peu de code pour une méthode qui au final ne va pas être énormément exploitée. D’où l’utilisation des appels inline plus simple à écrire:

lesTodos.stream().filter( todo -> todo.isActif())

L’idée derrière les streams qui est utilisées dans le traitement de données de type fouille de données et Big Data et de pouvoir chaîner les opérations pour permettre à la JVM d’exploiter les multiples processeurs en parallélisant les actions.

Nous allons ensuite recupérer le résultat du filtrage et indiquer quel partie du Todo nous voulons extraire le texte du todo:

lesTodos.stream().filter( todo -> todo.isActif()).map( todo -> todo.getTexte() )

Nous pouvons maintenant exploiter la méthode collect pour fusionner les données en les contenants avec un séparateur et en transformant le résultat en String:

String reponse = lesTodos.stream().filter( todo -> todo.isActif()).map( todo -> todo.getTexte() ).collect(Collectors.joining(","));

Vous trouverez sur le web énormément d’exemple sur l’utilisation des streams qui sont en train de devenir très performant pour l’exploitation de données en parallèle (voir l’exemple de la somme d’entier en stream sur le site d’Oracle).

4/ Ajout de la partie Base de données

Pour exploiter la base de données, nous devons ajouter un connecteur JDBC pour que notre code Java puisse se connecter s’y connecter.

Si on a une base de données Mysql, il faut le connecteur Mysql, nous allons exploiter par contre une base de données Sqlite. Pour cela, il faut ajouter le fichier sqlite-jdbc-3.8.11.2.jar accessible sur cette adresse dans le dossier lib dans le dossier WEB-INF du dossier WebContent.

Vous pouvez vous inspirer de la classe DaoManager pour réaliser votre propre classe qui doit gérer la connexion et les opérations de manipulation de la base de données.

Le fichier contenant la base de données s’appelle todo.db, ce dernier se trouve par défaut dans le dossier eclipse. On peut l’ouvrir avec le plugin SQLite Manager dans Firefox.

Vérifier que votre application peut ajouter  des Todos dans la base de données et que vous pouvez recharger la liste des Todos depuis cette dernière.

Il faut ensuite faire évoluer votre application en intégrant un identifiant numérique id produit par la base de données. Normalement, le DAOManager a créer une colonne auto incrémenté pour les Todos, cette information est à retrouver avec une séries d’instructions qui commencent par:

ResultSet rs=preparedStatment.getGeneratedKeys();

1/ Description de l’application

Notre première application Web a pour objectif de gérer une liste de choses à faire par exemple une liste de courses (des todo):

On ne pourra avoir deux fois un « todo » avec le même texte par exemple impossible d’ajouter encore « chocolat » à la liste. Il n’y aura pas d’erreur mais l’élément ne sera pas ajouté une seconde fois.

Pour la partie métier/modèle qui est extrêmement simplifié pour permettre de se focaliser sur la partie Web.

Diagramme de classe simplifié :

Pour la gestion d’une seule et unique instance d’application, nous allons utiliser le Design Pattern Singleton:

public class Application {
   private static Application instance = null;
   
   public static Application getInstance() {
      if (instance == null) {
           instance = new Application ();
      }
      return instance;
     }

  private Application() {
    // initialisation de la liste 
  }

}

Comment instancier une application sachant que le constructeur est privé ?

Nous allons utiliser l’interface List pour gérer la liste lesTodos qui seront de nature ArrayList<Todo>.

Un interface est une liste de nom de méthode que doit avoir un classe instanciable pour être facilement remplaçable par une évolution. On pourra par exemple dans une évolution de notre application en exploitant une classe instanciable LinkedList ou un résultat d’un stream.

2/ Création du projet et de la partie métier

Faire un nouveau « Dynamic Web Project » ( File > New > Dynamic Web project )

Les codes de la partie métiers ne doivent pas être directement dans le dossier « Java Ressources > src » mais dans un package metier ou model (clic droit sur le dossier src > New > Package)

Préparez aussi des packages controleur et test pour la suite des TPs.

Codez les deux classes du diagramme UML ci-dessus et les méthodes nécessaires au fonctionnement (clic droit sur le package metier > New > Class)

Vous pouvez vous aider de la génération des méthodes get et set avec clic droit sur le code de la classe > Source > Generate Getters and Setters…

Profitez-en pour générer les méthodes hashCode() et equals() dans le même menu, en utilisant le champ « texte ».
Essayer de comprendre à quoi peuvent servir ces 2 méthodes sachant.

Créer dans Application, une méthode main pour exécution en mode Java classique et utiliser cette méthode pour créer une application

public static void main(String[] args){

}

Coder les méthodes de la classe Application qui permettent de manipuler la liste lesTodos

3/ Tests unitaires

Nous allons produire différents tests unitaires pour vérifier que les classes suivent quelques règles.

Sur le package test, faire clic droit > New > Other > Junit Test Case puis remplir l’interface comme la capture d’écran ci-dessous :

J’indique que je veux dans le dossier src de mon application, dans le package test créer une classe de test TodoTest qui va tester la classe metier.Todo puis faire « Next ».

Dans la fenêtre suivante, j’indique la liste des méthodes que je souhaite tester:

Dans notre cas, on souhaite tester les méthodes de la classe Todo qui sont sélectionné. Il peut paraître peut utile de tester les classes parentes comme Object.

Voici un extrait en exemple de code pour le test unitaire de la classe Todo.
Essayez de coder quelques tests pertinents et exécutez les via clic droit sur le projet > Run As > Junit Test

public class TodoTest {

  @Test
  public final void testTodo() {
     Todo todo = new Todo("du lait" , false);
     assertNotNull( todo );
  }

@Test
public final void testGetTexte() {
   Todo todo = new Todo("du lait" , false);
   assertEquals ( todo.getTexte() , "du lait");
}

@Test
public final void testIsActif() {
   Todo todo = new Todo("du lait" , false);
   assertFalse( todo.isActif());
}

}

Autant les tests sur la classe Todo (un POJO) sont très basiques autant les tests unitaires sur la classe Application sont plus pertinent.

On peut ainsi tester que le Singleton n’est jamais null, que la liste des Todo est vide au démarrage, que l’ajout d’un Todo nous permet ensuite de le retrouver, etc…

Coder un test unitaire pour vérifier que l’on ne peut avoir qu’un seul Todo avec le texte « chocolat » dans la liste.

A chaque fois que vous développerez une méthode importante, pensez à coder le test unitaire et à relancer la batterie de test pour vérifier la non régression de votre application.

Refaite une classe de Test sur Application en cochant les méthodes: setUpBeforeClass, tearDownAfterClass, setUp, tearDown:

Coder dans chacune de ces méthodes un affichage d’information. Par exemple pour tearDown:

System.out.println( "teardDown" );

Mettez un point d’arrêt sur TearDown et lancer le test en mode Debug, via Clic droit sur le code source > Debug As > Junit Test

A quoi peut bien servir ces 4 méthodes: setUpBeforeClass, tearDownAfterClass, setUp, tearDown ?

4/ Liaison entre la partie métier et une JSP

Faite une JSP de test pour l’affichage de 4 todos :

Voici un exemple de code pour créer Application (noter que la construction de la liste est faite dans le constructeur) :

private Application() {
     lesTodos = new ArrayList<Todo>();
     create4TestTodos();
 }
 private void create4TestTodos(){
     addTodo( "Test1 " , false );
     addTodo( "Test2 " , false );
     addTodo( "Test1actif " , true );
     addTodo( "Test2actif " , true );
 }

Créer une JSP et importer les classes métier dans cette dernière, habituellement en tête de page:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="fr.ema.lgi2p.emacs.metier.*" %>
Parcours de la liste des Todos de type « foreach » :
<%
for(Todo todo : Application.getInstance().getLesTodos() ){
%>
<p>
   <%=todo.getTexte() %>
</p>
<%
}
%>

Cet affichage est statique, cela nous permet juste d’afficher depuis la partie Métier les données dans une JSP qui symbolise la partie Vue.

5/ La Servlet comme partie Controleur

Notre contrôleur va utiliser la technologie de Servet pour recevoir les données (Menu clic droit > New > Servlet ). La servlet devra être dans un package controleur.

Attention ne mapper pas *.jsp

Nous allons créer une Servlet de la classe Controleur qui répond à une liste d’URL, dans notre cas /Controleur.

L’URL Mapping permet de faire la liaison entre l’URL http://127.0.0.1:8080/Controleur et la servlet appelée (Nota : je ne recommande pas de mapper *.jsp en développement mais uniquement en production).

Développez votre contrôleur en vous inspirant de cet exemple :

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {

String vueFinale = "index.jsp";

// Actions du controleur pour calculer la vueFinale
     
request.getRequestDispatcher(vueFinale).forward(request, response);

}

Le but de la variable « vueFinale » est de contenir le nom de la JSP qui va être appelé par la commande getRequestDispatcher.

Si une opération, par exemple addTodo ne fonctionne pas, alors la vueFinale sera par exemple « erreur.jsp » et c’est cette vue (JSP) qui sera affichée alors.

Dans le controleur, nous allons coder une méthode doAction qui va prendre des paramètres de la requête HTTP Get ou Post et notamment un paramètre action qui va permettre d’appeler les méthodes des la partie Modèle et de fabriquer cette fameuse vueFinale:

private String doAction(HttpServletRequest request) {

String vueFinale = "erreur.jsp";

String action = request.getParameter("action");

// Action1 addTodo
if ("addTodo".equals(action)) {

    String texte = request.getParameter("todo_texte");
    Application.getInstance().addTodo(texte, false);

    vueFinale = "index.jsp";
}

// Action2  ...


// ... 
return vueFinale;
}

Développer une JSP pour présenter cette vue:

Ajouter un formulaire pour mettre à jours la ou les cases( checkbox) sélectionnées.

Les listes en HTML se basent sur les tags suivants:

<ul>
<li> chocolat</li>
<li> bonbons</li>
</ul>

6/ Ajout d’une nouvelle action

Si le paramètre « action » de l’URL contient le mot xml, il faut alors appeler une nouvelle JSP qui va fabriquer un fichier XML qui aura cette forme:

<?xml version="1.0" encoding="utf-8"?>
<todos>
<todo id="1" texte="a faire" actif="false" />
<todo id="2" texte="a ne pas faire" actif="true" />
<todo id="3" texte="surtout a faire" actif="false" />
</todos>

Bien sur ces données doivent être extraites de la liste des Todos de la partie Modèle.

Si le paramètre « action » de l’URL contient le mot json, il faut extraire les données dans un autre format, le format JSOn qui est une autre façon moins verbeuse de présenter de l’information:

{
 "todos":
 [
    {
      "id": "1",
      "texte": "a faire",
      "actif": "false"
    },
    {
       "id": "2",
       "texte": "a ne pas faire",
       "actif": "true"
    },
    {
      "id": "3",
      "texte": "surtout a faire",
      "actif": "false"
    }
  ]
}

Ce format est prévu pour un échange entre le code javascript et le serveur web et non pour être consulté par des internautes.

Vous pouvez vérifier que votre fichier est JSOn via un visualisteur en ligne tel que: Online JSON Viewer.

Les cours de technologie Web EMACS est disponible en téléchargement ici.

Les outils de développement (Eclipse J2EE et tomcat 7) sont disponibles selon l’OS de votre poste à cette adresse 146.19.252.215/Emacs/. Ce sont des anciennes versions mais vu le peu d’évolution des deux logiciels, il n’y a pas beaucoup de différence avec les versions actuelles.

Je ne peux que vous recommander l’utilisation des outils de développement de Chrome (CTRL+MAJ+I) ou de Firefox (CTRL+MAJ+Q) surtout l’onglet « Réseau/Network » et le clic droit sur une page web > « Inspecter » et « Source de la page/Code source de la page ».

TP 0 Configuration et installation de Tomcat avec Eclipse J2EE  à adapter selon votre OS et votre configuration personnelle

1. Installation d’un JDK récent version Oracle: télécharge par exemple JDK 8uXXX en version sans exemple ou netbeans. Notez le dossier où se trouve votre JDK, attention en cas de mise à jours du JDK, le dossier peut changer…
2. Installation d’Eclipse J2EE depuis 146.19.252.215/Emacs/ dans un dossier dont le chemin ne comporte pas d’espace et d’accents par exemple sur le bureau dans un dossier Developpement.
   NOTA: Windows 7/8/10 contrôle de manière très précautionneuse les fichiers se trouvant dans les dossiers Programmes, Program Files (x86), Windows et tout dossier à la racine du disque C. Il est préférable d’avoir un dossier Developpement à la racine du disque dur dans lequel on place les outils de développement.
3. Démarrer Eclipse J2EE pour vérifier que le JDK a bien été trouvé car Eclipse utilise Java pour s’exécuter. A l’exécution d’Eclipse, un workspace est demandé pour stocker tous les configurations d’Eclipse et les projets Java Web. Merci de faire attention que le chemin de ce workspace ne contienne pas d’espace ou d’accents. Je vous conseille par exemple c:/Developpement/workspace_j2ee par exemple.
   NOTA: si vous voulez changer de workspace, faire dans Eclipse menu « File » > « Switch Workspace »
4. Téléchargement d’une version de Tomcat 7.0.67 et la dézipper dans votre dossier Developpement par exemple dans C:/Developpement/apache-tomcat-7.0.67/. Attention à ne pas avoir tomcat dans un sous dossier d’apache-tomcat-7.0.67.
5. Configuration d’un JDK par défaut et non d’un JRE. Eclipse J2EE utilise un Java JDK ou JRE pour s’exécuter. Il peut gérer aussi plusieurs JRE/JDK selon vos besoins de configuration. Pour simplifier nos développement, nous allons indiqué un unique JDK auprès d’Eclipse pour éviter les conflits et les erreurs.
   1. Menu « Windows » > « Preferences » > « Java » > « Installed JREs »
   2. Bouton Add pour ajouter une  » Standard VM « dont le JRE Home et le dossier localisé dans l’étape 1 avec l’installation du JDK.
   3. Rendre le JDK par défaut et effacer l’ancien JRE
      
       Un seul JDK ici en version jdk1.7.0_17 pour éviter les problèmes d’en avoir plusieurs et de ne plus savoir lequel est activé par défaut. Eclipse permet de jongler entre plusieurs perspectives qui sont affichées en haut à droite dans un sorte d’onglet. Dans la version xubuntu il s’agit d’un JDK 8.

6. Pour ouvrir une nouvelle perspective, faire
   Menu « Window » > « Open Perspective » > « Other »
   Les perspectives que l’on va utiliser sont Java EE et Debug, il faut afficher la perspective Java J2EE et dans cette perspective, activer l’onglet server (voir l’image)
   
7. Menu File > New > Other > Server > Server > Next > Apache > Tomcat v7.0 Server. Il faut indiquer le  » Tomcat Installation Directory » c:/Developpement/apache-tomcat-7.0.67/ puis Finish. Le JRE à indiquer est celui qui a été configuré à l’étape 6 (il s’agit donc un JDK et non un JRE)
8. Dans l’onglet « Server  » faire clic droit sur le serveur nouvellement créé, puis choisir Debug
   
9.  L’onglet « Console  » doit afficher les traces du serveur Tomcat. Ouvrez un navigateur et indiquez cette URL (Le port par défaut de tomcat est 8080) http://127.0.0.1:8080/
10. Dans Eclipse, faire un nouveau projet File > New > Other > Web > Dynamic Web Project
11. Il faut indiquer un nom de projet par exemple  » Essai  » puis Finish
12. Il faut ensuite placer une image PNG ou JPG dans le dossier « WebContent » du projet Essai
13. Trouver l’URL pour accéder à cette image par le navigateur puis déplacer cette image dans un sous dossier img dans WebContent
14. Ensuite, télécharger une page HTML et CSS par exemple depuis cet exemple du CSS Zen Garden.
15. Vous pouvez copier coller le fichier Html et CSS depuis votre dossier téléchargement dans Eclipse en faisant glisser les fichiers dans le dossier WebContent.
16. Vérifier que cette page s’affiche correctement en vérifiant les URLs via les outils de développement dans le navigateur: 
17. Il faut fabriquer ensuite une page index.jsp dans le dossier WebContent avec le code ci-dessous par exemple:
18. Pour lancer le Debug, après avoir placé un point d’arrêt, il faut faire un clic droit sur ce code puis Debug As > Debug on Server ( on peut cocher « Always use this server when running this project » pour éviter cette étape):
    
19. Bouton Next pour ajouter le projet dans la liste à droite des projets déployés sur ce tomcat. Puis bouton « Finish » pour lancer le debuggage pas à pas.
20. Pour plus de détail sur le Debug voir cet article spécifique : (Eclipse débogage et points d’arrêts)
21. Essayez d’inclure différents contenu comme des images et du Css avec la page jsp en mettant ces images et un fichier css dans des dossiers séparés dans le dossier WebContent.