Flapjax : une autre bibliothèque JavaScript

Flapjax est une bibliothèque JavaScript open source développée par Brown University en 2009. Ce framework répond aux demandes des applications client web en améliorant la manière de développer des interfaces riches. Les applications Flapjax fonctionnent dans n’importe quel navigateur qui supporte JavaScript sans ajouter de plugin. Flapjax est un langage purement algorithmique qui se repose sur DHTML et CSS. Le site officiel http://www.flapjax-lang.org/ offre les fichiers sources et des exemples complets. La dernière version 2.1 date du 2 Novembre 2009 est de 80,3ko.

Flapjax étend le JavaScript de la manière suivante :

  • Il inclut tous les standards du JavaScript,
  • Il rajoute de nombreuses nouvelles fonctionnalités
  • Il introduit de nouveaux concepts : Behavior, Event Streams

Premier application Flapjax

L’objectif de cette première application est d’afficher une horloge en temps réel.
<html>

<head>

<link rel="stylesheet" src="demo.css"/>
<script type="text/javascript" src="fx/flapjax.js"></script>

<script type="text/javascript" src="fx/fxws.js"></script>

<title>Flapjax Demo</title>
<style type="text/css">

div { padding: 5px 5px 5px 5px; }

</style>


<script type="text/javascript">

function loader() {
var timeB = timerB(100);
insertDomB(timeB, 'timer');

}

</script>
</head>

<body onload="loader()">
<p>The time is <span class="fixedBlock"><span id="timer">not initialized</span></span>.</p>

</body>

</html>

Cette première application les fonctions timeB et insertDomB de FlapJax qui permettent l’affichage d’horloge en temps réel.
La function timerB retourne l’heure tous les 100ms. La function insertDomB insère l’heure retournée par la fonction précédente dans le div passé en paramètre.

Il faut noter que l’heure système est en temps réel. Cela change toutes les secondes en incrémentant rapidement sur la page web.

Behavior :

Behavior signifie un comportement basé sur le temps. Sa valeur modifie en fonction du temps.
Dans l’exemple ci-dessus, on a constaté que la fonction timerB retourne une nouvelle valeur tous les 100ms. La fonction timerB est un behavior, d’où le suffixe B. Un behavior a une valeur continue.
D’autres exemples de Behavior:
• la position courante du curseur de souris,
• la couleur du fond d’une zone,
• le nombre de caractère saisis dans un champ.

Mettre un contenu à jour avec Behavior :

Prenons en considération, la position d’une souris. Etant donné que sa valeur change sans arrêt, on pourrait mettre à jour une entité selon sa position.
Voici un exemple qui dessine une zone de texte à l'endroit où est positionnée la souris.

<html>
<head>

<link rel="stylesheet" href="demo.css"/>
<script type="text/javascript" src="fx/flapjax.js"></script>

<title>Flapjax Demo: Follow the Mouse</title>

<script type="text/javascript">

function loader() {

insertDomB(
DIV({ className: 'contrastBlock',
style: { position: 'absolute',
left: mouseLeftB(document),
top: mouseTopB(document) }},
"the mouse!"),
' body',
'beginning');
}

</script>
</head>

<body id="body" onload="loader()">
</body>

</html>

Le code ci-dessous crée un div et initialise son style. Les attributs left et right sont passés en temps réel par les behaviors mouseLeftB et mouseTopB.

On constate que la zone de texte suit la position de la souris.

Mettre à jour un Behavior selon un contenu :

La valeur d'un behavior pourrait dépendre également du contenu d'un champ HTML
Voici l’exemple d’un formulaire dont le fond devient rouge lors de la saisie de plus de 4 caractères.

Enter a 4 caracter string:
<input id="textField" style={! {borderColor: {extractValueB{'textField').length == 4 ? 'green' : 'red')} !) />

L’attribut style borderColor dépend de la longueur de texte saisi dans le champ input. La fonction extractValueB convertit le longeur du texte saisi dans le champ en Behavior.

Dans l’exemple ci-dessous, le fond du premier champ est rouge car plus de trois caractères sont saisi. Toutefois, le fond du deuxième champ est vert car quatre caractères ont étaient saisis.

Event streams :

Considérons le phénomène suivant : Clic d’une souris, touche d’un clavier, arrivé de paquet de données.
La valeur est produite quand l’événement est déclenché en opposition au behavior qui a une valeur continue dans le temps.
Ce type de flux est un event stream.

Voici un exemple d’une page web qui contient un champ de saisie text, un bouton Save et un zone d’affichage.

<html>
<head>

<link rel="stylesheet" href="demo.css"/>
<script type="text/javascript" src="fx/flapjax.js"></script>

<title>Flapjax Demo: Basic Draft Saving</title>

<script lang="javascript">

function loader() {
var saveClickE = clicksE('saveButton');
var savedTimeE = saveClickE.mapE(function (_) {
var date = new Date();
return date.toLocaleString();});

var draftTextE = saveClickE.snapshotE($B('theText'));
insertDomB(SPAN({ className: "block" }, draftTextE.startsWith("")),"curDraft");
insertDomB(SPAN(savedTimeE.startsWith("")),"savedTime");
}

</script>
</head>

<body onload="loader();">

<p>Last Saved: <span id='savedTime'></span></p>

<form>
<textarea id='theText'></textarea> <br>

<input type='button' id='saveButton' value='Save Now'>

</form>

<p>Saved:</p> <div><span class="block" id='curDraft'></span></div>

</body>
</html>

Lors d’un clic de souris sur le bouton Submit deux événement sont produits ; L’heure du clic et l’affichage du texte saisie en mode draft dans un zone.

Conclusion

Le principal avantage de Flapjax se situe au tour de la gestion du rafraîchissement de la page et des clics utilisateur. Flapjax réduit le nombre de lignes de codes de moitié par rapport à JavaScript grâce à ses nombreuses fonctionnalités