La documentation est en cours de rédaction.

Présentation

Le projet rnb est un ensemble de fonctions javascript, communément appelé « librairie », qui permet d'accéder et/ou de manipuler l'arborescence DOM d'un document web et met à disposition une série d'outils de présentation de données.

La création de cette librairie s'est faite peu à peu, à partir de 2004, lorsque le javascript a fait irruption sur le site. A l'époque, une série de projets indépendants comme la présentation par onglet possédaient des méthodes ou des comportements communs et utilisables dans d'autres contextes. Pour simplifier le travail, il a fallu regrouper le tout de manière cohérente en un même endroit afin d'éviter les répétitions.

rnb peut parafois apparaître comme un outil d'expérimentation, mais il est utilisé en production à la fois sur ce site et dans un cadre professionnel.

Le coeur du système

La librairie possède toutes une série de propriétés et de méthodes chargées soit d'étendre les objets javascript existant (et palier le plus souvent aux insuffisances de certains navigateurs), soit de fournir de nouveaux objets qui peuvent exister dans d'autres langages.

rnb.env : l'environnement

L'objet rnb.env regroupe des informations sur l'environnement d'éxécution des scripts : nom du navigateur, numéro de version, système d'exploitation, etc. Il possède aussi un espace de nommage, rnb.supports, constitués de méthodes permettant de vérifier le support de certaines fonctionnalités.

Types natifs

• rnb.is([A-Z][a-z]+) : Série de méthodes d'identifications de type (rnb.isArray).
• rnb.arr : objet contenant des méthodes pour manipuler les tableaux.
• rnb.color : Objet de conversion de couleurs entre rgb et héxadécimal.
• rnb.date : Objet contenant des méthodes pour manipuler des dates.
• rnb.num : objet contenant des méthodes pour manipuler les nombres.
• rnb.obj : objet contenant des méthodes pour manipuler les objets.
• rnb.str : objet contenant des méthodes pour manipuler les chaînes de caractères.

• rnb.uri : Fonction de découpe de l'url pour récupérer une série d'informations.

Nouveaux types

• rnb.Boundary : Objet de gestion de valeurs comprises entre un minimum et un maximum.
• rnb.List : Liste de données repérées par un index.
• rnb.Map : Objet stockant des associations clé - valeur.
• rnb.Node : Objet possèdant des enfants de même nature.

Méthodes et les objets

• rnb.bind : Exécution d'une méthode dans le contexte d'un objet.
• rnb.merge : Fusionner deux objets.
• rnb.mixin : Etendre un objet avec un autre objet.
• rnb.extend : Etendre le prototype d'une fonction.
• rnb.inc : Insérer des appels à des fichiers javascripts ou css.

Nouveaux objets

• rnb.I18n : Objet de pseudo-internationalisation.
• rnb.CustomEvent : Evénement personnalisé.
• rnb.HashManager : Objet de gestion du hash de l'url.
• rnb.Request : Objet pour effectuer des requêtes asynchrones.
• rnb.ActionManager : objet pour gérer des actions sur une série d'éléments.
• rnb.ShortcutManager : Gestion de raccourcis-claviers.
• rnb.MouseMoveManager : Gestion des mouvements de la souris.
• rnb.Toggler : Gestion d'un système à état double (in/out, on/off).
• rnb.Mask : Composant qui permet de créer un élément qui couvrira la totalité de son élément parent, empêchant ainsi toute action sur la page avec la souris.

rnb.dom

Espace de nommage regroupant une série de méthodes pour :

• Créer ou récupérer des éléments.
• Manipuler les éléments ou l'arborescence.
• Identifier des éléments.
• Récupérer des informations diverses.
• Manipuler les attributs.
• Manipuler un attribut particulier, la classe.
• Gérer l'écoute des événements.
• Manipuler les styles.

Cette portion de la librairie est la plus ancienne car elle a(vait) un but précis : compenser les lacunes de certains navigateurs web n'implémentant pas correctement les spécification DOM du W3C. Elle a aussi offert pendant longtemps des méthodes qui n'existaient pas nativement, comme tout ce qui concerne la gestion de l'attribut class ; ce n'est plus tout a fait le cas avec l'arrivée du HTML 5.

La quasi-totalité des méthodes obéissent au principe simple de « lazy pattern » : pour une fonctionnalité donnée, si une API DOM existe, elle sera utilisée, sinon un code de subsitution prend le relais ; ce test est effectué uniquement la première fois que la méthode est appelée.

rnb.dom.myMethod = function () {
    rnb.dom.MyMethod = (/* supports functionnality */) ?
        function () { /* native DOM API */ } :
        function () { /* alternative code */ };
    return rnb.dom.myMethod();
};

rnb.Base

La plupart des composants de la librairie héritent d'un objet de base, rnb.Base, dont le rôle est :

• De mettre à disposition un constructeur qui reçoit en paramètre un objet de configuration.
• De déclencher une série de méthodes dans le cycle de vie de l'objet (initialisation, configuration, destruction).
• D'hériter par défaut de l'interface rnb.eventTarget.
• De mettre à disposition un gestionnaire d'événements DOM.

Interfaces

Ces composants peuvent « hériter » sous forme de mixins d'une multitude d'objets litéraux aux fonctionnalités particulières, appelés par analogie avec d'autres langages de programmation des « interfaces » :

• rnb.element : objet dérivé de rnb.target qui offre une gestion plus poussé d'un élément DOM (creation, affichage et manipulations diverses).
• rnb.eventTarget : objet reprenant l'interface DOM EventTarget et permettant à un objet de gérer des événements personnalisés.
• rnb.itemable : Objet regroupant des méthodes de gestion d'une collection d'« items », qui peuvent être de tout type (l'utilisation la plus évidente est celle d'un objet contrôlant une liste à puces par exemple).
• rnb.lengthable : API pour définir les grandeurs numériques d'un élément HTML, telle la taille (rnb.sizeable) ou la position (rnb.positionable).
• rnb.navigable : API de navigation (premier, précédent, courant, suivant, dernier).
• rnb.playable : Interface permettant de lancer un processus à interval régulier, de l'arrêter ou de le mettre en pause.
• rnb.target : objet qui permet de gérer un élément DOM en tant que cible de divers traitements.

rnb.create

La méthode rnb.create est une méthode utilitaire qui permet de définir en une seule fois un objet, avec ces membres, l'objet qu'il étend et les mixins dont il hérite. La syntaxe de base est la suivante :

var Foo = rnb.create({
    // base
    $BASE: rnb.Base,
    // mixins
    $MIXINS: [bar],
    // constructor
    constructor: function () {
        // call base constructor
        rnb.Base.call(this);
        // build foo
    },
    // override a bar method
    barMethod: function () {
        // call "super"
        bar.barMethod.call(this);
        // do something else
    }
});

Configure, define et require

• rnb.define(id,? dependencies,? builder)
• rnb.require(modules, callback)

rnb.define est la méthode qui permet de définir un module dans un fichier :

• id est l'identifiant du module, qui correspondra à l'espace de nommage qu'occupera l'objet définit dans la librairie.
• dependencies est une liste d'identifiant de modules dont le module courant à besoin.
• builder est une fonction qui sera appelée dés que les dépendances seront disponibles ; c'est là que l'objet javascript correspondant au module sera défini.

rnb.define('foo', ['rnb/Bar'], function (Bar) {
    var Foo = function () {
        this.bar = new Bar();
    };
    // exports
    return Foo;
});

rnb.require est la méthode à utiliser pour charger les modules dont on en a besoin, et d'exécuter du code une fois que tous les modules demandés sont disponibles.

// Demander le chargement de modules
rnb.require(['rnb/gc/Nav'], function (Nav) {
    // Les modules sont prêts ; on peut les utiliser
    var myNav = new Nav();
});

Voir aussi reconstruction de la librairie javascript rnb pour le changement d'API.

rnb/gc : composants graphiques

Espace de nommage pour des composants graphiques courant, habituellement utilisés dans une page web.

AccordionView

Objet dérivé de rnb/gc/ContentView et permettant de présenter les panneaux de contenu sous forme d'un accordéon. (Voir la démo).

ContentView

Objet permettant de créer une série de panneaux (rnb/gc/Pane) à partir d'un contenu hiérarchisé. Cette hiérarchie est généralement construite à partir d'éléments titre.

L'objet ne préjuge en rien de la manière dont les panneaux seront ensuite présentés ou de quelle manière on peut interragir avec eux. Il se contente de construite le markup adéquat. C'est pourquoi cet objet est avant tout utile en tant qu'héritage.

ContentView était dés plus utile avant le développement de HTML 5 et l'apparition d'éléments comme section, header et footer.

FloatPane

Objet dérivé de rnb/gc/Pane permettant de contsruire un panneau « flottant ».

ItemView

Objet permettant de gérer une série d'items, quelqu'ils soient, et de les associer à un objet de navigation.

Layout

Objet permettant de construire ou de gérer une structure HTML composé de plusieurs conteneurs : header, body, footer, left et/ou right.

|-----------------------|
|           hd          |
|-----------------------|
|       |       |       |
|   lt  |   bd  |   rt  |
|       |       |       |
|-----------------------|
|           ft          |
|-----------------------|

Menu

Objet pour créer des menus de navigation ou contextuel :

• Menu : menu.
• ContextMenu : menu contextuel
• MenuBar : barre de menus.

Nav

Objet pour créer une liste de navigation.

Pane

Objet permettant de créer un panneau. Il fournit une API pour manipuler les 3 zones de l'élément : un en-tête, un coprs et un pied.

<div class="rnb_pane">
    <div class="hd"></div>
    <div class="bd"></div>
    <div class="ft"></div>
</div>

<section class="rnb_pane">
    <header></header>
    <div class="bd"></div>
    <footer></footer>
</section>

PopupManagaer

Objet pour gérer un système de popups déclenchées lors d'une action (survol, click) sur des liens. Le contenu de ces popups est soit ce que pointe le lien (quand il s'agit d'une ancre), soit un contenu définit par l'utilisateur. (Voir la démo).

RTE

Développé à l'époque où j'envisageai une édition du site web omacronides en ligne, il est abandonné depuis un moment. Les facilités d'édition permises par le HTML 5 pourrait raviver mon intérêt pour ce composant.

Slider

Objet graphique permettant de sélectionner une valeur numérique sur une échelle graduée. En développement.

SlideView

Objet qui permet de présenter une ou plusieurs séries de contenus dans un document web sous forme de diaporama (ancien rnb.gc.Gal). (Voir la démo).

Spinner

Objet graphique composé d'un champ numérique et de boutons fléchés permettant d'augmenter ou diminuer la valeur du champ.

Splitter

Objet permettant de découper une zone de contenu en panneaux dont la taille peut être redimensionnée.

StxHighlight

Appliquer une coloration syntaxique à des extraits de code de différents langages : autoit, bash, css, html, java, javascript, php et python. Les règles de coloration de ces langages sont en constante évolution / amélioration.

Suggest

Objet permettant de gérer une liste de suggestion pour un élément input.

Table

Composant pour ajouter des fonctionnalités supplémentaires aux tableaux HTML : tri par colonnes, redimensionnement des colonnes, en-tête fixe, scroll, etc.

TabView

Objet héritant de rnb/gc/ContentView et présentant les panneaux créés sous forme d'onglets. (Voir la démo).

Toc

Création d'une table des matières pour un document web à partir de ses titres.

Tree

Objet qui permet de transformer une série de listes à puces hiérarchisées en arbre dont les noeuds peuvent être pliés / dépliés.

Window

Objet pour créer des structures graphiques flottantes, mimant le comportement d'une fenêtre d'application de bureau, mais dans une page web.

rnb/stx

Package regroupant les objets de gestion de syntaxes.

En développement.

rnb/wg

Package pour les objets faisant appel à des des données de source tiers ou qui ne sont pas forcément des composants graphiques classiques d'une application web.

Apod

Composant qui permet d'afficher l'image du jour de la NASA.

CladeTree

Présentation graphique d'un arbre cladistique. Le concept dérive d'une première version uniquement en CSS écrite en 2004 mais dont les caractéristiques graphiques dépendaient beaucoup de l'arbre cladistique présenté. CladeTree est donc une tentative de généraliser le concept afin de pouvoir présenter n'importe quel arbre.

En développement.

GeoScale

Echelle de temps géologique. Plus de détails.

En développement.

PTE

Tableau périodique des éléments.

En développement.

rnb/fx : effets spéciaux

Package pour les « effets spéciaux».

Anim

Objet pour appliquer des animations à différents styles d'un élément. L'API permet - entre autre - d'animer des styles numériques (tailles) et à base de couleurs ou de définir le temps d'animation.

Dragger

Objet pour ajouter la possibilité de déplacer un élément par glisser-déposer. La prochaine évolution de ce composant consistera à implémenter la nouvelle API drag&drop du HTML 5. (Voir la démo).

Elastic

Créer un effet dynamique de type élastique. (Voir la démo).

Resizer

Objet pour ajouter la possibilité de redimensionner un élément en l'aggripant par l'un des coins, comme on peut le faire sur une fenêtre d'application de bureau.

Zoom

Objet de gestion de zoom sur des images.

rnb/forms : gérer les formulaires

stylecheckBoxes

La personnalisation des champs de formulaire peut être une véritable gageure, comme cela a déjà été évoqué dans un précédent article. Leur rendu peut d'ailleurs être considérablement différent en fonction des navigateurs web. rnb.forms.styleCheckBoxes est une petite fonction qui permet de manipuler un peu plus librement le rendu des champs de type « checkbox » en jouant sur la présentation de son label associé.

Validate

Objet permettant de définir des règles de validation d'un formulaire, basée notamment sur le type de données attendues pour chaque champ.

Historique

2004-12

Scripts indépendants prélude à certains composants de la librairie

• Moteur de recherche (futur rnb.gc.Suggest).
• Gestion d'onglets dérivée du DomTab de Christian Heilmann (futur rnb.gc.TabView).
• Gestion de gallerie d'images dérivée d'un script de Jeremy Keith (futur rnb.gc.Gal).
• Gestion de popup (futur rnb.gc.Popup).

2005-04

Correction de bugs.

2005-08

• Evolution du gestionnaire de popup.
• include : inclure des appels à des fichiers javascript et css.
• Version finale du moteur de recherche.
• Composant Tab (rnb.gc.TabView).
• Composant Gal (rnb.gc.Gal).
• Composant StxHighlight (rnb.gc.StxHighlight).
• Débuts de ce qui deviendra rnb.dom.

2006-04

• Objet de requêtes asynchrones (futur rnb.xhr)
• Popup avec requêtes asynchrones
• Composant Tree(rnb.gc.Tree).

2007-04 - rnb 1.0

Espace de nommage rnb

• Méthodes de manipulation de l'arborescence DOM, des attributs (class), de gestion des événements (rnb.dom).
• Espace de nommage rnb.fx avec dragger et pseudo-anim.
• rnb.Toggler

2008-01 - rnb 2.0

Réécriture complète de la plupart des composants, proches de leur forme définitive.

• Méthodes d'indentification de type, de manipulation de chaînes de caractères, de gestion des méthodes.
• rnb.dom enrichit : forme presque définitive même si les méthodes sont encore distribuées dans 3 espaces de nommage différents.
• rnb.fwk : gestion des dépendances et des fichiers minifiés.
• Gestion du mouvement de la souris (rnb.MouseMoveManager).
• Composants rnb.fx.Anim, rnb.fx.Dragger, rnb.fx.Resizer, rnb.fx.Zoom.
• Composants rnb.Nav (rnb.gc.Nav), rnb.Splitter (rnb.gc.Splitter), rnb.TableView (rnb.gc.Table), rnb.Toc (rnb.gc.Toc).
• Composant apod (rnb.wg.Apod).

2008-06

• Espace de nommage rnb.comp, prédécesseurs de rnb.gc et rnb.wg.
• rnb.fwk : début de gestion des héritages.
• Espace de nommage rnb.forms.

2009-05 - rnb 3.0

Nouvelles structures et organisation.

• Espaces de nommage rnb.gc et rnb.wg en lieu et place de rnb.comp.
• Interfaces de comportement et rnb.Base pour factoriser le code et harmoniser les comportements.
• Composants rnb.gc.ContentPane, rnb.gc.Pane, rnb.gc.Menu, rnb.gc.RTE

2010-04

• Composant rnb.gc.Spinner.
• Composants rnb.wg.CladeTree, rnb.wg.GeoScale et rnb.wg.PTE.

2010-10

rnb.gc.Gal devient rnb.gc.SlideView, un outil plus générique.