{{indexmenu_n>20}}
====== Construire une interface avec les widgets freedom-extui ======

Le module ExtUI de Dynacase vous permet de construire des interfaces graphiques pour Dynacase-platform dans une optique d'interface web riche basée sur le framework ExtJS.

Prérequis pour pouvoir développer en utilisant ce module :
  * Niveau confirmé en javascript
  * Connaissance du framework ExtJS

Le module Ext UI repose sur le module API qui fournit les objets javascript permettant d'interragir avec un serveur Dynacase-platform. Les éléments de ce module utilisés seront expliqués dans ce tutorial.

===== Tutoriel 1 : Construction d'une interface applicative de type Une Famille =====


==== Objectif ====

Nous allons procéder à la création d'une interface dont la structure est la suivante :
  * Sur la partie gauche, nous aurons un arbre des familles disponibles
  * Sur la partie centrale supérieure, nous aurons une grille de documents qui correspondent aux documents des familles sélectionnées par un des deux widgets de la partie gauche
  * Sur la partie centrale inférieure, nous aurons une interface de consultation de document dans laquelle vont s'afficher les documents sélectionnés dans la partie centrale supérieure

Il existe plusieurs façon de procéder pour obtenir des résultats similaires. Nous allons en expliquer trois : la première garantira la communication entre composants de l'interface par surcharge de ces composants ; la seconde utilisera un objet interface et le moteur d'évènements interfaces permettant de définir un comportement ; la troisième fonctionnera de façon similaire à la seconde mais se reposera sur une structure de base définie en html.

==== Première solution ====

<note tip>

Le site de la librairie Ext JS propose en démonstration les différents layouts disponibles pour structurer vos interfaces.

http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

</note>

Pour commencer, nous voulons définir la structure de notre interface en utilisant les possibilités de la librairie ExtJS. Une bonne approche pour traiter ce genre de cas consiste à parcourir les exemples de démonstration de ExtJS pour trouver la solution qui correspond.

Nous allons utiliser le layout border qui apporte les fonctionnalités de positionnement et de redimensionnement attendues. Nous allons employer un Ext.Viewport pour positionner la partie gauche et la partie centrale. Cette même partie centrale sera un Ext.Panel lui aussi en layout border afin de donner le comportement défini entre la partie centrale supérieure et la partie centrale inférieure.


<code javascript>
var viewport = new Ext.Viewport({
   layout: 'border',
   renderTo: Ext.getBody(),
   items: [{
      // Left panel 
   }, new Ext.Panel({
      layout: 'border',
      region: 'center',
      border: false,
      items: [{
         id: 'grid-collection-container',
         region: 'north',
         layout: 'fit',
         split: true,
         collapsible: true,
         height: 400,
         html: '<i>Ici une vue collection</i>'
      }, {
         id: 'document-container',
         region: 'center',
         html: '<i>Ici une vue document</i>'
      }]
   })]
});
</code>

Nous allons ensuite apporter les composants d'interface spécifiques Dynacase-platform requis. Avant de pouvoir les utiliser, ils nous faut un objet Fdl.Context tel que défini dans la librairie Data de Dynacase-platform. Cet objet constitue une base pour les autres objets Data en leur apportant les méthodes fondamentales requises pour interragir avec un serveur Dynacase-platform. Nous instancions cet objet en lui spécifiant une adresse à attaquer pour ses requêtes. Dans une interface d'application aboutie cette adresse serait à déterminer intelligemment, nous la coderons ici simplement en dur pour la démonstration.

<code javascript>
context = new Fdl.Context({
   url: window.location.protocol + '//' + window.location.hostname + '/freedom'
});
</code>
En plus de l'objet context, nous manipulerons dans ce tutorial deux objets disponibles dans la librairie Data : Fdl.Document

Nous allons ensuite créer l'instance pour représenter l'arbre affichant les différentes familles disponibles sur notre serveur Dynacase-platform.

<code javascript>
var treeCol = new Ext.fdl.TreeCollection({
   collection: context.getDocument({
      id: 11
   )},
   region: 'west',
   split: true,
   collapsible: true,
   width: '200px',
   displayDocument: function(id, mode){

      var g = new Ext.fdl.GridCollection({
         filterColumns: true,
         collection: this.context.getDocument({
            id: id
         }),
         displayDocument: function(id, mode){

            var dPanel = new Ext.fdl.Document({
               document: this.context.getDocument({
                  id: id
               })
            });
                                
            var container = Ext.getCmp('document-container');
                                
            container.removeAll();
            container.add(dPanel);
            container.doLayout();
                                
         }
      });
                        
      var panel = g.display();
                        
      var container = Ext.getCmp('grid-collection-container');                        
      container.removeAll();
      container.add(panel);
      container.doLayout();
   }

});
var treePanel = treeCol.display();
</code>


Détaillons un peu ce que nous avons fait dans cette instanciation. Nous avons déclaré l'instanciation d'un objet Ext.fdl.TreeCollection qui est une représentation par arbre d'une collection Dynacase-platform. Nous lui avons passé en paramètre une collection, qui est le document Dynacase-platform récupéré depuis notre contexte à partir de l'id 11, qui est la recherche précablée par défaut permettant de récupérer les familles disponibles sur le serveur. Nous avons déclaré quelques paramètres de présentation spécifique à ExtJS et au layout border (region, split, collapsible). Le composant Ext.fdl.TreeCollection accepte en paramètre de configuration les mêmes paramètres que le Ext.tree.Panel qu'il va générer au final par la méthode display. Les paramètres fonctionnels de l'arbre ne doivent cependant pas être renseignés puisqu'ils seront traités par les méthodes internes de Ext.fdl.TreeCollection. Il s'agit surtout ici de pouvoir définir des paramètres de présentation.

Nous avons également écrit une surcharge de la méthode displayDocument(id,mode). D'après l'api Ext UI, cette méthode est automatiquement appelée avec ses paramètres renseignés lorsque l'interface d'arbre générée fait l'objet d'une action indiquant que l'utilisateur a provoqué l'évènement d'ouverture d'un document. Cet évènement est destiné à être surchargé par notre application puisque l'implémentation de ce comportement dépend effectivement de l'application considérée. Ici l'implémentation va consister à instancier un objet Ext.fdl.GridCollection, une interface de collection grille, et de l'affecter au panel central supérieur. Cette interface prend en paramètre un objet document Dynacase-platform instancié depuis le même contexte, dont l'id est celui fourni par l'appel de la méthode displayDocument().

Nous surchargeons également la méthode displayDocument() de l'interface grille cette fois, pour lui faire produire de façon analogue à celle déjà vue avec l'interface grille, une interface de document Ext.fdl.Document, construite avec en paramètre le document récupéré sur le contexte au moyen de l'identifiant transmis. Nous injectons ensuite l'interface ainsi produite dans la partie centrale inférieure (à savoir, nous la vidons de son contenu et nous ajoutons l'interface document).

Nous obtenons ainsi l'ensemble fonctionnel spécifié.

==== Deuxième solution ====

A venir.

==== Troisième solution ====

A venir.

===== Tutorial 2 : Surcharge de drag & drop =====

A venir.

===== Tutorial 3 : Requêteur avec prévisualisation =====

==== Objectif ====

Nous allons procéder à la création d'une interface utilisant une structure html pour disposer une interface de requêteur, permettant à un utilisateur de construire une recherche, de la sauvegarder, et d'obtenir une représentation sous forme de grille des documents trouvés. Nous supposons que nous accédons par un quelconque procédé à un identifiant de la collection recherche Dynacase-platform à modifier. Il est recommandé d'avoir à l'esprit la documentation sur les collections recherches, et en particulier la notion de filtres de document, pour appréhender correctement le fonctionnement du requêteur.


==== Solution ====

Nous allons écrire deux simples fonctions pour réaliser le comportement de notre interface. Ces fonctions peuvent être appelées par des clics sur deux boutons. L'exemple numéro 12 reprend cette solution.

La première fonction **onSelect()** prend en paramètre un identifiant de document recherche à récupérer sur le serveur Dynacase-platform (nous supposons que nous avons un contexte instancié dans le script). Elle instancie simplement un objet de la classe Ext.fdl.Requester et effectue le rendu dans la div html dont l'identifiant est 'requester-div'.

La seconde fonction **onSave()** récupère l'objet requester créé lors de l'appel à onSelect() ou affiche un message d'erreur si cet objet n'existe pas. Elle appelle la méthode save() sur le requêteur, qui va enregistrer sur le document recherche la configuration de filtres définie par l'utilisateur sur l'interface graphique. Enfin, elle va récupérer le document recherche supervisé par ce requêteur et construire avec celui ci une interface de représentation de collection par grille.


<code javascript>
var requester ;
            
onSelect = function(docId){
                
   var document = context.getDocument({
      id: docId
   });
                    
   requester = new Ext.fdl.Requester({
      document: document
   });
					
   requester.render(Ext.get('requester-div'));
					
};
				
onSave = function(){

   if(requester){					
      requester.save();
   } else {
      Ext.Msg.alert('Error','No requester has been displayed.');
   }
					
   var freedomDocument = requester.document;
					
   var wCol = new Ext.fdl.GridCollection({
      collection: d                        
   });
                                        
   wCol.display(Ext.get('collection-div'));
   
};
</code>