A l’heure où le HTML5 se rapproche à grand vitesse de sa finalité, nombreux sont les frameworks javascripts qui prennent en charge les fonctionnalités les plus avancés des navigateurs.

Pas la peine de faire un rappel sur jQuery, en revanche une bibliothèque de composants UI moins connue (en tout cas des non-développeurs .NET) propose désormais un framework complet et puissant basé sur jQuery et exploitant le HTML5 : Kendo UI de Telerik.

Telerik est très connu dans le milieu .NET pour fournir des outils de développements Microsoft : composants Web UI, applications Desktop puissantes, composants Silverlight, ORM pour le .NET, Reporting, assistant de code, outils de tests, intégration continue … Bref l’éditeur americano-tchèque représente la plus grande innovation du .NET framework à lui tout seul. Très compétents autour des composants Web complexes : DataGrid, Drag & Drop, Portlets, … Ils proposent désormais leur efficacité sur un framework totalement indépendant de leurs outils Microsofts et entièrement écrit en Javascript, CSS et HTML : Kendo UI.

Contrairement aux autres produits Telerik qui reposent sur un modèle payant, Kendo UI est sous licence GPL de base et payante pour avoir le support auprès de Telerik.

Les composants sont très nombreux : Grid, Menu, AutoCompletion, Graphes, Time / Date picker, Upload, Windows, Validation, DataSource.

De nombreux exemples sont disponibles sur cette page : http://demos.kendoui.com/web/overview/

Deuxième vocation de Kendo UI, fournir un toolkit HTML5 adapté aux appareils mobiles.

Troisième point fort de Kendo, les graphiques générés en HTML5, idéal pour se débarasser de composants Flash ou Silverlight pour afficher des histogramme tout en conservant une ergonomie puissantes et des animations sympas.

Cerise sur le gâteau, Kendo UI est construit sur une base jQuery, ce qui évite des redondances de libraires CSS et des conflits.

On commence à trouver des projets d’intégrations de Kendo UI pour des frameworks de développement en PHP, Java, Ruby et .NET (même si les UI payantes sont majoritaires).

N’hésitez pas à partager vos retours sur Kendo UI.

Site officiel : http://www.kendoui.com/

Lazy Load est un plugin jQuery qui optimise le chargement des pages où il y a beaucoup d’image lourdes. Son principe : charger les images au fur et à mesure que l’utilisateur descend la « scrollbar ». Du coup le travail du navigateur est optimisé et cela permet d’afficher des images de très grande tailles sur une seule page.

Son fonctionnement est extrêmement simple, il suffit d’afficher vos images avec des balises HTML « <img> » pis le plugin se charge de tout le reste.

// Ce petit bout de code est suffisant pour mettre en place Lazy Load
$("img").lazyload();

// On peut choisir une image de remplacement en attendant le chargement
$("img").lazyload({ placeholder : "img/grey.gif" });

// Utilisation d'effets de transitions pour les images
$("img").lazyload({
<pre>    placeholder : "img/grey.gif",
    effect : "fadeIn"
});

// Il existe plein d'autres options pour personnaliser ce plugin

Vous trouver une demo ici : http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
Le site officiel du plugin avec la documentation : http://www.appelsiini.net/projects/lazyload

Le magazine Smashing vient de publier un article très intéressant sur jQuery.  Il regroupe une cinquantaine de tutoriaux sur des plugins jQuery indispensables.

Avoir absolument à cette adresse : http://www.smashingmagazine.com/2009/08/23/50-useful-new-jquery-techniques/

Un problème majeur dans la production d’une application, c’est de centraliser les informations. En effet, il existe maintenant les serveurs de versions (SVN, CVS, Team Foundation Server, …) ainsi que des outils de gestion de projet comme Trac avec des éditeurs de Wiki, report de bugs, etc …

Cependant, il nous manque bien souvent, des outils simples et flexibles que l’on puisse utiliser sur du Web pour faire de la conception avec des diagrammes UML sans passer par les mastodontes de la conception comme IBM Rationnal Rose, Sybase PowerAMC, Windev, et autres …

Voilà un plugin jQuery bien ambitieux, yUML vous permet d’écrire votre conception UML dans un environnement Web et de la générer instantanément.

Doucement ne sautons pas de joie imédiatement, il ne s’agit qu’une première version beta et elle se limite aux diagrammes de classes et aux cas d’utilisation (usecase)

L’ensemble des polices de caractères et images qui constituent le diagrammes sont entièrement configurables, on peut y ajouter de la couleur.

Le script générant le diagramme UML est écrit dans une div spécifique :

[Customer{bg:orange}]<>1->*[Order{bg:green}]
[Customer]-[note: Aggregate Root{bg:cornsilk}]

Voici un exemple de script pour générer un diagramme de classe simple :

On instancie un diagramme de classe avec le code suivant :

Le diagramme de cas d’utilisation (usecase) se construit avec le code suivant :

Voici une exemple de diagramme de cas d’utilisation que j’ai réalisé avec le programme du site officiel :

Ce petit programme s’avère intéressant pour des projets de taille modeste, il n’est pas le seul il existe déjà des outils principalement développés avec GWT (Google WebTool Kit) et avec le framework Dojo.

Le projet est téléchargeable sur le site officiel : http://yuml.me/

jqDialog : boites de dialogues avec jQuery

Dans une application Web, on a souvent besoin d’afficher des petites informations comme des notifications, ou encore demandez des confirmations ou des mini-formulaires. Dans une application bureau, on utiliserait des boites de dialogues.

jqDialog permet de répondre à cette problématique, ce plugin jQuery propose en effet de propulser rapidement et simplement des boites de dialogues pour des utilisations diverses.

Le plugin est téléchargeable sur le site de jQuery : http://plugins.jquery.com/project/jqDialog

Ses utilisations multiples correspondent à des méthodes bien précises sur le plugin, par exemple pour afficher une simple  notification :

 jqDialog.notify("This dialog will disappear in 3 seconds", 3);

Pour afficher une alerte, on a également une méthode appropriée :

jqDialog.alert("This is a non intrusive alert",
    function() { // callback function for 'OK' button
        alert("This intrusive alert says you clicked OK");
    }
);

Pour faire une simple demande de confirmation pour une suppression par exemple, pas besoin de générer du HTML :

jqDialog.confirm("Are you sure want to click either of these buttons?",
    function() { alert("This intrusive alert says you clicked YES"); }, // callback function for 'YES' button
    function() { alert("This intrusive alert says you clicked NO"); } // callback function for 'NO' button
);

Ou bien on peut y passer du contenu HTML pour créer un formulaire en ajax par exemple :

jqDialog.content('No dialog controls, just custom content
');

Des exemples sont disponibles à l’adresse suivante : http://kailashnadh.name/code/jqdialog/ .

gallerific : gallerie photos jQuery

Gallerific est un plugin jQuery pour générer une gallerie de photos très puissante. Il possède un grand nombre de paramètres et il est très facile à mettre en place.

Vous pouvez le télécharger à l’adresse suivante : http://www.twospy.com/galleriffic/

Dans un premier temps, on insère le script de jQuery et le plugin :

Ensuite, on définit les calques nécessaires à l’affichage des miniatures et des images :

        
            
        

            (Any html can go here)


... (repeat for every image in the gallery)

et enfin on insère le javascript à paramétrer (on pourra également définir le nombre d’image à précharger pour gagner du temps) :

$(document).ready(function() {
    var gallery = $('#gallery').galleriffic('#thumbs', {
        delay:                  3000, // in milliseconds
        numThumbs:              20, // The number of thumbnails to show page
        preloadAhead:           40, // Set to -1 to preload all images
        enableTopPager:         false,
        enableBottomPager:      true,
        imageContainerSel:      '', // The CSS selector for the element within which the main slideshow image should be rendered
        controlsContainerSel:   '', // The CSS selector for the element within which the slideshow controls should be rendered
        captionContainerSel:    '', // The CSS selector for the element within which the captions should be rendered
        loadingContainerSel:    '', // The CSS selector for the element within which should be shown when an image is loading
        renderSSControls:       true, // Specifies whether the slideshow's Play and Pause links should be rendered
        renderNavControls:      true, // Specifies whether the slideshow's Next and Previous links should be rendered
        playLinkText:           'Play',
        pauseLinkText:          'Pause',
        prevLinkText:           'Previous',
        nextLinkText:           'Next',
        nextPageLinkText:       'Next ›',
        prevPageLinkText:       '‹ Prev',
        enableHistory:          false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
        autoStart:              false, // Specifies whether the slideshow should be playing or paused when the page first loads
        onChange:               undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
        onTransitionOut:        undefined, // accepts a delegate like such: function(callback) { ... }
        onTransitionIn:         undefined, // accepts a delegate like such: function() { ... }
        onPageTransitionOut:    undefined, // accepts a delegate like such: function(callback) { ... }
        onPageTransitionIn:     undefined  // accepts a delegate like such: function() { ... }
    });
});

Le projet est encore en beta, il soulève quelques petits soucis d’incompatibilité avec certains navigateurs notamment Internet Explorer (pour changer un peu) mais des nouvelles releases sortent fréquements et la roadmap s’avère assez ambitieuse et sérieuse.

Un projet à suivre de très près …

http://haineault.com/media/jquery/ui-timepickr/page/#d-demo-wrapper-2