Introduction

En 2 mots

• X4 est un framework typescript.
• X4 est tout petit. la version compilée, toutes options, fait 280Ko.
• X4 est français 🇫🇷 mais ça, ça ne change rien.
• X4 est surtout pensé Application, sur le cloud ou local avec Electron. Vous pouvez créer des sites web, mais il n’est pas fait pour ça.
• X4 est open-source 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 (containers, menus, …) et le style (qui est en CSS) l’apparence.

Dans x4, 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 quelques éléments:

• cls: classe de l’élément ex: ‘maclass mon-autre-classe’
• content: soit des sous éléments, soit du texte.

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

Concrètement, par exemple, si je veux créer le header pour ma future application, je vais écrire:

// HBox est un container horizontal
new HBox( {
    cls: 'header-bar',  // cet élément aura la classe css '.header-bar'
    content: [
        new Icon( { iconId: 'app-icon'} ),
        new Label( { flex:1, text: 'My Application' } ), // un élément flex remplira l'espace disponible
        new Button( { icon: 'menu-icon' } )
    ]
});

Comme vous le voyez, pas de HTML. Vous allez prendre plaisir à vous concentrer sur votre application et non sur un mix html / javascript. Les éditeurs comme VSCode vous assistent de manière très efficace lors de la saisie.

Les composants (ici Icon, Label et Button) sont des composants fournis avec X4, il y en a une cinquantaine, vous trouverez tout ce dont vous avez besoin pour créer une application standard. Vous pourrez bien sûr développer les vôtres, ceci est très simple.

Un autre élément particulier est le composant Application. Il s’agit d’un singleton (1 seul par application). Vous vous souvenez, X4 est conçut pour le développement d’applications. Pour fonctionner, vous aurez à déclarer une Application et définir sa mainView.

Les composants tout comme l’application peuvent être source d’évènements, par exemple les boutons vont générer des évènements de type click. Ces évènements sont typés et connus par l’éditeur de code.

Par exemple si je veux être notifié lorsque l’on clique sur le bouton de mon header, je vais remplacer la création du bouton par:

new Button( { icon: 'menu-icon', click: ( ) => this.onClick() } )
// .. et voilà la méthode onClick sera appelé à chaque click.

Vous pouvez évidemment définir vos propres évènements.

Note

Comme l’application est source/émettrice d’évènements, les pages peuvent s’abonner et émettre des évènements sur l’application.

Les composants ont aussi un certain nombre de propriétés, définissables au moment de la construction, modifiables ultérieurement.

Par exemple, si vous voulez modifier le texte d’un label vous écrivez simplement:

const myLabel = new Label( { text: "Initial text" } );
myLabel.setText( "New text" );

Note

Contrairement à d’autres frameworks, le changement d’une propriété ne rafraichit pas automatiquement le visuel, il est de la responsabilité du développeur du composant de gérer ce rafraichissement (c’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. C’est très simple, en effet, tous les composants ont une propriété dom, vous pourrez donc appeler toutes les méthodes standard dessus. Cependant le composant possède un bon nombre d’encapsulations pratiques qui simplifient l’écriture, il propose aussi toute une mécanique très simple pour gérer les évènements du DOM

this.setAttribute( 'tabindex', 1 ); // ajout de l'attribut tabindex
this.setWidth( 100 ); // changement de la taille
this.setDOMEvent( 'click', evt => this.onDOMClick(evt) );

X4 définit aussi un certain nombre d’évènements synthétiques comme create et resize par exemple, ce qui est pratique pour gérer les composants dynamiques.

Outils

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

Point, Size, Rect, Color par exemple, des outils pour extraire ou formatter les dates, un gestionnaire de translations, des outils de création et manipulation de SVG, un gestionnaire de Drag&Drop, et plus encore…

Le framework dispose aussi d’un outil d’accès au styles, ce qui permet de modifier ou lire le contenu du CSS (css vars par exemple).

Enfin, le truc super cool, c’est que vous avez les sources de tout.

Quelques règles

Tant qu’on y est, débarrassons nous tout de suite des règles, il y a un très peu et il vaut mieux respecter lorsque l’on développe sous X4:

1. Un élément ne connait jamais son parent. Il envoie des notifications à celui qui le possède.
2. Pas de cosmétique dans le code (autant que vous le pouvez) La cosmétique n’a pas sa place dans le code, c’est le rôle des styles.
3. Pas de textes en direct si vous développez des composants. Vous ne savez dans quelle langue ils vont être utilisés. D’autre part, maintenant la plupart des logiciels doivent être multilingue, gagnez du temps faites le dès le début. X4 a un module natif pour cela.
4. Pas de bagarre avec le CSS Un élément ne se place pas correctement, vous devez spécifier des marges négatives, vous devez utiliser !important ? Vérifiez votre CSS, le problème n’est pas dans le code.