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) {
                    console.log(data);
                    //alert("Status " + status + " Data " + data);
                })
                        .error(function(jq, status, error) {
                    alert("Error " + status + " : " + error);
                })
                        .done(function() {
                    $(this).addClass("done");
                });

            });