Chapitre 6 Intégration d'un document Dynacase Document UIs dans une interface riche

Le but est ici de manipuler le document depuis une autre interface. Il est ainsi possible de présenter des documents dans une interface spécifique, ainsi que de les manipuler simplement, sans devoir injecter de code dans la famille manipulée.

6.1 Principe

Ce tutoriel est livré avec une interface minimaliste de gestion des contacts, accessible à l'adresse http://localhost:8080/?app=SIMPLE_LIST.

Cette application affiche en colonne de gauche tous les documents de la famille Contact.

Pour simplifier le déroulement de ce chapitre, l'application génère déjà des événements et en écoute d'autres, aussi l'objet de ce chapitre est-il uniquement de manipuler le document lui-même.

Application de gestion des contacts

Figure 13. Application de gestion des contacts

6.2 Mise en œuvre

6.2.1 Chargement d'un document

Lors du clic sur une fiche résumé, l'application déclenche un événement documentElementClicked sur la window. Nous allons écouter cet événement et afficher le document dans la zone .documentWrapper.

6.2.1.1 Récupération des sources

Les sources avant cette étape correspondent au tag step-50-00.

6.2.1.2 Code

Dans le fichier SIMPLE_LIST/Layout/custom.js, ajoutons un écouteur de l'événement documentElementClicked, qui charge le document demandé.

Créons également la méthode addDocumentListeners, déclenchée lors de l'initialisation du widget, et chargée d'attacher les écouteurs d'événements au widget. En particulier, cette méthode écoute l'événement ready du widget pour signaler à l'application que ce document est affiché.

var loadDocument = function loadDocument(fetchOptions)
    {
        //check if the widget has already been initialised
        if (_.isUndefined($documentWrapper.document("instance"))) {
            //if not, initialize it
            $documentWrapper.document(fetchOptions)
                //and attach listeners to the newly created widget
                .on("documentloaded", addDocumentListeners);
        } else {
            //if yes, reuse it
            $documentWrapper.document("fetchDocument", fetchOptions);
        }
    },
    addDocumentListeners = function addDocumentListeners()
    {
        // propagate that this document is opened each time it is reloaded
        $documentWrapper.document(
            "addEventListener",
            "ready",
            {
                "name": "ready.simple_list"
            },
            function simpleList_propagateReady(event, documentObject)
            {
                // refresh the currently selected document
                $window.trigger('documentOpened', $documentWrapper.document("getProperties"));
            }
        );
    };
 
$window.on('documentElementClicked', function onDocumentElementClicked(event, options)
{
    var fetchOptions = {
        "initid": options.initid,
        "viewId": "!defaultConsultation"
    };
    loadDocument(fetchOptions)
});

6.2.1.3 Déploiement

Les sources telles que déployées à cette étape correspondent au tag step-50-10.

Le déploiement se fait au moyen du developer toolkit (pour plus d'explications sur les outils de développement, se rendre sur leur documentation).

La commande est donc :

  • pour linux :

    php dynacase-devtool.phar deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

  • pour windows :

    dynacase-devtool.bat deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

6.2.1.4 Le résultat

Depuis l'application à l'adresse http://localhost:8080/?app=SIMPLE_LIST, un clic sur un document de la liste de gauche l'ouvre dans la zone de droite.

6.2.2 Écoute des modifications du document

Nous allons réagir à l'événement change du widget.

6.2.2.1 Récupération des sources

Les sources avant cette étape correspondent au tag step-50-10.

6.2.2.2 Code

Enrichissons la méthode addDocumentListeners du fichier SIMPLE_LIST/Layout/custom.js en écoutant l'événement change du widget pour signaler à l'application que ce document est modifié :

// propagate that this document has changed
$documentWrapper.document(
    "addEventListener",
    "change",
    {
        "name": "change.simple_list"
    },
    function simpleList_propagateChange(event, documentObject)
    {
        $window.trigger('documentChanged', documentObject);
    }
);

Ici, nous nous contentons de déclencher l'événement en charge de la mise à jour de l'application. Le comportement de l'application étant en dehors du scope de ce tutoriel, son contenu n'est pas présenté. Il est néanmoins accessible dans le code source dans le fichier SIMPLE_LIST/Layout/main.js.

6.2.2.3 Déploiement

Les sources telles que déployées à cette étape correspondent au tag step-50-20.

Le déploiement se fait au moyen du developer toolkit (pour plus d'explications sur les outils de développement, se rendre sur leur documentation).

La commande est donc :

  • pour linux :

    php dynacase-devtool.phar deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

  • pour windows :

    dynacase-devtool.bat deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

6.2.2.4 Le résultat

Depuis l'application à l'adresse http://localhost:8080/?app=SIMPLE_LIST, lors de la modification d'un document ouvert, le statut modifié (matérialisé par une astérisque jaune) est reporté dans la liste de gauche.

6.2.3 Écoute de la sauvegarde d'un document

Nous allons réagir à l'événement afterSave du widget.

6.2.3.1 Récupération des sources

Les sources avant cette étape correspondent au tag step-50-20.

6.2.3.2 Code

Enrichissons la méthode addDocumentListeners du fichier SIMPLE_LIST/Layout/custom.js en écoutant l'événement afterSave du widget pour signaler à l'application que ce document a été sauvegardé :

// propagate that this document has been saved
$documentWrapper.document(
    "addEventListener",
    "afterSave",
    {
        "name": "afterSave.simple_list"
    },
    function simpleList_propagateAfterSave(event, documentObject)
    {
        $window.trigger('documentSaved', documentObject);
    }
);

Ici, nous nous contentons de déclencher l'événement en charge de la mise à jour de l'application. Le comportement de l'application étant en dehors du scope de ce tutoriel, son contenu n'est pas présenté. Il est néanmoins accessible dans le code source dans le fichier SIMPLE_LIST/Layout/main.js.

6.2.3.3 Déploiement

Les sources telles que déployées à cette étape correspondent au tag step-50-30.

Le déploiement se fait au moyen du developer toolkit (pour plus d'explications sur les outils de développement, se rendre sur leur documentation).

La commande est donc :

  • pour linux :

    php dynacase-devtool.phar deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

  • pour windows :

    dynacase-devtool.bat deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

6.2.3.4 Le résultat

Depuis l'application à l'adresse http://localhost:8080/?app=SIMPLE_LIST, lors de la modification du nom ou du prénom d'un contact, le nouveau titre est reporté dans la liste de gauche après la sauvegarde du document.

6.2.4 Affichage de l'interface de création

Lors du clic sur le bouton Nouveau Contact, l'application déclenche un événement buttonCreateClicked. Écoutons cet événement et affichons l'interface de création dans la zone .documentWrapper.

6.2.4.1 Récupération des sources

Les sources avant cette étape correspondent au tag step-50-30.

6.2.4.2 Code

Dans le fichier SIMPLE_LIST/Layout/custom.js, ajoutons un écouteur de l'événement buttonCreateClicked, qui charge l'interface de création de la famille demandée :

$window.on('buttonCreateClicked', function onButtonCreateClicked(event, options)
{
    var fetchOptions = {
        "initid": options.famid,
        "viewId": "!defaultCreation"
    };
    loadDocument(fetchOptions);
});

6.2.4.3 Déploiement

Les sources telles que déployées à cette étape correspondent au tag step-50-40.

Le déploiement se fait au moyen du developer toolkit (pour plus d'explications sur les outils de développement, se rendre sur leur documentation).

La commande est donc :

  • pour linux :

    php dynacase-devtool.phar deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

  • pour windows :

    dynacase-devtool.bat deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

6.2.4.4 Le résultat

Depuis l'application à l'adresse http://localhost:8080/?app=SIMPLE_LIST, un clic sur le bouton Nouveau Contact ouvre l'interface de création.

6.2.5 Écoute de la création d'un document

Il n'existe pas d'événement spécifique à la création d'un document. Pour détecter une création, nous allons écouter l'événement afterSave du widget, et signaler une création à l'interface dans le cas où le document n'avait pas d'initid.

6.2.5.1 Récupération des sources

Les sources avant cette étape correspondent au tag step-50-40.

6.2.5.2 Code

Modifions l'écouteur de l'événement afterSave dans la méthode addDocumentListeners du fichier SIMPLE_LIST/Layout/custom.js :

// propagate that this document has been saved
$documentWrapper.document(
    "addEventListener",
    "afterSave",
    {
        "name": "afterSave.simple_list"
    },
    function simpleList_propagateAfterSave(event, currentDocumentObject, previousDocumentObject)
    {
        if(previousDocumentObject.initid === 0) {
            // if previous document had no initid, it is a creation
            $window.trigger('documentCreated', currentDocumentObject);
        } else {
            // otherwise, it is a simple save
            $window.trigger('documentSaved', currentDocumentObject);
        }
    }
);

6.2.5.3 Déploiement

Les sources telles que déployées à cette étape correspondent au tag step-50-50.

Le déploiement se fait au moyen du developer toolkit (pour plus d'explications sur les outils de développement, se rendre sur leur documentation).

La commande est donc :

  • pour linux :

    php dynacase-devtool.phar deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

  • pour windows :

    dynacase-devtool.bat deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

6.2.5.4 Le résultat

Depuis l'application à l'adresse http://localhost:8080/?app=SIMPLE_LIST, lors de la création d'un contact, le nouveau contact est ajouté à la liste de gauche.

6.2.6 Écoute de la suppression d'un document

Nous allons réagir à l'événement afterDelete du widget.

6.2.6.1 Récupération des sources

Les sources avant cette étape correspondent au tag step-50-50.

6.2.6.2 Code

Enrichissons la méthode addDocumentListeners du fichier SIMPLE_LIST/Layout/custom.js en écoutant l'événement afterDelete du widget pour signaler à l'application que ce document a été supprimé:

// propagate that this document has been deleted
$documentWrapper.document(
    "addEventListener",
    "afterDelete",
    {
        "name": "afterDelete.simple_list"
    },
    function simpleList_propagateAfterDelete(event, documentObject)
    {
        $window.trigger('documentDeleted', documentObject);
    }
);

Ici, nous nous contentons de déclencher l'événement en charge de la mise à jour de l'application. Le comportement de l'application étant en dehors du scope de ce tutoriel, son contenu n'est pas présenté. Il est néanmoins accessible dans le code source dans le fichier SIMPLE_LIST/Layout/main.js.

6.2.6.3 Déploiement

Les sources telles que déployées à cette étape correspondent au tag step-50-60.

Le déploiement se fait au moyen du developer toolkit (pour plus d'explications sur les outils de développement, se rendre sur leur documentation).

La commande est donc :

  • pour linux :

    php dynacase-devtool.phar deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

  • pour windows :

    dynacase-devtool.bat deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

6.2.6.4 Le résultat

Depuis l'application à l'adresse http://localhost:8080/?app=SIMPLE_LIST, lors de la suppression d'un contact, sa fiche est supprimée de la liste de gauche.

6.2.7 Écoute de la restauration d'un document

Nous allons réagir à l'événement afterRestore du widget.

6.2.7.1 Récupération des sources

Les sources avant cette étape correspondent au tag step-50-60.

6.2.7.2 Code

Enrichissons la méthode addDocumentListeners du fichier SIMPLE_LIST/Layout/custom.js en écoutant l'événement afterRestore du widget pour signaler à l'application que ce document a été restauré :

// propagate that this document has been restored
$documentWrapper.document(
    "addEventListener",
    "afterRestore",
    {
        "name": "afterRestore.simple_list"
    },
    function simpleList_propagateAfterRestore(event, documentObject)
    {
        $window.trigger('documentRestored', documentObject);
    }
)

Ici, nous nous contentons de déclencher l'événement en charge de la mise à jour de l'application. Le comportement de l'application étant en dehors du scope de ce tutoriel, son contenu n'est pas présenté. Il est néanmoins accessible dans le code source dans le fichier SIMPLE_LIST/Layout/main.js.

6.2.7.3 Déploiement

Les sources telles que déployées à cette étape correspondent au tag step-50-70.

Le déploiement se fait au moyen du developer toolkit (pour plus d'explications sur les outils de développement, se rendre sur leur documentation).

La commande est donc :

  • pour linux :

    php dynacase-devtool.phar deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

  • pour windows :

    dynacase-devtool.bat deploy -u localhost -p 8080 -c dynacase -s path/to/sources --auto-release

6.2.7.4 Le résultat

Depuis l'application à l'adresse http://localhost:8080/?app=SIMPLE_LIST, immédiatement après la suppression d'un contact et que sa fiche ait été supprimée de la liste de gauche, il est possible de le restaurer. Sa fiche est alors ajoutée à nouveau à la liste de gauche.

6.3 Conclusion

Dans cette partie, vous avez appris à utiliser le widget de document.

Ce composant permet de simplement intégrer un ou plusieurs documents dans une interface complexe, en ayant une abstraction du fonctionnement interne du document. Il est piloté par des méthodes et émet des événements auxquels votre interface peut réagir.

Source : 50-integration.md Dynacase Platform 3.2 | Document User Interface Quick Start, version 1.0 édition 1, © Anakeen Labs <labs@anakeen.com>
×
Publié sous licence CC (http://creativecommons.org/licenses/by-nc-sa/2.0/fr/) par Anakeen [www.anakeen.com]
Attribution Vous devez créditer l'Oeuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l'Oeuvre. Vous devez indiquer ces informations par tous les moyens possibles mais vous ne pouvez pas suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez utilisé son Oeuvre.
Pas d’Utilisation Commerciale Vous n'êtes pas autoriser à faire un usage commercial de cette Oeuvre, tout ou partie du matériel la composant.
Partage dans les Mêmes Conditions Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l'Oeuvre originale, vous devez diffuser l'Oeuvre modifiée dans les même conditions, c'est à dire avec la même licence avec laquelle l'Oeuvre originale a été diffusée.