Contrôleurs

Controleurs

Très rapidement vous allez vouloir créer vos propres éléments: Pages spécifiques, Contrôles, …

Reprenons l’exemple de notre chapitre 1 et étoffons le.

// import required elements
import { Application, VBox, Button } from 'x4js'

// create the application
let app = new Application( {} );

// create the main frame
let frame = new VBox( {
    // adding css class
    cls: '@fit',  // @fit class fills the parent container
    // define content
    content: [
        new Button( { text: "Hello world" } ) // a small button
    ]
});

// define it as the app main frame.
app.mainView = frame;

Ici la mainView est un objet de type VBox (vertical layout : les enfants seront ajoutés à la suite les uns des autres verticalement). Dans la majorité des cas, ce type de construction ne suffit pas. En effet nous pourrions avoir besoin de répondre a des évènements et même le dessin en lui même pourrait être inclus dans l’objet. Voyons comment nous alllons procéder:

// import required elements
import { Application, VBox, Button } from 'x4js'

// create the application
let app = new Application( {} );

// this time we declare a class that extends VBox
class MainView extends VBox {
    constructor( props ) {
        super( props );

        // adding css class
        this.addClass( '@fit' );

        // define content
        this.setContent( [
            new Button( { text: "Hello i'm a custom class" } )
        ])
    }
}

// create the main frame
let frame = new MainView( {} );

// define it as the app main frame.
app.mainView = frame;

Nous avons créé une nouvelle classe MainView qui dérive de VBox et qui implémente son propre constructeur.

Plusieurs remarques sont dès à présent à faire.

1. Le constructeur d’un composant X4 accepte un unique paramètre qui définit ses propriétés, nous verrons comment le décrire correctement pour que l’assistance à la saisie nous propose automatiquement des arguments connus.
2. Lorsque l’on crée une classe qui dérive d’un composant X4, une classe CSS lui est automatiquement associée, ici le nom de la classe CSS sera “x-main-view”.
3. Nous avons ajouté une classe CSS a notre objet, cette classe commence par le caractère ’@’. Ceci dit à x4 de préfixer la classe par le préfix x4 de toutes les classes CSS (ce préfixe est “x-” par défaut). De ce fait, la classe CSS ajoutée réellement sera “x-fit”. Ceci permet d’éviter les conflits avec d’autres frameworks du marché.

Gestion des évènements

Maintenant nous allons pouvoir capter le clic sur le bouton que nous venons d’ajouter. Pour cela, nous allons dire au bouton qui appeler:

class MainView extends VBox {
    constructor( props ) {
        super( props );

        this.addClass( '@fit' );
        this.setContent( [
            new Button( {
                text: "Hello i'm a custom class",
                click: ( ) => this.onClick() }   // please call my method named onClick
            } )
        ])
    }

    // called by button
    onClick( ) {
        alert( "Arrrgh i have been clicked")
    }
}

Note

Le bouton va générer un évènement, il ne sait jamais pour qui. C’est celui qui aura besoin de cet évènement qui va lui dire. La mécanique est la même dans tout X4. En poussant un peu (ce serait une mauvaise idée) nous pourrions gérer une application complète directement dans la mainView.

En suivant ceci, nous allons pouvoir créer des ‘briques’ logicielles de gestion des éléments. Login, Utilisateur, Listes, Dialogs …

Note

La syntaxe de création du bouton présenté ici est la syntaxe simplifié, en effet il aurait été possible aussi de créer notre bouton comme ceci:

new Button( {
    text: "Hello i'm a custom class",
    events: {
        click: ( ) => this.onClick() }   // please call my method named onClick
   }
} )

Ceci est possible car la classe Button est sympa et qu’elle expose directement ses évènements les plus fréquents.