ClientHTML5

Knockout

Knokcout  est une librairie Javascript Open Source permettant de faire du MVVM (Model Vue Vue Model). Le pattern MVVM permet une communication bidirectionnel entre le model et la vue sans passer par un contrôler ; Il est particulièrement intéressant pour les vues dynamiques. L’idée est d’associer les contrôles d’une vue avec des attributs d’un modèle de telle sorte que les modifications de l’un soient automatiquement prises en compte par l’autre.

Afin de vous aider à mieux comprendre le principe des services web, nous allons créer une autre application web complètement séparée de l'application Web exposant le Web Service. 

• Créez un projet HTML5/JavaScript sur Netbeans (File à New Project à HTML5 javaScript è Next)

•  Dans la fenêtre suivante, nommez votre projet puis Next  

• Sur la prochaine interface, choisissez l’option Download Online Templates è Twitter Bootstrap è Next

   

• Dans l’écran qui suit, sélectionnez Jquery et Knockout en appuyant à chaque fois sur > pour les faire passer du panel de gauche vers celui de droite è Finish

  

• A ce niveau vous devez avoir un projet qui ressemble à ceci

    
• Ajoutez une nouvelle page html au projet (Faites bouton doigt sur le projet è  New è  HTML File)
• Ajoutez les références jquery et knockout à la page que vous venez de créer  

N.B : Avec Jquery, on peut lancer déclencher automatiquement une action au chargement de la page, indépendemment de l'action utilisateur. Nous allons utiliser cette option pour lancer une requête AJAX au service Web.

$(function() {
                $.ajax({
                    url: "http://localhost:8080/Bibliotheque/webresources/categorie",
                    type : "GET",
                    headers: {
                        Accept: "application/json"
                    }
                })
                        .success(function(data, status, jq) {
                    $("div").text(JSON.stringify(data));
                })
                        .error(function(jq, status, error) {
                    $("div").text(JSON.stringify(status + " " + error));
                    
                });

            });

•  Exécutez le projet (Faites bouton doigt sur le projet puis Run)

Normalement, la requête ne doit pas aboutir! Elle est due au fait que votre application web et l'application RESTFull sont sous des domaines différents (localhost:8080 et localhost:8383).  C'est un mécanisme de sécurité sur les serveurs applicables aux requetes AJAX.  Elle est liée au Cross domain du serveur qui filtre les requetes AJAX en provenance d'un autre domaine. L'une des façons de palier ce problème est de modifier les paramètres du serveur pour accepter les requête asynchrones tout autre ou pour certains domaines en fonction des besoins de l'application;  Dans notre cas, nous allons modifier la configuration de notre application RESTFull pour acceter des requetes de n'importe quel domaine. 

1. Créer une classe RequestFilter dans votre application RESTFull qui se chargera de filtrer toutes les requetes vers le service qui dans JERSEY sont gérées par la servlet javax.servlet.Filter
2. Faites hériter votre classe de javax.servlet.Filter
3. Votre classe doit ressembler à ceci 

@WebFilter(filterName="Test",urlPatterns={"/webresources/*"})
public class Test implements javax.servlet.Filter{
 
 @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        System.out.println("doFilter");
        HttpServletResponse res = (HttpServletResponse) response;
        //Dire qu'on accepte des requetes de n'importe quel domaine sur les ressources gérés par la servlet
        res.addHeader("Access-Control-Allow-Origin", "*");
        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("Init");
        //throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
    }


    @Override
    public void destroy() {
        System.out.println("destroy");
       // throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
    }
}