😕Interfaces simples

Ne vous aventurez pas dans les options avancés, restez ici !

Afin de simplifier le processus de création d'interface, il existe de nombreuses choses faites pour vous simplifier la vie. A moins que vous soyez sur que c'est insuffisant, restez dans les sentiers cloutés.

Introduction

Ce que vous allez créer ici est un moule qui permettra a l'utilisateur du Mocka (et de votre extension) d'utiliser vos interfaces. Afin de bien différencier le moule du produit, le 'moule' sera appelé par la suite 'ExtInterface' - pour interface d'extension. Une des choses importantes pour votre extension, c'est que l'utilisateur puisse bien ajouter une ou plusieurs fois chaque interface. L'intérêt de l'extinterface est double : d'enregistrer qu'une seule fois le "nom" d'une extInterface, mais également de pouvoir créer autant d'interfaces que l'on souhaite.

ExtInterface

Dans votre fichier init, vous aller envoyer toute vos extInterfaces au Mocka pour que ce dernier puisse gérer le menu contextuel et les pages. Pour ça, c'est très simple :

function FileInit(mocka){
    mocka.AddExtension(extension);
}

Je vous vois déjà froncer les sourcils. Ne vous en faites pas, je vais tout expliquer. En fait, une extension peut contenir plusieurs type d'interfaces (donc plusieurs extInterface). Donc vous devez juste créer un tableau de vos extInterfaces, créer une extension tel qu'il suit, et le tour est joué !

function FileInit(mocka){
    mocka.AddExtension(new Extension("File", extInterfaces);
}

Ne reste plus qu'a créer la ou les ExtInterface.

function FileInit(mocka){
    extInterfaces = [new ExtInterface("Explorateur de fichier", FileExplorer, defaultCreateFileExplorer)];
    mocka.AddExtension(new Extension("File", extInterfaces);
}

Ou FileExplorer correspond a la classe de l'interface, et defaultCreateFileExplorer la fonction utilisée qui retourner l'interface provenant de la classe donné en second paramètre.

FileExplorer doit impérativement hériter, même indirectement, de la classe Interface

La fonction passée en 3ème argument est très généralement appelée avec les coordonées (X,Y) sur la page web de la volonté d'apparition. Il est généralement judicieux d'implémenter une version qui accepte ces coordonées, même si il n'est pas garanti qu'elles soient fournies ! Faites attention aux erreurs !

function defaultCreateFileExplorer(x,y){
    if (x != undefined && y != undefined){
        return new FileExplorer(x,y);
    }
    return new FileExplorer(0,0);
}

Si vous avez fait tout ça, vous devrier être prêt pour attaquer la classe principale. Dans cet exemple, il s'agira de la classe FileExplorer(x,y).

Interface

Une interface doit impérativement être l'enfant (directement ou indirectement) enfant de la classe Interface.

Vous pouvez directement en hériter, ou utiliser les classes intermédiaires que j'ai créé permettant plus de liberté au niveau des affichages entre interfaces. -> La 'BaseInterface' et la 'ConnectedInterface' prennent toute deux un paramètre 'interfaces'. Dans cette liste, vous devez y mettre des classes héritant de la classe 'Interface'. A chaque fois que vous appelerez le 'draw' sur la page parente, cette dernière le rappelera sur votre classe, plus sur toute les interfaces dont la classe est dans la liste 'interfaces'. Les interfaces qui peuvent être appelée doivent impérativement hériter soit de 'ConnectedInterface' ou 'LinkedInterface'. Peu clair ? Voici un exemple :

class FileExplorer extends BaseInterface{
    constructor(args){
        super(...args);
        this.interfaces = [FileExplorerInfo, FileExplorerNavBar]
    }
}

class FileExplorerInfo extends ConnectedInterface{
    constructor(args){
        super(...args);
        this.interfaces = [FileExplorer, FileExplorerInfo]
    }
}

class FileExplorerNavBar extends LinkedInterface{
    constructor(args){
        super(...args);
    }
}

Ceux qui héritent de 'ConnectedInterface' peuvent se référer eux même ! Pas d'inquiétude à avoir, cela ne génèrera pas (normalement) de boucle infinie.

A chaque fois qu'une interface FileExplorer (donc une instance) est 'draw', normalement toute les instances de 'FileExplorerInfo' et de 'FileExplorerNavBar' devraient l'être aussi. Pour que cela soit mis en place, il faut appeler la page. Pour cela, il va falloir créer la fonction draw. Il est important de donner en paramètre de cette fonction un "initiator", qui va correspondre a l'élément ayant demandé l'affichage. Vous allez en comprendre l'utilité après.

class FileExplorer extends BaseInterface{
    constructor(args){
        super(...args);
        this.interfaces = [FileExplorerInfo, FileExplorerNavBar]
    }
    
    draw(initiator){
        
    }
}

class FileExplorerInfo extends ConnectedInterface{
    constructor(args){
        super(...args);
        this.interfaces = [FileExplorer, FileExplorerInfo]
    }
    
    draw(initiator){
        
    }
}

class FileExplorerNavBar extends LinkedInterface{
    constructor(args){
        super(...args);
    }
    
    draw(){
        
    }
}

Et maintenant, ne reste qu'a vérifier si l'appel du draw vient de la page, ou pas. S'il vient de la page, alors c'est a ce moment qu'il vous faut executer tout votre code d'affichage, sinon, ça veut dire que toute les interfaces liées n'ont pas encore été ré-affichées. Vous devrez donc appeler celui de la page, en donnant comme initiateur l'interface qui appelle !

Hésitez pas à relire ce passage, il est important !

Pour pouvoir 'facilement' savoir quelle page est celle concernée, je vous conseille de l'enregistrer à la création de votre interface.

Sinon, mocka.pages donnera la liste des pages, et mocka.activePage l'indice de celle utilisée au moment de l'appel. Dans tout les cas vous devrez enregistrer quelque chose (soit le mocka, soit la page).

class FileExplorer extends BaseInterface{
    constructor(page, args){
        super(...args);
        this.parentPage = page;
        this.interfaces = [FileExplorerInfo, FileExplorerNavBar]
    }
    
    draw(initiator){
        if (initiator instanceof Page){
            //interface draw stuff
        }else{
            this.parentPage(this);
        }
    }
}

class FileExplorerInfo extends ConnectedInterface{
    constructor(page, args){
        super(...args);
        this.parentPage = page;
        this.interfaces = [FileExplorer, FileExplorerInfo]
    }
    
    draw(initiator){
        if (initiator instanceof Page){
            //interface draw stuff
        }else{
            this.parentPage(this);
        }
    }
}

class FileExplorerNavBar extends LinkedInterface{
    constructor(args){
        super(...args);
    }
    
    draw(){
        //rien à faire ici, parce qu'une LinkedInterface n'appellera jamais une autre interface !
        //vous pouvez donc juste mettre directement votre code d'affichage. 
    }
}

Si vous avez bien suivi, alors vous avez remarqué que le 'FileExplorerInfo' n'appellera jamais en affichage le FileExplorer, parce que ce dernier est hérité d'une 'BaseInterface', donc ne peut pas être appelé depuis autre chose que lui même !

A noter que cela devrait* ne pas causer d'erreur. J'espère.

Ne reste à la fin qu'à rappeler le draw parent (très important !), et vous devriez être good !

class FileExplorer extends BaseInterface{
    constructor(page, args){
        super(...args);
        this.parentPage = page;
        this.interfaces = [FileExplorerInfo, FileExplorerNavBar]
    }
    
    draw(initiator){
        if (initiator instanceof Page){
            //interface draw stuff
            
            super.draw();
        }else{
            this.parentPage(this);
        }
    }
}

class FileExplorerInfo extends ConnectedInterface{
    constructor(page, args){
        super(...args);
        this.parentPage = page;
        this.interfaces = [FileExplorer, FileExplorerInfo]
    }
    
    draw(initiator){
        if (initiator instanceof Page){
            //interface draw stuff
            
            super.draw();
        }else{
            this.parentPage(this);
        }
    }
}

class FileExplorerNavBar extends LinkedInterface{
    constructor(args){
        super(...args);
    }
    
    draw(){
        //rien à faire ici, parce qu'une LinkedInterface n'appellera jamais une autre interface !
        //vous pouvez donc juste mettre directement votre code d'affichage. 
        
        super.draw();
    }
}

On va donc pouvoir attaquer les propriétés des interfaces... Accrochez vous !