Le module Dynacase Ext UI offre des classes de construction d'interface graphique, en particulier, des représentation des objets apportés par le module Dynacase API. Le module Dynacase Ext UI repose sur la librairie JavaScript Ext JS.

Toutes les classes de ce module suivent la convention de nommage suivante : Ext.fdl.<nom de la classe>. Elles constituent toutes des extensions de la librairie Ext JS.

Url de la documentation du module : http://www.dynacase.org/modules/freedom-extui/

Url de la référence des classes et méthodes : http://api.dynacase.org/freedom-extui/

Il s'agit d'une interface identique à la documentation des classes Ext JS. Les classes relatives à Dynacase Ext UI se trouvent dans le dossier Ext.fdl. La documentation comprend également celle de la libraire Ext JS et celle de Dynacase API par facilité pour les développeurs et pour permettre les références internes entre les classes et méthodes.

Les exemples pour se module se trouvent, en partant d'une installation de Dynacase-platform standard exécutée depuis dynacase-control, dans le répertoire : <url-freedom>/lib/ui-examples/ Les fonctionnalités des composants de la perspective utilisateur font l'objet d'une démonstration pendant la formation. Elles sont documentées dans la description du module sur le wiki : http://www.dynacase.org/modules/freedom-extui/use

Les informations relatives à cette librairie se trouvent sur le site : www.extjs.com

Ext JS améliore les capacités du langage JavaScript en rajoutant de nouvelles fonctionalités au langage, au travers de l'extension des classes déjà existantes nativement ou de la définition de nouvelles. Elle dispose également comme mécanisme majeur d'une abstraction de la DOM des pages HTML pour manipuler l'interface graphique sous forme d'objet. Ceci permet la définition d'un grand nombre de composants graphiques, plus ou moins analogues à ceux des interfaces de système d'exploitation : par exemple, les panels, les menus, les arbres, les grilles, les comportements d'activation, de sélection, de glisser-déposer. Pour construire la structure des interfaces, Ext JS offre également un ensemble de logiques de disposition possibles (appelées layout).

Ext JS offre un système d'évènements qu'il est possible de spécifier sur un objet. Ce modèle de conception est nommé 'Observable'. Concrètement, il permet d'associer une implémentation à un évènement provoqué sur l'objet quelle que soit la cause de cet évènement. Restriction importante : il faut pour cela que l'objet devant réagir à l'évènement puisse s'inscrire sur l'objet émetteur.

Exemple : affectation d'un écouteur d'évènement sur un panel Ext JS

var panel = new Ext.Panel({
	header: 'Mon Panel'
});
panel.on('move',function(panel,x,y){
	// Process on move behaviour here
	// If another object is supposed to react,
	// it must be provided in implementation here
});

Pour implémenter la communication entre les composants graphiques de l'interface, le module Dynacase Ext UI dispose d'une solution basée sur la diffusion d'évènements globaux concernant l'interface de l'application. Cette solution permet de faciliter l'écoute inter-composant : on définit des évènements sans avoir à se préoccuper de référencer les objets dans l'implémentation des écouteurs. Le code pour réagir à un évènement donné est donc la responsabilité de l'objet écoutant.

Le module propose sur les objets de classe Observable les méthodes subscribe() et publish(). Elles permettent respectivement de s'inscrire à un évènement ou de diffuser un évènement. Un évènement est caractérisé par une chaîne de caractère qui identifie son type (par exemple, 'opendocument') et par un ensemble d'arguments caractéristiques. La méthode subscribe est paramétrée de façon à exécuter une méthode lorsque l'évènement est reçu. Les évènements 'opendocument' et 'closedocument' ont une implémentation par défaut dans les composants de Dynacase Ext UI. Un développeur peut néanmoins librement définir et utiliser ses propres évènements.

Exemple : inscription et publication d'un évènement non standard

this.subscribe('test-event', function(arg1, arg2, config){
	this.testMethod(arg1, arg2, config);
}, this);
 
this.publish('test-event', arg1, arg2, {
	param1: true,
	param2: 'test'}
);

Ext.fdl.Interface est la classe recommandée pour gérer le comportement d'ensemble d'une interface applicative. Elle est destinée en particulier à rassembler les méthodes, les variables et les évènements utilisés de façon globale dans le comportement de l'interface. Par exemple, on trouvera souvent une implémentation de l'ouverture de document dans une interface ou des composants hétérogènes permettent à un utilisateur d'ouvrir des documents de façon unifiée.

Noter qu'il n'est en rien obligatoire de faire remonter les évènements à Ext.fdl.Interface : n'importe quel autre Observable est capable de s'inscrire à la diffusion d'un évènement pour y réagir de façon appropriée. L'implémentation adéquate est à l'appréciation des concepteurs de l'interface applicative et dépend de l'usage souhaité.

Ext.fdl.Document est la classe représentant l'interface graphique d'un document Dynacase-platform. Elle prend en paramètre un objet Fdl.Document qu'elle va représenter. Elle possède plusieurs méthodes de rendu selon le mode ('consultation', 'édition', 'création') et selon l'affichage choisi (ancienne ou nouvelle interface). Il est également possible de spécifier une implémentation différente du rendu par défaut, en utilisant un fichier JavaScript téléchargé dynamiquement pour définir ce rendu particulier.

Ext.fdl.Collection est une classe représentant une interface (au sens objet) à implémenter pour tout composant destiné à représenter une collection de document. Elle accepte des objets Fdl.Collection et Fdl.SearchDocument. Elle contient les méthodes et les attributs communs à toutes les interfaces de collection, telles que les méthodes de rendu, de manipulation de la sélection courante, de comportement sur l'ouverture d'un document ou sur une manipulation de drag & drop. La définition du rendu graphique effectué dépend de la classe héritée qui est utilisée.

Ext.fdl.GridCollection implémente la représentation d'une collection sous forme de grille, disposant de fonctionnalités comme le tri, le paramétrage des colonnes affichées, le filtrage sur les colonne, la sélection multiple de document, le drag and drop de documents.

Ext.fdl.TreeCollection implémente la représentation d'une collection sous forme d'arbre, chaque noeud de l'arbre étant une collection pouvant être déroulé de façon récursive pour parcourir l'arborescence.

Ext.fdl.IconCollection implémente la représentation d'une collection sous forme d'icones, avec la possibilité d'installer une pagination.

Les classes Ext.fdl.Collection implémentent toutes une gestion transverse des manipulations de drag & drop de documents, dont le comportement peut être surchargé selon les besoins.

Le module Ext UI fournit des représentations d'attributs et des sélecteurs sous la forme de combobox améliorées pour un certain nombre de cas d'usage, comme par exemple le sélecteur de familles ou le sélecteur de propriétés et d'attributs. (Ces sélecteurs sont notamment utilisés dans l'objet Ext.fdl.Requester)

Ext.fdl.Requester permet de générer une interface de création de recherche, par analogie directe avec les objets Fdl.DocumentFilter.

Ext.fdl.MultiDocument définit une interface contenant plusieurs représentation de documents organisées par un système d'onglet.

Ext.fdl.Window définit une interface de fenêtre destinée à contenir une représentation de document ou de collection.

Ext.fdl.DocumentMultiView définit une interface de présentation d'un document avec un onglet réservé pour son contenu, et un onglet réservé pour ses informations.

Ext.fdl.KeyBoard permet de gérer les entrées au clavier de l'utilisateur. Ce composant est utilisé par exemple pour ajouter un comportement spécifique pendant une manipulation de drag & drop. Il peut intervenir dans la conception d'une application pour supporter les raccourcis clavier.

Les exemples suivants sont présentés pendant la formation en guise de démonstration d'utilisation des modules.

Cet exemple montre comment construire une interface permettant de sélectionner des recherches sur les familles dans un arbre. Le contenu de ces recherches est affiché sous la forme d'une grille. Les documents dans la grille peuvent être ouverts pour consultation.

Cet exemple montre comment surcharger de façon simple le comportement des composants sur les actions de drag & drop en affichant un message de confirmation de l'action.

Cet exemple montre comment créer une interface constituée d'un requêteur et d'un aperçu du résultat de la requête, le tout dans une structure globale en HTML (et non en Ext JS).

Cet exemple constitue un tour d'horizon des fonctionnalités standards, en se reposant sur les modules Dynacase API et Dynacase Ext UI.