[Cycle de progression] Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
/fdata%2F0451946%2Favatar-blog-1066097-tmpphp3M2yUZ.png){kind=avatar}
Bonjour,
J’étudie en profondeur Knockout, Durandal et Angular... dans ce cadre j'ai réalisé une petite source reprenant beaucoup de fonctionnalités de Knockout, je l'ai postée sur CodeS-SourceS trouvant qu'elle correspondait bien au style de sources qu'il peut être intéressant de trouver sur le site
Si le tour d'horizon que je fais de ces 3 Frameworks JavaScript est suffisamment consistant , j'en ferai un PDF que vous pourrez trouver sur mon nouveau blog .Peut être que je le posterai également ici
Une bonne série de liens utiles qui évitent de chercher à droite à gauche comme si on avait perdu ses clefs 
jQuery http://jquery.com/
jQuery UI http://jqueryui.com/
jQuery Mobile http://jquerymobile.com/
knockout http://knockoutjs.com/
(http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js)
Angular https://angularjs.org/
Durandal http://durandaljs.com/
TypeScript http://www.typescriptlang.org/
Bootstrap http://getbootstrap.com/javascript/
Require http://requirejs.org/docs/api.html
Toastr https://github.com/CodeSeven/toastr
spa http://www.johnpapa.net/spa/
nodejs http://nodejs.org/
Breeze http://www.breezejs.com/
Ember http://emberjs.com/
Less http://lesscss.org/
Underscore http://underscorejs.org/
Moment http://momentjs.com/
Amplify http://amplifyjs.com/
Sammy http://sammyjs.org/
Asp.Net http://www.asp.net/
Tools
Web Essentials http://vswebessentials.com/
Compatibilty http://www.quirksmode.org/compatibility.html
Resizebrowser http://resizemybrowser.com/ http://mattkersley.com/responsive/
Media queries http://media-queries.aliasdmc.fr/
Tests
Jasmine http://jasmine.github.io/
Editeurs en ligne
JsFiddle http://jsfiddle.net/
Plunker http://plnkr.co/
CDN
Google https://developers.google.com/speed/libraries/devguide?hl=fr
Microsoft http://www.asp.net/ajaxlibrary/cdn.ashx
Le but est de bien structurer les fichiers (séparation des responsabilités), c’est-à-dire ne pas mélanger tout dans un seul fichier JavaScript.
J’utilise :
jQuery
Knockoutjs pour le « binding »
Web Api
Model (person.js)
| /// <reference path="knockout-3.1.0.js" />
var Person = function (id, name) {
this.Id = ko.observable(id); this.Name = ko.observable(name); } |
Service (personservice.js)
| /// <reference path="jquery-2.1.1.js" /> /// <reference path="knockout-3.1.0.js" /> /// <reference path="../models/person.js" />
var getAll = function (persons) {
var options = { url: "/api/persons", type: "GET", };
function querySucceeded(data) { data.forEach(function (item) { var p = new Person(item.Id, item.Name); persons.push(p); }); } return $.ajax(options).then(querySucceeded);
// Autre possibilité //$.getJSON("/api/persons", function (data) { // data.forEach(function (item) { // var p = new Person(item.Id, item.Name); // persons.push(p); // }); //}) }; |
ViewModel (persons.js)
| /// <reference path="jquery-2.1.1.js" /> /// <reference path="knockout-3.1.0.js" /> /// <reference path="../models/person.js" /> /// <reference path="../services/personservice.js" />
$(function () {
var Persons = ko.observableArray();
var vm = { Persons: Persons }
var refresh = function () { return getAll(Persons); };
refresh();
ko.applyBindings(vm); }); |
Et la page (Default.html)
| <body>
<form> <ul data-bind="foreach: Persons"> <li> <span data-bind="text: Name"></span> </li> </ul> </form>
<script src="Scripts/jquery-2.1.1.js"></script> <script src="Scripts/knockout-3.1.0.js"></script> <script src="Scripts/services/personservice.js"></script> <script src="Scripts/models/person.js"></script> <script src="Scripts/viewmodels/persons.js"></script> </body> |
Le contrôleur et le Model utilisés par celui-ci sont ultra simples
| public class PersonsController : ApiController { public IEnumerable<Person> Get() { return new List<Person>(){new Person(1,"Bellin, Marie"), new Person(2,"Adams, Angie")}; } }
public class Person { public int Id { get; set; } public string Name { get; set; }
public Person(int id, string name) { this.Id = id; this.Name = name; } } |
On peut pousser plus loin en utilisant Durandal, ce qui fera l'objet sans doute d'un article .
III jQuery et Web Api
Si on commence avec un projet vide et que l’on désire ensuite utiliser Web API, ajouter :
(toujours pareil)
| <script> $(function () { // code ici }); </script> |
Note on peut réduire l’url « http://localhost:12681/api/persons » à « /api/persons" si on accède au contrôleur depuis la même application
1-Get
Avec $.ajax
| // Méthode permettant d'afficher une liste de personnes dans la div "container" function displayPersons(persons) { var html = "<hr />"; $.each(persons, function (index, person) { html += "<strong>" + person.PersonID + "</strong>" + person.PersonFullName + "<br/>"; }) $("#container").html(html); }
$("#btGet").click(function (evt) { var options = { url: "http://localhost:12681/api/persons", type: "GET", success: function (persons) { displayPersons(persons); }, error: function (jqXHR, status, err) { alert(status + ", " + err); } }; // $.ajax(options); }); |
Avec $.getJSON
| $("#btGet").click(function (evt) { var url = url = "http://localhost:12681/api/persons"; $.getJSON(url, function (persons) { displayPersons(persons) }); }); |
2-GetOne(GET)
Avec $.ajax
| $("#btGetOne").click(function (evt) {
var options = { url: "http://localhost:12681/api/persons/" + $("#tbID").val(), type: "GET", success: function (person) { $("#container").html("<strong>" + person.PersonFullName + "</strong>"); }, error: function (jqXHR, status, err) { alert(status + ", " + err); } }; $.ajax(options);
}) |
Avec $.getJSON
| $("#btGetOne").click(function (evt) { $.getJSON("http://localhost:12681/api/persons/" + $("#tbID").val(),function (person) { $("#container").html("<strong>" + person.PersonFullName + "</strong>"); }) .fail( function (xhr, textStatus, err) { $("#container").html(status); });
}) |
3-Add (POST)
| $("#btAdd").click(function (evt) {
var person ={ personID:$("#tbID").val(), personFullName:$("#tbName").val() };
var options = { url: "http://localhost:12681/api/persons/", type: "POST", contentType: 'application/json; charset=utf-8', data: JSON.stringify(person), success: function () { displayPersons(); }, error: function (jqXHR, status, err) { $("#container").html(status); } };
$.ajax(options); }) |
4-Update(PUT)
| $("#btUpdate").click(function (evt) {
var person ={ personID:$("#tbID").val(), personFullName:$("#tbName").val() };
var options = { url: "http://localhost:12681/api/persons/", type: "PUT", contentType: 'application/json; charset=utf-8', data: JSON.stringify(person), success: function () { displayPersons(); }, error: function (jqXHR, status, err) { $("#container").html(status); } };
$.ajax(options); }) |
5-Delete (DELETE)
| $("#btDelete").click(function (evt) { var options = { url: "http://localhost:12681/api/persons/" + $("#tbID").val(), type: "DELETE", success: function () { displayPersons(); }, error: function (jqXHR, status, err) { $("#container").html(status); } };
$.ajax(options); }) |
Le contrôleur « classique »
Le contrôleur.
N’ayant pas de constructeur par défaut, si on ne définit pas les dépendances on a une erreur
Sinon le reste est classique, on vérifie que le modèle est valide (Data Annotations).S’il est valide on ajoute l’élément puis on redirige vers la page « Index », sinon on permet l’édition (affichage des erreurs grâce à jQuery validate)
Très utile pour taper rapidement du code HTML/CSS (Inclus avec Web Essentials)
Exemples
(Il suffit d’appuyer sur Tab)
Ce qui donne …
Fiddler http://www.telerik.com/download/fiddler
Fiddler peut être bien pratique pour débugger ses sites .On peut filtrer « Show Only Intranet Hosts » on peut également utiliser composer
Ressources
http://www.devcurry.com/2013/03/debugging-your-aspnet-web-apis-with.html
1 Permettre à l’application d’utiliser la fonction de recherche
Appxmanifest , Onglet « Délclarations » Ajouter « Rechercher »
L’application apparait désormais dans la liste des applications pour lesquelles on peut effectuer une recherche
2- Afficher les résultats d'une recherche dans une page
SearchResultPage
On ajoute 1 page au projet pour afficher les résultats (SearchResultPage) .Dans le code behind on définit les éléments à afficher(ici je définis la source de la CollectionViewSource de la page)
| protected override void OnNavigatedTo(NavigationEventArgs e) { string queryText = e.Parameter.ToString(); // On pourrait mettre à jour le titre de la page // pageTitle.Text = String.Format("Results for \"{0}\"", queryText); cvs.Source = new PersonService().GetAll(queryText); } |
App.xaml.cs
On demande à naviguer vers la page permettant d’afficher les résultats que l’on a créé en passant les paramètres (texte saisi dans le champ de recherche)
| protected override void OnSearchActivated(SearchActivatedEventArgs args) { Frame rootFrame = Window.Current.Content as Frame; rootFrame.Navigate(typeof(SearchResultPage), args.QueryText); } |
Il faudra affecter la source à resultsViewSource .exemple
resultsViewSource.Source = new PersonService().GetAll(queryText);
Et adapter les champs de la page et propriétés
3- Ajouter une liste de suggestions lors de la saisie
App.xaml.cs
Ajouter à la fin de la méthode OnLaunched
SearchPane.GetForCurrentView().SuggestionsRequested += App_SuggestionsRequested;
Et
On récupère la liste des noms de personnes correspondante à la saisie que l’on ajoute à la collection de suggestions.
| private void App_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args) { PersonService personService = new PersonService(); args.Request.SearchSuggestionCollection.AppendQuerySuggestions(personService.GetSuggestions(args.QueryText)); args.Request.GetDeferral().Complete(); } |
