Introduction

En deux mots

• x4js est un framework TypeScript.
• x4js est léger : votre application n’embarque que les composants qu’elle importe.
• x4js est surtout pensé application, dans le navigateur ou en local avec Electron. Vous pouvez créer des sites web avec, mais il n’est pas fait pour ça.
• x4js est open source, sous licence MIT.

Concept

L’idée de base est que l’on ne manipule pas directement le HTML : on crée des objets qui en contiennent d’autres. Le code définit la structure des éléments (conteneurs, menus…) et le style, qui est en CSS, définit l’apparence.

Dans x4js, tous les éléments dérivent d’un élément de base qui est Component.

Son constructeur accepte un seul paramètre, typé, qui contient toutes les informations pour sa création. Vous utiliserez presque toujours ces deux-là :

• cls : les classes CSS de l’élément, par exemple "ma-classe mon-autre-classe" ;
• content : soit des sous-éléments, soit du texte.

En général, on définit une classe pour la page principale, puis une classe pour chaque sous-page ou chaque boîte de dialogue.

Concrètement, pour créer l’en-tête d’une future application, on écrit :

import { Button, HBox, Icon, Label } from 'x4js';

// HBox est un conteneur horizontal
const header = new HBox( {
  cls: "header-bar",    // cet élément aura la classe css 'header-bar'
  content: [
    new Icon( { iconId: "var:app-icon" } ),
    new Label( { flex: 1, text: "My application" } ),  // un élément flex remplit l'espace disponible
    new Button( { label: "Menu" } ),
  ]
});

Comme vous le voyez, pas de HTML. Vous vous concentrez sur votre application et non sur un mélange de HTML et de JavaScript, et un éditeur comme VS Code vous assiste efficacement pendant la saisie, puisque tout est typé.

Les composants utilisés ici (Icon, Label et Button) sont fournis avec x4js. Il y en a plus d’une cinquantaine, de quoi construire une application standard. Vous pouvez bien sûr développer les vôtres, c’est très simple.

L’application

Un élément particulier est Application. C’est un singleton : il n’y en a qu’un par application. Pour fonctionner, vous déclarez une application et vous lui donnez sa vue principale.

import { Application } from 'x4js';

const app = new Application( );
app.setMainView( header );

Les événements

Les composants, comme l’application, peuvent être source d’événements. Les boutons, par exemple, émettent un événement click. Ces événements sont typés et connus de l’éditeur de code.

Pour être prévenu quand on clique sur le bouton de l’en-tête, on remplace sa création par :

new Button( { label: "Menu", click: ( ) => this.onClick( ) } )

La méthode onClick sera appelée à chaque clic. Vous pouvez évidemment définir vos propres événements.

Note

L’application est elle aussi émettrice d’événements : les pages peuvent s’y abonner et y émettre des messages qui concernent toute l’application. Voir État et messages.

Les propriétés

Les composants ont un certain nombre de propriétés, définies à la construction et modifiables ensuite par leurs méthodes. Pour changer le texte d’un libellé :

const status = new Label( { text: "Initial text" } );

status.setText( "New text" );

Note

Un composant est un objet persistant : il est créé une fois, puis mis à jour par ses méthodes. Rien n’est recalculé automatiquement. Quand vous écrivez un composant, c’est à lui de mettre à jour son affichage lorsqu’une de ses valeurs change, ce qui est très simple à faire.

Accès bas niveau

Lorsque vous développez de nouveaux composants, il est essentiel de pouvoir interagir avec le DOM. Tous les composants ont une propriété dom, sur laquelle vous pouvez appeler toutes les méthodes standard. Le composant fournit cependant bon nombre d’encapsulations pratiques, et une mécanique très simple pour gérer les événements du DOM.

this.setAttribute( "tabindex", 0 );    // ajout de l'attribut tabindex
this.setWidth( 100 );          // changement de la taille
this.addDOMEvent( "click", ( ev ) => this.onDOMClick( ev ) );

x4js définit aussi quelques événements synthétiques, comme created, removed et resized, pratiques pour gérer les composants dynamiques.

Dans le code d’une application, cet accès reste l’exception : les méthodes des composants couvrent les besoins courants. Il sert surtout à écrire ses propres contrôles, voir Contrôles utilisateur.

Outils

x4js propose un certain nombre d’outils pratiques au jour le jour :

• Point, Size, Rect et Color pour la géométrie et les couleurs ;
• des fonctions pour extraire ou formater les dates ;
• un gestionnaire de traductions, voir Traduction ;
• des outils de création et de manipulation de SVG ;
• un gestionnaire de glisser-déposer ;
• des minuteries nommées, disponibles sur chaque composant.

Le framework dispose aussi d’un accès aux styles, qui permet de lire ou de modifier le contenu du CSS, par exemple les variables CSS.

Enfin, vous avez les sources de tout : le paquet est livré en TypeScript.

Quelques règles

Débarrassons-nous tout de suite des règles. Il y en a très peu, et il vaut mieux les respecter quand on développe avec x4js.

1. Un élément ne connaît jamais son parent. Il envoie des notifications à celui qui le possède.
2. Pas de cosmétique dans le code, autant que possible. La cosmétique n’a pas sa place dans le code, c’est le rôle des styles.
3. Pas de textes en dur si vous développez des composants. Vous ne savez pas dans quelle langue ils seront utilisés, et la plupart des logiciels doivent aujourd’hui être multilingues. Gagnez du temps, faites-le dès le début : x4js a un module natif pour cela.
4. Pas de bagarre avec le CSS. Un élément ne se place pas correctement, vous devez mettre des marges négatives ou utiliser !important ? Vérifiez votre CSS, le problème n’est pas dans le code.
5. Restez simple. x4js a peu de concepts : composants, état, événements, magasins de données. N’ajoutez pas d’architecture par-dessus tant qu’un problème réel ne le demande pas.

Et ensuite

• Premiers pas : créer un projet et le lancer.
• Design d’interfaces : découper un écran en conteneurs.